ACCP学习旅程之----- CSS样式库
2012-03-12 22:10
429 查看
1￥ 样式表的基本语法
样式表由样式规则组成，规则告诉浏览器如何显示文档。
一个样式表由3部分组成：
selector[/b]： 选择器
property[/b]： 属性
value[/b]： 属性值
1）样式表的基本结构
如：
<HEAD>
<STYLE type=”text/css”>[/b]
P {
color:red;
font-size:30px;
font-family:[/b]隶书；
}
[/b] 。。。。。。
</STYLE>
[/b]</HEAD>
1$ 内嵌样式表，写在<STYLE></STYLE>[/b]标签内并在<HEAD>[/b]中
[/b]
2）样式规则（略）
上例，括在大括号中的部分称为声明[/b]。
声明有属性和属性值两部分组成，一个选择器可以有多个属性，各属[/b]
[/b]性用分号隔开[/b]。
3）类样式（class）
如：<STYLE type=”text/css”>
.red[/b] {
color:red;
font-size:24px;
font-family:”隶书”;
}
……
</STYLE>
说明：
1。类样式名前面有有一个“。”号，而且可以随意命名，最好有意义。
2。使用标签的[/b]class[/b]属性调用定义好的类，可以改变标签显示内容的
[/b]外观[/b]。
如： <H2 class=”[/b]类名”[/b]>静夜思</H2
2￥ 常用的样式属性
1）文本属性
font-size[/b]: 设置文本字体大小
font-family: [/b] 设置文本字体类型
font-style:[/b] 设置文本字体样式
color: [/b]设置文本的颜色
text-align: [/b] 设置文本的对齐方式
特别注意：文本样式的就进原则[/b]
[/b]当不同的样式规则应用在同一个标签上时，根据这些样式规则距离修饰文本的远近，来决定应用哪一个样式规则。
[/b]
2）背景属性
background-color: [/b]设置背景颜色
background-image:[/b] url([/b]图像路径)[/b]；[/b]设置背景图像
background-repeat:[/b] 设置一个指定的背景图像如何被重复显示
background-repeat可取的值：
repeat:[/b] 铺满整个区域，即平铺（默认情况）
no-repea[/b]t:[/b] 不平铺，即按原来大小显示图像
repeat-x: [/b] 在水平方向平铺
repeat-y:[/b] 在垂直方向平铺
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设置内容与下边框之间的距离
[/b]另外：
[/b]1。虚线，是同过方框属性中的边框属性实现的（[/b]dashed[/b]）
[/b]如：”border-right-sytle:dashed;”[/b]
2。细边框，是同过方框样式中的边框属性实现的（[/b]solid[/b]）
[/b]如：”border-style:solid;”
[/b] 3。方框样式中的边框属性可以写在同一行中，用空格分隔，分号[/b]
[/b]结束[/b]。
如：”border-right:#ff0000 dashed 20px;”
4[/b]。写一个常用的细边框样式
<STYLE type=”text/css”
.textBorder{
border-width:1px;
border-style:solid;
}
</STYLE>
[/b]
3￥ 特殊样式
特殊样式，就是指定某个标签的个别属性样式[/b]，常用于[/b]CSS[/b]控制超链接样式[/b]，共有4[/b]种[/b]状态样式：
A:link { color:red}[/b] 未被访问时的链接样式
A:visited {color:green} [/b] 已被访问过的链接样式
A:hover {color:yellow}[/b] 鼠标悬停在链接对象上时的链接样式
A:active {color:blue} [/b]鼠标正在按下时的链接文字样式
以上样式必须与[/b]<A>[/b]标签样式或同名超链接类样式组合使用[/b]，单独使用时没有意义的
如：
<STYLE type=”text/css”>
A {
color: blue;
text-decoration:none;
}
A: hover {
color:red;
text-decoration:underline;
}
另外： text-decoration[/b]是一个特殊样式属性，是对文本内容的修饰
[/b]常可用的选项有：
underline[/b]：下划线
none: [/b]无修饰
linethrouth: [/b]文字中间的横线
[/b]
特别注意：
设置按钮背景图片的类样式代码
[/b].PictureButton{
background-image:url(图片路径);
//[/b]按钮周边全为0[/b]
border:0px;
margin:0px;
padding:0px;
//[/b]设定按钮高度和大小[/b]
height:23px;
width:82px;
font-size:14px; //[/b]设置按钮字体大小[/b]
}
[/b]？[/b]？？？点击按钮时更改按钮背景？？？？？？？
[/b]
4￥ 样式表的3类应用方式
1） 内嵌样式表
语法：（必须写在[/b]HEAD[/b]中并在<STYLE>[/b]中间[/b]）
<HEAD>
<STYLE type=”text/css”>
选择符 {样式属性：属性值；样式属性：属性值…..}
选择符 {样式属性：属性值；样式属性：属性值…..}
……
</STYLE>
</HEAD>
2） 行内样式表
即：使用元素标签的[/b]style[/b]属性[/b]设置标签的特别样式，规定的样式只对所修饰的标签有效，其他标签不受任何影响。[/b]
如： <P style=”color:red; font-size:30px;font-family:[/b]隶书;”></P>
[/b]
3） 外部样式表
希望多个页面甚至整个网站所有页面都采用统一风格时使用
1$ 链接外部样式表（必须写在[/b]HEAD[/b]中，没有STYLE[/b]标签[/b]）
<HEAD>
<LINK rel=”stylesheet” type=”text/css” href=”newstyle.css”>
[/b]</HEAD>
2$ 导入外部样式表（必须写在[/b]HEAD[/b]中，必须STYLE[/b]标签[/b]）
<HEAD>
<STYLE type=”text/css”>
@import [/b]样式表文件.css //[/b]必须有@[/b]符号
</STYLE>
[/b]</HEAD>
本文出自 “RZMars” 博客，请务必保留此出处http://rzmars.blog.51cto.com/4356405/804102
样式表由样式规则组成，规则告诉浏览器如何显示文档。
一个样式表由3部分组成：
selector[/b]： 选择器
property[/b]： 属性
value[/b]： 属性值
1）样式表的基本结构
如：
<HEAD>
<STYLE type=”text/css”>[/b]
P {
color:red;
font-size:30px;
font-family:[/b]隶书；
}
[/b] 。。。。。。
</STYLE>
[/b]</HEAD>
1$ 内嵌样式表，写在<STYLE></STYLE>[/b]标签内并在<HEAD>[/b]中
[/b]
2）样式规则（略）
上例，括在大括号中的部分称为声明[/b]。
声明有属性和属性值两部分组成，一个选择器可以有多个属性，各属[/b]
[/b]性用分号隔开[/b]。
3）类样式（class）
如：<STYLE type=”text/css”>
.red[/b] {
color:red;
font-size:24px;
font-family:”隶书”;
}
……
</STYLE>
说明：
1。类样式名前面有有一个“。”号，而且可以随意命名，最好有意义。
2。使用标签的[/b]class[/b]属性调用定义好的类，可以改变标签显示内容的
[/b]外观[/b]。
如： <H2 class=”[/b]类名”[/b]>静夜思</H2
2￥ 常用的样式属性
1）文本属性
font-size[/b]: 设置文本字体大小
font-family: [/b] 设置文本字体类型
font-style:[/b] 设置文本字体样式
color: [/b]设置文本的颜色
text-align: [/b] 设置文本的对齐方式
特别注意：文本样式的就进原则[/b]
[/b]当不同的样式规则应用在同一个标签上时，根据这些样式规则距离修饰文本的远近，来决定应用哪一个样式规则。
[/b]
2）背景属性
background-color: [/b]设置背景颜色
background-image:[/b] url([/b]图像路径)[/b]；[/b]设置背景图像
background-repeat:[/b] 设置一个指定的背景图像如何被重复显示
background-repeat可取的值：
repeat:[/b] 铺满整个区域，即平铺（默认情况）
no-repea[/b]t:[/b] 不平铺，即按原来大小显示图像
repeat-x: [/b] 在水平方向平铺
repeat-y:[/b] 在垂直方向平铺
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设置内容与下边框之间的距离
[/b]另外：
[/b]1。虚线，是同过方框属性中的边框属性实现的（[/b]dashed[/b]）
[/b]如：”border-right-sytle:dashed;”[/b]
2。细边框，是同过方框样式中的边框属性实现的（[/b]solid[/b]）
[/b]如：”border-style:solid;”
[/b] 3。方框样式中的边框属性可以写在同一行中，用空格分隔，分号[/b]
[/b]结束[/b]。
如：”border-right:#ff0000 dashed 20px;”
4[/b]。写一个常用的细边框样式
<STYLE type=”text/css”
.textBorder{
border-width:1px;
border-style:solid;
}
</STYLE>
[/b]
3￥ 特殊样式
特殊样式，就是指定某个标签的个别属性样式[/b]，常用于[/b]CSS[/b]控制超链接样式[/b]，共有4[/b]种[/b]状态样式：
A:link { color:red}[/b] 未被访问时的链接样式
A:visited {color:green} [/b] 已被访问过的链接样式
A:hover {color:yellow}[/b] 鼠标悬停在链接对象上时的链接样式
A:active {color:blue} [/b]鼠标正在按下时的链接文字样式
以上样式必须与[/b]<A>[/b]标签样式或同名超链接类样式组合使用[/b]，单独使用时没有意义的
如：
<STYLE type=”text/css”>
A {
color: blue;
text-decoration:none;
}
A: hover {
color:red;
text-decoration:underline;
}
另外： text-decoration[/b]是一个特殊样式属性，是对文本内容的修饰
[/b]常可用的选项有：
underline[/b]：下划线
none: [/b]无修饰
linethrouth: [/b]文字中间的横线
[/b]
特别注意：
设置按钮背景图片的类样式代码
[/b].PictureButton{
background-image:url(图片路径);
//[/b]按钮周边全为0[/b]
border:0px;
margin:0px;
padding:0px;
//[/b]设定按钮高度和大小[/b]
height:23px;
width:82px;
font-size:14px; //[/b]设置按钮字体大小[/b]
}
[/b]？[/b]？？？点击按钮时更改按钮背景？？？？？？？
[/b]
4￥ 样式表的3类应用方式
1） 内嵌样式表
语法：（必须写在[/b]HEAD[/b]中并在<STYLE>[/b]中间[/b]）
<HEAD>
<STYLE type=”text/css”>
选择符 {样式属性：属性值；样式属性：属性值…..}
选择符 {样式属性：属性值；样式属性：属性值…..}
……
</STYLE>
</HEAD>
2） 行内样式表
即：使用元素标签的[/b]style[/b]属性[/b]设置标签的特别样式，规定的样式只对所修饰的标签有效，其他标签不受任何影响。[/b]
如： <P style=”color:red; font-size:30px;font-family:[/b]隶书;”></P>
[/b]
3） 外部样式表
希望多个页面甚至整个网站所有页面都采用统一风格时使用
1$ 链接外部样式表（必须写在[/b]HEAD[/b]中，没有STYLE[/b]标签[/b]）
<HEAD>
<LINK rel=”stylesheet” type=”text/css” href=”newstyle.css”>
[/b]</HEAD>
2$ 导入外部样式表（必须写在[/b]HEAD[/b]中，必须STYLE[/b]标签[/b]）
<HEAD>
<STYLE type=”text/css”>
@import [/b]样式表文件.css //[/b]必须有@[/b]符号
</STYLE>
[/b]</HEAD>
本文出自 “RZMars” 博客，请务必保留此出处http://rzmars.blog.51cto.com/4356405/804102
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ACCP学习旅程之-----Java对象和类 （第六章节）
- ACCP学习旅程之-----使用C#开发数据库应用程序(第一章)
- ACCP学习旅程之-----Java 类的方法（第七章节）
- ACCP学习旅程之-----使用C#开发数据库应用程序(第二章)
- ACCP学习旅程之-----Java 数组（第八章节）
- ACCP学习旅程之-----使用C#开发数据库应用程序(第三章)
- ACCP学习旅程之-----使用C#开发数据库应用程序(第四章 第一个Windows程序)
- ACCP学习旅程之-----Java 字符串（一）（第九章节）
- ACCP学习旅程之-----使用C#开发数据库应用程序(第五章 用控件进行快速开发)
- ACCP学习旅程之-----Java 字符串（二）（第九章节）
- ACCP学习旅程之-----使用C#开发数据库应用程序(第六章 用ADO.NET连接数据库)
- ACCP学习旅程之-----基础篇
- ACCP学习旅程之-----使用C#开发数据库应用程序(第七章 用ADO.NET查询和操作数据库)
- ACCP学习旅程之-----基础篇
- ACCP学习旅程之----- SQL Server(第一章)
- ACCP学习旅程之-----使用C#开发数据库应用程序(第八章 用DataGridView显示和操作数据库)
- ACCP学习旅程之----- SQL Server(第二章 SQL Server数据库表管理)
- ACCP学习旅程之-----硬件配置
- ACCP学习旅程之----- 操作系统常用技巧
- ACCP学习旅程之----- SQL Server(第三章 SQL数据管理)