CSS-初识CSS3（非常详细）

忘是亡心i 2022-05-14 08:41 285阅读 0赞

**CSS****的****概念**

**   C****ascading** **S****tyle** **S****heet ** **级联样式表**

**   表现****HTML****或****XHTML****文件样式的计算机****语言**

**          包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定**

**CSS****的发展史**

1996年CSS1.0  -->   1998年5月CSS2.0   -->    2004年CSS2.1    -->   2010年CSS3.0

**CSS****的优势**

1.**内容与表现分离**

2.**网页的表现统一，容易修改**

3.**丰富的样式，使得页面布局更加灵活**

4.**减少网页的代码量，增加网页的浏览速度，节省网络带宽**

5.**运用独立于页面的****CSS****，有利于网页被搜索引擎收录**

**CSS****基本语法结构**

**语法**

h1 (选择器){
    	font-size(属性):12px;(值)(声明)
    	color:#F00;(声明)
    }

**style****标签**

**HTML****中引入****CSS****样式**

1.**行内样式:****使用****style****属性引入****CSS****样式**

**例：**

<h1 style="color:red;">style属性的应用</h1>
 直接在HTML标签中设置的样式

2.**内部样式表**：**CSS****代码写在****<head>****的****<style>****标签中**

**优点：****方便在同页面中修改样式**

**缺点：****不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底**

3.**外部样式表：**①**CSS****代码保存在扩展名为****.****css****的样式表中；**

**                         **②**HTML****文件引用扩展名为****.****css的样式表，有两种方式：（**Ø**链接式）（**Ø**导入式）**

**链接外部样式表语法：**

**导入外部样式表语法：**

**链接式与导入式的区别**

1.**<link/>****标签属于****XHTML****，****@import****是属于****CSS2.1**

2.**使用****<link/>****链接的****CSS****文件先加载到网页当中，再进行编译显示**

3.**使用****@import****导入的****CSS****文件，客户端显示****HTML****结构，再把****CSS****文件加载到网页当中**

4.**@import****是属于****CSS2.1****特有的，对不兼容****CSS2.1****的浏览器是无效的**

**CSS****样式优先级**

**     1.****行内样式****>****内部样式表****>****外部样式表              **2.**就近原则**

**CSS3****基本选择器：**1.**标签选择器        **2.**类选择器         **3.**ID****选择器**

HTML标签作为标签选择器的名称

**标签选择器****语法：**

p（标签选择器） { font-size（属性）:16px（值）;}（声明）

**类选择器****语法：**

**<标签名 class= "类名称">标签内容</标签名>**

.class（类名称） { font-size:16px;}

**ID****选择器语法：**

#id id名称{ font-size:16px;}

**小结：**

1.**标签选择器直接应用于****HTML****标签**

2.**类选择器可在页面中多次使用**

3.**ID****选择器在同一个页面中只能使用一次**

**基本选择器的优先级**

**      ****ID****选择器****>****类选择器****>****标签选择器**

**注：**标签选择器**不遵循“就近原则”，无论是哪种方式引入CSS样式，一般都遵循ID选择器 > class类选择器 > 标签选择器的优先级**

**CSS的高级选择器：         1.****层次选择****器         2.****结构伪类选择****器           3.****属性选择器**

<table style="width:649px;"> 
 <tbody> 
 <tr> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:93px;"> 选择器 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:111px;"> 类&nbsp; &nbsp;型 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:442px;"> 功能描述 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:center;vertical-align:middle;width:93px;"> E F </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:111px;"> 后代选择器 </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:442px;"> 选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:center;vertical-align:middle;width:93px;"> E&gt;F </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:111px;"> 子选择器 </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:442px;"> 选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:center;vertical-align:middle;width:93px;"> E+F </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:111px;"> 相邻兄弟选择器 </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:442px;"> 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:center;vertical-align:middle;width:93px;"> E~F </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:111px;"> 通用兄弟选择器 </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:442px;"> 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素 </td> 
 </tr> 
 </tbody> 
</table>

**后代选择器****语法：**

body p{  background: red;  }

![70][]![70 1][]

**注意：后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入**

**子选择器****语法：**

body>p{  background: pink;  }

![70 2][]

**相邻****兄弟****选择器****语法：**

.active+p {  background: green;  }

![70 3][]

**通用兄弟选择器****语法：**

.active~p{  background: yellow;  }

![70 4][]

**结构伪类选择****器**

<table style="width:659px;"> 
 <tbody> 
 <tr> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:158px;"> 选择器 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:498px;"> 功能描述 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:158px;"> E:first-child </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:498px;"> 作为父元素的第一个子元素的元素E </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:158px;"> E:last-child </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:498px;"> 作为父元素的最后一个子元素的元素E </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:158px;"> E F:nth-child(n) </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:498px;"> 选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:158px;"> E:first-of-type </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:498px;"> 选择父元素内具有指定类型的第一个E元素 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:158px;"> E:last-of-type </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:498px;"> 选择父元素内具有指定类型的最后一个E元素 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:158px;"> E F:nth-of-type(n) </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:498px;"> 选择父元素内具有指定类型的第n个F元素 </td> 
 </tr> 
 </tbody> 
</table>

**示例：**

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;}

![70 5][]

**小结：****使用****E** **F:nth-child(n)****和****E F:nth-of-type(n****)****的** **关键点**

1.**E F:nth-child(n)****在父级里从一个元素开始查找，不分****类型**

2.**E F:nth-of-type(n)****在父级里先看类型，再看位置**

**属性选择器**

<table style="width:629px;"> 
 <tbody> 
 <tr> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:122px;"> 属性选择器 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:504px;"> 功能描述 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:center;vertical-align:middle;width:122px;"> E[attr] </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:504px;"> 选择匹配具有属性attr的E元素 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:center;vertical-align:middle;width:122px;"> E[attr=val] </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:504px;"> 选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写） </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:center;vertical-align:middle;width:122px;"> E[attr^=val] </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:504px;"> 选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:center;vertical-align:middle;width:122px;"> E[attr$=val] </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:504px;"> 选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:center;vertical-align:middle;width:122px;"> E[attr*=val] </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:504px;"> 选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配 </td> 
 </tr> 
 </tbody> 
</table>

**E\[****attr****\]属性选择器****语法：**

a[id] { background: yellow; }

![70 6][]

**E\[****attr****=****val****\]属性选择器****语法：**

a[id=first] { background: red; }

![70 7][]

**E\[****attr****=****val****\]属性选择器****语法：**

a[id=first] { background: red; }

![70 8][]

**注意：E\[attr=val\]属性选择器中，属性和属性值必须完全匹配才能被选中**

**E\[****attr****\*=****val****\]属性选择器****语法：**

a[class*=links] { background: red; }

![70 9][]

**E\[****attr****^=****val****\]属性选择器****语法：**

a[href^=http] { background: red; }

![70 10][]

**E\[****attr****$=****val****\]属性选择器****语法：**

a[href$=png] { background: red; }

![70 11][]

![70 12][]

[70]: https://img-blog.csdn.net/20180905161535323?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hbmppbnpodQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: /images/20220514/897a15eeef4445b7ae0dd53c25ebf13d.png
[70 2]: /images/20220514/d8709451f3344dc998d83ada50778a87.png
[70 3]: /images/20220514/b7fd41cae37b4f429e27cc6dde65c1d9.png
[70 4]: /images/20220514/73b15f7382ae4db680e21c222204067c.png
[70 5]: /images/20220514/6df5c4aab9984f9c8eda51dc811baf87.png
[70 6]: /images/20220514/ade93f70fc484ed68f5c81fcdcbbf24e.png
[70 7]: /images/20220514/4eda1b80989e4940915f9e1c152bfc38.png
[70 8]: /images/20220514/ab62f432a3d24f66809d1fb30f754d10.png
[70 9]: /images/20220514/726ecb755d25497794c56ac7bd57bed8.png
[70 10]: /images/20220514/73ba5ac6d20848c4b40ce584298ccd57.png
[70 11]: /images/20220514/4d33c13af5854dddb938e61790404c9b.png
[70 12]: /images/20220514/12e260403dab44358039229c5306eac4.png