CSS基本语法结构、选择器

1.1 CSS概述
1.什么是CSS:CSS全称为层叠样式表（Cascading Style Sheet），又称为风格样式表，表现HTML或XHTML文件样式的计算机语言，包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定。
2.CSS的优势
（1）内容与表现分离
（2）表现的统一
（3）丰富的样式，使得页面布局更加灵活
（4）减少网页的代码量，提高网页的浏览速度，节省网络宽度
（5）运用独立于页面的CSS，还有利于网页被搜索引擎收录
1.2 CSS的基本语法结构
1 CSS的基本语法结构
① CSS规则由两部分构成，即选择器和声明
②声明必须放在大括号（｛｝）中，并且声明可以是一条或多条。
③每条声明由属性和值构成，属性和值之间用冒号分开，每条语句以英文分号结尾。
h1 {
font-size:12px;
color:#F00;
}
2 认识< style>标签
< style >标签用于为HTML文档定义样式信息，位于< head>标签中，它规定了浏览器中如何呈现HTML文档，用法如下：
< style type=“text/css”>
h1 {
font-size:12px;
color:#F00;
}
< /style>
1.3 在HTML中引入CSS样式
在HTML中引入样式的方法有三种，分别是行内样式、内部样式表和外面样式表
1行内样式
行内样式就是在HTML标签中直接使用style属性设置CSS样式，用法如下：
< h1 style=“color:red;”>style属性的应用< /h1>
< p style=“font-size:14px; color:green;”>直接在HTML标签中设置的样式< /p>
2内部样式表
CSS代码写在< head>的< style>标签中。
< style>
h1{color: green; }
< /style>
优点：方便在同页面中修改样式
缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底
3外部样式表
①链接外部样式表
链接外部样式表就是在HTML5页面中使用链接外部样式表，这个< link/>标签要放到页面的< head>标签内。
语法：< head>
……
< link href=“style.css” rel=“stylesheet” type=“text/css” />
……
< /head>
其中，rel="stylesheet"是指在页面中使用这个外部样式表；type="text/css"是指文件的类型是样式表文本； href="style.css"是文件所在的位置。
②导入外部样式表
导入外部样式表就是在HTML网页中使用@import导入外部样式表，导入样式表的语句必须放在< style>标签中，而< style>标签必须放到页面的< head>标签内，语法如下：
< head>
……
< style type=“text/css”>
< !–
@import url(“style.css”);
– >
< /style>
< /head>
其中，@import表示导入文件，前面必须有一个@符号，url(“style.css”)表示样式表文件的位置。
链接式与导入式的区别：
< link/>标签属于XHTML，@import是属于CSS2.1
使用< link/>链接的CSS文件先加载到网页当中，再进行编译显示
使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的。
4 样式优先级
行内样式>内部样式表>外部样式表
就近原则
1.4 CSS3的选择器
在CSS中，有三种最基本的选择器，分别是标签选择器、类选择器和ID选择器
1、标签选择器
HTML标签作为标签选择器的名称，语法如下：
p { font-size:16px;}
2、类选择器
<标签名 class= “类名称”>标签内容</标签名>
语法：.class { font-size:16px;}
3、ID选择器
语法：#id { font-size:16px;}
小结：
标签选择器直接应用于HTML标签
类选择器可在页面中多次使用
ID选择器在同一个页面中只能使用一次
4、基本选择器的优先级
ID选择器>类选择器>标签选择器
问：标签选择器是否也遵循“就近原则”？
答：不遵循，无论是哪种方式引入CSS样式，一般都遵循ID选择器 > class类选择器 > 标签选择器的优先级

任务2使用CSS高级选择器美化页面
1.1 CSS3的高级选择器
1层次选择器
E F 后代选择权 选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内。
E>F 子选择器 选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素。
E+F 相邻兄弟选择器 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面。
E~F 通用兄弟选择器 选择匹配的F元素，切位于匹配的E元素后的所有匹配的F元素。

（1）后代选择器
后代选择器的作用就是可以选择某元素的后代元素，例如：“E F”中，E为祖先元素，F为后代元素，那么F元素无论是E的子元素。孙辈元素，或者更深层次的关系，都将被选选中。
语法：body p{ background: red; }
上面的代码表示body元素的后代元素p，即所有的p元素都会被选中
注意：后代选择器的两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入
（2）子选择器
子选择器（E>F），只能选择某元素的子元素，其中E为父元素，F为子元素
语法：body>p{ background: pink; }
上面代码的意思是选择body的子元素，
（1）相邻兄弟选择器
相邻兄弟选择器(E+F)可以选择紧接在另一个元素后面的元素，它们有一个相同的父级元素。
语法：.active+p { background: green; }
上面代码的意思是选择类名为active的相邻兄弟p元素，也就是类active后面的一个p元素被选中
（2）通用兄弟选择器
通用兄弟选择器（E~F）用于选择某元素后面的所有兄弟元素。
语法：.active~p{ background: yellow; }
上面代码的意思是选择类名为active后面的所有兄弟元素p元素。
2 结构伪类选择器
所有结构伪类选择器都是基于HTML文档树的，也称文档对象模型（DOM）。文档树是HTML页面的层级结构，它由元素、属性和文本组成，它们都是一个节点。

根据上面的HTML文档，可以绘制一个清晰地DOM结构树，如下：

结构伪类选择器语法
E：first-child：作为父元素的第一个子元素的元素E
E：last-child: 作为父元素的最后一个子元素的元素E
E F：nth-chuld(n): 选择父级元素E的第N个子元素F，(n可以是1，2，3)，作为关键字为even、odd
E：first-of-type：选择父元素内具有指定累心的第一个E元素
E：last-of-type：选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n)：选择父元素内具有指定类型的第N个F元素
示例：
ul li:first-child{background:red;}
ul li:last-child{background:green;}
p:nth-child(1){background:yellow;}
p:nth-of-type(2){background:blue;}
小结：使用E F:nth-child(n)和E F:nth-of-type(n)的 关键点
E F:nth-child(n)在父级里从一个元素开始查找，不分类型
E F:nth-of-type(n)在父级里先看类型，再看位置。

3 属性选择器
属性选择器的语法
E[attr]：选择匹配具有属性attr的E元素
E[attr=val]：选择匹配具有属性attr的E元素，并且属性值为val(其中val区分大小写)
E[attr$=val]：选择匹配元素E，且元素定义了属性attr，其属性值是以val结尾的任意字符串
E[attr*=val]:选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配
（1）E[attr]属性选择器
E[attr]属性选择器是最简单的一种，用来选择㕛某个属性的元素，而无论这个属性值是什么。
在示例41的style样式中添加如下代码：
[id] { background: yellow; }

（2）E[attr=val]属性选择器
E[attr=val]属性选择器为元素E设置了属性attr，并且它的属性值为val。
在示例41的style样式中添加如下代码：
a[id=first] { background: red; }

（3）E[attr*=val]属性选择器
E[attr*=val]属性选择器设置了通配符，为元素E设置了属性attr，并且它的属性值总包含“val”字符串，也就是说只要所选择的属性中含有“val”字符串就可以被匹配上。
在示例41的style样式中添加如下代码：
a[class*=links] { background: red; }

（4）E[attr^=val]属性选择器
E[attr^=val]属性选择器为元素E设置了属性attr，并且它的属性值是以字符串“val”开头的所有E元素。
在示例41的style样式中添加如下代码：
a[href^=http] { background: red; }

（5）E[attr$=val]属性选择器E[attr$=val]属性选择器与E[attr^=val]刚好相反，表示选择attr的属性值是以字符串“val”结尾的所有E元素。
在示例41的style样式中添加如下代码：
a[href$=png] { background: red; }