本节讲解如何使用 CSS 控制 html 页面, 以及控制页面的各种方法, 包括行内样式, 嵌入式, 链接式和导入式等, 先看个例子:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="https://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>CSS 调用示例代码</title>
- <link href="base.css" rel="stylesheet" type="text/css" /> <!- - 此为链接 (外部) 样式表>
- <style type="text/css">
- body,td,th {font-size: 12px;}
- p{font-size: 24px;color:#FFFF00;}
- </style> <!--<style></style > 之间为内嵌样式表.-->
- <body>
- <p id="container">
- <p id="header"> <p > 头部</p> </p>
- <p id="content">
- <p style="color:#FF0000;font-size:36px">行内样式</p> <!- - 此为行内样式表>
- </p>
- <p id="footer"> <p > 尾部</p> </p>
- </p>
- </body>
- </html>
上面的代码分别使用了链接式样, 行内样式和内嵌样式, 这也是实际开发中用的最多的 3 种样式, 看不懂没关系, 下面讲逐步的详细讲解.
行内式 CSS 样式
行内方式是 4 种样式中最直接最简单的一种, 直接对 HTML 标签适用 style="", 例如:
<p style="color:#FF0000;font-size:36px">行内样式</p>
虽然这种方法比较直接, 在制作页面的时候需要为很多的标签设置 style 属性, 所以会导致 HTML 页面不够纯净, 文件体积过大, 不利于搜索蜘蛛爬行, 从而导致后期维护成本高.
嵌入式 CSS 样式
嵌入式 css 样式, 就是可以把 css 样式代码写在 < style type="text/css"></style > 标签之间. 并且一般情况下嵌入式 css 样式写在 < head></head > 之间.
示例:
使用嵌入式方式, 也就是说每个页面都需要定义的, 如果一个网站有很多页面, 每个文件都会变大, 后期维护成本会很高. 如果文件很少, CSS 代码也不多, 这种方式是比较好的选择.
链接式 CSS 样式
链接式 CSS 样式就是把 css 代码写一个单独的外部文件中, 这个 css 样式文件以 ".css" 为扩展名, 在 < head > 内 (不是在 < style > 标签内) 使用 < link > 标签将 css 样式文件链接到 HTML 文件内. 如下面代码:
<link href="base.css" rel="stylesheet" type="text/css" />
这种方式是使用频率最高, 也是最实用的方式. 它将 HTML 文件和 CSS 文件彻底分成两个或者多个文件, 实现了页面 HTML 代码与美工 CSS 代码的完全分离, 使得前期制作和后期维护都十分方便, 并且如果要保持页面风格统一, 只需要把这些公共的 CSS 文件单独保存成一个文件, 其他的页面就可以分别调用自身的 CSS 文件, 如果需要改变网站风格, 只需要修改公共 CSS 文件就 OK 了, 相当的方便, 这是 xHTML+CSS 制作页面提倡的方式.
导入式 CSS 样式(了解)
为了内容的完整性, 这里也提下导入样式. 导入样式和链接样式比较相似, 采用 import 方式导入 CSS 样式表, 在 HTML 初始化时, 会被导入到 HTML 文件中, 成为文件的一部分, 类似第二种内嵌方式. 常用的 @import 举例:
- @import url(sheet1.css);
- @import url("sheet1.css");
- @import sheet1.css;
- @import "sheet1.css";
这个方式会产生不必要的请求, 影响网页加载时间, 这种方式了解下就好, 不建议使用.
四种样式的优先级
如果这上面的四种方式中的两种用于同一个页面后, 就会出现优先级的问题. 四种样式的优先级别是(从高至低): 行内样式, 内嵌样式, 链接样式, 导入样式.
来源: https://www.2cto.com/kf/201807/760164.html