在学习前端的时候, 我们应该知道 CSS 给 html 标记添加各种样式, 用来告诉浏览器, 因该如何显示这些标记里面的内容. 既然 CSS 是用来给 HTML 添加各种样式的, 那么, 如何把 CSS 加到 HTML 中?
CSS 样式只有应用到 HTML 元素中, 样式才会产生效果. 有三种方式可以把 CSS 样式应用到 HTML 元素.
一种方式是利用 HTML 元素的 style 属性, 样式表作为 style 属性的值, 该方式也称为行内样式;
一种方式是将样式表放置在 HTML 网页文档 head 标签内, 每个样式表赋予一个名称, 然后在 HTML 元素中通过 class 属性引入样式表, 该方式也称为内部样式;
再一种方式是单独将样式表写入到一个文件, 文件的扩展名为 CSS, 然后通过 HTML 的 link 标签链接外部样式表文件, 在 HTML 元素中通过 class 属性引入样式表文件中的样式表, 该方式也称为外部样式.
行内样式
行内样式是利用 HTML 元素的 style 属性引入样式表, 行内样式的优先级最高, 行内样式会覆盖元素引入的内部样式或外部样式. 下面的 HTML 文档是行内样式的案例.
在上面的网页代码中, body 元素引入了字体尺寸样式 font-size, 字体尺寸是 12 像素, body 元素引入的样式会影响到 body 标签内所有的元素, 当 body 标签内的元素引入自身样式后, 其引入的自身样式将会覆盖 body 标签引入的样式. 下图是浏览器显示效果.
内部样式
内部样式是在 HTML 的 head 标签内放置样式表, 每个样式表赋予一个名称, 用于标识一个样式. 在 HTML 元素使用 class 属性引入已定义的样式名称. 内部样式的优先级要低于行内样式, 但高于外部样式. 下面的 HTML 文档是内部样式的案例.
在上面的网页代码中, 样式表被放置在 head 标签中的 style 标签内, style 标签属性 type 的值为 text/CSS. 放置在 style 标签内的每个样式表都被赋予一个有意义的名称, 起到见名知义的作用. HTML 元素利用 class 属性引入已定义的样式名称. 从代码的简洁性和可维护性可以看出, 使用内部样式明显要由于行内样式. 下图是浏览器显示效果.
外部样式
外部样式是将样式表写入到一个外部文件, 外部文件的扩展名为 CSS, 样式表的写法和内部样式的写法相同. 外部样式文件可以通过 HTML 的 link 标签链接到网页文档, 样式表文件链接到网页文档后, HTML 元素可以通过 class 属性引入样式文件中的样式表. 外部样式的优先级最低.
样式表文件同 HTML 文件一样, 也是文本文件, 可以使用任何文本编辑器编辑, 也可以使用高级一点的编辑工具, 如 EditPlus,UltraEdit,Dreamweaver 等软件. 样式表文件的写法同内部样式的写法相同. 下面是样式表文件代码, 文件名是 style.CSS, 和网页文件在同一目录下.
在网页文件中使用 link 标签链接前面写好的 CSS 文件, 在 link 标签的 href 属性设置 CSS 文件的路径, 路径可以是绝对路径, 也可以是相对路径, HTML 元素引入样式表的方法同内部样式相同. 网页文件代码如下.
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/html5/17133.html