CSS常用属性

CSS 背景

CSS 背景属性用于定义HTML元素的背景。
CSS 属性定义背景效果:
**background-color **
设置背景颜色，颜色值通常以下面几种方式定义：
十六进制 - 如："#ff0000"
RGB - 如：“rgb(255,0,0)”
颜色名称 - 如：“red”

h1
{
	background-color:#6495ed;
}
p
{
	background-color:#e0ffff;
}
div
{
	background-color:#b0c4de;
}

background-image
设置背景图片，通常以图片的链接方式定义值

body {
	background-image:url('paper.gif');
}

background-repeat
设置背景如何重复平铺，默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。
可设置以下几个属性值：
no-repeat 不平铺
x-repeat 只在水平方向上平铺
y-repeat 只在竖直方向上平铺

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

background-attachment
定义背景图片随滚动轴的移动方式，有以下几种属性值
scroll:默认值，背景图相对于元素固定，背景随页面滚动而移动，即背景和内容绑定。
fixed：背景图相对于视口固定，所以随页面滚动背景不动，相当于背景被设置在了body上。
local：背景图相对于元素内容固定，
inhert:继承

body
{
background-image:url('back.png');
background-attachment:fixed;
}

background-position
设置背景图像的起始位置

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

为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.
背景颜色的简写属性为 “background”:

body {background:#ffffff url('img_tree.png') no-repeat fixed right top;}

CSS文本

文本属性：
color 设置文本颜色

body{
	color:gray;
}

direction 设置文本方向
rtl:从右到左
ltr:从左到右
inhreit:继承

p{
	direction:rtl;
}

letter-spacing 设置字符间距

p{
	letter-spacing:normal;//默认间距为0		
}

line-height 设置行高
可设置具体值，也可设置字体大小的倍数

p{
	line-height：1.5;		
}

text-align 对齐元素中的文本

h1 {
text-align:center;
}//文本居中
p.date {
text-align:right;
}//向右对齐

text-decoration 向文本添加修饰

h1 {text-decoration:overline;}//上划线
h2 {text-decoration:line-through;}//中划线
h3 {text-decoration:underline;}//下划线
h4 {text-decoration:none;}

text-indent 缩进元素中文本的首行

p {text-indent:50px;}

text-shadow 设置文本阴影
三个值分别为，向右偏移长度，向下偏移长度，颜色

h1
{
    text-shadow: 2px 2px #ff0000;
}

text-transform 控制元素中的字母

p.uppercase {text-transform:uppercase;}//转为大写
p.lowercase {text-transform:lowercase;}//转为小写
p.capitalize {text-transform:capitalize;}//转为首字母大写其他小写

unicode-bidi 设置或返回文本是否被重写
normal 默认。不使用附加的嵌入层面
embed 创建一个附加的嵌入层面
bidi-override 创建一个附加的嵌入层面。重新排序取决于 direction 属性
initial 设置该属性为它的默认值
inherit 从父元素继承该属性

div
{
    direction:rtl;
    unicode-bidi:bidi-override;
}

vertical-align 设置元素的垂直对齐
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的底端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
length
% 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。

vertical-align:text-top;

white-space 设置元素中空白的处理方式
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的pre 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

p
{
    white-space:nowrap;
}

word-spacing 设置字间距

p{
	letter-spacing:2px;		
}

CSS字体

font-family
设置文本的字体系列

p{
	font-family:"Times New Roman",Georgia,Serif;
}

font-size
设置文本的字体大小
xx-small,x-small,small,medium,large,x-large,xx-large
把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。
默认值：medium。
smaller 把 font-size 设置为比父元素更小的尺寸。
larger 把 font-size 设置为比父元素更大的尺寸。
length 把 font-size 设置为一个固定的值。
% 把 font-size 设置为基于父元素的一个百分比值。
inherit 规定应该从父元素继承字体尺寸。

p{
	font-szie:14px;
}

font-style
设置文本的字体样式
normal 默认值。浏览器显示一个标准的字体样式。
italic 浏览器会显示一个斜体的字体样式。
oblique 浏览器会显示一个倾斜的字体样式。
inherit 规定应该从父元素继承字体样式。

p.normal {font-style:normal}
p.italic {font-style:italic}
p.oblique {font-style:oblique}

font-variant

设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小
normal 默认值。浏览器会显示一个标准的字体。
small-caps 浏览器会显示小型大写字母的字体。
inherit 规定应该从父元素继承 font-variant 属性的值。

p.small
{
font-variant:small-caps;
}

font-weight
指定字体的粗细
normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
100-900。

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

CSS 链接

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

CSS 列表

list-style
list-style 简写属性在一个声明中设置所有的列表属性。
可以设置的属性（按顺序）： list-style-type, list-style-position, list-style-image.
可以不设置其中的某个值，比如 “list-style:circle inside;” 也是允许的。未设置的属性会使用其默认值。
list-style-image
指定列表项标记的图像

ul{
	list-style-image:url('sqpurple.gif');
}

list-style-position
指定列表项标记的位置
inside或者outside

ul {
    list-style-position: inside;
}

list-style-type
指定列表项标记的类型
none 无标记。
无序列表标记：
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
有序列表标记：
decimal 标记是数字。
decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek 小写希腊字母(alpha, beta, gamma, 等。)
lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
hebrew 传统的希伯来编号方式
armenian 传统的亚美尼亚编号方式
georgian 传统的乔治亚编号方式(an, ban, gan, 等。)
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, 等。（日文片假名）

ul.circle {list-style-type:circle}
ul.square {list-style-type:square}
ol.upper-roman {list-style-type:upper-roman}
ol.lower-alpha {list-style-type:lower-alpha}

CSS 表格

表格边框

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

折叠边框
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开

table{
    border-collapse:collapse;
}
table,th, td{
    border: 1px solid black;
}