CSS样式教程.ppt
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
color:red; font-size: 24px; } --> </STYLE>
<!--…… -->隐藏标记：避免了因浏览器不支持 CSS而导致错误，加上这些标记后，不支持CSS的 浏览器，会自动跳过此段内容，避免一些错误
8
3.2.2 CSS样式表的分类(续)
外部样式 链接式：可以单独放到一个文件里，这个文件的扩展 名是.css，在使用的时候通过在html页的head里 <link rel=“styleSheet” href=“?” type=“text/css” /> 导入式：也可以通过@import fileName.css引用其 它样式文件，句未一定要加分号。
注意：注释不能嵌套。
12
3.6 常用的样式属性及值
字符(font)格式
设置字族科font-family:“宋体”, “黑体”,”仿 宋”;
设置字大小font-size:12px; 设置字风格font-style:normal|italic|oblique; 设置行高line-height:normal(值); 设置粗细font-
17
3.6 常用的样式属性及值（续）
crosshair :简单的十字线光标。
move :十字箭头光标。用于标示对象可被移 动。
help :带有问号标记的箭头。用于标示有帮助 信息存在。
no-drop :带有一个被斜线贯穿的圆圈的手形 光标。用于标示被拖起的对象不允许在光标的 当前位置被放下。
改变这些页面的显示方式，只改一个CSS样式文件就可 以，所以方便网站维护，使设计师在修改设计时更有效率， 而代价更低。
3ቤተ መጻሕፍቲ ባይዱ
3.2 认识CSS样式
CSS Cascading Style Sheet(层叠样式表)的缩写 <p style=“font-family:黑体;fontsize:20px;color:blue;text-align:center;lineheight:20px”>##########</p>
行高是可选的属性； font属性是继承的。
14
3.6 常用的样式属性及值（续）
设置文本(text)的样式 单词与单词之间的间距Word-spacing:值 字母与字母之间的间距Letter-spacing:值 垂直对齐Vertical-align:值|baseline|sub|super|top|texttop|middle|bottom|text-bottom 水平对齐Text-align:left|center|right|justify 首行缩进Text-index:值 设置字大小写texttransform:capitalize|uppercase|lowercase|none); 设置颜色color:red; 设置字装饰效果text-decoration: underline|overline|line-through|blink|none; 注blink只在非IE中可用。 设置空格字符的处理方式 Whitespace:normal|pre|nowrap 设置是否显示及如何显示 Display:none|block 换行word-wrap ： normal | break-word
CSS样式教学
主讲：许磊
1
第3章 CSS样式表
3.1 CSS带来的好处 3.2 认识CSS。
3.2.1 CSS样式的说明、规则及特征 3.2.2 CSS分类 3.2.3 css中常用的单位 3.2.4 在样式规则中添加注释
3.3 常用的样式属性及值 3.4 DIV标记及SPAN标记 3.5 常用样式的属性及值。 3.6 讲解CSS布局的重点和难点——浮动和定位。 3.7 介绍文字和图像的排版。 3.8 介绍了链接和导航相关的设置方法。
url(url) :用户自定义光标。使用绝对或相对 url 地址 指定光标文件(后缀为 .cur 或者 .ani )。
19
3.6 常用的样式属性及值（续）
设置列表的样式
设置列表项所使用的预设标记 List-style-type: 无序列表
disc :默认值，实心圆 circle :空心圆 square :实心方块
20
3.6 常用的样式属性及值（续）
滚动条
scrollbar-3dlight-color :设置或检索滚动条亮边框颜 色。
2
3.1 CSS带来的好处
改变浏览器的默认显示风格使站点对浏览者和浏览器更具 亲和力，使整个站点保持视觉的一致性
页面内容和显示样式分离，只要建立定义样式的CSS文件， 并且让所有的HTML文件都来使用CSS文件所定义的样 式，如果要改变HTML文件中任意部分的显示风格时， 只要把CSS文件打开，更改样式就可以了
有序列表
decimal :默认值，阿拉伯数字 lower-roman :小写罗马数字 upper-roman :大写罗马数字 lower-alpha :小写英文字母 upper-alpha :大写英文字母
none :不使用项目符号 可以把自己制作的图片设为项目符号
list-style-image:url(images/li.gif)
7
3.2.2 CSS样式表的分类(续)
定义的位置不同 行内样式<p style=“font-family:黑体;font-
size:20px;color:blue;textalign:center”>##########</p> 内嵌样式 <STYLE TYPE="text/css"> <!-p{
P{ font-family:黑体; font-size:20px; color:blue; text-align:center; line-height:20px;
}
4
3.2.1样式说明、规则及特征
样式就是格式，对于网页来说，像网页显示的文字、图片、段落、 列表等以什么样的方式显示出来。层叠就是指当HTML文件引用 多个CSS样式时，如果CSS的定义发生冲突，浏览器将依据层次 的先后顺序来应用样式，如果不考虑样式的优先级时，一般会遵 循“最近优选原则”。
ID 选择器（#id号） 伪类选择器
设置超链接 a:link a:hover a:visited a:active 选择段元素的首字母或首行进行格式化
▪ P:first-letter ▪ P:first-line 复合选择器 后代选择器 table h1.myCls {……} 组合选择器 table, h1. myCls, p.specia {……}
当有多种位置不同的样式时，如果规定的样式 没有冲突，则叠加；如果有冲突，则最先考虑 行内样式表显示，如果没有，再考虑内嵌样式 显示，如果还没有，最后采用外部样式表显示， 否则就按HTML的默认样式显示；
当有多种选择器样式时，先使用html选择器样 式，再使用类选择器样式，再使用ID选择器样 式，再使用style属性样式。
weight:normal|bold|bolder|lighter|值; 设置变体font-variant:normal|small-caps;
13
3.6 常用的样式属性及值（续）
font属性是一种复合属性，可以同时对文字设置多 个属性。包括字体族科、大小、风格、加粗及字体 变体。
基本语法： font: font-style font-weight font-variant font-
not-allowed :禁止标记(一个被斜线贯穿的圆 圈)光标。用于标示请求的操作不允许被执行。
progress :带有沙漏标记的箭头光标。用于标 示一个进程正在后台运行。
18
3.6 常用的样式属性及值（续）
row-resize :有上下两个箭头，中间由横线分隔开的光 标。用于标示项目或标题栏可以被垂直改变尺寸。
10
3.4 CSS样式表长用的单位
百分比单位也是一种常用的相对类型，通常的参考依据为元素的fontsize属性.
11
3.5 在样式表中添加注释
在样式表表中添加注释有助于记住复杂的样 式规则的作用，应用的范围等，便于进行维 护和应用。例如，下面是一个添加注释的样 例。
/*此标记应用在文档中*/ h1{color:red;background:yellow;}
size/line-height font-family 语法说明： 如果要利用font属性，同时设置多个文字属性时，属性
与属性之间必须利用空格隔开； 前三个属性次序不定或者省略，默认为normal； 大小和字体族科必须显式地指定，先设置大小，再设置
字体族科，字体族科如果有多个，以逗号分割； 行高必须直接出现在字体大小后面，中间用斜杠分开，
text :用于标示可编辑的水平文本的光标。通常是大写 字母 I 的形状。
vertical-text :用于标示可编辑的垂直文本的光标。通 常是大写字母 I 旋转90度的形状。
wait :用于标示程序忙用户需要等待的光标。通常是沙 漏或手表的形状。
*-resize :用于标示对象可被改变尺寸方向的箭头光 标。 w|s|n|e|ne|sw|se|nw
样式规则 样式表的每个规则都有两个主要部分：选择器（selector）和 声明（declaration）。选择器决定哪些因素要受到影响，声 明由一个或多个属性:值对组成。 基本语法：selector{属性:属性值[[;属性:属性值]…]} 语法说明： selector表示希望进行格式化的元素； 声明部分包括在选择器后的大括号中； 用“属性:属性值”描述要应用的格式化操作； 声明中的多个属性值对之间必须用分号隔开。
重用样式表，不同的HTML文件可以使用同一个CSS样 式文件
可以降低网站的流量费用，不同的HTML文件使用同一 个CSS样式文件，只需下载一次CSS样式文件就可；
由于样式的重用及下载流量的减少可以使页面载入更快； CSS使站点可以更好地被搜索引擎找到； 不同的HTML文件可以使用同一个CSS样式文件，要想
p:first-letter{font-size:26px; color:#FF0066;}
p:first-line{font-size:26px; color:#FF0066;}
16
3.6 常用的样式属性及值（续）
鼠标的样式Cursor: auto :默认值。浏览器根据当前情况自动确定鼠标 光标类型。 default :客户端系统的默认光标。通常是一个箭头。 hand :竖起一只手指的手形光标。就像通常用户将 光标移到超链接上时那样。 pointer :和 hand 一样。竖起一只手指的手形光标。 就像通常用户将光标移到超链接上时那样。 col-resize :有左右两个箭头，中间由竖线分隔开的 光标。用于标示项目或标题栏可以被水平改变尺寸。 all-scroll :有上下左右四个箭头，中间有一个圆点 的光标。用于标示页面可以向上下左右任何方向滚 动。
5
3.2.1样式说明、规则及特征(续)
继承是CSS的一个主要特征，许多 CSS属性不但影响选择符所定义的元 素，而且会被这些元素的后代继承。 例如一个body定义了字符的颜色， 这个颜色也会应用到段落的文本中。
6
3.2.2 CSS样式表的分类
选择器不同
基本选择器 HTML标记 选择器
CLASS 类选择器(.className)
行内样式表、内嵌样式表、外部样式表各有优势，实际 的开发中常常需要混合使用： 有关整个网站统一风格的样式代码，放置在独立的样 式文件*.css 某些样式不同的页面，除了链接外部样式文件，还需 定义内嵌样式 某个网页内，部分内容”与众不同“，采用行内样式
9
3.3 CSS样式表的使用优先级
对于某个HTML标记：
15
3.6 常用的样式属性及值（续）
还可以只选择元素的第一个字母或第一行进 行格式化。
基本语法：
选择器:first-letter{font-size:26px; color:#FF0066;}
选择器:first-line{font-size:26px; color:#FF0066;}
语法说明： 下面是关于此规定的一个实例。
<!--…… -->隐藏标记：避免了因浏览器不支持 CSS而导致错误，加上这些标记后，不支持CSS的 浏览器，会自动跳过此段内容，避免一些错误
8
3.2.2 CSS样式表的分类(续)
外部样式 链接式：可以单独放到一个文件里，这个文件的扩展 名是.css，在使用的时候通过在html页的head里 <link rel=“styleSheet” href=“?” type=“text/css” /> 导入式：也可以通过@import fileName.css引用其 它样式文件，句未一定要加分号。
注意：注释不能嵌套。
12
3.6 常用的样式属性及值
字符(font)格式
设置字族科font-family:“宋体”, “黑体”,”仿 宋”;
设置字大小font-size:12px; 设置字风格font-style:normal|italic|oblique; 设置行高line-height:normal(值); 设置粗细font-
17
3.6 常用的样式属性及值（续）
crosshair :简单的十字线光标。
move :十字箭头光标。用于标示对象可被移 动。
help :带有问号标记的箭头。用于标示有帮助 信息存在。
no-drop :带有一个被斜线贯穿的圆圈的手形 光标。用于标示被拖起的对象不允许在光标的 当前位置被放下。
改变这些页面的显示方式，只改一个CSS样式文件就可 以，所以方便网站维护，使设计师在修改设计时更有效率， 而代价更低。
3ቤተ መጻሕፍቲ ባይዱ
3.2 认识CSS样式
CSS Cascading Style Sheet(层叠样式表)的缩写 <p style=“font-family:黑体;fontsize:20px;color:blue;text-align:center;lineheight:20px”>##########</p>
行高是可选的属性； font属性是继承的。
14
3.6 常用的样式属性及值（续）
设置文本(text)的样式 单词与单词之间的间距Word-spacing:值 字母与字母之间的间距Letter-spacing:值 垂直对齐Vertical-align:值|baseline|sub|super|top|texttop|middle|bottom|text-bottom 水平对齐Text-align:left|center|right|justify 首行缩进Text-index:值 设置字大小写texttransform:capitalize|uppercase|lowercase|none); 设置颜色color:red; 设置字装饰效果text-decoration: underline|overline|line-through|blink|none; 注blink只在非IE中可用。 设置空格字符的处理方式 Whitespace:normal|pre|nowrap 设置是否显示及如何显示 Display:none|block 换行word-wrap ： normal | break-word
CSS样式教学
主讲：许磊
1
第3章 CSS样式表
3.1 CSS带来的好处 3.2 认识CSS。
3.2.1 CSS样式的说明、规则及特征 3.2.2 CSS分类 3.2.3 css中常用的单位 3.2.4 在样式规则中添加注释
3.3 常用的样式属性及值 3.4 DIV标记及SPAN标记 3.5 常用样式的属性及值。 3.6 讲解CSS布局的重点和难点——浮动和定位。 3.7 介绍文字和图像的排版。 3.8 介绍了链接和导航相关的设置方法。
url(url) :用户自定义光标。使用绝对或相对 url 地址 指定光标文件(后缀为 .cur 或者 .ani )。
19
3.6 常用的样式属性及值（续）
设置列表的样式
设置列表项所使用的预设标记 List-style-type: 无序列表
disc :默认值，实心圆 circle :空心圆 square :实心方块
20
3.6 常用的样式属性及值（续）
滚动条
scrollbar-3dlight-color :设置或检索滚动条亮边框颜 色。
2
3.1 CSS带来的好处
改变浏览器的默认显示风格使站点对浏览者和浏览器更具 亲和力，使整个站点保持视觉的一致性
页面内容和显示样式分离，只要建立定义样式的CSS文件， 并且让所有的HTML文件都来使用CSS文件所定义的样 式，如果要改变HTML文件中任意部分的显示风格时， 只要把CSS文件打开，更改样式就可以了
有序列表
decimal :默认值，阿拉伯数字 lower-roman :小写罗马数字 upper-roman :大写罗马数字 lower-alpha :小写英文字母 upper-alpha :大写英文字母
none :不使用项目符号 可以把自己制作的图片设为项目符号
list-style-image:url(images/li.gif)
7
3.2.2 CSS样式表的分类(续)
定义的位置不同 行内样式<p style=“font-family:黑体;font-
size:20px;color:blue;textalign:center”>##########</p> 内嵌样式 <STYLE TYPE="text/css"> <!-p{
P{ font-family:黑体; font-size:20px; color:blue; text-align:center; line-height:20px;
}
4
3.2.1样式说明、规则及特征
样式就是格式，对于网页来说，像网页显示的文字、图片、段落、 列表等以什么样的方式显示出来。层叠就是指当HTML文件引用 多个CSS样式时，如果CSS的定义发生冲突，浏览器将依据层次 的先后顺序来应用样式，如果不考虑样式的优先级时，一般会遵 循“最近优选原则”。
ID 选择器（#id号） 伪类选择器
设置超链接 a:link a:hover a:visited a:active 选择段元素的首字母或首行进行格式化
▪ P:first-letter ▪ P:first-line 复合选择器 后代选择器 table h1.myCls {……} 组合选择器 table, h1. myCls, p.specia {……}
当有多种位置不同的样式时，如果规定的样式 没有冲突，则叠加；如果有冲突，则最先考虑 行内样式表显示，如果没有，再考虑内嵌样式 显示，如果还没有，最后采用外部样式表显示， 否则就按HTML的默认样式显示；
当有多种选择器样式时，先使用html选择器样 式，再使用类选择器样式，再使用ID选择器样 式，再使用style属性样式。
weight:normal|bold|bolder|lighter|值; 设置变体font-variant:normal|small-caps;
13
3.6 常用的样式属性及值（续）
font属性是一种复合属性，可以同时对文字设置多 个属性。包括字体族科、大小、风格、加粗及字体 变体。
基本语法： font: font-style font-weight font-variant font-
not-allowed :禁止标记(一个被斜线贯穿的圆 圈)光标。用于标示请求的操作不允许被执行。
progress :带有沙漏标记的箭头光标。用于标 示一个进程正在后台运行。
18
3.6 常用的样式属性及值（续）
row-resize :有上下两个箭头，中间由横线分隔开的光 标。用于标示项目或标题栏可以被垂直改变尺寸。
10
3.4 CSS样式表长用的单位
百分比单位也是一种常用的相对类型，通常的参考依据为元素的fontsize属性.
11
3.5 在样式表中添加注释
在样式表表中添加注释有助于记住复杂的样 式规则的作用，应用的范围等，便于进行维 护和应用。例如，下面是一个添加注释的样 例。
/*此标记应用在文档中*/ h1{color:red;background:yellow;}
size/line-height font-family 语法说明： 如果要利用font属性，同时设置多个文字属性时，属性
与属性之间必须利用空格隔开； 前三个属性次序不定或者省略，默认为normal； 大小和字体族科必须显式地指定，先设置大小，再设置
字体族科，字体族科如果有多个，以逗号分割； 行高必须直接出现在字体大小后面，中间用斜杠分开，
text :用于标示可编辑的水平文本的光标。通常是大写 字母 I 的形状。
vertical-text :用于标示可编辑的垂直文本的光标。通 常是大写字母 I 旋转90度的形状。
wait :用于标示程序忙用户需要等待的光标。通常是沙 漏或手表的形状。
*-resize :用于标示对象可被改变尺寸方向的箭头光 标。 w|s|n|e|ne|sw|se|nw
样式规则 样式表的每个规则都有两个主要部分：选择器（selector）和 声明（declaration）。选择器决定哪些因素要受到影响，声 明由一个或多个属性:值对组成。 基本语法：selector{属性:属性值[[;属性:属性值]…]} 语法说明： selector表示希望进行格式化的元素； 声明部分包括在选择器后的大括号中； 用“属性:属性值”描述要应用的格式化操作； 声明中的多个属性值对之间必须用分号隔开。
重用样式表，不同的HTML文件可以使用同一个CSS样 式文件
可以降低网站的流量费用，不同的HTML文件使用同一 个CSS样式文件，只需下载一次CSS样式文件就可；
由于样式的重用及下载流量的减少可以使页面载入更快； CSS使站点可以更好地被搜索引擎找到； 不同的HTML文件可以使用同一个CSS样式文件，要想
p:first-letter{font-size:26px; color:#FF0066;}
p:first-line{font-size:26px; color:#FF0066;}
16
3.6 常用的样式属性及值（续）
鼠标的样式Cursor: auto :默认值。浏览器根据当前情况自动确定鼠标 光标类型。 default :客户端系统的默认光标。通常是一个箭头。 hand :竖起一只手指的手形光标。就像通常用户将 光标移到超链接上时那样。 pointer :和 hand 一样。竖起一只手指的手形光标。 就像通常用户将光标移到超链接上时那样。 col-resize :有左右两个箭头，中间由竖线分隔开的 光标。用于标示项目或标题栏可以被水平改变尺寸。 all-scroll :有上下左右四个箭头，中间有一个圆点 的光标。用于标示页面可以向上下左右任何方向滚 动。
5
3.2.1样式说明、规则及特征(续)
继承是CSS的一个主要特征，许多 CSS属性不但影响选择符所定义的元 素，而且会被这些元素的后代继承。 例如一个body定义了字符的颜色， 这个颜色也会应用到段落的文本中。
6
3.2.2 CSS样式表的分类
选择器不同
基本选择器 HTML标记 选择器
CLASS 类选择器(.className)
行内样式表、内嵌样式表、外部样式表各有优势，实际 的开发中常常需要混合使用： 有关整个网站统一风格的样式代码，放置在独立的样 式文件*.css 某些样式不同的页面，除了链接外部样式文件，还需 定义内嵌样式 某个网页内，部分内容”与众不同“，采用行内样式
9
3.3 CSS样式表的使用优先级
对于某个HTML标记：
15
3.6 常用的样式属性及值（续）
还可以只选择元素的第一个字母或第一行进 行格式化。
基本语法：
选择器:first-letter{font-size:26px; color:#FF0066;}
选择器:first-line{font-size:26px; color:#FF0066;}
语法说明： 下面是关于此规定的一个实例。