CSS的认识
CSS是CSS（层叠样式表）技术的升级版本，于年开始制订，年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时间支持不同特性，这也让跨浏览器开发变得复杂。一、css引入方式（4种）
行内样式
外链式（建议使用）
内嵌式
导入式（了解）
行内样式：行内样式就是直接把CSS代码添加到HTML的标记中，即作为HTML标记的属性标记存在。通过这种方法，可以很简单地对某个元素单独定义样式。我个人不推荐将样式写在html标记中
看代码如下：
!--行内样式将样式写在p标签的style属性中--pstyle="font-size:23px;color:red;"行内样式就是直接把CSS代码添加到HTML的标记中，即作为HTML标记的属性标记存在。/p
效果图：
外链式：就是把css样式代码集中写到一个以.css的文件格式中
引入方法：在head标签中使用link/标签的href属性引入，可以是本地css文件或者在线css文件。
linkhref="css/index.css"rel="stylesheet"/
!DOCTYPEhtmlhtmlheadtitle/titlelinkhref="css/index.css"rel="stylesheet"//headbody!--行内样式将样式写在p标签的style属性中--!--pstyle="font-size:23px;color:red;"行内样式就是直接把CSS代码添加到HTML的标记中，即作为HTML标记的属性标记存在。/p--!--外链式先给p标签一个class类名，通过类名选择器进行样式编辑--pclass="p2"单独创建css文件，html页面link引入/p/body/html
外部css文件
.p2{font-size:19px;color:green;font-weight:bold;}
效果图：
内嵌式：就是将css样式写在head头部中的style/style标签中
使用方法：如下
headtitle/title!--linkhref="css/index.css"rel="stylesheet"/--style编写样式区域/style/head
举例
html
!--内嵌样式--pclass="p3"内嵌样式的使用/p
css
style.p3{font-size:26px;color:blue;}/style
效果图
导入式（了解）：就是在css外部文件内或者内联式引入另一个.css格式的文件。在开发中很少使用此方法
使用方法：
importurl(css文件地址);!DOCTYPEhtmlhtmlheadtitle/title!--linkhref="css/index.css"rel="stylesheet"/--style
importurl(css/index2.css);/style/headbody!--导入式--pclass="p4"css样式导入式使用方法/p/body/htmlindex2.css
.p4{color:yellow;font-size:2em;font-weight:bold;}
二、常用的三种选择器
id选择器：id是使用#来引用的
class选择：使用.来引用的
标签选择器：直接使用标签名称
id选择器：在标签编写id属性与属性值在css中使用#开头+id值，如：divid="div1"/div
举例：
html部分
!--id选择器--divid="div1"/div
css部分
style#div1{width:px;height:px;background:red;}/style
效果图：
class选择器：在标签内定义class属性加属性值在css使用.+类名，如：divclass="div2"/div
举例
html部分
!--class选择器--divclass="div2"/div
css部分
style.div2{width:px;height:px;background:blue;}/style
效果图：
标签选择器：在css文件中或者在style中直接使用标签名称，如：h2{样式代码}。（注意：使用此选择器样式将会覆盖所有一样的html标签样式）
举例：
html部分
!--标签选择器--h2标签选择器!!!/h2
css部分
styleh2{color:coral;font-weight:;}/style
效果图：
id和class的区别：
id：
(1）是页面中唯一的就像你的身份证号一样，唯一性
使用：网站的头部中间底部
总结：1)页面中id的名称只能是唯一的一个
(2)一个标签中只能有一个id
class：
(1）是页面中有多个外观样式，
(2）class可以多个，可以共用
一个标签里面可以同时有id和class（class可以多个）
三种选择器的优先级
(1）!important行内样式的权重最高（就近原则）idclass标签
(2）外链式和内嵌式的比较：
style
p{
color:red;
}
/style
linkhref="css/index.css"rel="stylesheet"/
!DOCTYPEhtmlhtmlheadtitle/titlelinkhref="css/index.css"rel="stylesheet"/stylep{color:green;}/style/headbody!--外链式和内嵌式的比较--p外链式和内嵌式的比较/p/body/html
index.css
p{color:yellow;}
比较结果：字体为绿色字体
结论：页面是由上至下逐行执行的。后面的会覆盖前面的
三、css继承:（只有文字相关的才会被继承）
举例
html部分
divid="d1"p哈哈哈/ppclass="c1"哈哈哈/pp哈哈哈/p/div
css部分
#d1{width:px;height:px;border:solid1pxred;color:red;font-family:"微软雅黑";font-size:16px;/*偶数*/font-weight:bold;/*加粗*/font-style:italic;/*斜体*/text-indent:initial;/*文字缩进*/}
效果图：
由此可见divid="d1"里的标签元素全部继承了父元素div的样式
四、特殊选择器
1、找到id="d1"下面的p标签
html部分
divid="d1"p特殊选择器1/ppclass="c1"特殊选择器2/pp特殊选择器3/p/div
css部分
/*找到id="d1"下面的p标签，空格代表什么什么下面的标签*/#d1p{color:red;}
效果图
2、找到id="d1"下面的class="c1"的标签
html部分
divid="d2"p特殊选择器1/ppclass="c1"特殊选择器2/pp特殊选择器3/pspan/span/div
css部分
/*id="d1"下面的class="c1"的标签*/#d2.c1{color:green;}
效果图
3、使用,分割代表的和什么和什么
html部分
divid="d1"p特殊选择器1/ppclass="c1"特殊选择器2/pp特殊选择器3/p/divdivid="d2"p特殊选择器1/ppclass="c1"特殊选择器2/pp特殊选择器3/pspan/span/div
css部分
/*,代表的和什么和什么*/#d1.c1,#d2.c1{color:red;}
效果图
五、文字修饰符：
1、下/顶划线、删除线——text-decoration属性
html部分
!--下划线--pclass="p5"span根据国家监管部门要求，自年2月12日起，新注册的