第05章 样式表.ppt
《第05章 样式表.ppt》由会员分享,可在线阅读,更多相关《第05章 样式表.ppt(59页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、第五章第五章 样式表样式表 统一网站统一网站(网页网页)风格风格主要内容主要内容一、样式表一、样式表(CSS)的基本概念的基本概念二、利用样式表编辑器编辑样式表二、利用样式表编辑器编辑样式表三、三、CSS属性的理解与应用属性的理解与应用四、四、CSS样式的单位样式的单位五、五、CSS与与HTML文档的结合方法文档的结合方法六、六、CSS的高级应用的高级应用2 2 CSSCSS的使用的使用 一、一、CSS的基本概念的基本概念1、CSS简介简介CSS是是Cascading Style Sheet的缩写,即层叠样式表或级联样式表。的缩写,即层叠样式表或级联样式表。CSS是一种是一种样式表语言样式表语
2、言,用于为,用于为HTML文档文档定义定义有关布局和表现有关布局和表现的的样式样式。CSS的优点的优点内容部分内容部分和和样式部分样式部分各自独立,使数据(内容)处理更简单也更易维各自独立,使数据(内容)处理更简单也更易维护。护。页面代码量减少,可以制作体积更小、下载更快的网页。页面代码量减少,可以制作体积更小、下载更快的网页。语义结构清晰语义结构清晰可以将许多网页同时更新,比以前更快更容易。可以将许多网页同时更新,比以前更快更容易。3 3 CSSCSS的使用的使用 一、一、CSS的基本概念的基本概念2、编写、编写CSS样式的方法样式的方法使用使用CSS编辑器编辑器如如Dreamweaver、
3、Frontpage等都会自带等都会自带CSS编辑器编辑器。使用超文本编辑器使用超文本编辑器如如Dreamweaver、Frontpage等等超文本编辑器超文本编辑器均可编辑均可编辑样式表;样式表;记事本记事本4 4 CSSCSS的使用的使用 一、一、CSS的基本概念的基本概念3、定义、定义CSS样式的基本语法样式的基本语法 P169:包括:包括选择符、属性和值选择符、属性和值选择符选择符属性属性:值值选择符选择符属性属性1:值值1;属性属性2:值值2;单一选择符的复合样式单一选择符的复合样式(包含多个属性)声明(包含多个属性)声明应该用应该用“;”隔开,为隔开,为便于阅读也可以便于阅读也可以分
4、行分行写写。CSS例子例子h1 font-size:x-large;color:redh2 font-size:large;color:blueh1 font-size:x-large;color:redh2 font-size:large;color:blueh1 font-size:x-large;color:redh2 font-size:large;color:blue5 5 CSSCSS的使用的使用 一、一、CSS的基本概念的基本概念注释注释 CSS中中文字的注释文字的注释形式与形式与C语言类似。语言类似。pfont-size:12pt /*p标签的样式定义标签的样式定义*/HTML
5、中的注释:中的注释:6 6 CSSCSS的使用的使用 一、一、CSS的基本概念的基本概念4、选择符的类型、选择符的类型 P175(1)通配选择符(通配选择符(请在书上补充请在书上补充)(2)类选择符类选择符(3)标签选择符标签选择符(4)ID选择符选择符(5)包含选择符包含选择符(6)群组选择符群组选择符7 7 CSSCSS的使用的使用 (1)通配选择符通配选择符写法是写法是“*”,表示所有元素。例如,表示所有元素。例如*font-size:12px;说明:说明:lfont-size属性表示字体的大小,属性表示字体的大小,px是像素是像素l该样式实现的效果:页面中所有文本字体大小为该样式实现的
6、效果:页面中所有文本字体大小为12个像素。个像素。8 8 CSSCSS的使用的使用 (2)类选择符类选择符类选择符类选择符P175用户自己定义的,可以使用任何名称来命名,但用户自己定义的,可以使用任何名称来命名,但必须以必须以“.”开始开始。语法如下:语法如下:.classnameproperty1:value1;property2:value2;.s1font-size:20px;color:red9 9 CSSCSS的使用的使用 类选择符的调用:类选择符的调用:里所有的元素(即各种标记里所有的元素(即各种标记/标签)都可以调用标签)都可以调用“类类”调用时必须利用标签的调用时必须利用标签的
7、class属性属性例如:例如:注意:定义类选择符的时候选择符注意:定义类选择符的时候选择符名称必须以名称必须以“.”开始开始,但在调用的时候不需要但在调用的时候不需要”.”.s1font-size:20px;color:red应用应用s1样式的文字样式的文字1010 CSSCSS的使用的使用 (3)标签选择符标签选择符 P176是指利用是指利用HTML标签作为名称的选择符。标签作为名称的选择符。例如:例如:body、h1、h2、td、ul、li等等注意:标签选择符必须是已有的注意:标签选择符必须是已有的HTML标签,由于标签,由于是重新定义显示的样式,所以它不需要被显式调用,是重新定义显示的样
8、式,所以它不需要被显式调用,网页中的标签就自动会按照重新定义后的网页中的标签就自动会按照重新定义后的HTML标标签进行显示。签进行显示。1111 CSSCSS的使用的使用 (3)标签选择符标签选择符 P176h1 font-size:x-large;color:redh2 font-size:large;color:blue标题标题1的格式的格式标题标题2的格式的格式1212 CSSCSS的使用的使用 (4)ID选择符选择符ID选择符选择符 P179命名和定义与类选择符类似命名和定义与类选择符类似不同之处:不同之处:定义时定义时用用“#”替代替代“.”。ID选择符在一个网页中按照规范选择符在一
9、个网页中按照规范只能调用一次只能调用一次调用时必须利用标签的调用时必须利用标签的id属性属性1313 CSSCSS的使用的使用 (4)ID选择符选择符#box background-color:#CCFF66;border:1px solid#000066;此处显示此处显示 id box 的内容的内容1414 CSSCSS的使用的使用 (5)包含选择符包含选择符P179n在在CSS中,可以定义某样式仅在某个特定范围内才有效。中,可以定义某样式仅在某个特定范围内才有效。(或称为派生选择符)(或称为派生选择符)格式:格式:.s2.s1font-size:12pt;font-family:黑体黑体;
10、color:red选择符选择符1 选择符选择符2property1:value1;property2:value2;S1样式仅在样式仅在s2样式作样式作用范围内会套用上述的用范围内会套用上述的样式设定。样式设定。而在其他而在其他地方不具有这些属性。地方不具有这些属性。例如:例如:1515 CSSCSS的使用的使用 (6)群组选择符群组选择符n把具有把具有相同定义的选择符相同定义的选择符组合在一起,并用逗号隔开,同组合在一起,并用逗号隔开,同时对它们的样式属性进行定义。称为群组选择符时对它们的样式属性进行定义。称为群组选择符例如:定义段落元素例如:定义段落元素p、单元格元素单元格元素td和和类类
11、c1可以使用相可以使用相同样式:同样式:p,td,.c1font-size:12pt;font-family:黑体黑体;color:red1616 CSSCSS的使用的使用 三种常用选择符定义和调用的方法三种常用选择符定义和调用的方法定义方法定义方法调用方法调用方法说明说明 h1(或其他任何存或其他任何存在的标签)在的标签)直接使用原有标签直接使用原有标签重新定义已有标签。重新定义已有标签。#f1选择性调用,原则上一选择性调用,原则上一个文件中只能用一次。个文件中只能用一次。.s1H1.s1选择性调用,推荐。选择性调用,推荐。1717 CSSCSS的使用的使用 伪类(伪类(P187)用于向某些
12、用于向某些选择符选择符添加特殊的效果添加特殊的效果仅在仅在IE5.0以上的浏览器版本才支持伪类。以上的浏览器版本才支持伪类。伪类是伪类是CSS预先定义的预先定义的语法如下:语法如下:selector:pseudo-class property:valuea:link color:#0000001818 CSSCSS的使用的使用 CSS中的伪类中的伪类伪类伪类描述描述:active向被激活的元素添加样式。向被激活的元素添加样式。:focus向拥有键盘输入焦点的元素添加样式。向拥有键盘输入焦点的元素添加样式。:hover当鼠标悬浮在元素上方时,向元素添加样式。当鼠标悬浮在元素上方时,向元素添加样式
13、。:link向未被访问的链接添加样式。向未被访问的链接添加样式。:visited向已被访问的链接添加样式。向已被访问的链接添加样式。:first-child向元素的第一个子元素添加样式。向元素的第一个子元素添加样式。:lang向带有指定向带有指定 lang 属性的元素添加样式。属性的元素添加样式。1919 CSSCSS的使用的使用 a:link color:#000000a:visited color:#cccccca:hover color:#000000;font-style:italica:active color:#aaaaaa:link color:#000000:visited c
14、olor:#cccccc:hover color:#000000;font-style:italic:active color:#aaaaaa伪类常用于超链接样式的重新定义伪类常用于超链接样式的重新定义定义的顺定义的顺序不能变序不能变!2020 CSSCSS的使用的使用 二、利用样式表编辑器编辑样式表二、利用样式表编辑器编辑样式表1、在网页中创建样式表,分别创建下列三种类型的样式表、在网页中创建样式表,分别创建下列三种类型的样式表标签选择符标签选择符类选择符类选择符ID选择符选择符2、在网页中导入、链入样式表文件、在网页中导入、链入样式表文件2121 CSSCSS的使用的使用 二、利用样式表编
15、辑器编辑样式表二、利用样式表编辑器编辑样式表字体、大小、粗细、行高、字体、大小、粗细、行高、颜色、修饰等颜色、修饰等背景颜色、图像、重复、水背景颜色、图像、重复、水平位置等平位置等字间距、对齐方式、缩进等字间距、对齐方式、缩进等宽、高、填充、边界等宽、高、填充、边界等边框的样式、宽度和颜色等边框的样式、宽度和颜色等设置项目符号和编号。设置项目符号和编号。位置的设置。位置的设置。设置滤镜。设置滤镜。2222 CSSCSS的使用的使用 三、三、CSS属性的理解与应用属性的理解与应用样式表的样式表的7类常用属性:详见类常用属性:详见P170字体属性字体属性:定义文本的字体系列、大小、粗细、风格等。:
16、定义文本的字体系列、大小、粗细、风格等。背景属性背景属性:背景颜色、背景图片等。:背景颜色、背景图片等。文本属性:定义文本的外观。文本属性:定义文本的外观。方框属性方框属性:宽度、高度、边界、填充等:宽度、高度、边界、填充等边框属性:边框粗细、颜色等边框属性:边框粗细、颜色等列表属性列表属性:列表项的类型、缩排等。:列表项的类型、缩排等。鼠标属性鼠标属性:鼠标形状等。:鼠标形状等。2323 CSSCSS的使用的使用 字体属性字体属性font-family:指定文字的字体名称指定文字的字体名称h1font-family:华文彩云华文彩云可以为给定的元素指定一系列类似的字体,然后用逗号进行连接。如
17、:可以为给定的元素指定一系列类似的字体,然后用逗号进行连接。如:h1 font-family:楷体楷体,serif;font-style:指定文字是否使用斜体。取值:指定文字是否使用斜体。取值:normal(正常)、正常)、oblique(偏斜体)、偏斜体)、italic(斜体)斜体)font-size:指定文字的大小。指定文字的大小。font-weight:normal默认值。定义标准的字符。默认值。定义标准的字符。bold定义粗体字符。定义粗体字符。bolder定义更粗的字符。定义更粗的字符。lighter定义更细的字符,定义更细的字符,100、200、300、400、500、600、70
18、0、800、900。font:上述样式属性的综合表示法。上述样式属性的综合表示法。pfont:bold 16pt2424 CSSCSS的使用的使用 颜色及背景属性颜色及背景属性color:文本颜色文本颜色background-color:指定背景颜色指定背景颜色 h1background-color:#000800background-image:指定指定html组件的背景图片,值组件的背景图片,值为为url或或none。bodybackground-image:url(image1.jpg)background-repeat background-position 2525 CSSCSS的使
19、用的使用 文本属性文本属性text-decoration:设置底线、顶线、闪烁等文字效果。值设置底线、顶线、闪烁等文字效果。值为为none,underline,overline,line-through,blink.text-align:指定文字的对齐方式。值为:指定文字的对齐方式。值为:left,right,center,justifyline-height:行高行高letter-spacing:字符间距字符间距text-transform:控制文本的大小写控制文本的大小写。值为。值为none,capitalize,uppercase,lowercase2626 CSSCSS的使用的使用 方
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 第05章 样式表 05 样式
限制150内