第02章CS样式表.ppt

CCS样式表 高级网页技术（一） CCS简介 CCS是Cascading Style Sheet的缩写，中文可译为“层叠式样式表”。 它包括CSS1和CSS2两个版本，主要作用是用于网页的排版。 学会了CSS的一些基本的功能，你就可以像使用Word一样来设计你的网页了。 CSS优势之一：维护方便 例 style !-- H3{font-family:细明体“； 　font-style:italic; 　color:red;} -- /style CSS优势之一：维护方便 这个CCS程序代码的含义是：网页内所有H3标记内的字型格式均被设置成红色细明体且斜体显示； 你如果想改变H3标记的样式，只须改变CCS程序代码的内容，而不需要去改动HTML代码。 样式表的其他优点 二、缩短网页的下载时间 　　浏览者只需下载一次声明格式的CSS代码，既可提供给整个网站的所有网页使用。 三、强大的样式功能 　　运用CSS提供的样式可以替代用图形处理软件制作的文字与图形特效，如火焰字、阴影效果等。 四、实现HTML元素精确的定位 　　以往的网页定位都采用表格定位，但一般只能用于规则的定位，而使用CSS样式表可以实现任意的定位效果。 CCS样式表的基本格式 行内样式语法格式 单一选择器声明 多个选择器集体声明 行内样式语法格式 1. 语法 html标记 style = property1:valuel; property2:value2； 2.范例 h1 style=“font-style:italic;color:blur;”欢迎/h1 3.说明 property:样式属性名称,两组属性间用分号;分隔 value:属性值,在属性名与属性值之间用:分隔 单一选择器声明 1.语法 html标记{property1:valuel;property2:value2;.....} 2.范例 p {font-style:italic;color:blur} 3.说明 所有p标记的样式为斜体兰色字体 多个选择器集体声明 1.语法 html标记1,html标记2,html标记3 {property1:valuel;property2:value2;.....} 2.范例 h1,h2,h3 {font-style:italic;color:blur} 3.说明 所有h1,h2,h3标记的样式为斜体兰色字体 在HTML中引入CSS 1.行内定义样式 2.内嵌样式表 3.链接样式表 行内定义样式 直接把CSS的程序代码和传统HTML程序代码写在一起。 （例） 2.内嵌样式表 内嵌样式表的声明方式是将CSS程序代码写在head和/head标记内。 例 3.链接样式表 从外部的样式表文件(.css)中引入特定的样式。 举一个简单的例子:假定已经有一个名为bacic.css样式表文件存在,我们只要在head和/head标记内加入以下代码,bacic.css文件内的所定义的样式就被引用了。 例 类选择器(Class)的定义与引用 类选择器(Class）的定义 语法一: HTML标记名称.选择器名称 {property1:valuel;property2:value2;.....} 语法二: .选择器名称 {property1:valuel;property2:value2;.....} 举例 p.one {color:blue;}　 //此类别选择器只能提供给p标记使用 div.two {color:red;} //此类别选择器只能提供给div标记使用 div.three {color:white;} //此类别选择器可供任何html标记使用 使用说明 类别选择器的名称可以由用户自己定义，但这个名称必须由英文或数字构成． property:样式属性名称,两组属性间用分号;分隔 value:属性值,在属性名与属性值之间用:分隔. 类选择器(Class）的引用 语法: HTML标记 CLASS=“类别选择器的名称” 这里写内容/HTML标记 举例:p class=“one”三石工作室 /p 　//这里的“三石工作室”文本就被赋予了“one”选择器所指定的样式 ,即以兰色显示。 例 关于CSS的几点基本常识 CSS中通用的长度单位 CSS中定义颜色的几种方式 CSS 中的继承 cursor属性(定义鼠标的形状) CSS中通用的长度单位 在CSS中，长度单位可以是正值或负值，其类型有相对长度单位和绝对长度单位。 下面列出常用的单位属性： 1.相对长度 %：百分比，一般取父元素的百分率。 em:表示字体的高度的单位 ex:表示字体中字母X的高度 CSS中通用的长度单位 绝对长度 pc:1pc相当于12pt pt:1pt相当于1