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