CSS样式 课程目标
1.css引入方式（重点）
2.css选择器 *（重点）
3.css盒子模型（重点）
4.css3常见效果（重点）
5.CSS3常用的规则；
级联样式表css介绍引用百度百科
层叠样式表.pngcss概述层叠样式表其实就是对静态页面进行装饰，但是，特别要注意的点是：
通常建议表现形式与页面内容分离（例如：人就是内容，穿着打扮就是表现形式）
css引入方式三类：行内样式、页内样式（内联）、外部样式（外联)
行内样式行内样式（将样式直接写在标签上），需要使用style属性
代码语言：javascript复制
内联样式讲页面内容与表现形式进行分离，方便对样式进行统一管理
代码语言：javascript复制
小面包
小cookie
小饼干
外联样式对内联样式进行进一步的抽离，方便多个页面共用同一个样式，创建一个css文件，需要该样式的HTML直接引用样式即可
代码语言：javascript复制
小面包
小cookie
小饼干
样式的优先级代码语言：javascript复制
样式选择三种样式引入方式，在实际开发过程中该如何选择
1.如果是通用样式，就选择外联样式
2.当样式内容过多时，也会将样式单独抽离成一个.css文件，方便管理
3.当某个标签有特殊样式实现，且在页面中是不重复的，出现次数唯一的，就使用行内样式
4.除了上面的几种情况，通常使用的都是内联样式
选择器选择器可以快速、方便的选择所需要使用的页面元素
基本选择器基础选择分三种，分别是：标签选择器、类选择器、id选择器
标签选择器标签选择器主要是根据标签的名字进行元素的选择
语法：标签名{}
例如：div{color:red;font-size:20px;}
代码语言：javascript复制
抗疫头条：郑州二七万达参与检测的都是阴性，无大碍
学习头条：谢小飞分享进步了，再接再厉
代码语言：javascript复制/*标签选择器是根据标签名来的，会选中当前页面中所有该标签*/div{
color: #00BFFF;
}
p{
color: #483D8B;
}
h4{
color: #1E90FF;
}类选择器类选择器是通过class属性进行元素的获取，可用于对多个元素进行相同的样式设置
语法：.类名{}
例如：.div-cls{color:red;}
代码语言：javascript复制.div-cls{
color: red;
}
.p-cls{
color: green;
}
.h4-cls{
color: blue;
}id选择器id选择器是通过id属性给元素一个唯一标识（设置多个id相同不会报错，会影响后期js的学习，建议id值要唯一）
语法：#id名{}
例如：#div-id{color:red;}
代码语言：javascript复制/*id选择器：在标签上添加了一个id属性，作为唯一标识，通常不允许重复*/
#p-id{
color: #483D8B;
}属性选择器属性选择器是根据元素上已有的属性标识进行选择
语法：[属性名='']{}
代码语言：javascript复制
云和数据代码语言：javascript复制/*具有title属性的元素*/
[title]{
font-size: 18px;
}
/* 以...开始 */
[href^="http"]{
color: #008B8B;
}
/* 以...结束 */
[href$="cn"]{
color: #483D8B;
}
/*href中包含有i*/
[href*='i']{
color: #808080;
}层级选择器后代选择器是根据元素在页面中的相对（嵌套）位置进行按区域选择元素
代码语言：javascript复制
p标签中的span标签
组合选择器组合选择器是根据元素在页面中的同级关系进行选择
代码语言：javascript复制
div中的不带标签的内容
组合选择器，注意很常用
p标签中的span标签
h4标签中的span标签
代码语言：javascript复制/* 逗号就代表前后的元素是同等级的 */
div span,p span{
color: #00BFFF;
}伪类选择器伪类选择器是css3中提供的用于快速查找元素的便捷选择器，本章节只演示开发中常用的:nth-of-type选择器
代码语言：javascript复制
百度新闻
新浪官网
云和官网
腾讯官网
人人编程官网
代码语言：javascript复制/* 伪类选择器：nth-of-type(n) *//* p :nth-of-type(2n+1){
color: #1E90FF;
}
p :nth-of-type(2n){
color: darkcyan;
} */
span:nth-of-type(2n+1){
color: #483D8B;
font-size: 18px;
}
span:nth-of-type(2){
color: #FF0000;
}伪类选择器在超链接上的应用，超链接的字体颜色只有将样式直接作用在超链接上时才会生效
代码语言：javascript复制/* 访问之后的状态 */
a:visited{
color: darkgoldenrod;
}
/* 鼠标悬浮时的状态 */
a:hover{
color: aqua;
}
/* 处在活动状态 */
a:active{
color: brown;
}通配符*通配符，作用在页面中的所有标签上，开发不建议使用，影响网页的渲染性能
代码语言：javascript复制*{
color:red;
font-size:20px;
}使用通配符和使用选择器有什么区别
开发不建议使用通配符，通配符相当于是作用在了所有的标签上，某些属性并不是所有的标签都能识别，只要加了属性不论是否生效，浏览器都会对属性进行解析然后渲染，这样比较消耗性能
选择器优先级网页中的选择器多种多样，可以组合使用，当同一个元素有多个样式时，最终生效的样式与优先级有关
代码语言：javascript复制
选择器优先级
!important>行内样式>id选择器>类选择器>标签选择器
1000 100 10 1
*/
/*1+100=101*/
div #span-id{
color: darkcyan;
}
/*100*/
#span-id{
color: blue;
}
/*10+10=20*/
.div-cls .span-cls{
color: black;
}
/*10+1=11*/
.div-cls span{
color: red;
}
/*1+10=11 如果权重值相同，从上往下执行，后面会覆盖上面样式*/
div .span-cls{
color: #B8860B;
}
/*10*/
.span-cls{
color: blueviolet;
}
/*1+1=2*/
div span{
color: #A52A2A;
}
/*1*/
span{
color: #7B68EE!important;
}本章小结 1.css三种引入方式，内联样式使用最频繁，当样式过多时推荐使用外联样式
2.选择器中的基本选择器、上下级选择器及属性选择器在开发中很常见，要注意优先级计算的问题
本章作业
实现新闻文章展示，对标题和其中所用到的数字、引用等进行特殊标识，分别用三种样式引入方式实现