css讲义讲解.docVIP

Css教程 CSS 概述 CSS指层叠样式表（Cascading Style Sheets），层叠的意思是：多重样式定义被层叠为一。 CSS是标准的布局语言，用来控制元素的尺寸、颜色、排版。 CSS非常精确，功能强大，易于编写。 CSS由W3C发明，用来取代基于表格的布局、框架以及其他非标准的表现方法。 样式(style)定义如何显示HTML元素；样式通常存储于样式表中；外部样式表存储于CSS文件中。 外部样式表(External Style Sheets)可以极大地提升你的工作效率，并且可以极大地节约服务器的带宽。 纯CSS的布局与XHTML的结合，可使表现与结构分离，并使站点更易维护，易用性更好。 官方网站：/Style/CSS/ 学习网站： /css/index.asp 一、样式单声明的方法： 嵌入样式单 插入样式单 超链接样式单声明文件 其他网站链接样式单声明文件 1嵌入样式单 在网页头部加入如下标识 /HEAD STYLE TYPE=text/css H1 { font-size: 40pt; Color: red} H2 {font-size:36pt ; color:blue; line-height:50pt} /STYLE 2 插入样式单 直接在页面的标签中使用 H1 STYLE=font-family: 楷体_gb2312; font-size: 50pt; Color:yellow广东外语外贸大学/H1 3 超链接样式单声明文件 建立samp.css文件，内容如下： H1 { font-size: 40pt; Color: red} H2 {font-size:36pt ; color:blue; line-height:50pt} 在html 文件中，加上如下语句： LINK REL=stylesheet TYPE=text/css HREF=samp.css 4 也是导入样式文件，跟第三种类似 head style type=text/css !-- @import url(/ css/style.css); -- /style /head 二、CSS的格式…} 注意： 选择符中 , . # : * 空格 的用法 1 HTML 的tag h1 {color:red} h2,p,td {color:blue ;font-size:16pt} 2 class 选择符: 一个选择符能有不同的CLASS(类)，因而允许同一元素有不同样式 定义： .ab { font-size: 14pt} .ac{ font-size: 16pt ; color=red} p.cd {color:blue} 使用： H1 class=ab广东外语外贸大学/H1 td class=ab广东外语外贸大学/td td class=ac广东外语外贸大学/H1 p class=cd广东外语外贸大学/p 3 ID 选择符号: ID 选择符个别地定义每个元素的成分。这种选择符应该尽量少用，因为他具有一定的局限。 一个ID选择符的指定要有指示符#在名字前面 定义： #ab { font-size: 14pt} #ac{ font-size: 16pt ; color=red} 使用： H1 id=ab广东外语外贸大学/H1 td id=ab广东外语外贸大学/td H1 id=ac广东外语外贸大学/H1 4 伪类和伪元素 伪类和伪元素是特殊的类和元素，能自动地被支持CSS的浏览器所识别。 伪类区别开不同种类的元素(例如，visited links(已访问的连接)和active links(可激活连接)描述了两个定位锚(anchors)的类型)。伪元素指元素的一部分，例如段落的第一个字母。 伪类或伪元素规则的形式如： 选择符:伪类 { 属性: 值 } 选择符:伪元素 { 属性: 值 } 伪类和伪元素不应用HTML的CLASS属性来指定。一般的类可以与伪类和伪元素一起使用，如下: 选择符.类: 伪类 { 属性: 值 } 或 选择符.类: 伪元素 { 属性: 值 } 常用伪类 a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */ a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */ a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上