css样式读书笔记

地址: http://www.w3school.com.cn/css/index.asp

css样式

主要包括背景、文本、字体、连接、列表、表格、轮廓。

背景

所有的背景属性都不能继承。

背景色

可以用background-color为元素设置背景色。默认值为transparent。如果
元素没有指定background-color，那么背景透明，它的祖先背景才可见。

p{      background-color: gray;  }  

背景图像

可以用background-image为元素设置背景图像。默认值为none。如果元素
没有指定背景图像，表示背景上面没有放置任何图像。也可以用textareas和select来
实现背景替换。

body{    background-image: url(/i/test.png);}

背景重复

可以用background-repeat来对背景图像进行平铺。

属性值 描述 repeat-x x轴方向上平铺 repeat-y y轴方向上平铺 no-repeat 不允许图像在任何方向上平铺

body{    background-repeat:repeat-x;}

背景定位

可以用属性background-position来对图像进行定位。可以用关键字、百分数值、长度值三种方式来来设置。
* 关键字
关键字一般不超过2个，一个用来表示水平方向，一个用来表示垂直方向，如果只提供
一个关键字，另外一个默认为center。例如：top right表示右上角，top等价于top
center。

单一关键字 等价关键字 center center center top top center或center top bottom bottom center或center bottom left left center或center left right right center或center right

body{    background-image: url('/test/test.png');    background-repeat: no-repeat;    background-position: top;}

• 百分数值
  百分数值同事作用于元素和背景图像，例如：50%,50%表示图像的中心和元素的中心对齐。如下所示的例子表示中心对齐。

body{  background-image: url('test/test.png');  background-repeat: no-repeat;  background-position: 50%, 50%;}

• 长度值
  长度值表示图像相对于元素左上角的偏移。

body{  background-image: url('test/test.png');  background-repeat: no-repeat;  background-position: 50px, 100px;}

背景关联

文档长度超长的时候，滚动屏幕，背景图像也会随着滚动。当图像滚动到超过图像的位置的时候图像就会消失。可以设置background-attachment为fixed来表示图像相对可视区域固定，不会变化。默认值为scroll。

body{  background-image: url('test/test.png');  background-repeat: no-repeat;  background-attachment: fixed;}

小结

属性 描述 background 简写属性，作用将背景属性设置在一个声明中 background-attachment 背景属性是否固定或滚动 background-color 设置元素的背景颜色 background-image 设置图像为背景 background-position 设置背景的开始位置 background-repeat 设置背景是否或如何重复

文本

可以设置文本的颜色、字符间距、对齐文本、装饰文本、对文本进行缩进等。

缩进文本

使用text-indent来缩进文本。

p{  text-indent: 5em;}

• 使用负值
  可以实现悬挂缩进。对于一个段落来说使用了负值缩进，一般都会设置一个外边距或一些内边距，防止文本超出屏幕外去。

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

• 使用百分比
  使用百分比表示相对于缩进父元素的宽度的百分比。

div{  width: 500px;}p{  text-indent: -5em;  padding-left: 20%;}<div><p>this is a test.</p></div>

• 继承
  也可以使用父类的缩进。

div#inner{  text-indent: 10%;}p{  width: 200px;}<div id = "inner"> this is a div.<p>this is a test p.</p></div>

水平对齐

用text-align来表示，规定了元素的水平对齐方式。

值 描述 left 文本左对齐 right 文本右对齐 center 文本排列到中间 justify 两端对齐 inherit 规定从父元素继承text-align属性

字间隔

用word-spacing属性改变单词间的间隔。设置为0和normal的效果一样。默认值为normal。

p.spread{    word-spacing: 5px;}

值 描述 normal 单词间的标准间隔 length 定义单词间的固定空间 inherit 从父元素继承

字母间隔

用letter-spacing属性来表示。与word-spacing的区别在于：前者表示字符或字母间的间隔，后者表示单词间的间隔。值类似于word-spacing。

h1{  letter-spacing: 5px;}<h1>this is a test letter-spacing</h1>

字符转换

用text-transform属性来处理文本的大小写。

值 描述 none 默认值。保存原文中的大小写 uppercase 文本全部转为大写 lowercase 文本全部转为小写 capitalize 只对单词的首要字母大写

h1{  text-transform: uppercase;}

文本装饰

用text-decoration属性来表示文本的装饰。

值 描述 none 没有任何装饰 underline 对元素加下划线 overline 在文本的顶端加横线 link-throuth 在文本中加线贯穿 blink 文本闪烁

a{  text-decoration: none;}

处理空白符

用white-space来处理用户代理对源文档中的空格、换行和tab字符的处理。

值 空白符 换行符 自动换行 pre-line 合并 保留 允许 normal 合并 忽略 允许 nowrap 合并 忽略 不允许 pre 保留 保留 不允许 pre-wrap 保留 保留 允许

文本方向

用direction属性来表示文本方向。对于行内元素，只有unicode-bidi设置为embed或bidi-ovveride的时候，才会应用direction属性。

值 描述 ltr 从左到右显示文本 rtr 从右到左显示文本

小结

属性 描述 color 设置文本颜色 direction 设置文本方向 line-height 设置行高 letter-spacing 设置字符间距 text-align 对齐元素中的文本 text-decoration 向文本添加修饰 text-indent 缩进文本中的首行 text-shadow 设置文本阴影 text-transform 控制元素中的字母 unicode-bidi 设置文本方向 white-space 设置元素中的空白处理方式 word-spacing 设置字间距

css字体

使用字体

用font-family属性来表示字体。

p{  font-family:sans-serif;}

字体风格

用font-style属性来表示字体风格。

值 描述 normal 文本正常显示 italic 文本斜体显示 oblique 文本倾斜显示

italic是一种简单的字体，oblique是一种竖直文本的倾斜表示。两者在普通情况下没有区别。

字体变形

用font-variant属性设定小型大写字母。这种字母采用不同大小的大写字母。

值 描述 normal 默认标准字体 small-caps 浏览器显示小型大写字母 inherit 从父元素继承属性

p{  font-variant: small-caps;}

字体加粗

用font-weight属性来表示字体加粗。

值 描述 normal 默认标准字体 bold 粗体字符 bolder 更粗的字体 lighter 定义更细的字体 100~900 定义由细到粗的字体。400相当于normal, 700等同于bold inherit 从父元素继承属性

字体大小

用font-size用来设置字体的大小。默认大小为16px，同时1em=16px。

值 描述 xx small 字体尺寸 x small 字体尺寸 small 字体尺寸 medium 字体尺寸的默认值 large 字体尺寸 x large 字体尺寸 xx large 字体尺寸 smaller 比父元素更小的尺寸 larger 比父元素更大的尺寸 length 尺寸的固定值 % 基于父元素的一个百分比的值 inherit 从父元素继承属性

小结

属性 描述 font 简写属性。把所有属性写在一个描述中。 font-family 设置字体 font-size 设置字体大小 font-size-adjust 当首选字体不可用是，对替换字体进行智能描述（css2.1被删除） font-stretch 对字体进行水平拉伸（css2.1被删除） font-style 字体风格 font-variant 以小型大写字体或普通字体显示 font-weight 字体粗细

链接

链接设置属性基本同其他元素，但是他可以有4中状态来表示。

状态 描述 link 普通的、未被访问的链接 visited 用户已经访问的链接 hover 鼠标位于链接的上方 active 链接被点击的时刻

a:link, a:active {  background-color: red;}

列表

不是描述性的文本都可以认为是列表。

列表类型

用list-style-type属性来表示。例如：无序列表可能是旁边的原点，有序列表可能是数字或者是字母。

值 描述 none 无标记 disc 默认。标记是实心圆 circle 标记是空心圆 square 标记是实心方块 decimal 标记是数字 decimal-leading-zero 0开头的数字标记。（01，02,03等） lower-roman 小写的罗马字母 upper-roman 大写的罗马字母 lower-alpha 小写的英文字母 upper-alpha 大写的英文字母 lower-greek 小写的希腊字母 lower-latin 小写的拉丁字母 upper-latin 大写的拉丁字母 hebrew 传统的希伯来编号方式 armenian 传统的亚美尼亚编号方式 georgian 传统的乔治亚编号方式 cjk-ideographic 简单的表意数字 hiragana 标记是：a, i, u, e, o, ka, ki, 等。（日文片假名） katakana 标记是：A, I, U, E, O, KA, KI, 等。（日文片假名） hiragana-iroha 标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名） katakana-iroha 标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

列表项图像

用list-style-image属性来表示。

值 描述 url 图像的路径 none 默认。无图像显示 inherit 从父元素继承属性

p{  list-style-image: url(test.png);}  

列表标记位置

用list-style-position属性确定标志出现在元素内或者外。

值 描述 inside 列表标记项目放在文本内，且环绕文本根据标记对齐 outside 默认值。列表标记放在文本外，且环绕文本不根据标记对齐 inherit 从父元素继承属性

小结

属性 描述 list-style 简写属性。把所有属性写在一个声明中 list-style-image 将图像设置为列表项的标志 list-style-position 设置列表中列表标记项的位置 list-style-type 设置列表标记的类型

表格

边框

用border属性设置边框。

table{  border: 1px, solid, black;}

折叠边框

用border-collapse属性来设置边框的折叠。

值 描述 separate 默认值。边框会被分开，不会忽略boder-spacing和emptycells等 collapse 如果可能，边框会合并成单一边框，会忽略boder-spacing和emptycells等 inherit 从父元素继承属性

table{  border-collapse: collapse;}

表格的宽度和高度

分别用width和height来表示。

table{  width: 600px;  height: 400px;}

表格文本对齐方式

分别用text-align和vertical-align来表示水平对齐和垂直对齐方式。

table{  text-align: left;  vertical-align: top;}

表格内边距

用padding属性来表示。

td{  padding: 15px;}

表格颜色

用background-color和color来表示背景色和文本颜色。

th{  background-color: red;  color: white;}

表格标题

用caption-side属性来设置表格标题的位置。

值 描述 top 默认值。把标题放在表格上 bottom 把标题放在表格下 inherit 继承父元素属性

空白表格边框

用empty-cells属性来表示是否显示空白表格边框。

值 描述 hide 不在空白表格周围绘制边框 show 默认值。在空白表格周围绘制边框 inherit 继承父元素属性

表格布局算法

用table-layout属性来设置表格布局算法。

值 描述 automatic 默认值。列宽由单元格内容确定 fixed 表格宽度由表格宽度和列宽确定 inherit 继承父元素属性

小结

属性 描述 border-collapse 是否把表格边框合并成单一边框 border-spacing 设置分割单元格边框的距离 caption-side 设置表格标题的位置 empty-cells 是否显示表格中的空白单元格的边框 table-layout 设置显示单元、行和列的算法

轮廓

用outline属性来确定。绘制于元素周围的一条线，位于元素边缘的外围，可以起到突出元素的作用。

轮廓颜色

用outline-color属性来确定。

值 描述 color_name 规定的颜色名称。例如：red hex_number 16进制的颜色值。例如：#ffffff rgb_number rgb代码的颜色。例如：rgb(255, 0, 0) invert 默认值。控制颜色翻转，使元素在不同的背景下都可见 inherit 继承父元素属性

p{  outline-color: red;}

轮廓样式

用outline-style属性来表示。

值 描述 none 默认值。无轮廓 dotted 点状轮廓 dashed 虚线轮廓 solid 实线轮廓 double 双线轮廓。双线的宽度=ouline-width的宽度 groove 3D凹槽轮廓。所有3D轮廓，都取决于outline-color的值 ridge 3D凸槽轮廓 inset 3D凹边轮廓 outset 3D凸边轮廓 inherit 继承父元素属性

轮廓宽度

用outline-width属性来表示。

值 描述 thin 细轮廓 medium 中等轮廓 thick 粗轮廓 length 允许规定轮廓的粗细值 inherit 继承父元素属性

小结

属性 描述 outline 在一个属性中描述轮廓 outline-color 轮廓颜色 outline-style 轮廓样式 outline-width 轮廓宽度