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	轮廓宽度