1.1 CSS概述
1.1.1 什么是CSS
HTML 标签原本被设计为用于定义文档内容。通过使用 h1、p、table 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。
由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。
为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。
CSS全称为层叠样式表（Cascading Style Sheet），通常又称为风格样式表（Style Sheet），它是用来进行网页风格设计的。
所有的主流浏览器均支持层叠样式表例如：图片和文本使用了CSS混排效果，非常漂亮，并且很清晰，这就是一种风格。
1.1.2 CSS在网页中的应用
样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。
由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。
既然CSS可以设计网页风格，那么在网页中，CSS如何应用呢？通过设立样式表，可以统一的控制HTML中各个标签的显示属性，例如设置字体的颜色，大小，样式等，使用CSS还可以设置文本居中显示，文本与图片对其方式，超链接的不同效果等，这样层叠样式表可以更有效地控制网页的外观。
1.1.3 CSS的发展史
1993年6月，超文本标记语言草案一经发布就受到广泛的关注，迅速壮大，成为网页开发的热门语言，可是通过前几章节的学习可以知道，用HTML开发出来的页面非常单调，暗淡无光，并且比较臃肿。
1994年，哈坤利（Hakon Wium Lie）为HTML语言提出了CSS样式表的构想。
1995年，他再一次展开这个建议。W3C对CSS的发展很感兴趣，为此专门组织一次讨论，于是：
1996年12月退出了CSS规范的第一版，即CSS1.0版本
1998年5月W3C发布了CSS的第二版，即CSS2.0版本。CSS2.0版本规范基于CSS1.0设计的，其中包括了CSS1.0的所有功能，还融入了DIV+CSS的概念，提出了HTML结构与CSS样式表分离，以及其他的一些属性。
2004年W3C升级了CSS2.0版本，改变为CSS2.1版本，融入了很多高级的用法，如浮动，定位等属性。
2010年W3C推出了CSS3版本，它包括了CSS2.1下的所有功能，是目前最新的版本，它向着模块化的趋势发展，又加了很多实用的新技术，如字体，多背景，圆角，阴影，动画等高级属性，但是它需要高级浏览器的支持。
1.1.4 CSS的优势
为什么使用CSS制作网页还有什么好处呢？
1.内容与表现分离，即使用前面学习的HTML语言制作网页，使用CSS设置网页样式、风格并且CSS样式单独存放在一个文件中。这样，HTML文件引用CSS文件即可，网页的内容（HTML5）与表现就可以分开了，以便于后期CSS样式的维护2.表现的同意。CSS可以使网页的表现统一，并且容易修改。把CSS写在单独的页面中，可以对多个网页应用其样式，使网站中的所有页面表现、风格同意，并且当需要修改页面的表现形式时，只需要修改CSS样式，所有的页面样式即可同时修改3.丰富的样式，使得页面布局更加灵活4.减少页面的代码量，提高页面的浏览速度，节省网络的贷款。在网页中只写HTML代码，在CSS样式表中编写样式，这样可以减少页面的代码量，并且页面代码清晰。同时一个合理的层叠样式表，还能有效地节省网络带宽，提高用户体验5.运用独立于页面的CSS，还有利于网页被搜索引擎收录
2.1 CSS3的基本语法
2.1.1 CSS的语法结构
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector{declaration1; declaration2; ... declarationN }
selector选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。声明必须放在大括号（｛｝）中，并且声明可以是一条或多条。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
示例
h1{color:red;font-size:14px;}
h1表示选择器，“font-size:14px”和“color:red”表示两条声明，声明中font-size和color表示属性，而14px和red则是对应的属性值。font-size属性表示字体大小，color属性表示字体颜色。
2.1.2 认识style标签
学习了CSS基本语法结构，学会了如何定义CSS样式后，那么怎么将定义好的CSS样式应用到HTML中呢？ 在HTML中通过使用style标签引入CSS样式。style标签用于为什么HTML文档定义样式信息。style标签位于head标签中，它规定了浏览器如何呈现HTML文档。style标签的用法如下：
style标签h1{font-size:12px;color:#F00; }
3.1 在HTML中引入css
如何插入样式表 当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种：
行内样式、内部样式表、外部样式表
3.1.1 行内样式
行内样式就是在HTML标签中直接使用style属性设置CSS样式。style属性提供了一种改变所有HTML元素样式的通用方法。style属性的用法如下：
style属性的应用直接在HTML标签中设置的样式
注意：由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
3.1.2 内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 style 标签在文档头部定义内部样式表。
p{margin-left:20px;}body{background-image:url("images/back40.gif");}
3.1.3 外部样式表
1.链接外部样式表
样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 link 标签链接到样式表。
标签在（文档的）头部：
其中rel=“stylesheet”是指在页面中使用这种外部样式表;type="text/css"是指文件的类型是样式表文本；href="style.css";是文件所在的位置。 外部样式表实现了样式和结构的彻底分离，一个外部样式表文件可以应用于多个样式。当改变这个样式表文件时，所有页面的样式都会随之改变。这在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的工作量，有利于保持网站的统一样式和网站维护，同时减少了用户在浏览网页时重复下载代码，提高了网站的运行速度。
示例
h1{ font-size:20px; color:red;}p{ font-size:16px; color:black;}链接外部样式表
欢迎学习CSS
CSS全称为层叠样式表
又称为风格样式表
它是用来进行网页风格设计的
2.导入外部样式表
其中@import表示带入文件，前面必须有一个@符号，url("common.css")表示样式表文件位置
示例
Title
3.链接式与导入式的区别
以上讲解了两种引用外部样式表的方式，它们的本职都是将一个独立的CSS样式表引用到HTML页面中，但是两者还是有一些差别的，现在看一下两者的不同之处。
1）link标签属于XHTML，而@import是CSS2.1中特有的
2）使用link链接的CSS使用客户端浏览页面时先将外部CSS文件加载到网页中，再进行编译显示，所以这种情况下显示出来的网页与用户预期的效果一样，既是网速较慢时也是一样的效果。
3）使用@import导入的CSS文件，客户端在浏览页面时先将HTML结构呈现出来，再把外部CSS文件加载到网页当中，当然最终的效果与使用link链接文件效果一样，只是当前网速较慢时会先显示没有CSS统一布局的HTML网页，这样就会给用户很不好的感觉，这也是目前大多数网站采用链接外部样式表的主要原因。
4.样式优先级
由于前面一开始就提到了CSS的全称为层叠样式表，因此对于页面中的某个元素，它允许同时应用多个样式（即叠加），页面元素最终的样式即多个样式的叠加效果。但又存在一个问题--当同时应用上述三类样式时，页面元素将同时继承这些样式，但样式之间如果有冲突，应继承哪种样式？这就存在样式优先级的问题。
行内样式>内部样式表>外部样式表
就近原则
案例
行内引入样式春晓春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。内部引入样式表h2{font-size:20px;color: black; }p{font-size:14px;color: green; }
春晓
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
外部引入样式春晓
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
h2{ font-size: 20px; color: black;}p { font-size: 14px; color: green;}4.1 CSS3选择器
4.1.1 基本选择器
标签选择器、ID选择器、类选择器
1、标签选择器
一个HTML页面由很多的标签组成，如h1~h6、p、img等，CSS标签选择器就是用来声明这些标签的。
示例
内部引入样式表h2{font-size:20px;color: black; }p{font-size:14px;color: green; }
春晓
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
上面代码中CSS代码声明了HTML页面中所有的h2标签和p标签。h2标签中字体颜色为黑色；p标签中字体颜色为绿色。每个CSS选择器都包括选择器本身、属性和值。其中属性和值可以设置多个，从而实现对同一个标签声明多个样式风格。
2、类选择器
在标签选择器中看到， 标签选择器一旦声明，那么页面中所有的该标签，都会相应的发生变化，例如，当声明了p标签都为红色时，页面中所有的p标签都将显示为红色。如果希望其中的某个p标签不是红色，而是绿色，仅依靠标签选择器是不够的，还需要引入类｛class｝选择器。
类选择器的名称可以由用户自定义，必须符合CSS规范，属性和值跟标签选择器一样，类选择器的语法结构如下：
.class{font-size:10px;}.class：类选择器class：类名称font-size:10px：声明属性10px：值
设置了类选择器后就要在HTML标签中应用类样式。使用标签的class属性引用类样式，即
<标签名class="类名称">标签内容
注意：CSS选择器的命名规范：
1.使用英文字母小写。2.不要和ID选择器同名3.使用具有语义化的单词命名4.长名称或词可以使用驼峰命名方式命名选择器
示例
内部引入样式表h2{font-size:20px;color: black; }p{font-size:16px; }.p1{color:red; }
春晓
春眠不觉晓，处处闻啼鸟。
夜来风雨声，
花落知多少。
3、ID选择器 ID选择器的使用方法与类选择器基本相同，不同之处在于ID选择器只能在HTML页面中使用一次，因此它的针对性更强。在HTML的标签中，只要在HTML中设置了ID属性，就可以直接调用CSS中的ID选择器。ID选择器的语法结构如下：
#id{font-size:20px}#id：ID名称ID选择器font-size:20px：声明属性20px：值
示例
内部引入样式表#tit{font-size:20px;color: black; }p{font-size:16px; }.p1{color:red; }春晓春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
ID选择器与类选择器不同，同一个id属性在同一个页面中只能使用一次，虽然这样，但是它在网页中也是经常用到的。例如，在布局网页时，网页主题、页尾或者页面中的菜单、列表等通常使用id属性，这样可拿到id名称就知道此部分内容，使代码具有非常高的可读性。
基本选择器优先级
ID选择器>class类选择器>标签选择器
注意：标签选择器是否也遵循“就进原则”？
不遵循。 无论是哪种引入CSS样式的方式，一般都遵循ID选择器>class类选择器>标签选择器的优先级
4.1.2 高级选择器
层次选择器、结构伪类选择器、属性选择器
1、层次选择器
选择器类型功能描述
E F后代选择器选择匹配的F元素，且匹配的F元素被包含在匹配E元素内
E>F子选择器选择匹配的F元素，且匹配的F元素匹配的E元素的子元素
E+F相邻兄弟选择器选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
E~F通用兄弟选择器选择匹配的F元素，且位与匹配的E元素后的所有匹配 的F元素
示例
使用CSS3层次选择器p,ul{border:1pxsolid red;/*边框属性*/}1
2
3
4
5
6
后代选择器
后代选择器的作用就是可以选择某元素的后代元素。例如，“E F”中，E为祖先元素，F为后代元素，那么F元素无论是E元素的子元素、孙辈元素、或者更深层次的关系，都将被选中。
bodyp{background:red; }
注意：后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入
子选择器
子选择器（E>F），只能选择某元素的子元素，其中E为父元素，F为子元素。
body>p{background:pink; }
结合后代选择器和子选择器
table.companytd>p
上面的选择器会选择作为 td 元素子元素的所有 p 元素，这个 td 元素本身从 table 元素继承，该 table 元素有一个包含 company 的 class 属性。
相邻兄弟选择器
相邻兄弟选择器（E+F）可以选择紧接在另一个元素后面的元素，它们有一个相同的父级元素，换句话说，E和F是同辈元素，F元素在E元素后面，并且相邻。
.active+p{background:green; }
上面代码的意思是选择到类名为active的相邻兄弟p元素，也就是类active后面的一个p元素被选中。
通用兄弟选择器
通用兄弟选择器（E~F）用于选择某元素后面的所有兄弟元素，它和相邻兄弟选择器类似，需要在同一个父元素之中。也就是说E和F元素都是同辈元素，并且F元素在E元素之后，E~F将选中E元素后面的所有F元素。
.active~p{background:yellow; }
上面代码的意思是选择到类名为active后面的所有兄弟p元素。
注意：通过兄弟选择器选中的是E元素相邻的后面兄弟元素F，是一个或多个元素；相邻兄弟选择器选择中的仅是与E元素相邻并且紧挨的兄弟元素F，其选中的仅是一个元素。
2、结构伪类选择器
CSS 伪类用于向某些选择器添加特殊的效果。
伪类可以将一段不存在的HTML当做独立元素来定位，或者是找到无法使用的其他简单选择器就能定位到切实存在的元素上。这种选择器可以根据元素在文档树中的某些特特性（如相对位置）定位他们。
选择器功能描述
E:first-child作为父元素的第一个子元素的元素E
E:last-child作为父元素的最后一个元素的元素E
E F:nth-child(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元素
示例
使用CSS3结构伪类选择器/*ul的第一个子元素*/ulli:first-child{background: red;}/*ul的最后一个子元素*/ulli:last-child{background:green;}/*选择到父级里的第一个子元素p*/p:nth-child(1){background:yellow;}/*父元素里第2个类型为p的元素*/p:nth-child(2){background:blue;}
p1
p2
p3
- li1
- li2
- li3
E F:nth-child(n)和E F:nth-of-type(n)两个选择器之间有什么区别？ p:nth-child(1)选择器从词义上来说，表示：选择的是一个段落元素；选择的是父元素的第一个元素。E F:nth-child(n)在父级里从一个元素开始查找，不分类型。
p:nth-of-type(2)选择器从词义上来说，表示：选择父元素的第二个类型为p的元素。E F:nth-of-type(n)在父级里先看类型，再看位置。
3、属性选择器
在HTML中，可以给元素设置各种各样的属性，比如：id、class、title、href等。通过各种各样的属性可以选择到元素并为其设置样式，这是非常方便的。
选择器功能描述
E[attr]选择匹配具有属性attr的E元素
E[attr=val]选择匹配具有属性attr的E元素，并且属性值为val（其中val区分大小写）
E[attr^=val]选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
E[attr$=val]选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
E[attr*=val]选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配
示例
CSS3属性选择器的使用.demoa{float: left;display: block;height:50px;width:50px;border-radius:10px;text-align: center;background:#AAC;color:blue;font:bold20px/50pxArial;margin-right:5px;text-decoration: none;margin:5px; }12345678910
E[attr]
E[attr]属性选择器是最简单的一种，用来选择有某个属性的元素即可，而无论这个属性值是什么。
a[id]{background:yellow}
这句代码的意思是选择具有id属性的a元素。
E[attr=val]
E[attr=val]属性选择器为元素E设置了属性attr，并且它的属性值为val，相比E[attr]舒心选择器来说，在中多元素中已经缩小了选择范围，能进一步精确选择自己需要的元素。
a[id=first]{background:red}
这句代码的意思是选择具有id属性的a元素，并且属性值为first。
注意：E[attr=val]属性选择器中，属性和属性值必须完全匹配才能被选中。
E[attr^=val]
E[attr^=val]属性选择器为元素E设置了属性attr，并且它的属性值是以字符串“val”开头的所有E元素。
a[href^=http]{background:red}
这句代码的意思是选择所有含有href属性并且属性值以“http”开头的所有a元素。
E[attr$=val]
E[attr$=val]属性选择器与E[attr^=val]刚好相反，表示选择attr属性的值是以字符串“val”结尾的所有E元素。
a[href$=png]{background}
这句代码的意思是选择所有含有href属性并且属性值以"png"字符串及诶为的所有a元素。
E[attr*=val]
E[attr*=val]属性选择器设置了通配符，为元素E设置了属性attr，并且它的属性值中包含“val”字符串，也就是说只要锁选择的属性中含有“val”字符串就可以被匹配上。
a[class*=link]{background:red}
这句代码的意思是选择所有含有class属性并且属性值中包含“links”字符串的a元素。
5.1 总结
1.CSS在页面的应用和它的优势
2.CSS语法规则，使用style标签引入CSS样式
3.在HTML中引入CSS样式的三种方法分别是行内样式，内部样式表和外部样式表，其中外部样式表使用link标签链接外部CSS文件。CSS样式的优先级依据就近原则
4.CSS3的基本选择器包括标签选择器、类选择器和ID选择器
5.CSS3的高级选择器包括层次选择器、结构伪类选择器、属性选择器
(想要了解更多的职场,职业规划方面的经验,文章第一时间发布于云图智联官网)