HTML 样式
时间:2014-01-12 23:05 来源: 翻译器在线 作者:hi
为什么需要CSS样式表
1、HTML标签的外观样式比较单一
–颜色只有黑白
–字体类型和大小无变化
2、样式表的作用相当于华丽的衣
3、样式表能实现内容与样式的分离，方便团队开发
样式表的基本结构
|
<STYLE type="text/css"> P {color:red; font-size:30px; font-family:隶书;} …… </STYLE> |
样式规则：P {color:red; font-size:30px; font-family:隶书;}
常用的样式属性（文本属性）
| font-size | 字体大小 |
| font-family | 字体类型 |
| font-style | 字体样式，取值：normal| italic| oblique| inherit |
| color | 设置或检索文本的颜色 |
| text-align | 文本对齐 |
| font-weight | 字体粗细 ，取值：normal| bold| bolder| lighter |
| text-decoration | 文本装饰 ，取值：none| underline| overline| line-through| blink |
背景属性
| background-color | 背景颜色 |
| background-image | 背景图像，使用url(“”) |
| background-repeat |
背景图像铺排方式， 取值：repeat | no-repeat | repeat-x | repeat-y |
| background-repeat |
背景图像是随对象内容滚动还是固定的， 取值：scroll | fixed | inherit |
| background-position |
背景图像位置 取值：left | center | right | top | center | bottom |
方框属性
| 边界属性 | margin-top | 设置对象的上边距 |
| margin-right | 设置对象的右边距 | |
| margin-bottom | 设置对象的下边距 | |
| margin-left | 设置对象的左边距 | |
|
边框属性 |
border-style | 设置边框的样式 |
| border-width | 设置边框的宽度 | |
| border-color | 设置边框的颜色 | |
|
填充属性 |
padding-top | 设置内容与上边框之间的距离 |
| padding-right | 设置内容与右边框之间的距离 | |
| padding-bottom | 设置内容与下边框之间的距离 | |
| padding-left | 设置内容与左边框之间的距离 |
伪类属性
| a:link | 未被访问前的样式 |
| a:hover | 鼠标悬停时的样式 |
| a:active | 被用户激活(在鼠标点击与释放之间发生的事件)时的样式 |
| a:visited | 已被访问过时的样式 |
样式表的基本语法
1、id样式(id)
<STYLE type="text/css">
#red {
color:red; font-family:"隶书"; font-size:24px;
}
……
</STYLE>
2、群组选择器
p, .tr, #red {
color:red; font-family:"隶书"; font-size:24px;
}
3、后代选择器
<STYLE type="text/css">
#table1 tr {
color:red; font-family:"隶书"; font-size:24px;
}
……
</STYLE>
4、通配选择符
* {
color:red; font-family:"隶书"; font-size:24px;
}
内嵌样式表
内嵌样式表使用格式如下：
|
<HEAD> <STYLE type="text/css"> 样式规则 </ STYLE> </HEAD> |
HTML样式举例
|
<STYLE type="text/css"> P { font-family:"隶书"; font-size:18px; color:#FF0000; } </STYLE> </HEAD> …… <P>床前明月光，</P> <P>疑是地上霜。</P> <P>我是郭德刚，</P> <P>低头思故乡。</P> …… |
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-