《Dreamweaver CS6 完全自学教程》笔记第十四章：使用 CSS 设计网页

最新推荐文章于 2021-08-04 04:31:16 发布

SP FA

最新推荐文章于 2021-08-04 04:31:16 发布

阅读量1.8k

点赞数 1

分类专栏： Dreamwaver学习文章标签： dreamweaver

本文链接：https://blog.csdn.net/SP_FA/article/details/108265490

版权

Dreamwaver学习专栏收录该内容

19 篇文章 85 订阅

订阅专栏

第十四章：使用 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.···.com/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 样式” 中右键应用即可。

SP FA

关注

1
点赞
踩
22

收藏

觉得还不错? 一键收藏
打赏
0
评论
《Dreamweaver CS6 完全自学教程》笔记第十四章：使用 CSS 设计网页

文章目录第十四章：使用 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
复制链接

扫一扫