文章目录
- 第十四章:使用 CSS 设计网页
- 14.1 CSS 样式表简介
- 14.2 CSS 的基本语法
- 14.3 伪类、伪元素以及样式表的层叠顺序
- 14.3.1 伪类和伪元素
- 14.3.2 样式表的层叠顺序
- 14.4 CSS 中的属性
- 14.4.1 CSS 中的字体及文本控制
- 14.4.2 CSS 中的颜色及背景控制
- 14.4.3 CSS 中的方框的控制属性
- 14.4.4 CSS 中的分类属性
- 14.5 添加 CSS 样式表
- 14.5.1 链接一个外部的样式表
- 14.5.2 嵌入一个样式表
- 14.5.3 联合使用样式表
- 14.5.4 id 属性
- 14.5.5 class 属性
- 14.5.6 span 元素
- 14.5.7 div 元素
- 14.6 CSS 样式表的应用
- 14.6.1 创建 CSS 样式表
- 14.6.2 应用自定义样式
- 14.6.3 链接到外部样式表
第十四章:使用 CSS 设计网页
14.1 CSS 样式表简介
CSS(Cascading Style Sheets)层叠样式表。CSS 是一组样式,样式中的属性在 HTML 元素中依次出现,并显示在浏览器中。样式可以定义在 HTML 文件的标志(TAG)里,也可以在外部附件文件中。如果是附件文件,一个样式表可以用于多个页面。
CSS 的每一个样式表由相对应的样式规则组成,使用 HTML 中的 style 组件就可以把样式规则加入到 HTML 中。style 组件位于 <head>
部分,其中也包含网页的样式规则。所以 CSS 的语句是内嵌在 HTML 文档内的。
14.2 CSS 的基本语法
编写 CSS 的方法和编写 HTML 文档的方法是一样的,CSS 的代码由一些最基本的语句构成,它的基本语法如下:
Selector {property:value}
其中 property:value 是样式表的定义,property 表示属性,value 表示属性值,属性与属性值之间用冒号隔开,属性值与属性值之间用分号隔开:
选择符{属性1:属性值1;属性2:属性值2}
Selector 是选择符,一般都是定义样式 HTML 的标记,如 table、body、p 等。
14.3 伪类、伪元素以及样式表的层叠顺序
14.3.1 伪类和伪元素
伪类和伪元素是 CSS中特殊的类和元素,它们能够自动被支持 CSS 的浏览器所识别。伪类可以用于文档状态的改变、动态的事件等。
选择符:伪类 {属性:属性值}
选择符:伪元素 {属性:属性值}
CSS 类也可以与伪类、伪元素一起使用,有两种表示方式:
选择符.类:伪类 {属性:属性值}
选择符.类:伪元素 {属性:属性值}
✳ 定位锚伪类:
伪类可以以不同的方式显示链接(links)、已访问链接(visited links)和可激活链接(active links)。
A:link {color:red}
A:active {color:blue; font-size:125%}
A:visited {color:green; font-size:85%}
✳ 首行伪元素:
文本的首行可能会以粗体的形式展示。
P:first-line {font-variant:small-caps; font-weight:bold}
✳ 首字母伪元素:
P:first-letter {font-size:500%; float:left}
14.3.2 样式表的层叠顺序
当使用了多个样式表,样式表需要指定选择符的控制权。这种情况下,总会有样式表的规则能获得控制权,以下特性能决定相互对立的样式表的结果。
! important:
把样式指定为重要的样式,其优先级会高于其他相同权重的样式。网页设计者指定的规则高于浏览者。
BODY {background:url(bar.gif) white; background-repeat:repeat-x ! important}
Origin of Rules(Author‘s vs. Reader’s):
网页的设计者和浏览者都有能力去指定样式表。当两者的规则发生冲突时,在相同权重的情况下,网页设计者的规则会高于浏览者的规则。但网页设计者和浏览者的样式表都高于浏览器的内置样式表。
为方便使用,当两个规则具有同样的权重时,取后面的那个规则。
14.4 CSS 中的属性
14.4.1 CSS 中的字体及文本控制
字体属性:
-
font-family: 指使用的字体名称。
<p style="font-family:Verdana">SPRING</p>
如果添加了多种字体,浏览器会逐一搜索用户电脑中的字体,匹配到后停止搜索,如果没有匹配的字体,则用浏览器默认的字体。 -
font-style: 指字体是否使用特殊样式。属性值为:italic(斜体)、bold(粗体)、oblique(倾斜)。
<p style="font-style:italic">SPRING</p>
-
text-transform: 控制文字大小写。属性值为:uppercase(大写)、lowercase(小写)、capitalize(单词首字母大写)、none(不继承母体的文字变形参数)。
-
font-size: 字体大小。
font-size:字号属性值
字号的单位:- pt: 点,所有浏览器和操作平台都适用。
- em: 相对长度单位,相对于当前对象内文本的字体尺寸。
- px: 像素,适用于所有的操作平台,但可能会因为浏览者屏幕分辨率不同,造成显示差异。
- in: 1 in = 2.54 cm = 25.4 mm = 72 pt = 6 pc
- pc: 打印机的字体大小,相当于四号铅字的尺寸。
- ex: 相对于字符 x 的高度,通常为字体尺寸的一半。
-
text-decoration: 文字的修饰,改变浏览器显示文字链接时的下划线。属性值:Underline(下划线)、Overline(上划线)、line-through(删除线)、blink(闪烁)、none(无效果)。
文本属性:
- word-spacing: 单词间距
- letter-spacing: 字母间距
- line-height: 行间距
- text-align: 文本水平对齐。属性值:left、right、center、justify(相对左右对齐)。text-align 是块级属性,只能用于
<p>
、<blockqoute>
等标识符里。 - vertical-align: 垂直对齐。属性值:
- top: 顶对齐
- bottom: 底对齐
- text-top: 相对文本顶对齐
- text-bottom: 相对文本底对齐
- baseline: 基准线对齐
- middle: 中心对齐
- sub: 以下表的形式显示
- super: 以上标的形式显示
- text-indent: 文本的缩进。text-indent 也是块级属性。
14.4.2 CSS 中的颜色及背景控制
✳ 对颜色属性的控制:
使用 16 进制色标值表示或以默认的颜色英文名表示。
color:颜色参数值
✳ 对背景颜色的控制:
在 HTML 中,要为某个对象添加背景颜色只能先做一个表格,在表格中设置颜色,再把对象放入表格。而 CSS 却可以轻松做到这一点,且对象范围广,可以是一段文字、一个单词、一个字母。
background-color:参数值
参数默认值为 transparent(透明)
✳ 对背景图像的控制:
background-image:url(URL)
如:
body {background-image:url(/images/foo.gif)}
✳ 背景图像重复的控制
background-repeat:属性值
属性值:
- no-repeat: 不重复
- repeat-x: 水平方向平铺
- repeat-y: 垂直方向平铺
如果不指定属性值,默认在水平、垂直两个方向同时平铺。
✳ 背景图像固定控制:
背景图像是否随网页的滚动而滚动。默认滚动。
background-attachment:属性值
- fixed: 不滚动
- scroll: 滚动
✳ 背景定位:
用于控制背景在网页中的位置。
background-position:属性值
属性值:
- top: 相对前景对象顶对齐
- bottom: 相对前景对象底对齐
- left: 相对前景对象左对齐
- right: 相对前景对象右对齐
- center: 相对前景对象中心对齐
14.4.3 CSS 中的方框的控制属性
CSS 样式中规定了一个容器(BOX),它将储存一个对象的所有可操作的样式,包括对象本身、边框空白、对象边框、对象间隙 4 方面。
✳ 边框空白:
位于 BOX 模型的最外层,包括 4 项属性:
- margin-top: 顶部空白距离
- margin-right: 右边空白距离
- margin-bottom: 底部空白距离
- margin-left: 左边空白距离
<html>
<head>
<title>CSS 示例</title>
<meta http-equiv="Content-Type" content="text/html;charset=gb3212">
</head>
<body bgcolor="#FFFFFF">
<p style="background:lightgreen;margin:2em 10% 5% 20%" title="margin:2em 10% 5% 20%;background:lightgreen">段落边界设置</p>
</body>
</html>
其中 margin:2em 10% 5% 20%;background:lightgreen
中的四个数依次是 margin-top、margin-right、margin-bottom、margin-left。
✳ 对象边框:
- border-top: 顶边框
- border-right: 右边框
- border-bottm: 底边框
- border-left: 左边框
- border-width: 所有边框,可以一次性设置所有的边框宽度;用 border-width 设置 4 条边框的颜色时,可以连续写上 4 种颜色,顺序为 border-to、border-right、border-bottm、border-left 。
- border-color: 边框颜色
- border-style: 边框样式参数
- none: 无边框
- dotted: 边框为点线
- dashed: 边框为长短线
- solid: 边框为实线
- double: 边框为双线
- groove: 根据 color 属性显示不同效果的 3D 边框
- ridge: 根据 color 属性显示不同效果的 3D 边框
- inset: 根据 color 属性显示不同效果的 3D 边框
- outset: 根据 color 属性显示不同效果的 3D 边框
✳ 对象间隙:
即填充距,指的是文本边框与文本之间的距离,包括以下 4 项属性。
- padding-top 顶部间隙
- padding-right 右边间隙
- padding-bottom 底部间隙
- padding-left 左边间隙
用 padding 也可以一次性设置所有间隙,格式与 margin 相似。
14.4.4 CSS 中的分类属性
在 HTML 中,用户无需使用前面提到的一些字体、颜色、容器属性来对字体、颜色、边距等进行初始化,因为在 CSS 中已经提供了进行分级的专用分类属性。
✳ 显示控制样式:
display:属性值
- block(默认): 在对象前后都换行
- inline: 在对象前后都不换行
- list-item: 在对象前后都换行,增加了项目符号
- none: 表示无显示。
✳ 空白控制样式:
空白属性决定如何处理元素内的空格。
white-space:属性值
- normal: 把多个空格替换为一个来显示
- pre: 按输入显示空格
- nowrap: 禁止换行。
要注意的是,white-space 也是一个块级属性。
✳ 列表前的项目编号控制:
list-style-type:属性值
- none: 无强调符
- disc: 实心圆
- circle: 空心圆
- square: 方形实心
- decimal: 数字
- lower-roman: 小写罗马字
- upper-roman: 大写罗马字
- lower-alpha: 小写字母
- upper-alpha: 大写字母
✳ 在列表项前加入图像:
list-style-image:属性值
- none: 不加入图像
- url: 加入图像的 url
✳ 目录样式位置:
用于设置强调符的缩排、伸排
list-style-position:属性值
- inside: 缩排
- outside(默认): 伸排
✳ 目录样式:
list-style:属性值
- 目录样式类型
- 目录样式位置
- url
✳ 控制鼠标光标属性:
cursor:属性值
style="cursor:hand":
手形style="cursor:crosshair":
十字形style="cursor:text":
文本形style="cursor:wait":
等待形style="cursor:move":
十字箭头style="cursor:help":
问号形style="cursor:e-resize":
右箭头style="cursor:n-resize":
上箭头style="cursor:nw-resize":
左上箭头style="cursor:w-resize":
左箭头style="cursor:s-resize":
下箭头style="cursor:se-resize":
右下箭头style="cursor:sw-resize":
左下箭头
<html>
<head>
<title>changemouse</title>
</head>
<body>
<p>
<span style="cursor:hand">手形</span> <br> <br>
<span style="cursor:wait">等待</span> <br> <br>
<span style="cursor:help">求助</span> <br> <br>
</p>
</body>
</html>
其中,
————菜鸟教程<span>
标签用于对文档中的行内元素进行组合。
<span>
标签没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。如果不对<span>
应用样式,那么<span>
元素中的文本与其他文本不会任何视觉上的差异。
<span>
标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。
14.5 添加 CSS 样式表
14.5.1 链接一个外部的样式表
一个外部的样式表可以通过 HTML 的 link 元素连接到 HTML 文档中,link 标记放置在 head 部分。可选的 type 属性用于指定媒体类型。
<head><link rel="stylesheet" href="*.css" type="text/css" media="screen"></head>
外部样式表不能包含任何 HTML 标签,样式表仅仅由样式规则和声明组成。一个单独由 P { margin:2em }
组成的文件就可以用作外部样式表了。
<link>
有一个可选的 media 属性,用于指定样式表被接受的媒体。其属性值如下:
- Screen(默认): 提交到计算机屏幕
- Print: 输出到打印机
- TV: 输出到电视
- Projection: 投影仪
- Aural: 扬声器
- All: 所有设备
可以用逗号分隔多个设备。
rel 属性用于定义连接文件和 HTML 文档之间的关系。
- rel=“stylesheet”: 指定一个固定或首选的外部样式表。
- rel=“alternate stylesheet” 定义一个交互样式。固定样式在激活表激活时总被应用。
大多数浏览器会将外部样式表保存在缓冲区,从而避免在载入网页时重新载入样式表。
14.5.2 嵌入一个样式表
一个样式表可以使用 style 元素在文档中嵌入。
<head><style type="text/css"><!--样式表的具体内容--></style></head>
<style>
元素放在文档的 head 部分,必须的 type 属性用于指定媒体类型,link 元素也一样。同样地,title 和 media 属性也可以用 style 指定。type=“text/css” 表示样式表采用 mime 类型,帮助不支持 CSS 的浏览器过滤掉 CSS 代码,但为了保证上述情况不发生,还是有必要在样式表里加上注释符 <!-- -->
。
<STYLE TYPE="text/CSS" MEDIA=screen>
<!--
BODY { background:url(foo.gif)red; color:black }
.note { margin-left:5em; margin-right:5em }
-->
</STYLE>
14.5.3 联合使用样式表
以 @import 开头的联合样式表的输入方法和链接样式表相似,但联合样式表输入方式更有优势。因为联合法可以在链接外部样式表的同时,针对该网页的具体情况,做出具体的样式规则。
<head><style type ="text/css">< !--@import "*.css" 其他样式表的声明--></style></head>
<STYLE TYPE="text/CSS" MEDIA="screen,projection">
<!--
@improt url(http://www.···/style.CSS);
DT { background:yellow; color:black }
-->
</STYLE>
@import 可以在 CSS 中再次引入其他样式表,比如可以创建一个主样式表,在主样式表中再引入其他的样式表。当页面被加载的时候,link 引用的 CSS 会同时被加载,而 @import 引用的 CSS 会等到页面全部下载完再被加载。
14.5.4 id 属性
id 是根据文档对象模型原理所出现的选择符类型。对于一个网页而言,其中的每一个标签,均可以使用一个 id="" 的形式对 id 属性进行一个名称的指定,再网页中每个 id 只能使用一次。
<div id="main"> ··· </div>
在 CSS 中,id 选择符使用 “ # ” 进行标识,如需要对 id 为 main 的标签设置样式:
#main{
font-size:14px; line-height:16px;
}
14.5.5 class 属性
class 可翻译为类,是对 HTML 多个标签的组合,标签可以用 class="" 的形式对 class 属性进行指定,与 id 属性不同的是,class 允许重复使用,对于不同的标签,CSS 可以直接根据 class 名称进行样式指定。
class 在 CSS 中使用 “ , ” 加 class 名称的形式。
14.5.6 span 元素
span 允许网页制作者给出一个样式表,但无须加在 HTML 元素上,span 是独立于 HTML 元素的。
span 在样式表中作为一个标识符使用,而且也接受 style class 和 id 属性。
span 是一个内联元素,它纯粹是为了应用样式表而成立的,所以当样式表无效时,它的存在就没有意义了。
14.5.7 div 元素
div 与 span 相似,具有 span 的所有功能,但有 span 不具有的特色。div 是一个块,也就是所谓的容器,具有自己独立的段落、独立的标题、独立的表格,就如 <html> ··· </html>
一样包括了一切。
如:
<div class="mydiv">
<h1>独立的标题</h1>
<p>独立的段落</p>
<table>···</table>
.
.
.
</div>
而这些是 span 没有的,span 和 div 的区别在于,div 是一个块级元素,可以包含段落、标题、表格等。而 span 是内联元素,span 的前后是不换号的,它没有结构的意义,纯粹是应用样式。
14.6 CSS 样式表的应用
14.6.1 创建 CSS 样式表
点击 窗口 -> CSS样式,或按 Shift + F11 打开 “ CSS 样式” 面板,点击右下方 “新建 CSS 规则” 按钮。
参数介绍:
- 选择器类型: 可以在其中的下拉列表中选择新建的 CSS 类型。
- 选择器名称: 可以在文本框中输入 CSS 样式的名称。
- 规则定义: 选择是新建样式表文件,还是对当前文档应用 CSS 样式。
点击 “确定” 保存文件,之后会打开 “ CSS 规则定义“ 对话框。其中 ”分类“ 列表中显示了设置 CSS 样式的不同属性:
类型:
-
Font-family: 设置文本的字体类型
-
Font-size: 设置字体的大小
-
Font-style: 设置字体的特殊格式,如正常、斜体、偏斜体
-
Line-height: 设置文本的行高,若选择 ”正常“ 则由系统自动计算行高和字体大小,若希望具体指定,可直接输入数值和单位。
-
Text-transform: 设置文本的大小写
-
Color: 设置字体颜色
-
Text-decoration: 设置字体的修饰格式
- underline:下划线
- overline:上划线
- line-through:删除线
- blink:闪烁
- none:无
背景:
-
Background-color: 单击背景颜色按钮选择背景颜色,或直接输入 16 进制色标值。
-
Background-image: 在其下拉列表中输入 URL。
-
Background-repeat:
- 不重复:只显示一次背景图像。
- 重复:在水平和垂直方向上重复。
- 横向重复:在水平方向上重复。
- 纵向重复:在垂直方向上重复。
-
Background-attachment: 设置背景图像是否滚动。”滚动“ 表示背景图像跟随滚动条上下滚动。
-
Background-position(X): 指定图像相对于应用样式的元素的水平位置,包括 “左对齐”、“居中”、“右对齐”,也可以输入数值和单位。
-
Background-position(Y): 包括 “顶部”、“居中”、“底部”。
区块:
-
Word-spacing: 设置单词间距
-
Letter-spacing: 设置字符间距。这里设置的字符间距会覆盖任何由文本调整而产生的字符间距。
-
Vertical-align: 设置指定元素相对于其父级元素在水平方向上的对齐方式,也可输入百分数。
-
Text-align: 文本元素对齐方式。
-
Text-indent: 文本第一行的缩进距离。
-
White-space: 设置空格。
- 正常:多个空格被当作一个看待。
- 保留:保留元素中空格的原始形象。
- 不换行:不会对过长文本自动换行,须使用
<br>
。
-
Display: 设置以上关于 CSS 样式块在网页中的具体应用。
方框:
- Width: 设置元素宽度,可输入自动或数值。
- Height: 设置元素高度。
- Float: 设置应用样式的元素的浮动位置,选择 “左对齐” 可以将元素放置到左页面空白处,“右对齐” 同理。
- Clear: 不允许层出现在元素的某侧,“左对齐” 不允许层出现在元素的左侧,“右对齐” 同理。
- Padding: 定义元素内容和元素边界之间的大小,可以分别输入相应的值并选择单位。
- Margin: 定义元素边界和其他元素之间的空白大小。
- 全部相同: 在 Top 文本框中输入所要设置的数值和单位,下面的项会与其保持一致。
边框:
- Style: 设置边框的格式。
- Width: 定义元素的边框宽度。可以选择其下拉列表中的选项,也可以输入数值和单位。
- Color: 定义元素的边框颜色。
列表:
- List-style-type: 设置项目符号或编号的列表符号类型。
- List-style-image: 设置图片作为列表的项目符号。
- List-style-Position: 设置列表项的换行位置。选择 “内” 选项,表示当列表项过长而换行时,直接显示在旁边的空白处,不缩进;选择 “外” 选项,表示当列表项自动换行时,以缩进方式显示。
定位:
- Position: 设置浏览器如何放置层。
- Visibility: 设置层的初始化显示位置。
- Width: 自定义层的宽度数值和单位。
- Height: 自定义层的高度数值和单位。
- Z-Index: 定义层在堆栈中的顺序,即层重叠的顺序。值越高越靠上。
- Overflow: 定义如果层中的内容超出层的边界后,将会发生什么。
- Placement: 设置层的位置和大小。
- Clip: 定义可视层的局部区域的位置和大小。如果指定了层的碎片区域,可以通过脚本和 JavaScript 来进行操作。
扩展:
- 分页: 设置在打印页面时强制分页的位置。在 Page-brack-before 和 Page-brack-after 中可以分别设置分页前和分页后的位置。
- 视觉效果: 设置样式的一些可视效果。
- Filter: 指定应用了样式的特殊效果,如模糊、反转等。
过渡:
- 持续时间: 以秒或毫秒为单位输入过渡效果的持续时间。
- 延迟: 设置经过多少时间才开始显示过渡效果。
- 计时功能: 选择过渡效果样式。
14.6.2 应用自定义样式
自定义样式通常针对网页中个别元素进行设置,在网页中自定义元素样式的方法有 3 种:
- 选中要定义的元素,在 “CSS 样式” 面板中,选择要应用的 CSS 样式。
- 选中要定义的元素,右键,在 “CSS 样式” 中选择。
- 选中要定义的元素,在 “属性” 面板上的 “样式” 中选择。
14.6.3 链接到外部样式表
点击 窗口 -> CSS 样式 ,打开 “CSS 样式” 面板。点击面板上的 “附加样式表” ,在 “文件 / URL” 文本框中输入相应路径。确定后在 “CSS 样式” 中右键应用即可。
返回
更多推荐
《Dreamweaver CS6 完全自学教程》笔记 第十四章:使用 CSS 设计网页
发布评论