2022年CSS实用教程 .pdf

《2022年CSS实用教程 .pdf》由会员分享，可在线阅读，更多相关《2022年CSS实用教程 .pdf（12页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、CSS 实用教程来源 互联网CSS（ Cascading Stylesheets，层叠样式表）是一种制作网页的新技术，现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。W3C（The World Wide Web Consortium ）把动态HTML （Dynamic HTML ）分为三个部分来实现：脚本语言（包括JavaScript、 Vbscript 等）、支持动态效果的浏览器（包括Internet Explorer 、Netscape Navigator 等）和 CSS 样式表。一层叠样式表的特点且不说过去的网页缺少动感，就是在网页内容的排版布局上也有很多困难，如果不是专

2、业人员或特别有耐心的人，很难让网页按自己的构思和创意来显示信息。即便是掌握了HTML语言精髓的人也要通过多次地测试，才能驾驭好这些信息的排版，过程十分漫长和痛苦。为了 Internet 的发展，让更多人早日踏足这个多姿多彩的世界，新的HTML 辅助工具呼之欲出。样式表就是在这种需求下诞生的，它首先要做的是为网页上的元素精确地定位，可以让网页设计者象导演一样，轻易地控制由文字、图片组成的演员们，在网页这个舞台上按剧本要求好好地表演。其次，它把网页上的内容结构和格式控制相分离。浏览者想要看的是网页上的内容结构，而为了让浏览者更好地看到这些信息，就要通过格式控制来帮忙了。以前两者在网页上的分布是交错

3、结合的，查看修改很不方便，而现在把两者分开就会大大方便网页的设计者。内容结构和格式控制相分离，使得网页可以光由内容构成，而将所有网页的格式控制指向某个CSS 样式表文件。 这样一来的好出表现在两个方面：第一，简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量（因为重复设置的格式将被只保存一次）。第二，只要修改保存着网站格式的CSS样式表文件就可以改变整个站点的风格特色，在修改页面数量庞大的站点时，显得格外有用。避免了一个一个网页的修改，大大减少了重复劳动的工作量，当你 面对的是有数 百个网页的站点时， CSS简直象是 神对我 们的 恩赐

4、！ _ 二 添加层叠样式表的方法我们为网页 添加样式表的方法有四 种。1最简单的方 法是直接添 加在 HTML 的 标识符 （tag）里：网页内容 举个 例子 ：CSS实例 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 12 页 - - - - - - - - - 代码说 明：用蓝 色显示字 体大 小为 10pt“的 CSS”实例 。 尽管 使用简 单、 显示 直观 ，但 是这种方 法不怎么“”常用，因为这样添 加无法完全 发挥 样式表的 优势内容结构和格式控制分别保存

5、。2添加在 HTML 的头信息 标识 ?lt;head里： type= ” text/css”表示样式表采 用 MIME 类型 ，帮助不支持CSS 的浏览器过滤掉 CSS代码，避免在浏览器面前直接 以源代码的方式显示我们设置的样式表。 但为了保 证上述情况 一定不“要发生，还是有必要在样式表里加上注释标识符 ”。3链接 样式表同样是 添加在 HTML 的头信息 标识符 里： *.css 是单独 保存的样式表文件，其中不能包 含 标识符 ，并 且只能以 css为后缀 。Media 是可 选的属性 ，表示使用样式表的网页将用什么媒体输 出。 取值范围 ： Screen（默认 ）： 输 出到 电脑屏

6、幕 Print ：输出到 打印机名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 12 页 - - - - - - - - - TV ：输出到 电视机 Projection ：输 出到 投影仪 Aural ：输出到 扬声 器 Braille ：输出到 凸字 触觉 感知设备 Tty ：输出到 电传打字机 All ：输出到以上所有设备如果要 输出到多种 媒体 ，可以用 逗号 分隔取值 表。Rel 属性 表示样式表将以何 种方式 与 HTML 文档结合。 取值范围 ： Style

7、sheet：指定一个外部的样式表 Alternate stylesheet ：指定使用一个交互样式表4联合使用样式表同样是 添加在 HTML 的头信息 标识符 里： 以import 开头的联合样式表输入 方法和链接 样式表的方法很相 似，但联合样式表 输入 方式更有 优势 。 因为联合 法可以在 链接 外部样式表的 同时， 针对该 网页的具 体情况 ，做出别的网页不需要的样式规则 。需要 注意的是：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 12 页 - - - -

8、- - - - - 联合 法输入 样式表必 须以import 开头。 如果 同时输入 多个样式表有冲突 的时 候，将按 照第一个 输入 的样式表 对网页排版。 如果 输入的样式表和网页里的样式规则冲突 时，使用外部的样式表。三 层 叠 样 式 表 的 格 式一 般 来 说 ， 样 式 表 的 声 明 分 为 选 择 符 （ selector ） 和 块 （block ）， 块里包 含属性 （properties）和 属性 的 取值 （value）， 基本格式如下：选择符 属性 ：值其它格式 1：选择符 1，选择符 2，选择符 3 属性 1：值 1；属性 2：值 2；属性 3：值 3有时 候多个

9、 选择符 将使用相 同的设置，为了简化代码，我们可以一次 性为它们设置样式，“ ”并在多个 选择符 之 间加上， 来分 隔它们。“ ”当有多个 属性 的时 候，必 须在两个 属性 之间用 ； 来分 隔。其它格式 2：选择符 1 选择符 2 属性 1：值 1；属性 2： 值 2；属性 3：值 3和格式 1“ ”非常 相似，只是在 选择符 之 间少加了， ， 但作用 却大不相 同。表示如果 选择符 2包括的内容 同时包括在 选择符 1 里的时 候，所设置的样式规则 才起作用。四层叠样式表的分类为了使网页的格式不过分的单调 ，必需让相 同 的选择符 也能分 类，并能按 照不同的类别来进行 不同的样式

10、设计。 基本格式如下：选择符 .类别名 属性 ：值类别 名将可以在 HTML 的标识符 里引用：网页内容五层叠样式表的伪类除了上 述的分 类方式外，为了使分类的使用更 灵活 多样， 又产 生了 伪类 的概念 。 类和伪类 有什么 样的 区别呢？ 一般地说， 选择符 可以和多个 类采 用捆绑 的形式来设定，这样虽然 能够为同 一个 选择符 创建 多种不 同的样式， 但捆绑 的形式同时也 限制了设定的 类为其它的 选择符所使用。 伪类 的产 生就是为了 解决 这个 问题 ，每个预声明 的伪类都 可以被所有的HTML标识符引 用， 当然 有些 块级 内容的设置 除外。 基本格式如下：.伪类名 属性

11、：值 伪类 可以被 任何标识符 在 HTML 里引用。网页内容名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 12 页 - - - - - - - - - 六控制字 体的样式控制字 体的样式包括控制字体类型 、字 体大小、字 体风格、字 体粗细四 个部分。1字 体类型平时在使用 WORD“之类的字 处理软 件的时 候，经 常需要 调 整字 体的显示， 比如说Arial”、“ Impact ”“、 Verdana ”等字 体都 是笔 者使用的 较多的。基本格式如下：font

12、-family: 字体名称如果在 font-family 后加上多种字 体 的名称 ，浏览器 回按字 体名称 的顺序逐 一在用 户的计 算机里 寻找 已经 安装 的字 体，一 旦遇 到与要求的相 匹配 的字 体 ，就按这种字体显示网页内容并停止搜索；如果不 匹配 就继续搜索 ，直到找 到为 止，万一样式表里的所有字体都没 有 安装的 话，浏览器就会用自己默认 的字 体来替代显示网页的内容。注意：“ ”当指定多种字 体 时，用， 分 隔每 种字 体名称 。“”当字体名称 包含 两个以上分开的单词 时，用把该字体名称 括起来。“”“”当样式 规则 外已经有时，用代替。2字 体大小基本格式如下：fo

13、nt-size: 字号参 数字号 的取值范围 ： 以 Point 为单位：点 单 位在所有的浏览器和操作平台上 都适 用 以 Em 为单位：指字 母要素的 尺寸 ，和 Point 相同距 离 以 Pixes 为单位： 像 素可以使用 于 所有的 操作 平 台， 但可能会因为浏览者的屏幕 分辨率 不同，而 造成显示上的效果差异 以 in（英寸 ）为 单位 以 cm（ 厘米 ）为 单位 以 mm（毫米 ）为 单位 以 pc（打印机 的字 体大小）为 单位 以 ex（x-height ）为 单位 smaller：比当 前文字的 默认 大小更小一号 larger：比当 前文字的 默认 大小更小大号 使

14、用 比例关系 xx-small x-small small medium large x-large xx-large 3字 体风格字体 风格只能控制各种斜体 字的显示。基本格式如下：font-style: 斜体 字的 名称 4字 体粗细字体粗细 控制 粗体 字的显示， 取值范围从 数字 100900，浏览器 默认 的字 体粗细 为 400。 另外可以通过 参数 lighter 和 bolder 使得字 体在原有基础 上显得更 细或更 粗些。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - -

15、 第 5 页，共 12 页 - - - - - - - - - 基本格式如下：font-weight: 字体粗细七控制文字的样式 控制文字的样式包括文字大小写 、文字修 饰两个部分。 1文字大 小写 文字大 小写 使网页的设计者不用在输入 文字时就 完成文字的大 小写 ，而可以在 输入完毕后 ，再根据 需要 对局部的文字设置大小写 。基本格式如下：text-transform: 参 数参数 取值范围 ： uppercase：所有文字大 写显示 lowercase：所有文字 小写 显示 capitalize ：每个单词 的头字母大写显示 none：不 继承母体 的文字变 形参 数注意： 继承 是

16、指 HTML 的标识符对于 包含自己的 标识符 的参数会 继承 下来。 2文字修 饰 文字修 饰的主 要用 途是改变浏览器显示文字链接 时的下 划线 。基本格式如下：text-decoration: 参数参数 取值范围 ： underline ：为文字加下划线 overline ：为文字加上划线 line-through ：为文字加 删除线 blink ：使文字 闪烁 none：不显示上 述任何 效果八控制文本的样式 控制文本的样式包括单词距 离、字母距 离、文本 行距 、 文本 水平对齐 、 文本 垂直对齐 文本缩进六 个部分。 1单词间距单词间距 指的是 英文每个单词 之间的距离，不包括

17、中文文字。基本格式如下：word-spacing: 间隔距 离间隔距 离的 取值 ：points、em、pixes、 in、 cm、mm、pc、ex、normal 等。 2字 母间距 字母间距 是指 英文字 母之间的 距离， 功能、 用法，以 及参 数的设置和 单词间距 很相 似 。基本格式如下：letter-spacing: 字母间距 3行距行距 是指上下两 行基准线 之间 的垂直距 离。 一般地说， 英文五线 格练习 本， 从上往下数的第三 条横线 就是计 算机 所认为的 该行 的基准线 。基本格式如下：line-height: 行间距 离行间距 离取值 ： 不带单 位的数字：以1 为基数

18、，相 当于比例关系的 100%名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 12 页 - - - - - - - - - 带长度 单位的数字：以具体的单 位为 准 比例关系注意：如果文字字体 很大，而 行距 相对较小 的 话，可能会发生上下两行文字互相重叠的现象。 4文本 水平对齐 文本 水平对齐 可以控制文本的水平对齐 ，而且 并不仅仅 指文字内容，也包括设置图片、影像资料 的对齐 方式。基本格式如下：text-align: 参数参数的 取值 ： left ：左对齐

19、right ：右对齐 center： 居中对齐 justify ：相 对左右对齐但需要 注意的是， text-alight 是块级属性 ，只能用 于、 、 等标识符 里。 5文本 垂直对齐 文本的 垂直对齐应当是相 对于 文本 母体 的位置而言的，不是指文本在网页里垂直对齐 。比如说，表格的单元格里有一 段 文本， 那么对 这段文本设置 垂直居中 就是 针对单 元格来 衡量的，也就是说，文本将在单元格的 正中 显示，而不是整个网页的正中 。基本格式如下：vertical-align: 参数参数 取值 ： top：顶对齐 bottom ：底对齐 text-top ：相 对 文本 顶对齐 text

20、-bottom ：相 对文本 底对齐 baseline：基准线对齐 middle ：中心对齐 sub：以下 标的形式显示 super：以上 标的形式显示 6文本 缩进 文本 缩进 可以使文本在相对默认值较 窄的 区域里显示， 主要用 于中 文 板式的首 行缩进或是为大 段的引用文本和 备注 做成 缩进 的格式。基本格式如下：text-indent: 缩进距 离缩进距 离取值 ： 带长度 单位的数字 比例关系但 是需要 注意的是，在使用比例关系 的时 候，有人会 认 为浏览器 默认 的比例 是相 对段落的 宽度而言的，其实事实并非 如 此，整个浏览器的窗口 才是浏览器所默认 的参照 物。另外，

21、text-indent 是块级属性 ，只能用 于、 、 、 等标识符 里。九控制 颜色和 背景 的样式 控制 颜色和 背景 的样式包括 颜 色属性 、 背景颜 色、 背景 图片、背景 图片重复、 背景 图片 固名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 12 页 - - - - - - - - - 定、 背景 定位 六个部分。1颜色属性基本格式如下：color: 参数 颜色参数 取值范围 ： 以 RGB 值表示 以 16 进制（ hex）的色彩 值表示 以默认 颜 色

22、的 英文名称 表示 以默认 颜色的 英文名称 表示 无 疑 是最为方便的，但由于预 定义的 颜色种 类太少，所以更多的网页设计者喜欢 用 RGB 的方式。 RGB 方式的好 处很多，不但可以用数字的形 式精确地表示 颜 色，而且也是很多图像制作 软件（如 Photoshop）里 默认使用的 规范 ，这样一来就为图片和网页更好地结合打下了 坚实的 基础 。2背景颜 色在 HTML 当中 ，要为某个 对象加上 背景 色只有一种 办法，那 就是先做一个表格，在表格中设置 完背景 色， 再 把对象放进单 元格。这样做 比较 麻烦 ，不 但代码 较多，还要为表格的大小和定位 伤些脑筋。现在用CSS 就可

23、以轻 松地 直接 搞定了，而且 对象的 范围 很广，可以是一段文字，也可以只是一个单词 或一个字 母。基本格式如下：background-color: 参数 参数取值 和颜 色属性 一样。3背景 图片 基本格式如下：background-image: url(URL) URL就是 背景 图片的存 放路径 。“如果用none ”来代 替 背景 图片的存 放路径 ，将 什么 也不显示。4背景 图片重复背景 图片重复控制的是背景 图片 平铺 与否，也就是说，结合背景 定位的控制可以在网页上的某处单独 显示一 幅背景 图片。基本格式如下：background-repeat: 参数 参数取值范围 ： n

24、o-repeat：不重复 平铺背景 图片 repeat-x：使图片只在水平 方向上 平铺 repeat-y：使图片只在垂直 方向上 平铺 如果不指定背景 图片重复 属性 ，浏览器 默认 的是 背景 图片向 水平 、垂直 两个方向上 平铺。5背景 图片 固定 背景 图片 固定控制 背景 图片是 否随 网页的 滚动而 滚动。如果不设置 背景 图片固 定属性 ，浏览器 默认 背景 图片 随网页的 滚动而 滚动。 为了避免过 于花哨 的背景 图片在 滚动时 伤害 浏览者的 视 力，所以可以 解除 背景 图片和文字内容的捆绑 ，该为和浏览器 窗口 捆绑。基本格式如下：background-attachm

25、ent: 参数 参数取值范围 ： fixed ：网页 滚动时， 背景 图片相 对于 浏览器的 窗口 而言， 固 定不动 scroll ：网页 滚动时， 背景 图片相 对于 浏览器的 窗口而言，一 起滚动6背景 定位 背景 定位用 于控制 背景 图片在网页 中显示的位置。基 本格式如下：background-position: 参 数表参 数 取值范围： 带 长度 单 位的数字参 数 top ：相 对 前 景 对 象 顶对齐bottom ：相 对 前 景 对 象 底对齐 left ：相 对 前 景对 象 左对齐 right ：相 对前景 对象右对齐center：相 对前 景对象中心对齐 比例关系

26、参数中的 center 如果用 于另 外一个 参数的前面，表示水平居中； 如果用 于另 外一个 参数的 后 面，表示 垂直居中。十控制 列表的样式名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 12 页 - - - - - - - - - 列表是 HTML 里一种很有用的显示方式，可以把相关的 并列内容整 齐地 垂直 排列，使网页显得整 洁专业， 并让浏览者有一目了然的感 觉 。 样式表为 列表 增加了一些 功能，控制 列表的样式包括 列表样式、 图形符号 、列表位置三个

27、部分。1列表符号列表 符号 是指显示 于每 一个 列表项目 前的 符号标识 。基本格式如下：list-style-type ：参数参数 取值范围 ： disc： 圆形 circle ：空心 圆 square：方 块 decimal ：十 进制数字 lower-roman ：小写 罗马 数字 upper-roman ：大 写罗马 数字 lower-alpha ：小写 希腊 字母 upper-alpha：大 写 希腊 字母 none：无符号 显示参数 中的 disc 是默认选 项。2图 形符号图形符号 指原来列 表的 项目 符号 将可以使用图形来代 替。基本格式如下：list-style-imag

28、e ：URL URL 是用来代 替 项目 符号 的图 形文件的地 址，可以使用相对地址 或绝对地址。3列表位置列表位置 描述列表在 何处 显示。基本格式如下：list-style-position ： 参数参数 取值范围 ： inside：在 BOX 模 型内部显示 outside：在 BOX 模型外部显示 这里 又出现了一个新的概念 ：BOX 模型。BOX 是指一种容器，包含 了应用样式 规则 的对象，具 体介绍 将在 后文中给出。十一控制用 户界面的样式 在网页上， 鼠标平 时呈箭 头形 ，指向 链接 时成为 手形，等 待网页下载时成为沙漏 形这 似乎是约定俗 成的。 虽然 这样的设计能使

29、我们 知道浏览器现在的 状态或是可以做 什么 ，但这些好 像还不能 完全 地满足我们的需要。 就拿链接 来说，可以是指向一个帮助文件，也可以是向前 进一页或是向 后退一页， 针对 如此多的 功能光 靠千篇 一律的手形 鼠标是不能说 明名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 9 页，共 12 页 - - - - - - - - - 问题 的。 值得庆幸 的是， CSS提供 了多 达 13 种的 鼠标形 状， 供我们选择 。基本格式如下：cursor：鼠标形 状参数CSS 鼠标形

30、 状参数表：CSS 代码鼠标形 状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=curs

31、or:se-resize 右下 箭头形style=cursor:sw-resize 左下 箭头形十二控制BOX 的样式 样式表 规定了一个容器BOX ，它将要 储 存一个 对象的所有可 操作的样式。包括了对象本身 、边框空白 、 对象边框 、对象 间隙四个方面。1边框空白 （MARGIN ）如图所示，位 于 BOX 模型 的最外层，包括 四项属性 。格式分别如下： margin-top ：顶部空白 距 离 margin-right ： 右边空白 距离 margin-bottom ： 底部空白 距离 margin-left ：左边空白 距 离空白 的距离可以用 带长度 单位的数字表示。名师资料总

32、结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 10 页，共 12 页 - - - - - - - - - 如果使用上 述属性 的简化方式margin，可以在其 后连续 加上 四个带长度 单位的数字，来分别表示margin-top、margin-right 、margin-bottom 、margin-left ，每个数字 中间 要用 空格分隔。2对象边框 （BORDER ）如图所示，位 于边框空白 和对象空隙 之间，包括了 七项属性 。格式分别如下： border-top： 顶边框宽 度 b

33、order-right ：右边框宽 度 border-bottom ：底 边框宽 度 border-left ：左边框宽 度 border-width ：所有 边框宽 度 border-color ：边框颜 色 border-style：边框 样式 参数 其中 border-width 可以一次 性 设置所有的 边框宽 度， border-color 同 时设置 四面边框 的颜 色时，可以连 续写 上 四 种 颜 色， 并 用 空格分 隔 。上 述 连 续设置的 边框 都 是按 border-top 、border-right 、border-bottom 、border-left 的顺序 。

34、Border-style 相对 别的 属性 而言 稍稍 复杂些，因为它还包括了多个边框 样式的 参数： none：无边框 。 dotted： 边框 为点 线。 dashed：边框 为长 短线。 solid ：边框 为实 线。 double：边框 为双线 。 groove：根据 color 属性 显示不 同效果的 3D 边框 ridge：根据 color 属性 显示不 同效果的 3D 边框 inset：根据 color 属性 显示不 同效果的 3D 边框 outset：根据 color 属性 显示不 同效果的 3D 边框3对象间隙（PADDING ）如图所示，位 于对 象边框 和对象之 间，包括

35、了 四项 属性 。基本格式如下： padding-top ：顶部 间隙 padding-right ：右边间隙 padding-bottom ：底部间隙 padding-left ：左边 间隙和 MARGIN类似 ， PADDING 也可以用padding 一次 性 设置所有的对 象间 隙 ，格式也和MARGIN相似，不 再一一 列举了。十三显示控制样式基本格式如下：display: 参数参数 取值范围 ： block （默认 ）：在 对象前 后都 换行 inline ：在 对 象前 后都 不换行 list-item ：在 对象前 后都 换 行，增加了 项目 符号名师资料总结 - - -精品资

36、料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 11 页，共 12 页 - - - - - - - - - none：无显示十四 空白 控制样式基本格式如下：空白 属性决 定如 何处理 元素内的 空 格。white-space: 参 数参数 取值范围 ：normal：把多个 空格替 换为一个来显示pre：忠实地按 输入 显示 空格nowrap：禁止换行但要 注意的是， write-space 也是一个 块级属性 。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 12 页，共 12 页 - - - - - - - - -