CSS2 基础
background 背景
css 背景
- background-color 元素的背景颜色
- background-image 元素的背景图像
- background-repeat 页面的水平或者垂直方向平铺
- background-position 设置定位与不平铺
- background-attachment 设置定位与不平铺
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
背景简写 (简写顺序)
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
body {background:#ffffff url('img_tree.png') no-repeat right top;}
文本格式
文本颜色
- color: #ccc
- 十六进制 如: #FF0000
- RGB值 如: RGB(255,0,0)
- 代号 如: red
文本对齐方式
text-align: center
- center 居中
- right 右
- left 左
- justify 每一行宽度相等
文本修饰
text-decoration 设置或者擅长文本的装饰
- overline上划线
- line-through 中间线
- underline 下划线
a {text-decoration:none;}
文本缩进
text-index 用于指定文本的第一行缩进
p {text-indent:50px;}
文本转换
text-transform
- uppercase 首字母大写
- lowercase 首字母小写
- capitalize 每个单词的首字母大写
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
字体
可设置的属性是(按顺序): "font-style font-variant font-weight font-size/line-height font-family"
p.ex2
{
font:italic bold 12px/30px Georgia, serif;
}
字体系列
font-family 属性设置文本的字体系列。
p{font-family:"Times New Roman", Times, serif;}
字体样式
ont-style 主要是用 于指定斜体文字的字体样式属性。
- 正常 - 正常显示文本
- 斜体 - 以斜体字显示的文字
- 倾斜的文字 - 文字向一边倾斜(和斜体非常类似,但不太支持)
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
字体大小
font-size 属性设置文本的大小。
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
文本的粗细
font-weight 属性设置文本的粗细
- normal
- bold
- bolder
- lighter
- 0-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;} /* 鼠标点击时 */
列表
不同的列表项标记
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
作为列表项标记的图像
ul
{
list-style-image: url('sqpurple.gif');
}
移除默认设置
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
表格
使用 CSS 可以使 HTML 表格更美观。
表格边框
指定CSS表格边框,使用border属性。
table, th, td
{
border: 1px solid black;
}
折叠边框
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开:
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
表格宽度和高度
Width和height属性定义表格的宽度和高度。
table
{
width:100%;
}
th
{
height:50px;
}