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;}
文本属性:
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;
}
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}
设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小
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;}
a:link - 正常,未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
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}
表格边框
table, th, td{
border: 1px solid black;
}
折叠边框
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开
table{
border-collapse:collapse;
}
table,th, td{
border: 1px solid black;
}