前端之路（二）CSS壹

1、什么是CSS？

CSS：Cascading style sheet，层叠样式表，为页面添加样式效果。

2、Web前端三层结构？

１）结构层，搭建网页基本结构，工具是HTML

２）样式层，为页面添加样式效果，工具是CSS

３）行为层，为页面添加交互行为，工具是JavaScript

３、CSS相关

１）引入CSS的目的：达到结构和样式分离的效果

２）引入CSS的好处：减少结构层代码量、提供丰富效果、增加兼容性等

３）CSS语法：

CSS包括选择器（选择哪个标签进行样式设置）和样式规则（给标签添加什么属性）

选择器｛
	样式：样式值
｝

注意：给内容添加样式用于美化，给盒子添加样式用于布局。

​ CSS对于换行空行缩进也不敏感，所以发送给服务器前可以将代码压缩为一行，减小文件体积，加快加载速度。

4、引入CSS的四种方式

１）行内式

即在标签的style属性里定义CSS。

缺点：结构与样式无法分类，高耦合，维护成本高。

2）内嵌式

在head中使用style标签引入。

缺点：结构与样式无法分类，高耦合，维护成本高。

​ html从上往下加载，嵌入样式过多时会影响加载速度。

3）外链式（最常用）

在head中使用link引入，与html文件并行下载，不影响页面加载，也不影响样式渲染。

4）导入式

在style标签里，使用import url(“CSS路径”)导入。

因为是在html页面加载结束后再加载样式，会影响样式渲染。

一般是在CSS里导入其他CSS时，才会用这个。

5、选择器

1）通配符选择器

也叫全局选择器，对全局所有标签统一的样式应用。

*{样式:样式值;……}

2）标签选择器

匹配全部该标签，统一应用样式。

标签名{样式:样式值;……}

3）类选择器

匹配使用指定类名的元素，统一应用样式。

.类名{样式:样式值;……}

4）id选择器

匹配使用指定id的元素，统一应用样式。

#id{样式:样式值;……}

5）高级选择器-后代选择器

利用基本选择器划定一个大的范围，然后在这个范围中再划定一个小的范围，符合条件的应用样式。

父代选择器 后代选择器{样式:样式值;……}

注意：后代不只是子代，子子孙孙在内的所有后代符合的都属于。

​ 一层不够可以写多层。

6）高级选择器-子代选择器

利用基本选择器划定一个大的范围，然后在这个范围中再划定一个小的范围，符合条件的应用样式。但是，这个必须是子代，孙代开始的后代都不匹配。

父代选择器 > 后代选择器{样式:样式值;……}

7）高级选择器-交集选择器

选中两个选择器同时匹配的元素，应用样式。

选择器A.选择器B{样式:样式值;……}

注意：可以取连续交集。

8）高级选择器-并集选择器

选中所有匹配已列出选择器的元素。

选择器A,选择器B,选择器C……{样式:样式值;……}

9）高级选择器-相邻兄弟选择器

选中紧接在某一元素后的有相同父元素的元素。

选择器A+选择器B{样式:样式值;……}

10）高级选择器-所有兄弟选择器

选中某一元素后的所有具有相同父元素的元素。

选择器A~选择器B{样式:样式值;……}

11）高级选择器-属性选择器

选择器[属性]{样式:样式值;……}

12）高级选择器-伪类选择器

同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类选择器主要可以分为：动态伪类选择器、UI元素状态伪类选择器、结构伪类选择器、否定伪类选择器。

1.动态伪类选择器

主要针对超链接。

E:link（链接伪类选择器）：选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上（访问之前）

E:visited（链接伪类选择器 ）：选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上（访问之后）

E:active（用户行为选择器）：选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上（点击）

E:hover （用户行为选择器）： 选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover（悬停）

E:focus （用户行为选择器）： 选择匹配的E元素，而且匹配元素获取焦点（获得焦点）

书写顺序：LV，HA

2.UI元素状态伪类选择器

主要针对Form元素进行操作。

E:checked（选中状态伪类选择器）：匹配选中的复选按钮或者单选按钮表单元素

E:enabled（启用状态伪类选择器 ）：匹配所有启用的表单元素

E:disabled（不可用状态伪类选择器）：匹配所有禁用的表单元素

3.结构伪类选择器

E:fisrt-child ：作为父元素的第一个子元素的元素E。与E:nth-child(1)等同

E:last-child ：作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同

E:root：选择匹配元素E所在文档的根元素。在HTML文档中，根元素始终是html，此时该选择器与html类型选择器匹配的内容相同

E F:nth-child(n)：选择父元素E的第n个子元素F。其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且n值起始值为1，而不是0.

E F:nth-last-child(n)：选择父元素E的倒数第n个子元素F。此选择器与E:nth-child(n)选择器计算顺序刚好相反，但使用方法都是一样的，其中：nth-last-child(1)始终匹配最后一个元素，与last-child等同

E:nth-of-type(n) ：选择父元素内具有指定类型的第n个E元素

E:nth-last-of-type(n)：选择父元素内具有指定类型的倒数第n个E元素

E:first-of-type：选择父元素内具有指定类型的第一个E元素，与E:nth-of-type(1)等同

E:last-of-tye ：选择父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同

E:only-child ：选择父元素只包含一个子元素，且该子元素匹配E元素

E:only-of-type：选择父元素只包含一个同类型子元素，且该子元素匹配E元素

E:empty： 选择没有子元素的元素，而且该元素也不包含任何文本节点

4.否定伪类选择器

E:not(F)：匹配所有除元素F外的E元素

13）高级选择器-伪元素选择器

E::first-line：为所有匹配E的首行应用样式

E::first-letter：为所有匹配E的首字母应用样式

E::before：在匹配E的元素之前插入一个元素（必须有属性content指定插入的内容）

E::after：在匹配E的元素之后插入一个元素（必须有属性content指定插入的内容）

::selection：设定被用户选中的文本效果，属性有color、background、cursor、outline

6、CSS代码规范

1）缩进统一四个空格

2）选择器与{}间必须包含空格

3）属性名与：间不能有空格，但是：和属性值之间要有空格

4）列表型属性值在书写单行时，逗号后必须跟一个空格

5）当一组样式包含多个选择器时，每个选择器必须独占一行

6）>、+、~两边要有空格

7）属性选择器中的值必须用双引号包围，文本内容必须用双引号包围

8）属性定义必须另起一行，属性定义后必须用分号结尾

7、继承性

某些元素在父代元素设置了某些属性后，会继承这一属性。

文字属性：color、font-系列、line-系列、text-系列

盒子属性：background-系列、width、height、border-系列、浮动、定位等

注意：只有文字属性能继承，盒子属性不能继承！

8、权重

针对同一个元素设置了不同的选择器时，要计算权重，应用权重高的样式。

其大小为：

!important（无限大）>行内style（1000）>id（100）>类、属性、伪类（10）>标签、伪元素（1）>通配符、继承（0）>浏览器默认

权重大小公式：按各种选择器的个数分别乘它们的权值然后相加得到权重值。

注意：权重大小计算不进位。

​ 如果权重大小相同，那么最后一个定义的样式就是最终样式。

什么是层叠样式表的层叠性？

针对同一个元素标签，当设置了不同的选择器时，权重高的会层叠掉权重低的。

9、文字样式

color：文本颜色

font-size：文字大小

font-family：字体，默认是宋体

font-style：字体风格，italic和normal，一般是用来清除斜体

font-weight：字体粗细，可以写为lighter（细体）、normal（普通）、bold（粗体）、bolder（更粗体），也可以写为100-700的百整数，其中400相当于normal，700等同于bold

line-hight：行高。当line-height等于盒子的height时，文字垂直居中。

font：font系列的综合写法，有固定顺序，顺序是：font-style font-weight font-size/line-height font-family

如：

font:normal 400 25px/30px arial,"Microsoft Yahei";

10、文本样式

text-decoration：文本修饰。值：underline（下划线）、Overline（上划线）、line-through（删除线）、none（清除修饰）

text-indent：首行文本缩进。一般设为2em，指标准的两个汉字的缩进。单位em指文字个数。

text-align：水平对齐

letter-spacing：字符间距

word-spacing：字间距

如何区分以上两者？

​ word-spacing 属性增加或减少单词间的空白（字间隔）。letter-spacing 属性增加或减少字符间的空白（字符间距）。word-spacing意思是设置单词间的间距，如何区别是不是为一个单词呢，用空格隔开的视为一个单词，使用字间距之后，空格会更大

vertical-align：元素的垂直对齐方式，有：baseline，默认，元素放置在父元素的基线上。

​ sub，垂直对齐文本的下标。

​ super，垂直对齐文本的上标。

​ top，把元素的顶端与行中最高元素的顶端对齐。

​ text-top，把元素的顶端与父元素字体的顶端对齐。

​ middle，把此元素放置在父元素的中部。

​ bottom，把元素的顶端与行中最低的元素的顶端对齐。

​ text-bottom，把元素的底端与父元素字体的底端对齐。

​ 还有length，%的形式

white-space：元素内留白怎么处理。有：normal，默认，空白会忽略

​ pre，文本会被保留

​ nowrap，文本不会换行

​ pre-wrap，保留空白且正常换行

​ pre-line，合并空白，保留换行

text-overflow：文本溢出包含元素时的处理。有：clip，修建文本

​ ellipsis，显示省略号

11、列表样式

list-style-type：设置列表项目符号类型

list-style-image：设置列表项目符号为图片，值：url（“图片路径”）

list-style-position：设置列表项目符号位置，值：inside|outside

list-style：简写。无具体顺序。

附录：CSS常用类名

1. 1.页面结构

   容器: container
   页头：header
   内容：content/container
   页面主体：main
   页尾：footer
   导航：nav
   侧栏：sidebar
   栏目：column
   页面外围控制整体布局宽度：wrapper
   左右中：left right center

2. 2.导航栏相关

   导航：nav
   主导航：mainnav
   子导航：subnav
   顶导航：topnav
   边导航：sidebar
   左导航：leftsidebar
   右导航：rightsidebar
   菜单：menu
   子菜单：submenu
   标题: heading
   子标题：subHeading
   摘要: summary

3. 3.功能

   标志：logo
   广告：banner
   登陆：login
   登录条：loginbar
   注册：regsiter
   搜索：search
   功能区：shop
   标题：title
   加入：joinus
   状态：status
   按钮：btn
   滚动：scroll
   标签页：tab
   文章列表：list
   提示信息：message
   当前的: current
   小技巧：tips
   图标: icon
   注释：note
   指南：guild
   服务：service
   热点：hot
   新闻：news
   下载：download
   投票：vote
   合作伙伴：partner
   友情链接：friendlink
   版权：copyright

4. 4.样式文件命名

   主要的 main.css
   模块 module.css
   基本共用 base.css
   布局 layout.css
   主题 themes.css
   专栏 columns.css
   文字 font.css
   表单 forms.css
   补丁 mend.css
   打印 print.css