ACCP学习旅程之----- CSS样式库
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-image: 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-image: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>