1 / 65

4.4 CSS 样式表运用

4.4 CSS 样式表运用. 学习目标. 理解 CSS 样式表对网页布局的作用 掌握 CSS 样式表的运用方法. 样式表设计. 样式表定义及引用 相关的标记和属性 样式的继承和作用顺序 CSS 属性 CSS 滤镜. 一、样式表定义及引用. CSS , Cascading Style Sheets ,层叠样式表,是 W3C 协会为弥补 HTML 在显示属性设定上的不足而制定的一套扩展样式标准。 CSS 标准中重新定义了 HTML 中原来的文字显示样式,并增加了类、层等新概念,可以对文字重叠、定位等,提供了更为丰富多彩的样式;同时 CSS 可进行集中样式管理。.

karena
Download Presentation

4.4 CSS 样式表运用

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. 4.4 CSS样式表运用

  2. 学习目标 • 理解CSS样式表对网页布局的作用 • 掌握CSS样式表的运用方法

  3. 样式表设计 • 样式表定义及引用 • 相关的标记和属性 • 样式的继承和作用顺序 • CSS属性 • CSS滤镜

  4. 一、样式表定义及引用 • CSS,Cascading Style Sheets,层叠样式表,是W3C协会为弥补HTML在显示属性设定上的不足而制定的一套扩展样式标准。 • CSS标准中重新定义了HTML中原来的文字显示样式,并增加了类、层等新概念,可以对文字重叠、定位等,提供了更为丰富多彩的样式;同时CSS可进行集中样式管理。

  5. CSS还允许将样式定义单独存储于样式文件中,这样可以把显示的内容和显示样式定义分离,便于多个HTML文件共享样式定义。一个HTML文件也可以引用多个CSS样式文件中的样式定义。 • 所谓"层叠",实际上就是将显示样式独立于显示的内容,进行分类管理,例如分为字体样式、颜色样式等,需要使用样式的HTML文件进行套用即可。

  6. 1. 样式表定义 • CSS样式表定义的基本语法为: 选择符(Selector){ 规则(Rule)表} • 选择符是指要引用样式的对象,它可以是一个或多个HTML标记(各个标记之间以逗号分开),如h1;也可以是类选择符(如.text)、ID选择符或上下文选择符。 • 规则表是由一个或多个样式属性组成的样式规则,各个样式属性间由分号隔开,每个样式属性的定义格式为:样式名:值 • 样式定义中可以加入注解,格式为:/*字符串*/ 【例】使用CSS控制文字显示特性<Go1> <Go2>

  7. 2. 样式引用 (1)链接到外部样式表 • 将样式表定义为一个独立的CSS样式文件; • 使用该样式表的HTML文件在头部用<link>标记链接到CSS样式文件。 【例】<Go> • 在HTML文件头部使用多个<link>标记就可以链接到多个外部样式表。 • <style>标记内定义的前后加上注释符<!--...-->的作用是使不支持CSS的浏览器忽略样式表定义。

  8. <link>标记的属性

  9. (2)引入外部样式表 • 在HTML文件的头部的<style></style>标记之间,利用CSS的@import声明引入外部样式表。 • 格式为: <style> @import URL("外部样式文件名"); ......</style>

  10. 例如 <style type= “text/css ”><!--@import URL(“style.css”);@import URL(“http://njim.edu.cn/style.css ”);--></style>

  11. 引入方式:引入外部样式表的使用方式 • 链接方式:链接到外部样式表的使用方式 • 引入方式与链接方式的区别: • 引入方式在浏览器下载HTML文件时就将样式文件的全部内容拷贝到@import关键字所在位置,以替换该关键字。 • 链接方式在浏览器下载HTML文件时并不进行替换,而仅在HTML文件体部需引用CSS样式文件中的某个样式时,浏览器才链接样式文件,读取需要的内容。

  12. (3)嵌入样式表 • 利用<style>标记将样式表嵌HTML文件的头部。 • 嵌入样式表的作用范围是本HTML文件。 【例】嵌入样式表  <Go>

  13. (4)内联样式 • 内联样式: 样式在标记内部使用样式 • 方法: 将标记的style属性值赋为所定义的样式规则 例如: <h1 style="font-family:'隶书', '宋体';color:#ff8800">CSS示例!</h1> <p style= “color:red;background-color:yellow ”>......</p><body style= “font-family: ‘宋体’;font-size:12pt;background:yellow ”> • 使用内联样式时,样式定义的作用范围仅限于此标记范围之内。

  14. 内联样式应用于样式仅适用于单个页面元素的情况,因为样式和要展示的内容混在一起,会失去一些样式表的优点,使样式定义和内容不能分离,所以尽量少用。内联样式应用于样式仅适用于单个页面元素的情况,因为样式和要展示的内容混在一起,会失去一些样式表的优点,使样式定义和内容不能分离,所以尽量少用。 • 若要在一个HTML文件中使用内联样式,必须在该文件的头部对整个文档进行单独的样式表语言声明。即 <meta http-equiv= "Content-type " content= "text/css "> 【例】四种方式的混合使用  <Go>

  15. 二、相关的标记和属性 随CSS的出现增加的HTML标记和属性: • 类选择符 • class属性 • id选择符和id属性 • 上下文选择符 • 伪类 • span标记 • div标记

  16. 1. 类选择符(Class Selector)和class属性 • 用类选择符和标记的class属性就可做到 • 在页面中不使同一种标记都遵循同一种样式 • 使不同的标记能够遵循相同的样式 • 方法:在<style>标记中定义类选择符,在体部标记中将标记的class属性值设置为类名。 • 类选择符(Class Selector)是在样式表中定义具有样式值的类.

  17. 格式1 标记名.类名 {规则1; 规则2; ......} • 示例 <head><style type="text/css">p.back { background-color:#666666;}...</style>.....</head><body>...<p class="back">本段文字的底色为#666666</p><p>这是另一段,不遵循以上样式的设置</p>......</body> <GO>

  18. 格式2 .类名 {规则1; 规则2; ......} • 示例 <head><style type="text/css">.text {font-family: "宋体"; font-size: 14pt; color: red}</style></head><body><span class="text">这行文字应是红色的。</span><h1 class="text">标题1也采用以上样式。</h1></body></html> <Go>

  19. 2. id选择符(ID Selector)和id属性 • id选择符用于定义一个元素的独有的样式,它与类选择符的区别在于id选择符在一个HTML文件中只能引用一次,而类选择符可以多次引用。 • id选择符的定义的格式为: #id名 { 规则1; 规则2; ...} • 要引用id选择符定义的样式,需在体部标记中设置id属性值,即将该id属性值设置为id名。

  20. 示例 <html><head>...<style type="text/css">...#colorid1 { color:green;}...</style></head><body>...<p id="colorid1">ID选择符与ID属性结合使用可对特定标记进行样式控制</p>......</body></html> <Go>

  21. 3. 上下文选择符(Contextual Selector) • 上下文选择符定义嵌套标记的样式 • 例如: td p { color:darkred} • 该定义指明HTML文件中出现嵌套标记<td>...<p>...</p>...</td>之处将引用该样式,即只有在单元格中的段落才使用该样式。

  22. 4. 伪类 • 伪类是特殊的类可区别标记的不同状态。 • 伪类定义格式为: 选择符:伪类 { 属性: 值 } • 伪类不用HTML的CLASS属性来指定。

  23. a:visited { • color: #0000FF; • text-decoration: none} • a:link { • font-family: "宋体"; • font-size: 9pt; color: #FF00FF; • text-decoration: none} • a:hover { • font-family: "宋体"; • font-size: 12pt; • color: #003333; • background-color: #FFCC99; • text-decoration: none} • 例如: 指定超链接(<a>)以不同的方式显示连接(links)、已访问连接(visited links)和可激活连接(active links) <Go>

  24. 5. span标记 • span标记可以带有class、id、style等与CSS样式有关的属性。 • 增加span标记的目的在不必将样式附加在一个HTML的原有标记(称为结构元素)上。 • span标记纯粹是为了应用样式,无其他作用。 • span标记是随CSS的产生而被新加入到HTML中的。  • 格式:<span>……</span>

  25. 6. div标记 • <div>是一个块级元素。<div>和</div>之间可以包含段落、标题、表格等其他块级元素。 • <div>将其中包含的内容形成一个独立段落。<div>中有align、class、id和style等属性。 • <div>与<span>共同构成HTML中层的概念,二者区别在于<div>是块级元素,而<span>是行元素;<div>可包含<span>,反之则不行。 <Go>

  26. 三、样式的继承和作用顺序 1. 样式继承 • 嵌在内层的标记采用外层标记的样式 <html><head><title>样式继承</title><style type="text/css"> h2 { color:red;}</style></head><body> <h2><u>DIV</u><strong>标记的作用</h2> </body></html> <Go>

  27. 样式继承的特殊形式——相对值继承方式,即以百分比继承。例如: <head><style> p.class1 {font-size:12pt;} p.class2 {font-size:200%} p.class3 {font-size:100%}</style></head><body> <p class="class1">第一段</p> <p class="class2">第二段</p> <p class="class3">第三段</p></body> <Go>

  28. 2. 样式的作用顺序 • 样式表的作用优先顺序遵循以下原则: • 内联样式中所定义的样式的优先级最高; • 其它的样式表按其在HTML文件中出现或被引用的顺序,越在后出现,优先级越高; • 选择符的作用优先顺序为:上下文选择符、类选择符、id选择符,优先级依次降低; • 未在任何文件中定义的样式,将遵循浏览器的缺省样式。

  29. 四、 CSS属性 • 字体属性 • 颜色及背景属性 • 文本属性 • 方框属性 • 分类属性 • 定位属性

  30. 1. 字体属性 • 字体(font-family) • 字号(font-size) • 字体风格(font-style) • 字体加粗(font-weight) • 字体变化(font-variant) • 字体综合设置(font) • …… 【例】字体属性的用法 <Go>

  31. 2. 颜色和背景属性 • 属性名: color • 可取值: 英文单词, #RRGGBB, #RGB • 含义: 指定页面元素的前景色 • 举例: • h1{color:red} • h2{color:#008800} • h3{color:#080}

  32. 属性名: background-color • 可取值:英文单词, #RRGGBB, #RGB, transparent • 含义:指定页面元素的背景色 • 举例: • body {background-color:white} • h1{background-color:#0000F0} • p{background-color:transparent}

  33. 属性名: background-image • 可取值:统一资源定位器URLs, none • 含义:指定页面元素的背景图象 • 举例: • body{background-image:url(bg.gif)} • p{ background-image:url(http://www.htmlhelp.com/bg.jpg)}

  34. 属性名:background-repeat • 可取值: repeat, repeat-x, repeat-y, no-repeat • 含义:决定一个被指定的背景图象被重复的方式。缺省值为repeat • 举例: • body {background-repeat:no-repeat} • p {background-repeat:repeat-x}

  35. 属性名:background-attachment • 可取值: scroll, fixed • 含义:指定背景图象是否跟随页面内容滚动。缺省值为sroll • 举例: • body {background-attachment:fixed}

  36. 属性名: background-position • 可取值:数值表示法,关键词表示法 • 含义:指定背景图象的位置 • 举例: • body{background-position:30% 70%} • p{background-position:bottom left}

  37. 属性名: background • 可取值:背景颜色、背景图象、背景重复、背景位置。 • 含义:背景属性综合设定 • 举例: • body {background:url(bg1.gif)  • green repeat-y fixed left 20pt} 【例】颜色和背景属性的用法 <Go>

  38. 3. 文本属性 • 属性名: letter-spacing • 可取值:长度值|normal • 含义:设定字符之间的间距 • 举例: • h1 {letter-spacing:8px} • p {letter-spacing:14pt}

  39. 属性名: text-decoration • 可取值: none|underline|overline|line-through|blink • 含义:设定文本的修饰效果,line-through是删除线,blink是闪烁效果。缺省值为none。 • 举例: • a:link,a:visited,a:active { text- decoration: none}

  40. 属性名: text-align • 可取值: left|right|center|justify(两端对齐) • 含义:设置文本横向排列对齐方式 • 举例: • p {text-align:center} • h1 {text-align:right}

  41. 属性名: vertical-align • 可取值: baseline|super|sub|tomiddle|bottom|text-top|text-bottom|百分比设定元素在纵向上的对齐方式。 • 含义:值的含义见下面的说明 • 举例: • img.mid { vertical-align:50%} • span.sup { vertical-align:super} • span.sub { vertical-align:sub}

  42. 属性名: text-indent • 可取值:长度值|百分比 • 含义:设定块级元素第一行的缩进量 • 举例: • p { text-indent:30pt} • h1 { text-indent:10%}

  43. 属性名: line-height • 可取值: normal|长度值|数字|百分比 • 含义:设定相邻两行的间距 • 举例: • p { line-height:200%} • p { line-height:30pt} 【例】文本属性的用法   <Go>

  44. 4. 方框属性 • 方框属性用于设置元素的边界、边框等属性值,可用方框属性的元素大多是块元素,包括body、p、div、td、table、hx(x=1,2,...,7)等等。 • 方框属性包括边界(margin)、边界补白(padding)、边框(border)等 【例】方框属性的用法 <Go>

  45. 5. 列表属性 • 属性名: list-style-type

  46. 【例】列表属性的用法 <Go>

  47. 6. 定位属性 (1)top、left和position属性 (二维定位属性) • top属性用于设置元素与窗口上端的距离; • left属性用于设置元素与窗口左端的距离; • position属性用于设置元素位置的模式。 • top和left属性通常配合position属性使用。position有三种取值: • absolute:绝对位置,原点在所属块元素的左上角; • relative:相对位置,即该位置是相对HTML文件中本元素的前一个元素的位置; • static:静态位置,按照HTML文件中各元素的先后顺序显示,static是缺省值。 【例】二维定位属性的使用  <Go>

  48. (2)三维空间定位 • CSS允许在三维的空间中定位元素,与之相关的属性是z-index,z-index与top和left属性结合使用。 • z-index将页面中的元素分成多个"层",形成多个层"堆叠"的效果,从而营造出三维空间效果。 • z-index的取值为整数,可以为正,也可为负,值越大表示在堆叠层中越处于高层,为0表示基准,为负表示位置在z-index=0的元素之下。 【例】三维定位属性的使用 <Go>

  49. 五、CSS滤镜 1、概述  • 作用:构造对图像处理的特殊效果 • 语法:filter:filtername(parameters) • 优点:实现简单 • 缺点:当浏览器不支持时,……

  50. CSS 属 性

More Related