1¥ 样式表的基本语法
样式表由样式规则组成,规则告诉浏览器如何显示文档。
一个样式表由3部分组成:
selector: 选择器
property: 属性
value: 属性值
1)样式表的基本结构
如:
<HEAD>
<STYLE type=”text/css”>
P {
color:red;
font-size:30px;
font-family:隶书;
}
。。。。。。
</STYLE>
</HEAD>
1$ 内嵌样式表,写在<STYLE></STYLE>标签内并在<HEAD>中
2)样式规则(略)
上例,括在大括号中的部分称为声明。
声明有属性和属性值两部分组成,一个选择器可以有多个属性,各属
性用分号隔开。
3)类样式(class)
如:<STYLE type=”text/css”>
.red {
color:red;
font-size:24px;
font-family:”隶书”;
}
……
</STYLE>
说明:
1。类样式名前面有有一个“。”号,而且可以随意命名,最好有意义。
2。使用标签的class属性调用定义好的类,可以改变标签显示内容的
外观。
如: <H2 class=”类名”>静夜思</H2
2¥ 常用的样式属性
1)文本属性
font-size: 设置文本字体大小
font-family: 设置文本字体类型
font-style: 设置文本字体样式
color: 设置文本的颜色
text-align: 设置文本的对齐方式
特别注意:文本样式的就进原则
当不同的样式规则应用在同一个标签上时,根据这些样式规则距离修饰文本的远近,来决定应用哪一个样式规则。
2)背景属性
background-color: 设置背景颜色
background-p_w_picpath: url(图像路径);设置背景图像
background-repeat: 设置一个指定的背景图像如何被重复显示
background-repeat可取的值:
repeat: 铺满整个区域,即平铺(默认情况)
no-repeat: 不平铺,即按原来大小显示图像
repeat-x: 在水平方向平铺
repeat-y: 在垂直方向平铺
3)方框属性
方框属性就是对应CSS盒子模型,常用的方框属性有3种:
边界(margin):就是样式盒子与其他网页元素之间的距离
margin-top 样式盒子的上边距
margin-right
margin-bottom
margin-left
边框(border):就是样式盒子的厚度和颜色
border-style 设置边框的样式
border-width 设置边框的宽度
border-color 设置边框的颜色
填充(padding):就是盒子内容到盒子边框的距离
padding-up 设置内容与上边框之间的距离
padding-right设置内容与右边框之间的距离
padding-left 设置内容与左边框之间的距离
padding-bottom设置内容与下边框之间的距离
另外:
1。虚线,是同过方框属性中的边框属性实现的(dashed)
如:”border-right-sytle:dashed;”
2。细边框,是同过方框样式中的边框属性实现的(solid)
如:”border-style:solid;”
3。方框样式中的边框属性可以写在同一行中,用空格分隔,分号
结束。
如:”border-right:#ff0000 dashed 20px;”
4。写一个常用的细边框样式
<STYLE type=”text/css”
.textBorder{
border-width:1px;
border-style:solid;
}
</STYLE>
3¥ 特殊样式
特殊样式,就是指定某个标签的个别属性样式,常用于CSS控制超链接样式,共有4种状态样式:
A:link { color:red} 未被访问时的链接样式
A:visited {color:green} 已被访问过的链接样式
A:hover {color:yellow} 鼠标悬停在链接对象上时的链接样式
A:active {color:blue} 鼠标正在按下时的链接文字样式
以上样式必须与<A>标签样式或同名超链接类样式组合使用,单独使用时没有意义的
如:
<STYLE type=”text/css”>
A {
color: blue;
text-decoration:none;
}
A: hover {
color:red;
text-decoration:underline;
}
另外: text-decoration是一个特殊样式属性,是对文本内容的修饰
常可用的选项有:
underline:下划线
none: 无修饰
linethrouth: 文字中间的横线
特别注意:
设置按钮背景图片的类样式代码
.PictureButton{
background-p_w_picpath:url(图片路径);
//按钮周边全为0
border:0px;
margin:0px;
padding:0px;
//设定按钮高度和大小
height:23px;
width:82px;
font-size:14px; //设置按钮字体大小
}
????点击按钮时更改按钮背景???????
4¥ 样式表的3类应用方式
1) 内嵌样式表
语法:(必须写在HEAD中并在<STYLE>中间)
<HEAD>
<STYLE type=”text/css”>
选择符 {样式属性:属性值;样式属性:属性值…..}
选择符 {样式属性:属性值;样式属性:属性值…..}
……
</STYLE>
</HEAD>
2) 行内样式表
即:使用元素标签的style属性设置标签的特别样式,规定的样式只对所修饰的标签有效,其他标签不受任何影响。
如: <P style=”color:red; font-size:30px;font-family:隶书;”></P>
3) 外部样式表
希望多个页面甚至整个网站所有页面都采用统一风格时使用
1$ 链接外部样式表(必须写在HEAD中,没有STYLE标签)
<HEAD>
<LINK rel=”stylesheet” type=”text/css” href=”newstyle.css”>
</HEAD>
2$ 导入外部样式表(必须写在HEAD中,必须STYLE标签)
<HEAD>
<STYLE type=”text/css”>
@import 样式表文件.css //必须有@符号
</STYLE>
</HEAD>