CSS属性

1、css背景

背景色

使用 background-color 属性为元素设置背景色

例子：p {background-color: gray; padding: 20px;}

pading：内边距

可以为所有元素设置背景色，这包括 body 一直到 em 和 a 等行内元素。

background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。

背景图像

使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。

如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：

body {background-image: url(/i/eg_bg_04.gif);}

大多数背景都应用到 body 元素，不过并不仅限于此。

下面例子为一个段落应用了一个背景，而不会对文档的其他部分应用背景：

p.flower {background-image: url(/i/eg_bg_03.gif);}

您甚至可以为行内元素设置背景图像，下面的例子为一个链接设置了背景图像：

a.radio {background-image: url(/i/eg_bg_07.gif);}

理论上讲，甚至可以向 textareas 和 select 等替换元素的背景应用图像，不过并不是所有用户代理都能很好地处理这种情况。

另外还要补充一点，background-image 也不能继承。事实上，所有背景属性都不能继承。

背景重复

如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性，默认插入图片就为平铺。

属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。

例子：

body

{

background-image: url(/i/eg_bg_03.gif);

background-repeat: repeat-y;

}

背景定位

可以利用 background-position 属性改变图像在背景中的位置。

下面的例子在 body 元素中将一个背景图像居中放置：

body

{

background-image:url('/i/eg_bg_03.gif');

background-repeat:no-repeat;

background-position:center;

}

为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。

关键字

图像放置关键字最容易理解，其作用如其名称所表明的。例如，top right 使图像放置在元素内边距区的右上角。

根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向。

如果只出现一个关键字，则认为另一个关键字是 center。

所以，如果希望每个段落的中部上方出现一个图像，只需声明如下：

p

{

background-image:url('bgimg.gif');

background-repeat:no-repeat;

background-position:top;

}

分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中，这很容易：

body

{

background-image:url('/i/eg_bg_03.gif');

background-repeat:no-repeat;

background-position:50% 50%;

}

这会导致图像适当放置，其中心与其元素的中心对齐。换句话说，百分数值同时应用于元素和图像。也就是说，图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐。

如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。

因此，如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处，可以这样声明：

body

{

background-image:url('/i/eg_bg_03.gif');

background-repeat:no-repeat;

background-position:66% 33%;

}

如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。这一点与关键字类似。

background-position 的默认值是 0% 0%，在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺，除非您设置了不同的位置值。

长度值

长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。

比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：

body

{

background-image:url('/i/eg_bg_03.gif');

background-repeat:no-repeat;

background-position:50px 100px;

}

注意，这一点与百分数值不同，因为偏移只是从一个左上角到另一个左上角。也就是说，图像的左上角与 background-position 声明中的指定的点对齐。

定位p标签的第二个子元素，防止用nth-child（）因为div其他标签使设置的样式发生占位事件

背景关联

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。

您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：

fixed是固定在浏览器窗口里面，固定之后就相对于浏览器窗口了。

body

{

background-image:url(/i/eg_bg_02.gif);

background-repeat:no-repeat;

background-attachment:fixed

}

background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。

background-size

背景图简写:background：1 2 3 4

background: hsl(200(色相),100%(饱和度),50%（亮度)） url(图片地址)  no-repeat center top;

2、CSS文本

①、文本大小 font-size

说明：

    1） 属性值为数值型时，必须给属性值加单位，属性值为0时除外。

    2）单位还可以是pt，9pt=12px;

    3）为了减小系统间的字体显示差异，IE Netscape Mozilla的浏览器制作商于1999年召开会议，共同确定16px/ppi为标准字体大小默认值,即1em.默认情况下，1em=16px（网页默认为16px）,0.75em=12px;

    4）使用绝对大小关键字

         xx-small =9px

         x-small =11px

         small =13px

         medium =16px

         large =19px

         x-large =23px

         xx-large =27px

引入字体和使用字体

②、文本颜色 color

说明：

用十六进制(是计算机中数据的一种表示方法)表示颜色值：

    0 1 2 3 4 5 6 7 8 9

    0 1 2 3 4 5 6 7 8 9 A B C D E F

颜色模式：光色模式

    R（红） G（绿） B（蓝）

    ff ff 00

颜色值的缩写：

    当表示三原色的三组数字同时相同时，可以缩写为三位;

    当用十六进制表示颜色值时，需要在颜色值前加“#”

    # 00 ff 00  

#fff为白，#000为黑

③、文本类型 font-family:字体1，字体2，字体3......

说明：

    浏览器首先会寻找字体1、如存在就使用改字体来显示内容，如在字体1不存在的情况下，则会寻找字体2，如字体2也不存在，按字体3显示内容，如果字体3 也不存在；则按系统默认字体显示；

    当字体是中文字体时，需加双引号；

    当英文字体中有空格时，需加双引号如（“Times New Roman”）

    当英文字体只有一个单词组成是不加双引号；如：（Arial）；

    Windows中文版本操作系统下，中文默认字体为宋体或者新宋体，英文字体默认为Arial.

④、文字加粗font-weight:bolder(更粗的)/bold（加粗）/normal（常规）/100—900;

说明：

在css规范中，把字体的粗细分为9个等级，分别为100——900，其中100对应最轻的字体变形，而900对应最重的字体变形，

100-300细 400-500常规字体 600-900加粗字体

⑤、font-style：italic/oblique/normal（取消倾斜，常规显示）;

说明：<i>99</i>元

italic和oblique都是向右倾斜的文字, 但区别在于Italic是指斜体字，而Oblique是倾斜的文字（更倾斜），对于没有斜体的字体应该使用Oblique属性值来实现倾斜的文字效果.

⑥、文字行高 {line-height:normal/value;}

说明：

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

当单行文本的行高小于容器高时，可实现单行文本在容器中垂直中线齐以上；

当单行文本的行高大于容器高时，可实现单行文本在容器中垂直中线齐以下（IE6及以下版本存在浏览器兼容问题）

*文字属性简写：font: 12px/24px "宋体";

font属性的简写：字号，行高，字体

font-size:12px; line-height:24px; font-family:”宋体”；

font属性的简写：

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

顺序: font-style font-weight font-size / line-height font-family

注意：

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

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

⑦、水平对齐方式

text-align:left/right/center/ justify（两端对齐只支持英文，中文不起作用）

⑧、文本修饰

text-decoration:

说明：可以用于修饰超链接文本

    none:没有修饰

    underline:添加下划线

    overline:添加上划线

    line-through:添加删除线

⑨、首行缩进

1）text-indent：2em;可以取负值；推荐单位em

2）text-indent属性只对第一行起作用。

缩进文本

CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。

注意：一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。

提示：如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。

使用负值

可通过赋予text-indent负值来实现 “悬挂缩进”，即第一行悬挂在元素中余下部分的左边

不过在为 text-indent 设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距：

p {text-indent: -5em; padding-left: 5em;}

使用百分比值

text-indent 可以使用所有长度单位，包括百分比值。

百分数要相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为 20%，所影响元素的第一行会缩进其父元素宽度的 20%。

在下例中，缩进值是父元素的 20%，即 100 个像素：

div {width: 500px;}

p {text-indent: 20%;}

<div>

<p>this is a paragragh</p>

</div>

⑩、字间距、词间距

字间距{letter-spacing:value;}控制英文字母或汉字的字距。

词间距{word-spacing:value;}控制英文单词词距

过渡：过度属性 过渡花费时间 过渡延时

例子：transition:all 1s 3s

⑪、控制字母大小写

text-transform:

none    默认。定义带有小写字母和大写字母的标准的文本。

capitalize    文本中的每个单词以大写字母开头。

uppercase    定义仅有大写字母。

lowercase    定义无大写字母，仅有小写字母。

inherit    规定应该从父元素继承 text-transform 属性的值。

3、列表属性

①、定义列表符号样式

list-style-type：disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号)；

list-style-type:none===list-style:none;

②、使用图片作为列表符号

list-style-image：url(所使用图片的路径及全称)；

③、定义列表符号的位置

list-style-position:outside(外边)/inside(里边)；

④、简写

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

CSS属性继承

不可继承的：display、margin、border、padding、background、height、min-height、max-height、、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align

所有元素可继承：visibility和cursor。

内联元素可继承：letter-spacing、word-spacing、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform。

块状元素可继承：text-indent和text-align

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

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

cursor 属性

改变鼠标光标