CSS

CSS(cascading style sheet，层叠样式表)是描述文档怎么样被呈现的语言，使用CSS可以对HTML文档进行描述。

html:素颜

css：化妆

CSS在网页中的使用

1）内联式 style=“css”

每个HTML元素都包含有一个style属性，使用该属性可以直接指定样式

<开始标签1  style=“样式名1:值1;样式名2：值2”>

<开始标签2  style=“样式名1:值1;样式名2：值2”>

存在问题：

1.不方便修改

2.结构与显示不能很好的分离

3.建议在测试或个别情况下使用

2）嵌入式

CSS样式定义内容位于style元素之间，其type属性必须被定义为text/css,可以让不同网页位置的文字等内容有统一的格式。(同一个网页，不同的元素)

代码的前面（实际开发中也是这么写的）。后设置的离目标属性更近，会覆盖前面设置的，总结就是：就近原则。

注：指其他条件都一样的情况下（权值）

4. CSS基本语法规则

选择器{css属性1:css值1; css属性2:css值2;}

1）选择器

用于选择html中的元素

标签选择器（html选择器）

即html标签，任何一个HTML元素的标签名都可以是css的选择器

p{ text-indent:10px}  /段落第一行缩进10像素/

h1{ color:red}

类选择器

class属性

.类名(类名不能使用数字开头，不能使用关键字来命名)

.rr{ color :red}

使用class属性来调用类名称

one

two

three

ID选择器

id属性

#id名

#two{

background-color:green;

}

id不可重复

one

two

three

子选择器

使用大于符号（>），用于选择指定元素中符合条件的第一代子元素。

.p1>span

#d1>.p1

后代选择器（包含选择器）

用一个空格隔开的两个或者多个单一选择器组成的字符串

它们的优先级比单一的选择器大。用于选择指定元素中符合条件的所有后代元素。

table a{color:red}

定义了table中的a样式，而对table外的a样式不做改变

通用选择器

使用符号*指定，作用是匹配html中所有的标签元素。

*{color:red;}

组合选择器

使用逗号,隔开选择器，可以减少样式表的重复声明

h1,h2,h3,h4{color:red}

伪元素选择器（伪类选择器）

允许给html不存在的标签，对同HTML元素的不同状态设置样式。

HTML标签:伪元素{}

a:link{color:gray;} 超链接没有任何动作前的状态

a:hover{…} 光标移动到超链接上的状态

a:active{} 选中超链接时的状态

a:visited{} 访问过超链接的状态

text-decoration:none  去掉下划线

继承：

CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。

比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。

p{color:red;}

文本属性可以被继承。

span中的文字也会显示红色

/* 当然不是所有的CSS属性都有继承性，文本属性（color、font、line-height、text-align…）是具有继承性的，而自身属性（width、height、margin、padding、border、background）和显示属性(display、position、float、list-style)是不具有继承性的（等…）。*/

2）选择器优先级

多个CSS选择器同时作用于同一个html时，如果声明的是相同的属性，则以优先级高的为主。

p{color:red;}

.first{color:green;}

css优先级判断。

p和.first都匹配到了p这个标签上，那么会显示哪种颜色呢？green是正确的颜色，那么为什么呢？是因为浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。

下面是权值的规则：

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：

p{color:red;} /权值为1/

p span{color:green;} /权值为1+1=2/

.warning{color:white;} /权值为10/

p span.warning{color:purple;} /权值为1+1+10=12/

#footer .note p{color:yellow;} /权值为100+10+1=111/

内联样式，如: style=””，权值为1000。通配符、子选择器、相邻选择器等的。虽然权值为0000，但是也比继承的样式优先。

这里的文字hello

结果是  这里的文字  是蓝色，hello显示为红色。

.blue是类选择器，所以“这里的文字”权值为10，最大。“hello”为继承，但通用选择器也定义了“hello”，因为继承的权值最低，所以显示的是通用选择器定义的红色。

内嵌式

关联选择器(后代，子代，组合(且))

ID选择器

类选择器

HTML选择器

层叠：当权值相同时，后者覆盖前者，就近原则

重要性：当有特殊的情况，需要为某些样式设置具有最高权值的时候我们可以使用!important来解决。拥有最高权重。

p{color:red!important;}

p{color:green;}

你好最高权值!important。

p 段落中的文本会显示的red红色。

注意：!important要写在分号的前面

3）样式

样式是零个或多个以分号分割的【属性名：属性值】列表

4）规则集

选择器 样式

选择器{属性名:属性值;属性名:属性值}

5）注释

/*

注释内容

*/

5.css盒模型

1）元素分类。

1.1常用的块状元素有：

、

、

...

、

1. 、
   • 、

     、、

     、

     、

块级元素特点：

①每个块级元素都从新的一行开始，并且其后的元素也另起一行。（比较霸道，一个块级元素独占一行

②元素的高度、宽度、行高以及顶和底边距都可设置。

③元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

设置display:block就是将元素显示为块级元素,如:a{display:block;}

1.2常用的内联元素有：

、、
、、、、、、、、

内联元素特点：

①和其他元素都在一行上；

②元素的高度、宽度不可设置；

③元素的宽度就是它包含的文字或图片的宽度，不可改变。

块状元素可以通过代码display:inline将元素设置为内联元素,如div{display:inline;}

1.3常用的内联块状元素有：

、

内联-块状元素特点：

①和其他元素都在一行上；

②元素的高度、宽度、行高以及顶和底边距都可设置。

同时具备内联元素、块状元素的特点。

display:inline-block就是将元素设置为内联块状元素,如a{display:inline-block;}

2)盒模型

margin，border，padding

盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。

因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。高度也是一样。

div+css

div+css是一种网页的布局方法。

标签div span无特殊含义，配合css才具有特殊的样式

网页就是由许多个盒子通过不同的排列方式堆积而成，网页上每个元素都被浏览器看成是一个矩形的盒子，这个盒子由元素的内容，填充，边框，边界组成。默认盒子边框无，背景色透明，默认看不到盒子

2.1 盒子模型

margin  外边距，定义区块外边界与上级元素距离的属性，值为长度

padding 内边距（填充），是设置区块的内边距的属性，边框和元素内容之间的间隔距离

border  边框，在一个声明设置所有的边框属性。

width   盒子的宽度

height  盒子的高度

内容 盒子里面所包含的元素和内容

margin、padding、border的top、right、bottom、left的缩写：

1个：上下左右都是该值

2个：前者表示上下的值，后者表示左右的值

3个：前者表示上边的值，中间表示左右的值，后者表示下边的值

4个：上右下左，顺时针排序

2） 不同浏览器解析盒子模型的差异：

IE5盒子  width = 内容 + border + padding

盒子占据的宽度 = margin*2+width

盒子占据的高度 = margin*2+height

盒子实际的宽度 = width

盒子实际的高度 = height

W3C盒子 width = 内容

盒子占据的宽度 = margin2+border2+padding*2+width

盒子占据的高度 = margin2+border2+padding*2+height

盒子实际的宽度 = border2+padding2+width

盒子实际的高度 = border2+padding2+height

3）其他属性

border-width 边框高度

border-color 边框颜色

border-style 边框样式

none 无样式

dotted 点线

dashed 虚线

solid 实线

double 双线

groove 槽线

ridge 脊线

inset 内凹

outset 外凸

4）关于填充和边框的常见问题

1. 大部分的html元素的盒子属性（margin,padding）默认值为0，有少数html元素的（marigin，padding不为0）例如：body,p,ul,li,form等标签，有时需要将其先设置为0

2. 相邻两个兄弟元素的外边框会发生合并，一般布局会设定他们的外边距

3. 如果没有设置父级元素的内边距或边框，那么它的子元素的边界会和其合并。

4. 设置一个块元素居中： margin:0 auto;

5. margin可以设置负值，padding不可以设置

6. 行内元素的margin值，只有左右值，没有上下值

7. 基本布局模型

在网页中，元素有三种布局模型：

1、流动模型（Flow）

流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

特点：

①块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%，也就是独占一行。

②内联元素都会在所处的包含元素内从左到右水平分布显示。

2、浮动模型 (Float)

任何元素都可以浮动，可以改变普通文档流的排列方式，可以使得块元素在同一行中排列，使我们的布局更加方便，浮动是脱离文档流的，也就是其他元素视而不见。

float：left/right

浮动何时停止？

1. 当遇到一个浮动元素后

2. 当遇到父级元素后

多个盒子都浮动后，就产生了块级元素水平排列的效果

多个浮动元素不会相互覆盖

若包含的容器太窄，无法容纳水平排列的多个浮动元素，那么最后的浮动盒子会向下移动，但如果浮动元素的高度不同，那么它们向下移动时可能会被卡住

清理浮动

clear

left 在左侧不允许浮动元素

right 在右侧不允许浮动元素

both 在左右两侧均不允许浮动元素

margin上下值在行布局时共用，浮动后不再共用

3、层模型（Layer）

让html元素在网页中精确定位。position

定位属性：

绝对定位 position:absolute

是元素完全脱离文档流，将其从文档流中拖出来，页面中的其他元素视它不存在，绝对定位元素不会影响到其他元素。使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位，如果父级（祖级）不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

相对定位 position:relative

参照元素原来的位置进行移动，元素原来所在的空间位置保留不变，下面的元素不会填充上来，元素在移动后会覆盖其他元素，参考浮动。

固定定位 position:fixed

将元素固定在窗口（屏幕视图）中的某个位置，绝对定位是相对于元素的，固定定位是相对于窗口的，由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，随着窗口的移动而移动。在低版本IE中不支持该属性。

默认定位 position:static

默认属性，指定了元素按照常规的文档流进行定位，静态定位元素不允许使用top,left和类似其他属性定位。position的值为static为非定位元素，为其他值时候为定位元素。

CSS常见的样式属性和值

1）CSS 尺寸属性

height 设置元素高度。

width 设置元素的宽度。

max-height 设置元素的最大高度。

max-width 设置元素的最大宽度。

min-height 设置元素的最小高度。

min-width 设置元素的最小宽度。

2） 字体属性

font-family字体族科

宋体 SimSun 黑体 SimHei

微软雅黑 Microsoft YaHei

微软正黑体 Microsoft JhengHei

新宋体 NSimSun

新细明体 PMingLiU

细明体 MingLiU

标楷体 DFKai-SB

仿宋 FangSong

仿宋_GB2312 FangSong_GB2312

楷体_GB2312 KaiTi_GB2312

不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。

font-size 字体大小

font-style 字体风格

normal 正常;      italic  斜体;        oblique  倾斜

font-weight字体加粗

normal  正常;       bold  粗体;          bolder 更粗;      lighter  更细

text-decoration 规定添加到文本的修饰 ：

none 默认。定义标准的文本。

underline 定义文本下的一条线。

overline 定义文本上的一条线。

line-through定义穿过文本下的一条线。

blink 定义闪烁的文本。

段落文本格式（p标签）

段落缩进：text-indent:2em;    2em意思就是文字的2倍大小。

行间距：line-height:1.5em;    1.5em段落行间距为1.5倍。

文字间隔或字母间隔：letter-spacing：2px;

英文单词之间间距：word-spacing:50px;

块状元素中的文本/图片居中:

text-align:center; /left/right

3） 颜色

color 设定文本的颜色

opcity 设置透明度

所有浏览器都支持 opacity 属性。

注释：IE8 以及更早的版本支持替代的 filter 属性。

例如：filter:Alpha(opacity=50)。

一般两个属性一起写，保证兼容性

opacity：0.5;

filter:Alpha(opacity=50)

4） 背景

设置元素的背景颜色。background-color:#CCC;

background-image

设置元素的背景图像。

url(bgimage.gif);

background-repeat

设置是否及如何重复背景图像。

repeat 默认。背景图像将在垂直方向和水平方向重复。

repeat-x 背景图像将在水平方向重复。

repeat-y 背景图像将在垂直方向重复。

no-repeat 背景图像将仅显示一次。

inherit 规定应该从父元素继承 background-repeat 属性的设置。

background-attachment

设置背景图像是否固定或者随着页面的其余部分滚动。

fixed 固定

scroll 滚动

background-position

设置背景图像的开始位置。这个属性设置背景原图像（由 background-image 定义）的位置， 背景图像如果要重复，将从这一点开始。您需要把 background-attachment属性设置为 “fixed”，才能保证该属性在 Firefox 和 Opera 中正常工作。

横向关键字： left center right

纵向关键字： top center bottom

百分比：

左上角是 0% 0%。右下角是 100% 100%。

background

简写属性在一个声明中设置所有的背景属性。如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url(‘smiley.gif’); 也是允许的。

5） 边框属性

border-style  设置4个边框的样式

dotted 定义点状边框。在大多数浏览器中呈现为实线。

solid 定义实线。

double 定义双线。

none 定义无边框

…

如果4个值都给定了，分别应用于上，右，下;

左如果给定1个值，应用于各边;

如果给定2个值，第一个值应用于上下边，第二个值应用于左右边

border-width  设置4个边框的宽度

值为关键字或者长度  medium,thin,thick

border-color  设置边框颜色

border  在一个声明设置所有的边框属性。

border:1px solid #ff0000

6） 鼠标光标属性

cursor 属性规定要显示的光标的类型（形状）。

none 无

auto 默认。浏览器设置的光标。

pointer 光标呈现为指示链接的指针（一只手）

wait 此光标指示程序正忙（通常是一只表或沙漏）。

help 此光标指示可用的帮助（通常是一个问号或一个气球）。

7） 列表属性

list-style 在一个声明中设置所有的列表属性。

list-style: squalistre inside url(’/i/eg_arrow.gif’)

list-style-image 将图象设置为列表项标记。

list-style-image:url("/i/arrow.gif");

list-style-position 设置列表项标记的放置位置。

inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。

outside 默认值。保持标记位于文本的左侧。列表项目标

记放置在文本以外，且环绕文本不根据标记对齐。

list-style-type 设置列表项标记的类型。

none 无标记。

disc 默认。标记是实心圆。

circle 标记是空心圆。

square 标记是实心方块。

decimal 标记是数字。

ower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)

upper-roman 大写罗马数字(I, II, III, IV, V, 等。)

lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)

upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)

lower-latin 小写拉丁字母(a, b, c, d, e, 等。)

upper-latin 大写拉丁字母(A, B, C, D, E, 等。)