CSS
CSS(Cascading Style Sheets) 层叠样式表,主要是用于设置HTML页面的内容展示的样式.比如说字体/颜色/背景等,而且还可以针对不同的浏览器设置不同的样式.
CSS的三种写法:
1.行内样式表(内联样式) --使用频率低
位于标签内通过 style属性引入样式,具体代码如下
<h1 style="color: red;">hello</h1>
效果图:
2.内部样式表
位于HTML文件的<head>标签内,<title>标签之后,并且用style标签定义,其基本语法格式如下:
<head>
<title></title>
<style type="text/CSS">
选择器{属性1:属性1的值; 属性2: 属性2的值; 属性3: 属性3的值;}
</style>
</head>
选择器现在咱们可以简单理解为标签，下文会具体展开。咱们先看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/CSS"><!--type= "text/CSS" 可写可不写-->
h2 {
font-size: small;
color: blue;
}
</style>
</head>
<body>
<h1 style="color: red;">hello</h1>
<h2>hello2</h2>
</body>
</html>
效果图如下:
内部样式表的好处在于,选择器的作用是整个文档内的一类标签的样式,也就是说,它可以批量控制某类标签的样式展示,而行内样式表只能控制某一个标签.
3.外部样式表(外链式)
html文件中不写css样式内容,把css样式单独放在一个.css文件中,然后HTML文件在<head>标签中通过<link>(单标签)标签引用,实现了HTML和css的分离具体代码如下:
效果如下:
我们可以看出来,行内样式表的css相关代码是写在标签内的，内部样式表是写在head标签里不写在页面中的标签内,内部样式表已经做到了让HTML代码和css代码的一定的分离，也就是说内部样式表实现了HTML和CSS的部分分离，但是内部样式表的css样式只对当前的HTML文件页面有效，不利于样式表的复用；而外部样式表就彻底的将css代码和HTML文件做了分离，HTML中完全不用写css的代码,实现了页面的结构和样式彻底分离，并且一个css文件可以被多个HTML文件引用，这样的好处在于方便维护、可复用、提升开发效率。
选择器
选择器的作用就是选择标签的
1. 基础选择器
css选择器有好多种，这里只介绍几种基础选择器
格式如下：
选择器{属性1:属性1的值; 属性2: 属性2的值; 属性3: 属性3的值;}
1.1 标签选择器
所谓标签选择器就是选择器是标签，上面我们用的内部样式表和外部样式表都是使用的标签选择器
格式如下：
标签名{属性1:属性1的值; 属性2:属性2的值; 属性3:属性3的值;… }
标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是它的缺点，因为它把某一类标签全都选中了，所以不能设计差异化样式。
1.2 类选择器
类选择器使用"."英文句号，及实心点符号进行标识，后面紧跟类的名称，基本语法格式如下：
.类名{属性1:属性1的值;....}
使用方式是标签调用，调用的时候使用 class属性，即 class=“类选择器的类名”。
优点：
类选择器最大的优点是可以为元素对象定义单独或相同的样式。
代码如下：
<p class="aclass"> hello this class style </p>
.aclass {
color: orange;
}
效果如下图：
1.3 多类名选择器
当希望一个标签有过个类选择器的表现时，可以给标签的class属性赋值多个类名，且类名之间用空格隔开，这就是多类名选择器的使用。使用方法：
<p class="aclass"> hello this class style </p><!-- 单个的类名选择器的使用 -->
<p class="aclass font-size100"> big font hello this class style </p> <!-- 多个类名选择器的使用只需要在类名中间加入一个空格即可-->
.aclass {
color: orange;
}
.font-size100 {
font-size: 100px;
}
效果如下：
注意：如果多个类名中用重复的属性，最终的显示样式以css中代码的先后顺序有关，只表现css代码中最后一个重复属性的值。比如说我们在font-size100中加了color:blue; 那么多类名引用的时候展示的颜色值就是blue，因为css代码中font-size100 位于aclass之后。
1.4 id选择器
和类选择器有点像，只是把类选择器的点改成了#号，#号后面跟的是某个标签的id值，具体代码样例如下：
<p class="aclass"> hello this class style </p><!-- 单个的类名选择器的使用 -->
<p class="aclass font-size100"> big font hello this class style </p> <!-- 多个类名选择器的使用只需要在类名中间加入一个空格即可-->
<p id="pid"> id hello this class style </p> <!-- id 选择器-->
.aclass {
color: orange;
}
.font-size100 {
font-size: 100px;
}
#pid {
font-size: 20px;
color: red;
}
效果图如下：
但是类选择器和id选择器是有区别的，id是唯一的一个标签只能有一个id，但是类名选择器则是可以是多个，所以说id选择器只能被使用一次，而类名选择器则可以被多次使用，所以用的最多的是类选择器。
1.5 通配符选择器
通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本格式语法：
* {属性1:属性1的值;...}
通配符一般用于页面风格的统一设置，比如说页边距背景色等等
* {
background-color: gray;
margin: 20px;
}
效果图如下：
2. 复合选择器
2.1 后代选择器
当标签为嵌套关系时，只是想控制被嵌套里面的标签样式的话，就可以使用包含选择器，它的作用范围是父里面包含的子以及子的子可以理解为祖祖辈辈的这种关系。写法是把外层标签写在前面，内层的标签写在后面，中间用空格隔开，具体样式如下：
.class(类别选择器，可以是标签也可以是类名) h1(标记选择器) {color:red; font-size:14px;}
/*标签选择器的方式*/
div p {
color: red;
}
<div>
<p>hello</p>
</div>
/*这是css中的注释，跟html中的注释是有区别的，但是都是可以通过ctrl+/快捷键来进行添加注释，类选择器的方式*/
.myd p {
color: blue;
}
<div class="myd">
<p> hello2 </p>
</div>
效果如下图所示：
2.2 子代选择器
所谓的子代选择器只作用于直接儿子这一代的后代，不对非直接儿子的后代起作用，而后代选择器的区别在于，后代选择器对儿子及后面所有子孙都起作用，子代选择器写法是 在父与子之间加一个大于号“>”。
咱们可以看一下后代选择器与子代选择器的效果，先上代码：
后代选择器：
ul li {
color: green;
}
<ul>
<li>
<h5>上海市</h5>
<ol>
<li>黄浦区</li>
<li>徐汇区</li>
<li>闵行区</li>
<li>松江区</li>
</ol>
</li>
<li>
<h5>北京市</h5>
<ol>
<li>海淀区</li>
<li>朝阳区</li>
<li>通州区</li>
<li>昌平区</li>
</ol>
</li>
</ul>
<ol>
<li>
<h5>安徽省</h5>
<ul>
<li>合肥市</li>
<li>芜湖市</li>
<li>淮北市</li>
<li>淮南市</li>
</ul>
</li>
<li>
<h5>江苏省</h5>
<ul>
<li>南京市</li>
<li>苏州市</li>
<li>无锡市</li>
<li>镇江市</li>
</ul>
</li>
</ol>
效果如下图所示：
我们可以看到后代选择器的效果是不管级次在哪里，只要是在父级内的子级里都会被选中，如果只想选中第一个ul中的li标签的话只需要将选择器改为子代选择器的写法，代码如下：
div>ul li {
color: orange;
}
<div class="myd">
<p>hello2</p>
<ul>
<li>
<h5>上海市</h5>
<ol>
<li>黄浦区</li>
<li>徐汇区</li>
<li>闵行区</li>
<li>松江区
<ul>
<li>放松街道</li>
<li>广富林街道</li>
</ul>
</li>
</ol>
</li>
<li>
<h5>北京市</h5>
<ol>
<li>海淀区</li>
<li>朝阳区</li>
<li>通州区</li>
<li>昌平区</li>
</ol>
</li>
</ul>
<ol>
<li>
<h5>安徽省</h5>
<ul>
<li>合肥市</li>
<li>芜湖市</li>
<li>淮北市</li>
<li>淮南市</li>
</ul>
</li>
<li>
<h5>江苏省</h5>
<ul>
<li>南京市</li>
<li>苏州市</li>
<li>无锡市</li>
<li>镇江市</li>
</ul>
</li>
</ol>
</div>
效果如下：
我们可以看出，这里的大于号表明了，必须是直接包含关系才起作用，直接包含的一级内的所有满足后代选择器的范围起作用，如果想再增加一些限定比如说我只想让“上海市”“北京市”是橘色的，那么只需要对上面的选择器修改成：
div>ul>li {
color: orange;
}
效果图如下：
3. 交集选择器
交集选择器是选中了某一种标签的类选择器，也就是说是标签选择器和类选择器的交集。写法如下：
标签选择器.类选择器 {
属性1：属性1的值; ....
}
比如：
div.green {
color: green;
}
<div class="green">有类名green的div，交集选择器效果</div>
<div>无类名的div<div>
效果如下：
这里的div.green可以认为，该选择器选择的是类选择器的名是green的div标签。
4. 并集选择器
标签选择器的扩展，它写法是由多个标签之间用逗号隔开：
div, p, span {
color: green;
}
上述代码实现了div ，p和span标签内的文字颜色都是绿色，也就是说，并集选择器的作用是具有相同样式的不同标签集体生命，可以设置公共样式。
5. 伪类选择器
用于向某些选择器添加特殊的效果，常用的比如给链接添加特殊效果，写法是以英文冒号开头
- 链接伪类选择器
- :link 设置未访问的链接样式
- :visited 已访问的链接样式
- :hover 鼠标悬停时的链接样式
- :active 选中时的链接样式，及鼠标按下但未松开时的状态
注意：上面四个伪类选择器在代码中先后顺序不能改变，否则会失效，如下
<style>
/*初始状态链接展示的样式*/
a:link {
color: blue;
/*设置文字颜色为blue*/
font: 700 26px "宋体";
/*设定加粗效果 字体大小26px，为宋体*/
text-decoration: none;
/* 取消a自带的下划线*/
}
/*已访问过的链接展示样式*/
a:visited {
color: black;
}
/*鼠标移动到上面时的样式，这里对鼠标移动上去时将文字改成红色*/
a:hover {
color: red;
}
/*鼠标按下未松开时文字的展示样式*/
a:active {
color: orange;
}
</style>
<a href="http://www.baidu.com">百度</a>
效果如下所示
四个在一起并且顺序还必须不能乱，所以，这个不常用，所以只需要掌握:hover就可以了，也就是鼠标悬停，按下和访问后的效果基本用不到。
选择器这么多种类，我们还要知道它们的权重（优先级）比较：
跟着艾文一起学前端-第9篇-CSS-选择器的权重
