第6章 css样式表
实验 html及CSS应用
(1)设置文字效果
(2)设置行间距
(3) CSS设置图片效果
4制作首字下沉效果
(5)制作图文混排网页
2018/6/24
《网页设计技术》
5
本章内容
CSS样式概述
CSS样式定义
CSS样式的使用
CSS属性
在Dreamweaver中编辑CSS样式
CSS应用示例
上机内容
小结
2018/6/24
《网页设计技术》
6
CSS样式概述
CSS(Cascading Style Sheets)又称层叠样式表,它是一系列格式规则集合,它能够定义网页元素的样式,如层、文本、表格、链接等元素的属性,一种样式信息与网页内容分离的标记性语言。
在CSS样式出现以前,HTML标签样式被广泛应用,HTML标签样式用于控制单个文档中一定范围内文本的格式。
而CSS样式不同,它不仅可以控制单个文档中一定范围内网页元素的格式,而且可采用外部链接的方式,控制整个站点内所有网页的格式。这样既保证了站点风格的一致性,又提高了工作效率。
,当对CSS规则修改后,所有链接该规则的文档格式会自动改变,简化了格式化网页的工作。
返回
示例
2018/6/24
《网页设计技术》
7
CSS样式由三部分组成:选择器、属性和值。
语法格式:选择器{属性1:值1;属性2:值2……}
说明:
选择器用来标识格式元素,可分为3种基本类型:标签(html)选择器、ID选择器、类(class)选择器。除了基本类型外,还可把基本类型的选择器组合使用。
属性和属性值之间用冒号(:)隔开,定义多个属性时,属性之间用分号(;)隔开。
如: body{color:black}
选择器body指页面主体部分,color颜色属性名,black颜色属性值,其效果是使页面中的文字为黑色。
CSS样式定义
在DW代码视图的编辑窗口输入以下代码,。
<html>
<head><title>在标记符中直接嵌套样式信息</title>
<style>
<!--
p{font-size:24px;text-align:center}
h1{font-family:楷体_gb2312;text-align:center}
-->
</style>
</head>
<body>
<h1>一代人</h1>
<p>黑夜给了我黑色的眼睛<br>我却用它寻找光明</p>
</body>
</html>
提示:style元素是HTML中的一个标记元素,提供了一组对应于浏览器所支持CSS规则(如background 、font-size等),可以使用这个标记元素访问CSS样式属性。
2018/6/24
《网页设计技术》
9
HTML选择器是最典型的选择器类型,网页设计者可为某个或某些HTML标记元素应用样式定义。
HTML选择器的定义方法: tag{property:value}
例如,设置表格中单元格内的文字大小为9pt,颜色为蓝色的CSS代码: td{ font-size: 9pt; color: blue}
CSS可以在一条语句中定义多个选择器
例如,将段落文本和单元格内的文字设置为蓝色的CSS代码:
td,p{color: blue}
组合选择器(逗号隔开),其中所有标签都使用指定样式。
关联选择器(空格隔开,p em{background:yellow})
表示段落中<em></em>标签中背景为黄色,而其他地方出现的<em></em>不受影响(标记em用来表示强调,其默认样式为斜体)。
CSS样式定义
10
(类选择器)
独立class选择器。可被任何HTML标记元素所应用。 语法格式:.Classname{property:value} 例如: .blueone{color:blue} 应用:需要引用该类的任意标记符内使用class属性 <h2 class="blueone">有雨的日子</h2> <p class="blueone"> 不知是无意还是天意,有你的日子总有雨! </p>
CSS样式定义
2018/6/24
《网页设计技术》
第6章CSS样式实验 来自淘豆网m.daumloan.com转载请标明出处.
