本文共 3961 字，大约阅读时间需要 13 分钟。

3.4-3.6 CSS样式

3.4 CSS样式（1）文字样式

1.单位与颜色属性

css样式的常用单位

单位	描述
px	像素，1个字符—12px
em	1em—1个字符；2em—2个字符；自动使用用户所使用的字体 ；文本类型经常使用
%	百分比，相对父级

颜色

颜色	描述
red，blue，green	颜色名
rgb（x,x,x）	RGB值，每个颜色分量取值0-255，红色：rgb(255,0,0)
rgb（x%,x%,x%）	RGB百分值，0%-100%，红色：rgb(100%,0%,0%)
rgba（x,x,x,x）	RGB值，透明度，a值：0.0（完全透明）-1.0（完全不透明），红色半透明：rgb(255,0,0,0.5)
#rrggbb	十六进制数，红色：#ff0000;红色：#f00（当每两位取值相同的时候可以去掉重复位）

2.text属性

属性	描述	取值
color	文本颜色	red #f00 rgb(255,0,0)
letter-spacing	字符间距	2px -3px 4em
line-height	行高	14px 1.5em（1.5倍行高） 120%
text-align	对齐	center left right justify（两端对齐）
text-decoration	装饰线	none overline underline line-through
text-indent	首行缩进	2em

1.em是一个相对单位，相对于font-size，2em表示是font-size的两倍；

2.默认情况字号大小是16px，首行缩进设置为32px就是两个字符，当字号font-size变化，首行缩进text-indent的值也要设为font-size的两倍，这个用起来比较麻烦。

（1）字符间距letter-spacing

当字符间距设置为负的时候，每个字之间就会有重叠的部分。 （2）行高 line-height 利用行高属性垂直居中，将line-height的取值设置为元素的height值就会有垂直居中的效果，当line-height<height时，单行文本是靠上对齐，当line-height>height时，单行文本是靠下对齐；如果没有height值，就随便给一个值就可以，就会实现垂直居中的效果。 （3）对齐text-align（水平方向对齐） （4）装饰线text-decoration 我们常见的装饰线的应用： line-through属性：我们经常可以看到商品的价格中间有一条横线，就是这个属性设置的。 对于超链接，我经常不希望看到超链接的下划线，我们可以设置text-decoration的属性值为none，这样超链接就没有下划线了。

3.font属性

属性	描述	取值
font	在一个声明中设置所有的字体属性	font：bold 18px ‘幼圆’
font-family	字体系列	网页安全字体font-family:“Hiragino Sana GB”（没有连接线，中间是空格，用双引号引起来）,sans-serif（有连接线直接写）
font-size	字号	14px 120%
font-style	斜体	italic
font-weight	粗体	bold

如果将所有的关于字体样式的设置都设置在一个font属性里面的时候，有一个顺序：

3.5 CSS样式（2）背景、超链接样式

1.背景属性

（1）背景颜色：background-color （2）背景图片：background-image：url（“logo.jpg”）。url函数，参数在双引号（“”）之内，双引号里面就是要添加成背景图片的这个图片的完整路径和文件名。

如果同时添加了背景颜色和背景图片，背景图片会覆盖掉背景颜色，但是如果背景图片没有显示出来，背景颜色就会起作用。

如果我们做了一个空元素，就是这个元素只有标签，里面没有内容，这时我们要先定义元素的高度和宽度，然后背景颜色和背景图片的效果才能显示出来。

背景图片的特点：

A、背景图片默认是平铺的；

B、背景图片默认是不占位置的；

C、背景图片的显示范围由容器的大小决定。

（3）背景分量：background-repeat，表示背景图片的填充方式。有下面四种方式。

（a）属性值为repeat：背景图片在填充的时候，默认会在水平方向和垂直方向不断地重复这张图片，直到填充满整个页面，我们把这种默认填充方式称为棋盘格的填充，就是会用很多个背景图片在水平和垂直方向都依次排列开来，这时的属性值就是repea；一般设置background-repeat;no-repeat。 （b）属性值为repeat-x：单向填充，背景图片只在水平方向排列 （c）属性值为repeat-y；单向填充，背景图片只在垂直方向排列 （d）属性值为no-repeat：让一整幅图片作为背景出现，背景图片只显示一次，这个时候，我们就把这个值设置为no-repeat。 背景background：将上面所有的属性都设置到background这个属性里，设置的时候，按照背景颜色、背景图片、填充方式，这样的顺序。 （4）背景图片的位置：background-position：水平值 垂直值；水平的取值有：left、righ、center或者具体的数值；垂直的取值有：top、bottom、center或者具体的数值。 （5）背景图片的大小：background-size：横向值 纵向值；background-size：cover；背景图可以沾满容器，但是部分背景图会显示不出来。 （6）背景图的依附设置：background-attachment：fixed；背景图的固定

2.超链接

超链接的四种状态： a:link 普通的、未被访问过的链接 a:visited 用户已访问过的链接 a:hover 鼠标指针位于链接上方悬停 a:active 活动的超链接，链接被点击时刻。例如某个超链接是下载文件，在下载文件的整个过程，都属于活动的超链接。 如果要设置任何状态下的超链接的样式，直接设置a标签作为样式对的名字，然后设置属性值就可以了。

注意：a:hover必须位于 a:link 和 a:visited 之后进行样式的设置 a:active 必须位于 a:hover 之后进行样式的设置 常见的应用：当鼠标悬停在文字上面的时候，文字有一个放大的效果。需要设置的就是，文字原来的大小和鼠标悬停在文字上面是文字的大小。

3.6 CSS样式（3）列表、表格样式

1.列表

无序列表和有序列表共用样式

属性	描述
list-style	所有用于列表对的属性，设置与一个声明中
list-style-image	为列表项标志设置图像
list-style-position	标志的位置
list-style-type	标志的类型

（1）标志的类型：list-style-type

（2）标志的位置：list-style-position

.inside{
   		list-style-position: inside; 		}

inside和outside的区别：inside设置的列表的标号是向右缩进到列表区域内；

outside设置的列表的标号是突出在列表的左侧。

（3）为列表项设置图像：list-style-image，采用url函数设置，url（“图片的相对位置和图片名”）。 2.表格 （1）表格大小：weight属性和height属性。 （2）表格边框： border属性； border-collapse属性：表格边框和单元格边框重叠。

table,tr,td{
   		border: 1px solid black;		/* border-collapse: collapse;  */	}

当border-collapse属性注释掉之后的显示效果

当border-collapse属性没有注释时的显示效果 （3）奇偶选择器：通常为了方便观看，把表格的相邻两行设置成不同的颜色，就是单行显示一个颜色，双行显示一个颜色。前面写上选择器的名字，然后冒号（：）nth-child（），括号里面可以是数字，也可以是odd表示奇数，或者even表示偶数。

tr:nth-child(odd){
   		background-color: blue;	}

上面代码的意思就是：选择器名字tr，odd表示表格的奇数行，然后设置的颜色就是奇数行显示的颜色。

例如下面： HTML部分表格代码： CSS部分表格样式代码：设置奇数行显示为蓝色；然后表格的宽高均为200px；最后表格的边框为1px大小的实线黑色，并且表格的边框和单元格边框重叠显示。 最终显示的效果：奇数行显示为设置的蓝色，偶数行默认颜色；表格边框与单元格边框重叠。 sublime的基本操作： 1.形成链接样式表文件：link：css，然后tab扩展 2.生成带有id属性的标签的生成：输入标签名字，后面写上id属性的取值；即div#nav 3.生成带有class属性的标签的生成：输入标签名字，后面写上class属性的取值；即div.bar 4.同时生成带有id属性和class属性的标签：div#nav.bar 5.快速生成css属性，宽度30像素：w30；高度30像素：h30；margin属性10像素：mg10；padding属性5像素：pd5；line-height属性2个字符：lh2em；background-color属性：bgc,生成默认颜色#fff，然后进行修改

转载地址：http://cpqzi.baihongyu.com/