<STYLE>
中间包含3部分:选择器(selector),属性(property),属性的值(value)
</STYLE>
例如
<STYLE type="text/css">
P{
color:red;
font-size:30px;
font-family:隶书;
}
</STYLE>
选择器P定义了<P>标签的样式。所以用<P>标签的段落,都采用上面的样式来统一布局。
类样式:
<STYLE type="text/css">
.red{
color:red;
font-size:30px;
font-family:隶书;
}
</STYLE>
即把选择器变成类名,并在前面加小点“.”。
应用的时候只需要这样即可:
<H2 CLASS=".red">静夜思</H2>
<P CLASS=".red">床前明月光</P>
常用的样式属性:
文本属性:
Font-size:字体大小
Font-family:字体类型
Font-style:字体样式
Color:颜色
Text-align:对齐方式
背景属性:
Background-color:背景色
Background-image:背景图片
Background-repeat:背景图像显示方式repeat(默认,平铺)、no-repeat(不平铺)、repeat-x、repeat-y。
例:
<STYLE type="text/css">
TABLE{
background-image:url(images/type_back.jpg);
background-repeat:no-repeat;
}
</STYLE>
方框属性:
Margin:边界 margin-top, margin-right, margin-bottom, margin-left
Border:边框 border-style, border-width, border-color
Padding:填充 padding-top, padding-right, padding-bottom, padding-left
CSS控制超链接样式:
A:link {color:red} 未被访问的链接样式,红色
A:visited {color:green} 已被访问过的链接样式,绿色
A:hover {color:yellow} 鼠标悬浮在链接上时的样式,黄色
A:active {color:blue} 鼠标正在按下时链接文字的颜色,蓝色
样式表的3类应用方式:
内嵌样式表,行内样式表,外部样式表文件。
外部样式表文件包括:链接外部样式表和导入样式表。
链接外部样式表:
<HEAD>
<LINK rel="stylesheet" type="text/css" href="newstyle.css">
</HEAD>
rel=”stylesheet”:表示在网页中使用这个外部样式表
type=”text/css”:表示文本类型的样式
href=”newstyle.css”:指定样式文件
导入样式表:
<STYLE type="text/css">
@import 样式表文件.css;
</STYLE>