前端管中窥豹之CSS篇 - 好文

<>一、CSS简介

* CSS 指层叠样式表 (Cascading Style Sheets)
* 样式定义如何显示 HTML 元素
* 样式通常存储在样式表中
* 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
* 外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中
* 多个样式定义可层叠为一
<>1.注释

    /* 注释内容可多行注释 */

<>2.语法

    选择器（属性:值;属性:值;……）

<>3.三种引入方式

* head内style标签内部直接书写css代码
* link标签引入外部css文件
* 直接在标签被通过style属性书写css样式
<>4.标签通常都必须有的属性：

    id 唯一标识标签
    class 标签类属性可以有多个，类似python面向对象的继承

<>二、如何查找标签

<>1.基本选择器

<>  1）标签选择器
标签名{属性名:值}
<>  2）id选择器
#id名{属性名:值}
<>  3）类选择器：相同类名的标签包括其嵌套的其他标签都更改样式
.类名{属性名:值}
<>  4）通用选择器：匹配 html 中的所有元素标签
*{属性名:值}
<>  5）共用选择器：多个标签更改样式（不同的选择器也可以共用一个样式）
标签名1，标签名2，标签名3{属性名:值}
<>2.组合选择器

<>  1）后代选择器：A标签中嵌套的所有B标签都更改样式
A B{属性名:值}
<>  2）儿子选择器:A标签中嵌套的子标签B(超过两层嵌套即非子标签)都更改样式
A > B {属性名:值}
<>  3）毗邻选择器:A标签下面(非嵌套)的第一个B标签更改样式
A + B {属性名:值}
<>  4）弟弟选择器:A标签下面(非嵌套)的所有B标签更改样式
A ~ B {属性名:值}
<>3.属性选择器:你可以给任意标签加任意的属性名和属性值
[属性名]{样式}：属性名符合的标签更改样式 [属性名=属性值]{样式}：属性名及属性值都符合的标签会更改样式也适用组合选择器
<>4.伪类选择器
元素:伪类名{属性名:值} 栗子：遵循爱恨原则，顺序不能变 a:link {color:gray;}/*链接没有被访问时前景色为灰色*/
a:visited{color:yellow;}/*链接被访问过后前景色为黄色*/
a:hover{color:green;}/*鼠标悬浮在链接上时前景色为绿色*/
a:active{color:blue;}/*鼠标点中激活链接那一下前景色为蓝色*/
<>5.伪元素选择器
第一个字母 ::first-letter{属性名:值} 第一行（以浏览器为准的第一行） ::first-line{属性名:值}
被选中的字行（鼠标选择的字段） ::selection ::before 和 ::after在内部内容的前面或者后面插入内容，必须带一个属性content
<>选择器优先级

    相同选择器不同引用方式——就近原则谁靠近标签谁生效
    不同选择器相同引入方式——行内样式 > id选择器 > 类选择器 > 标签选择器

热门工具换一换