1.行内样式 2.内部样式
<title>内部样式演示</title> <style> /*给h3标签添加样式*/ h3{ font-size:28px; color:#333; letter-spacing:5px; } /*给p标签添加CSS样式*/ p{ font-size:12px; color:#666; } </style>3.外部样式 HTML负责结构，CSS负责样式。 进一步分离代码：
新建一个index.css文件；将html代码头部中的style标签内的样式拷贝；粘贴进新建的index.css文件中；用link标签建立两文件的联系。 link标签引入的位置一定要在head标签内。CSS注释 格式：/*注释*/
link
<link rel="stylesheet" type="text/css" href="index.css" />1.rel属性规定了当前文档与被链接文档之间的关系，它的stylesheet值被所有浏览器支持； stylesheet是文档的外部样式表。 2.type属性规定了被链接文档的MIME（多用途互联网邮件扩展类型）类型，对应的最常见的值是text/css。 3.href属性后跟链接。
路径./ 绝对路径 指的是文件在硬盘上真正存在的路径。
/*引入bg.jpg图片*/ <img src="E:\book\网页布局\bg.jpg" />实际应用会出现很多问题，尽量避免使用绝对路径。
相对路径 就是相对于文件自身位置，去寻找要引入的资源文件。
./当前文件夹目录 <link rel="stylesheet" href="./index.css"> <!-- 或者./去掉也可以，效果是一样的 --> <link rel="stylesheet" href="index.css"> ../回到上一文件夹目录，从某个文件夹里面出来 <link rel="stylesheet" href="../index.css">选择器好处：减少代码量
标签选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>标签选择器</title> <style> /* 给h3标签添加样式 */ h3 { font-size: 25px; color: #330867; } /* 给h4标签添加样式 */ h4 { font-size: 18px; color: #30cfd0; } /* 给p标签添加样式 */ p { font-size: 14px; line-height: 28px; color: #4a5252; } </style> </head> <body> <h3>孟航沛</h3> <h4>平面设计师</h4> <p> 专业综合性强，具有较强的综合能力，学习认真刻苦，虽然我的专业是思想政治教育，但是我们所学的除了马克思主义的相关理论之外，同时还学习了管理学、心理学和法学的相关理论知识，专业具有较强的综合性，使我具备较强的综合能力，基本能够胜任行政设计师助力这个岗位。 </p> <h3>江晓风</h3> <h4>UI</h4> <p> 专业综合性强，具有较强的综合能力，学习认真刻苦，虽然我的专业是思想政治教育，但是我们所学的除了马克思主义的相关理论之外，同时还学习了管理学、心理学和法学的相关理论知识，专业具有较强的综合性，使我具备较强的综合能力，基本能够胜任行政设计师助力这个岗位。 </p> <h3>左小青</h3> <h4>插画师</h4> <p> 专业综合性强，具有较强的综合能力，学习认真刻苦，虽然我的专业是思想政治教育，但是我们所学的除了马克思主义的相关理论之外，同时还学习了管理学、心理学和法学的相关理论知识，专业具有较强的综合性，使我具备较强的综合能力，基本能够胜任行政设计师助力这个岗位。 </p> <h3>蒋小鱼</h3> <h4>Java工程师</h4> <p> 专业综合性强，具有较强的综合能力，学习认真刻苦，虽然我的专业是思想政治教育，但是我们所学的除了马克思主义的相关理论之外，同时还学习了管理学、心理学和法学的相关理论知识，专业具有较强的综合性，使我具备较强的综合能力，基本能够胜任行政设计师助力这个岗位。 </p> </body> </html>选择器的层叠性 重复写标签会造成两种结果：添加新的效果和改变之前的效果。
h3 { font-size: 25px; color: #330867; } h4 { font-size: 18px; color: #30cfd0; } p { font-size: 14px; line-height: 28px; color: #4a5252; } /*在这里写一个同名标签名h3,所以你只要关注“孟航沛”的变化即可*/ h3 { /*font-weight属性在之前的h3标签里没有写，那么这里就会添加新的效果*/ font-weight: 700; /*color这个属性前面已经定义了，这里再写，就会覆盖前面的字体颜色*/ color: red; }类选择器 作用：在普通中寻找特别。 定义
<p class="article"> class是定义类的关键字，article是类名，类名可以任意，但是要符合规范 </p>使用
.article { color: red; font-size: 14px; }类名的先后顺序影响结果。 如果是内部样式，写在<style></style>之间，如果是外部样式，直接写在.css文件中。 一个标签上可以添加多个类名，类名用空格隔开。
<p class="common color font-size"> common设置通用样式，color设置特殊颜色，font-size设置特殊字体大小 </p>类名先后顺序不影响结果。 id选择器 定义
<p id="p-item">这是一段文字</p>使用
#p-item { font-size: 24px; font-weight: 400; }1.id选择器在文档中只会出现一次。 2.不能像类选择器一样一个标签定义多个id。
1.后代选择器（空格） 书写规则：用空格隔开
/* 选择id名为password的标签内部所有类名为box的元素内部的所有p标签 */ #password .box p{} /* 选择所有p标签内部的所有span标签 */ p span{} /* 选择所有p标签内部的所有类名为spanItem的标签 */ p .spanItem{}编程思想：抽离
ul li { /* 去除li标签前面的小圆点 */ list-style: none; font-size: 22px; } .first-ul li { color: rgb(212, 166, 28); } .second-ul li { color: rgb(230, 127, 122); }重点理解后代：
<ul>父 <li>子 <p class="p-one">孙 <span>曾孙 <a href="">曾曾孙1</a> </span> </p> <p class="p-two">孙 <span>曾孙 <a href="">曾曾孙2</a> </span> </p> </li> </ul>在最开始出现重复标签的那一级来做区分，加上类名。 选中“曾曾孙1”：
/* 方法一 */ ul li .p-one span a{} /* 方法二 */ .p-one span a{}2.交集选择器 书写规则：a.special{}
<ul> <li><a href="" class="special">电子产品</a></li> <li><a href="">家居服饰</a></li> <li><a href="">电竞手办</a></li> <li><a href="" class="special">家装服务</a></li> <li><a href="">房屋出租</a></li> </ul> ul li { list-style: none; font-size: 22px; } ul li a { /* 去除a标签的下划线 */ text-decoration: none; /* 这里的颜色一定要在a标签上设置，因为a标签默认会去设置字体颜色，会层叠掉默认的黑色 */ color: black; } ul li a.special { color: orangered; }3.子选择器 与后代选择器相似，但得到结果不同。
<p> <span>Span 1. 在p标签内 <span>Span 2. 在p标签的span标签内</span> </span> </p> <span>Span 3. 与p标签相邻</span>4.并集选择器 给不同的标签，或者不同类名的标签添加相同的样式。 规则：在标签名或类名后用逗号，隔开：
.box,p,h3,.phone{}单个选择器的优先级 id选择器>类选择器>标签选择器 并非层叠效果
<p class="poem" id="ch-poem">百川东到海，何时复西归？</p>文字属性的继承性 除了h标签，其他的标签内写的文字都继承了body标签的字体大小、颜色。
高级选择器的优先级 权重的计算方法 选择器权重的叠加性，优先级越高权重越大。 权重的计算不会进位。
权重的应用 权重的作用：当决定用两个不同的选择器给同一个标签设置了相同 属性时，该听哪一个。 层叠性只有在权重一样的情况下才会适用。
什么情况下可以考虑权重？ 当选择器脱离权重的适用范围，即没有选中，权重再大也无济于事。 字体属性继承的是离它最近的一个父类标签，也就是最先包裹住它的标签。 在都选中的情况下，就要想到权重。
