前端技术基础「css篇」

CSS 指层叠样式表 (Cascading Style Sheets)，是一种用来表现 HTML 文档样式的语言，样式定义如何显示 HTML 元素，是能够真正做到网页表现与结构分离的一种样式设计语言。样式通常存储在样式表中，外部样式表通常存储在 CSS 文件中，多个样式定义可层叠为一。

CSS 简介

HTML 标签被设计为用于定义文档内容，也就是文档结构，为了增强代码的可读性，实现网页结构与表现相分离的原则，万维网联盟（W3C），肩负起了 HTML 标准化的使命，并在 HTML4 之外创造出样式（Style）。

CSS 目前最新版本是 CSS3，相对于传统 HTML 的表现而言，CSS 能够对网页中对象的位置排版进行像素级的精确控制，拥有对网页对象编辑的能力，易于维护和改版，提高页面浏览速度，使用 CSS 布局页面更符合 W3C 标准，他是目前基于文本展示最优秀的表现设计语言。

CSS 样式表极大地提高了工作效率：样式通常保存在外部的 .css 文件中，通过仅仅编辑一个简单的 CSS 文档，外部样式表有能力同时改变站点中所有页面的布局和外观。

CSS 语法

text
 CSS 规则由两个主要的部分构成：
 选择器，以及一条或多条声明。如下：
    选择器就是需要改变样式的 HTML 元素。
    每条声明由一个属性和一个值组成，属性是设置的样式属性（style attribute），
    每个属性都有一个值，属性和值用冒号分隔。
    CSS 声明总是以分号 ; 结束，声明组以大括号 {...} 括起来。
    为了让 CSS 可读性更强，可以每行只描述一个属性。
    CSS 注释是用来解释代码，并且可以随意编辑，浏览器会忽略它。
    CSS注释以 "/*" 开始，以 "*/" 结束。

创建 CSS

当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。CSS 创建样式表有三种方法：
内联样式、内部样式、外部样式。

1. 内联样式

内联样式也叫行内样式或者行间样式，即在相关标签内使用样式（style）属性定义。
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。因此需要慎用这种方法，例如当样式仅需要在一个元素上应用一次时，可以使用内联样式。要使用内联样式，需要在相关的标签内使用样式属性定义，style 属性可以包含任何 CSS 属性。

2. 内部样式

内部样式也叫内嵌样式，即在文档中创建内嵌的样式表，需要使用style标签在文档头部定义内部样式表。当单个文档需要特殊的样式时，就应该使用内部样式表。

3. 外部样式

外部样式也叫做外联样式，即使用link标签链接到外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择，在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用link标签链接到样式表，浏览器会从文件 style.css 中读到样式声明，并根据它来格式化文档。注意：link标签中 rel="stylesheet" type="text/css" 是固定代码格式，不可更改。
外部样式表可以在任何文本编辑器中进行编辑，样式文件不能包含任何的 HTML 标签，样式表以 .css 扩展名进行保存。注意：不要在属性值与单位之间留有空格。假如你使用 "margin-left: 20 px" 而不是 "margin-left: 20px" ，那么它在不同的浏览器中可能无法正常工作，导致意向不到的结果。

4. 样式优先级

样式优先级，也可以称为层叠次序，即同一个 HTML 元素不止被一个样式定义时，会优先使用哪个样式。一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中：
内联样式 > 内部样式 > 外部样式
内联样式（在 HTML 元素内部）拥有最高的优先权，即优先采用在元素内部定义的样式信息，然后是内部样式表（位于 head标签内部），最后是外部样式表中的样式声明，浏览器中的样式声明（缺省值）同外部样式处于同一层次。
优先级的顺序是有一个前提的，即内联样式、内部样式、外部样式表中 CSS 样式是在的相同权值的情况下。但是内部样式 > 外部式也有一个前提，即内部样式的位置一定在外部样式的后面。

5. 多重样式

样式表允许以多种方式规定样式信息，样式可以规定在单个的 HTML 元素中，或在 HTML 页的head元素中，亦或在一个外部的 CSS 文件中，甚至可以在同一个 HTML 文档内部引用多个外部样式表，但是最终多重样式将被层叠为一个。
那就意味着：如果你使用了外部文件的样式，在head中也定义了该样式，那么内部样式会取代外部文件中的样式。

id 和 class 选择器

如果要给 HTML 元素设置 CSS 样式，则需要在元素中设置 "id" 和 "class" 属性，该属性用作选择器。

1. id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，id 属性和身份证一样具有唯一性。HTML元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以 "#" 来定义。注意： id 属性不能以数字开头。

2. class 选择器

class 选择器用于描述一组元素的样式，也叫做类选择器，class 选择器有别于 id 选择器，class 可以在多个元素中使用，并且一个元素也可以指定多个类名。class 选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点 "." 号来定义。可以设置所有带有指定 class 的 HTML 元素，也可以指定特定的 HTML 元素使用 class。注意：类名的第一个字符也不能使用数字。实例：所有拥有 center 类的 HTML 元素均为居中显示。

3. ID 选择器和类（class）选择器的区别

相同点：可以应用于任何元素。不同点：
　①、ID 选择器只能在文档中使用一次。与类选择器不同，在一个 HTML 文档中，ID 选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
　②、可以使用类选择器词列表方法为一个元素同时设置多个样式。在一个 HTML 文档中，可以为一个元素同时设置多个样式，但只可以用类选择器的方法实现，ID 选择器是不可以的，不能使用 ID 词列表，即一个元素可以指定多个类名，如 <span class="one two three">文本</span> 而 ID 只能指定一个。

CSS 元素选择器

最常见的 CSS 选择器就是元素选择器，即标签选择器，也就是说 HTML 的元素就是最基本的选择器。

如果使用元素选择器设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 body、h1、p、a，也可以是 html 本身。在 W3C 标准中，元素选择器也叫做类型选择器，类型选择器匹配文档中元素类型的名称，类型选择器匹配文档树中该元素类型的每一个实例，也就是如果使用元素选择器，比如

css
h1 { color:red; }

他会匹配文档中所有的 h1 元素，即页面上所有的 h1 标题都显示为红色。

CSS 背景

background 属性用于定义 HTML 元素的背景。定义元素背景效果的 CSS 属性有以下五种：

background-color CSS 中，颜色值通常使用以下方式定义：
①：十六进制，如："#ff0000"，类似这样的形式，可以缩写为："#f00"。
②：RGB，如："rgb(255,0,0)"。
③：颜色名称，如："red"。
background-image
background-repeat
background-position
background-attachment

CSS 文本格式

1、文本颜色

color 属性被用来设置文字的颜色，可以使用合理的背景颜色和文本颜色搭配，这样有利于提高文本的可读性。

2、文本对齐方式

text-align 文本排列属性可以用来设置文本的水平对齐方式文本可以居中或对齐到左或右，两端对齐。该属性有4个值，默认值为 left，由浏览器决定，把文本排列到左边，即对齐到左。 center 则为文本居中，right 为文本对齐到右边。

当 text-align 属性的值设置为 justify 时，则表示文本两端对齐，每一行将被展开为宽度相等，左、右外边距对齐，就像杂志和报纸那样，常应用于书刊杂志排版。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上，然后，调整单词和字母间的间隔，使各行的长度恰好相等。那就是说对于英文这样定义是可以的，但是对于中文两端对齐支持并不是很好。解决办法就是再定义 text-justify 属性，将其值设置为 inter-ideograph，用表意文本来对齐内容，他增加或减少表意字和词间的空格。表意字顾名思义，就是字形有一定表达意思性的文字，汉字属于表意文字，他是文字萌芽时期的产物，是汉语形成历史中最早的一种文字。该属性值的默认值为 auto，让浏览器决定两端对齐算法。

3、文本修饰

text-decoration 属性用来设置或删除文本的修饰。从设计角度来讲该属性主要是用来删除超链接的下划线

CSS 字体

font 属性可用于设置文本字体，定义样式，如加粗，大小等，属于复合属性，也叫做简写属性，可以在一个声明中设置所有字体属性。当使用简写属性时，属性值的顺序依次为：

font-style --> font-variant --> font-weight --> font-size/line-height --> font-family

CSS 链接

不同的链接可以设置不同的样式，设置链接样式可以用任何 CSS 属性（如 color，background，font 等），链接的特殊性在于能够根据它们所处的状态来设置它们的样式。在所有浏览器中，链接的默认外观如下：
①：未被访问的链接带有下划线而且是蓝色的。
②：已被访问的链接带有下划线而且是紫色的。
③：活动链接带有下划线而且是红色的。
文本修饰属性 text-decoration

可用于删除链接中的下划线。

链接的四种状态是：

a:link-正常，未访问过的链接。
a:visited-已访问过的链接。
a:hover-当鼠标滑动到链接上时。
a:active-链接被点击的那一刻。

当为链接的不同状态设置样式时，必须遵循以下顺序规则： 1. a:hover必须跟在a:link和a:visited后面。 2. a:active必须跟在a:hover后面。 在这四种状态中，最常被应用到的状态是 a:hover，:hvoer 是一个 CSS 伪类，在鼠标移动到元素上时添加的特殊样式，可用于所有元素，不只是链接，常被用来做鼠标滑过动画。当应用到链接上时，可以使用列表布局导航栏菜单，也叫选项卡，当鼠标移动到链接菜单上时，可以显示特殊的样式。

CSS 列表

从某种意义上讲，不是描述性的文本的任何内容都可以认为是列表，比如家谱、人口普查、太阳系，甚至你的所有朋友都可以表示为一个列表或者是列表的列表。由于列表如此多样，这使得列表相当重要，在 HTML 中，有两种类型的列表： ①：无序列表 - 列表项标记用特殊图形，默认以小黑点样式显示。
②：有序列表 - 列表项的标记默认以数字样式显示。

CSS 列表属性作用如下：


①：设置不同的列表项标记。
②：设置列表项标记为图像。

通过 CSS，可以列出进一步的样式，并可用图像作列表项标记。修改列表项标记使用 list-style-type，使用图像作为标记可以利用 list-style-image 属性完成。

CSS 表格

使用 CSS 可以大大的提高 HTML 表格的外观。

CSS 属性选择器

属性选择器可以为具有特定属性的 HTML 元素样式，而不仅仅是 class 和 id。

1、属性选择器

属性选择器使用：[attr]

2、属性和值选择器

属性选择器使用：[attr=value]

3、属性和多个值的选择器

属性和多个值的选择使用有两种情况：属性值用空格分隔使用：[attr~=value] 属性值用连字符分隔则使用：[attr|=value]

4、表单样式

属性选择器在为不带有 class 或 id 的表单设置样式时特别有用。

CSS 组合选择符

CSS 组合选择符是包括各种简单选择器的组合方式，组合选择符说明了两个选择器直接的关系。在 CSS3 中包含了四种组合方式：
①：后代选择器，以空格分隔。
②：子元素选择器，以 > 分隔。
③：相邻兄弟选择器，以 + 分隔。
④：普通兄弟选择器，以 ~ 分隔。

1、后代选则器

后代选则器又称为包含选择器，可以选择作为某元素后代的元素，并且包括子元素、孙元素、曾孙元素等等。

2、子元素选择器

与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素，不包括孙元素、曾孙元素等等。如果不希望选择任意的后代元素，而是只选择某个元素的子元素，那么就使用子元素选择器。

3、相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，就可以使用相邻兄弟选择器。

4、普通相邻兄弟选择器

普通兄弟选择器选取所有指定元素的相邻兄弟元素。

CSS 伪类

CSS 伪类是用来向一些选择器添加特殊的效果。伪类的语法：选择器:伪类{attr

;} CSS 类也可以使用伪类：选择器.class:伪类{attr

;} 注意：伪类的名称不区分大小写。

CSS 伪元素

CSS 伪元素是用来为一些选择器添加特殊的效果。

1、before伪元素

伪元素可以在元素的内容前面插入新内容。

2、after伪元素

伪元素可以在元素的内容之后插入新内容。 content 属性与

及

伪元素配合使用，来插入生成内容，该属性用于定义元素之前或之后放置的生成内容。默认的，这往往是行内内容，不过该内容创建的框类型可以用 display 属性控制。content 的内容一般可以为以下四种：

①、content:"none" 该值是默认值，不插入内容。

②、content:"string" 插入文本。

③、content:"attr(属性)" 插入标签属性值。

④、content:"url(路径)" 使用指定的绝对或相对地址插入一个外部资源，可以是图像，音频，视频或浏览器支持的其他任何资源。

3、first-line 伪元素

first-line 伪元素用于向文本的首行设置特殊样式。注意：first-line 伪元素只能用于块级元素，下面的属性可应用于first-line 伪元素：
①、font
②、color
③、background
④、line-height
⑤、clear
⑥、vertical-align
⑦：text-decoration
⑧：text-transform
⑨、letter-spacing
⑩、word-spacing

4、first-letter 伪元素

伪元素用于向文本的首字母设置特殊样式。注意：

伪元素只能用于块级元素，下面的属性可应用于 "first-letter" 伪元素：
①、font、color、background、line-height、clear、vertical-align (only if "float" is "none")、text-decoration、text-transform 以上8个属性和 :first-line 伪元素相同，除了 letter-spacing 和 word-spacing 之外。
②、float
③、margin
④：padding
⑤：border

5、伪元素和 CSS 类

伪元素可以与 CSS 类配合使用。

6、多伪元素

多重伪元素即可以结合多个伪元素来使用。

目录