《5.2.2 CSS 样式表》课件高中信息技术教科版选修3 网络技术应用.ppt

CSS层叠式样式表 信息技术组 CSS样式表理论 CSS样式：是用一个指定的名字来标识和保存一组有关字符和段落格式的集合。 示例：a {color: blur;background: yellow;} 样式表能为我们做什么？ 对网页布局、字体、颜色、背景和其他图文效果做到更加精确的控制，实现网页内容和显示格式分开设计。 CSS样式表的简单应用 如何应用css样式？ 在html中应用css样式的方法有：嵌入式样式表、内联式样式表和外联式样式表。格式如下： 嵌入式样式表：P115 body style=“color:red;font-size:10pt” 内联式样式表：P116 style type=“text/css” css样式表的内容 /style 嵌入式样式表 嵌入式样式表的实现很简单，只需在每个要应用样式的HTML标签后写上CSS属性即可。如果我们想规定一个body标签中的文字为红色，字体大小为10pt,则代码的书写形式如下： body style=“color:red;font-size:10pt” 这种方式主要用于对具体的标签作具体的调整，其作用的范围只限于本标签。嵌入式样式表并没有充分体现出CSS样式表的优越性，所以应用场合并不是很多。 演示： 内联式样式表 如想只对当前页面应用样式，最好使用内联式样式表。所谓内联表就是把样式表定义语句放在标签style type=“text/css”和/style中，并把这一部分语句放在HTML文件的head区。 style type=“text/css” css样式表的内容 /style 内联式样式表（特别解释） 分类 可以将“选择”分成几种不同的“类别”，每一类应用不同的样式，类别可以是任何一种名字，在类别名称前加一个句号。（英文） style type=“text/css” .a1{color:green} .a2{color:purple} .a3{color:gray} /style 外联式样式表 所谓外联式样式表是把样式定义成一个“.css”文件（用记事本编写），然后网页中调用该文件。应用外联式样式表的好处是可以通过一个“.css”文件管理网站中的多个网页。 link rel=“stylesheet” href=“样式表文件名” 说明：link是联系，rel表示引用文件和当前页面的关系，通常rel的值是stylesheet(样式单)，表示当前文件是HTML主文件，引用的文件是修饰当前文件的样式表文件。 演示：课本p116例题 * 外联式样式表：P116 link rel=“stylesheet” href=“样式表文件名” 演示：样式表内容： h1{color:green;font-family:黑体} a{background:yellow;font-family:隶书} 演示： css分类.html应用定义样式 css应用:P116实践 *