什么是CSS

一.简介

CSS（Cascade Style Sheets）层叠样式表, 是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

CSS是用来美化网页用的，没有网页则CSS毫无用处，所以CSS需要依赖HTML展示其功能.

二.初识CSS 

1.css语法: CSS 样式由选择器和一条或多条以分号隔开的样式声明组成。每条声明的样式包含着一个 CSS属性和属性值.

注意：

css声明要以分号;结束，声明以{}括起来

建议一行书写一个属性

若值为若干单词，则要给值加引号，如 font-family: "agency fb";

如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的(学到js时就会有所了解)。

三.CSS的使用

1.主要分为三类: 行内式 、嵌入式 、引入外联样式文件

(1).行内式 行内式式将样式定义在具体html元素的style属性中。以行内式写的CSS耦合度高，只适用于当前元素，在设定某个元素的样式时比较常用。

(2).嵌入式, 嵌入式通过在html页面内容开辟一段属于css的代码区域，通常做法为在< head>标签中嵌套<style>标签，在<style>中通过选择器的方式调用指定的元素并设置相关 CSS。

(3). 引入外联样式文件 在实际开发当中，很多时候都使用引入外联样式文件，这种形式可以使html页面更加清晰，而且可以达到更好的重用效果。

2.选择器

(1).基本选择器 通用选择器*;元素选择器;id选择器#类选择器; 属性选择器.

(2).分组选择器  当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔.

(3).组合选择器   后代选择器（派生选择器）用于选择指定标签元素下的后辈元素，以空格分隔;子元素选择器用于选择指定标签元素的所有第一代子元素，以大于号分隔;相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。以加号分隔;普通兄弟选择器选择紧接在另一个元素后的所有元素，而且二者有相同的父元素，以波浪线分隔.

3.常用属性设置

(1)CSS背景

CSS 背景属性用于定义HTML元素的背景效果

background-color设置元素的背景颜色

background-image设置元素的背景图像，默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。

background-repeat设置是否及如何重复背景图像

(2)文本

color设置文本的颜色

text-align设置文本对齐方式，center（居中），left（左对齐），right（右对齐）

text-decoration规定添加到文本的修饰，属性值：none、underline、overline、line-through1）underline对文本添加下划线，与HTML的u元素相同。2）overlin对文本添加上划线。 3）line-through对文本添加中划线，与HTML中的s和 strike 元素相同。 4）none关闭原本应用到元素上的所有装饰。

text-indent设置文本首行缩进

(3)字体

font-family文本字体，该属性设置文本的字体。

font-family属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体，所以尽量将不常见的字体靠前，将最常见的字体放置在最后，作为替补。注意：1）只有当字体名中含有空格或#、$之类的符号时（如 New York），才需要在font-family声明中加引号：2）多个字体系列是用一个逗号分隔指明font-size文本大小font-style字体风格，该属性最常用于规定斜体文本。 属性值：normal、italic、oblique1）normal：文本正常显示；2）italic：文本斜体显示；

说明：一般情况下，字体有粗体、斜体、下划线、删除线等诸多属性，但是不是所有字体都具有这些属性，一些不常用字体可能只有正常体，若使用italic属性则没有效果，所以需要oblique属性强制倾斜。

font-weight字体加粗，该属性设置文本的粗细。bold：可以将文本设置为粗体。 100 ~ 900：为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别。100 对应最细的字体变形；900 对应最粗的字体变形；400 等价于 normal；700 等价于 bold。

(4)列表

list-style该属性按如下顺序设置列表样式：list-style-type：列表项目标记样式。list-style-position：列表项目标记位置list-style-image：把图像设置为列表中的项目标记list-style-type  list-style-position  list-style-image

4.填充-盒子模型

border、padding、margin三个属性构成了盒子模型

(1)border设置所有的边框属性。

1）可同时设置边框的宽度、样式、颜色

2）使用border-width、border-style、border-color单独设置

border-style的属性

3）border-collapse

设置是否将表格边框折叠为单一边框，属性值：separate（默认，单元格边框独立）、collapse（单元格边框合并）。

4）border-spacing设置分隔单元格边框的距离。

注意：

设置间距,border-collapse: separate;的状态下才有效

padding

设置元素所有内边距的宽度，或者设置各边上内边距的宽度。如果在表的内容中控制文本到边框的内边距，使用td和th元素的填充属性： td { padding:15px; }

单独设置各边的内边距：padding-top、padding-left、padding-bottom、padding-right

默认按照上右下左的顺序设定

注意：通过padding属性设置元素内边距时，会使元素变形。若不想影响格式效果，可以用margin属性设置元素外边距。

(2)margin设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。

单独设置各边的外边距：margin-top、margin-left、margin-bottom、margin-right

说明：

auto：自动，可以理解为居中的意思。浏览器自动计算外边距。

margin: auto auto：第一个auto表示上下外边距自动计算，第二个auto表示左右外边距自动计算。但是上下外边距在自动计算时不会生效，而左右外边距会生效，表现为居中状态

若要设置为上下左右居中状态，则要计算好自行设置上下的外边距.

5.对齐方式text-align

它是针对于元素的内容

属性值Left center right  

p{text-align: center;}  p是块元素，left、right和center会作用于整个行。

vertical-align

它相当于image标签里的align属性，是容器中元素相对于内容的显示

定义行内元素

*div中定义a，vertical定义的是a相对于div内容的对齐方式，它和容器的高度无关，与文字内容有关

display

display 属性规定元素应该生成的框的类型。这个属性用于定义建立布局时元素生成的显示框类型。属性值

样式继承（了解）

如果某一个元素并没有设置父元素相关的样式， 那么就会使用继承机制将父元素的样式继承下来。

样式继承只适用于元素的外观（文字、颜色、字体等），而元素在页面上的布局样式则不会被继承。如果继承这种样式，就必须使用强制继承：inherit。

6.定位和浮动

CSS 定位 (positioning) 属性允许你对元素进行定位 ，定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。 

CSS 有三种基本的定位机制：普通流、浮动和绝对定位

除非专门指定，否则所有框都在普通流中定位，即普通流中的元素的位置由元素在HTML 中的位置决定

浏览器在读取HTML源代码的时候是根据元素在代码出现的顺序读取，最终元素的呈现方式是依据元素的盒子模型来决定的。行内元素是从左到右，块状元素是从上到下。默认的书写方式即是普通流。

position （绝对定位） 

通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式

static : 没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）

relative : 生成相对定位的元素，相对于其正常位置进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定

absolute : 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed : 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

float（浮动）

float的属性值有none、left、right。

只有横向浮动，并没有纵向浮动。

当元素应用了float属性后，将会脱离普通流，其容器（父）元素将得不到脱离普通流的子元素高度。

会将元素的display属性变更为block。

浮动元素的后一个元素会围绕着浮动元素（典型运用是文字围绕图片）

浮动元素的前一个元素不会受到任何影响（如果你想让两个块状元素并排显示，必须让两个块状元素都应用float）。

position和float兼容（了解）

元素同时应用了position: absolute及float属性，则float失效。

第一个元素应用了position之后会覆盖着接下来的float元素（如果两个元素所处的位置相同）

同时应用position: absolute和float: left会导致清除浮动无效（position: relative则可以清除浮动）。

常用的清除浮动的方法有两种：

1）通过在容器中添加一个标签，设置该标签的样式为 clear: both

2）容器设置overflow: hidden

7.伪类和伪元素

伪类和伪元素我们又称伪类选择器和伪元素选择器，利用这些选择器，可以为文档中不一定具体存在的结构指定样式，或者为某些元素（甚至是文档本身）的状态所之所的幻像类指定样式。换句话说，会根据另外某种条件而非文档结构向文档中的某些部分应用样式，而且无法通过研究文档的标记准确地推断出采用何种方式应用样式。

但这并不是随机的，实际上，这是根据某种无法提前预测的暂时条件来应用样式。什么情况下将出现样式实际上是明确定义的。

伪类可以用来指定一个或多个与其相关的选择符的状态，用于向某些选择器添加特殊效果，形式如下 

使用顺序一般按照 link、visited、hover、active顺序进行设定，是具体情况而定1).E:link 2).E:visited 3).E:hover 4).E:active 5).E:not() 6).E:first-child 7).E:checked

伪元素是指在HTML的文档指定的信息之外，创建了文档的额外信息。形式如下 

1).E:before/E::before  2).E:after/E::after

CSS的常用知识点就列举在这里，当然了，CSS和CSS3还有很多样式和属性，使用的时候对照参考手册查询即可。