css

1、CSS(Cascading Style Sheets)

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

1.选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。

2.属性和属性值以“键值对”的形式出现。

3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。

4.属性和属性值之间用英文“:”连接。

5.多个“键值对”之间用英文“;”进行区分。

2、多类名选择器

我们可以给标签指定多个类名，从而达到更多的选择目的。

注意：

1、样式显示效果跟HTML元素中的类名先后顺序没有关系,受css样式书写的上下顺序有关。

2、各个类名中间用空格隔开。

多类名选择器在后期布局比较复杂的情况下，还是较多使用的。

3、行高

ine-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。

一般页面中的行高设置比字号大7~8像素左右就可以了, 比如当前使用14像素的字号，行高设为24像素左右合适。

4、标签语义化

语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用

语义化的网页的好处，最主要的就是对搜索引擎友好，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取。

核心：合适的地方给一个最为合理的标签。

语义是否良好： 当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。

不管是谁都能看懂这块内容是什么。

遵循的原则：先确定语义的HTML ，再选合适的CSS。

小技巧：

1.重语义的地方多用有语义的标签，比如 h 和 p 等等，少用没有语义的标签比如 div span 等等。

2. 如果有地方可以用p 又可以用div，特别是文字段落， 优先选用 p标签（结构更清晰）

3.少用纯样式标签 比如 b u font，可以运用css样式。 如果有强调的地方，可以考虑 strong em 等 有强调语义的标签。

5、标签显示模式

1）、块级元素(block-level)

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

常见的块级元素右h、p、div、ul、ol、li

2）、行内元素(inline-level)

行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

常见的行内元素有a、strong、b、em、i、del、s、ins、u、span

注意：

1、只有 文字才 能组成段落 因此 p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。

2、链接里面不能再放链接。

3）块级元素和行内元素区别

块级元素的特点：

（1）总是从新行开始

（2）高度，行高、外边距以及内边距都可以控制。

（3）宽度默认是容器的100%

（4）可以容纳内联元素和其他块元素。

行内元素的特点：

（1）和相邻行内元素在一行上。

（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。

（3）默认宽度就是它本身内容的宽度。

（4）行内元素只能容纳文本或则其他行内元素。

4）行内块元素（inline-block）

在行内元素中有几个特殊的标签<img>、<input>、<td>,可以对它们设置宽高和对齐属性

行内块元素的特点：

（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。

（2）默认宽度就是它本身内容的宽度。

（3）高度，行高、外边距以及内边距都可以控制。

6、伪类和伪元素

1）、伪类

伪类可以用于文档状态的改变、动态的事件等，例如用户的鼠标点击某个元素、未被访问的链接。

:link伪类将应用于未被访问过的链接

:hover伪类将应用于有鼠标指针悬停于其上的元素。

:active伪类将应用于被激活的元素，如被点击的链接、被按下的按钮等。

:visited伪类将应用于已经被访问过的链接

:focus伪类将应用于拥有键盘输入焦点的元素。（ie8以上支持）

链接伪类，他们规定执行有顺序的，不能随便更改位置：

要按照 :link --> :visited --> :hover --> :active 的顺序。

2）伪元素

:first-line 和 :first-letter 伪元素只能用于块级元素

7、引入CSS样式表

1）行内式（内联样式）

是通过标签的style属性来设置元素的样式，其基本语法格式如下：

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容

语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。

2）内部样式表（内嵌式）

内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，

语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。

3）外部样式表（外链式）

链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中

注意： link 是个单标签哦!!!

该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：

-href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

-type：定义所链接文档的类型，在这里需要指定为“text/css”，表示链接的外部文件为CSS样式表。

-rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

4）导入式

导入式与链入式相同，都是针对外部样式表文件的。对HTML头部文档应用style标签，并在style标签内的开头处使用@import语句，即可导入外部样式表文件。其基本语法格式如下：

该语法中，style标签内还可以存放其他的内嵌样式，@import语句需要位于其他内嵌样式的上面。

---

8、CSS 三大特性

层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。

不是所有的CSS属性都可以继承，例如，下面的属性就不具有继承性：边框、外边距、内边距、背景、定位、元素高属性。

在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：

1、 继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。

2、行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。

3、权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。 -- CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

9、CSS 背景(background)

1）背景位置

（1）position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。

（2）如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。

2）背景附着

scroll : 　背景图像是随对象内容滚动

fixed : 　背景图像固定

10、盒子模型

CSS就三个大模块：盒子模型 、 浮动 、 定位

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

看透网页布局的本质：把网页元素比如文字图片等等，放入盒子里面，然后利用css摆放盒子的过程，就是网页布局。

1）表单的边框清零

因为表单边框颜色浏览器不同，样式不同，因此我们需要清零，自己定义样式和颜色，从而达到浏览器兼容效果。

input {border: 0;}

textarea {border: 0;}

2）表格的细线边框

table{ border-collapse:collapse; border-spacing: 0;}

border-collapse:collapse; 表示边框合并在一起。

border-spacing:px; 定义边框之间的间距。

这样就不用给表格指定 cellpadding 和 cellspacing

3）轮廓 outline

链接获得焦点 有虚线 和 文本框或者文本域获得焦点时，谷歌等浏览器有 蓝色边框，为了提高用户体验。

outline:none;

body a:focus {outline:none;}

textarea { outline: none; }

4）a:focus 和 a:active 区别

a:focus 获得焦点的时候 鼠标松开时显示的颜色

a:active 当前活动元素 鼠标在元素上按下还没有松开

5）外边距实现盒子居中

可以让一个盒子实现水平居中，需要满足一下两个条件：

（1）必须是块级元素。

（2）盒子必须指定了宽度（width）

然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

实际工作中常用这种方式进行网页布局，示例代码如下：

.header{ width:960px; margin:0 auto;}

6）清除元素的默认内外边距

为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距：

*{

padding:0; 清除内边距

margin:0; 清除外边距

}

注意： 行内元素是只有左右内外边距的，是没有上下内外边距的。

7）外边距合并

（1）相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

（2）嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

8）宽度和高度

盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和

盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和