CSS核心属性二

继承和嵌套问题：

嵌套问题：

块套行\块;p不能嵌套块状元素，只能嵌套行元素；块的宽度继承父元素的宽度：h1-h6,p,hr,ul,ol,dl,dt,dd,li,form

行套行, a不能套a,h标签不能嵌套h标签，行标签宽度与内容同宽:em,i,b,strong,br,img,a,input，img

行内块(置换元素):img input textarea select button,有宽高

行内标签特点：3、标签的换行会产生空格，不能支持宽高，可以支持左右的margin 不支持上下的margin；，可以正常支持左右的padding 上下的padding实际不占位置，但是可以把背景颜色撑开

继承的局限性

多数边框类属性，比如Padding（补白），Margin（边界），背景和边框的属性都是不能继承的。(border属性是用来设置元素的边框的，它没有继承性)

块状、内联元素可继承以下文本属性：letter-spacing、word-spacing、white-space、line-height、color、font-family、font-size、font-style、font-weight、text-decoration、text-transform.

注意：块状元素可继承：text-indent和text-align，作用在内部的行内元素上。行内元素不可继承：text-indent和text-align，没效果

若是想让行内元素进行text-align和text-indent，必须把属性设置在行内元素的父块内元素上。

行高有一个特性，垂直居中：

当单行文本的行高等于容器高时，可以实现单行文本在容器中的垂直方向居中

当单行文本的行高小于容器高时，可以实现单行文本在容器中的垂直以上方向（从上面出现）

当单行文本的行高高于容器高时，可以实现单行文本在容器中的垂直以下方向

列表元素可继承： list-style、list-style-type、list-style-position、list-style-image。

表格元素可继承：border-collapse。

font:font-size/line-height font-family

补充：background-position：属性设置背景图像的起始位置。bottom；第一个值是水平位置，第二个值是垂直位置

background：url() bottom right bottom是指背景片的底部距离当前元素底部的距离

把背景图放入不动的容器，负的值指的是把图片放在容器以外的位置开始，但容器只显示在容器中出现的

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

CSS核心属性

（一）背景

网页上有两种图片形式：插入图片、背景图；

插入图片：属于网页内容，也就是结构。

背景图：属于网页的表现，背景图上可以显示文字、插入图片、表格等。

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

background-position：属性设置背景图像的起始位置。

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

background：简写属性在一个声明中设置所有的背景属性。

网页上常用的图片格式（压缩图片）:

1).jpg：有损压缩格式，靠损失图片身的质量来减小图片的体积，适用于颜色丰富的图像;(像素点组成的，像素点越多会越清晰 );

2).gif：有损压缩格式，靠损失图片的色彩数量来减小图片的体积，支持透明，支持动画，适用于颜色数量较少的图像;

3).png：有损压缩格式，损失图片的色彩数量来减小图片的体积，支持透明，不支持动画，是fireworks的源文件格式，适用于颜色数量较少的图像;

（二）浮动

float：属性定义元素在哪个方向浮动。

（1）以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。（2）假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

（三）文本

font-size：可设置字体的尺寸。
1）为了减小系统间的字体显示差异，IE Netscape Mozilla的浏览器制作商于1999年召开会议，共同确定16px/ppi为标准

color：规定文本的颜色。

font-family：规定元素的字体系列

(1)此属性设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，将尝试下一种字体。

(2) 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体""Times New Roman"。

(3) 多个字体系列是用一个逗号分隔指明;

font-weight：设置显示元素的文本中所用的字体加粗

font-style：设置文本倾斜

text-align：设置文本水平对齐方式

line-height：属性设置行间的距离（行高）

大片密密麻麻的文字往往会让人觉得乏味，因此适当地调整行高(line-height)可以减低阅读的困难与枯燥，并且使页面显得美观。行高指的是文本行的基线间的距离，而基线（Base line），指的是一行字横排时下沿的基础线，基线并不是汉字的下端沿，而是英文字母x的下端沿。

行高有一个特性，叫做垂直居中性。

说明：

1）当单行文本的行高等于容器高时，可实现单行文本在容器中垂直方向居中对齐；

2) 当单行文本的行高小于容器高时，可实现单行文本在容器中垂直以上任意位置的定位；

3) 当单行文本的行高大于容器高时，可实现单行文本在容器中垂直中间以下任意位置的定位。

font-variant ：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小；

vertical-align：设置元素的垂直对齐方式。

font属性的简写：

说明:font的属性值应按以下次序书写(各个属性之间用空格隔开)

顺序: font-style | font-variant(小体大写字母) | font-weight | font-size / line-height | font-family

(1)简写时 , font-size和line-height只能通过斜杠/组成一个值，不能分开写。

(2) 顺序不能改变 ,这种简写法只有在同时指定font-size和font-family属性时才起作用,而且,你没有设定font-weight , font-style , 以及font-varient , 他们会使用缺省值。

font:font-size/line-height font-family

（四）边框

网页中很多修饰性线条都是由边框来实现的。

border-width：简写属性为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。

border-width:thin medium thick 10px;上右下左

border-width:thin medium thick;上左右下

border-width:thin medium;上下左右

border-width:thin;上下左右

border-color：设置边框颜色

border-color:red green blue pink;上右下左

border-color:red green blue;上左右下

border-color:red green;上下左右

border-color:red;上下左右

border-style：设置边框类型

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

dashed：定义虚线，在大多数浏览器中呈现为实线

double:定义双实线

groove定义3D凹槽边框

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

border-bottom：简写属性把下边框的所有属性设置到一个声明中。

border-top ：简写属性把上边框的所有属性设置到一个声明中。

border-left ：简写属性把左边框的所有属性设置到一个声明中。

border-right ：简写属性把右边框的所有属性设置到一个声明中。

例：border-right ：1px solid #000;

border-top/right/bottom/left-color

border-top/right/bottom/left-width

border-top/right/bottom/left-style

分别设置某一个方向上边框的颜色，类型，宽度

（五）列表

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

disc:圆状物 circle:空心圆

list-style-position：定义列表符号的位置

list-style-image：设置图片作为列表符号；

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

例如：list-style:circle inside

list-style：none;去掉列表符号

（五）css特性

CSS具有两个特性：层叠性和继承性。

层叠性：一个元素可能同时被多个css选择器选中，每个选择器都有一些css规则，这就是层叠。如：class=“wrapper w30”

CSS的处理原则是：

1）如果多个选择器定义的规则不发生冲突，则元素将应用所有选择器定义的样式。

2）如果多个选择器定义的规则发生了冲突，则CSS按选择器的特殊性(权重)让元素应用特殊性(权重)高的选择器定义的样式。

继承：所谓继承，就是父元素的规则也会适用于子元素。比如给body设置为color:Red;那么他内部的元素如果没有其他的规则设置，也都会变成红色。继承得来的规则没有特殊性。

CSS的继承贯穿整个CSS设计的始终，每个标记都遵循着CSS继承的概念。可以利用这种巧妙的继承关系，大大缩减代码的编写量，并提高可读性，尤其在页面内容很多且关系复杂的情况下。

继承的局限性

多数边框类属性，比如Padding（补白），Margin（边界），背景和边框的属性都是不能继承的。(border属性是用来设置元素的边框的，它没有继承性)

块状、内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font-family、font-size、font-style、font-weight、text-decoration、text-transform.

块状元素可继承：text-indent和text-align。行内元素的宽度是内容的大小，放在span中没效果

列表元素可继承： list-style、list-style-type、list-style-position、list-style-image。

表格元素可继承：border-collapse。

扩展：