html 页面加入 CSS 样式有三种方法, 分别为行内式(使用 style 属性, 在特定的 HTML 标签内使用), 内嵌式(style 标签把 CSS 代码放在特定页面的 head 部分中), 外联式(使用 link 标签, 将外部 CSS 文件链接到 HTML 中).
1, 行内式
使用 style 属性在特定的 HTML 标记内设置 CSS 样式.
建议不要使用内联 CSS, 因为每个 HTML 标记都需要单独设置样式, 如果您只使用内联 CSS, 管理网站可能会变得十分困难. 但是, 它在某些情况下很有用. 例如, 在您无法访问 CSS 文件或仅需要为单个元素应用样式的情况下. 带有内联 CSS 的 HTML 页面示例如下所示:
- <!DOCTYPE HTML>
- <HTML>
- <body style="background-color:black;">
- <h1 style="color:white;padding:30px;">
- Hostinger Tutorials
- </h1>
- <p style="color:white;">
- Something usefull here.
- </p>
- </body>
- </HTML>
2, 内嵌式
内嵌 CSS 样式就是把 CSS 代码放在特定页面的 < head > 部分中. 内嵌 CSS 需要放在 < style></style > 标签之间.
类和 ID 可用于引用 CSS 代码, 但它们仅在该特定页面上处于活动状态. 每次页面加载时都会下载以这种方式嵌入的 CSS 样式, 这样可以提高加载速度. 在某些情况下使用内嵌样式表很有用, 比如: 向某人发送页面模板, 因为一切都在一个页面中, 所以看到预览要容易得多.
内部样式表的一个示例:
- <head>
- <style type="text/css">
- p {color:white; font-size: 10px;}
- .center {display: block; margin: 0 auto;}
- #button-go, #button-back {border: solid 1px black;}
- </style>
- </head>
3, 外联式
外联式就是使用 link 标签元素将外部 CSS 文件 (.CSS 文件) 引用到 HTML 页面中, 引用需要放在页面的 < head > 部分中.
这是将 CSS 添加到 HTML 页面上最方便的方法. 这样, 您对外部 CSS 文件所做的任何更改都将反映在你的网站上.
外联样式表的一个示例:
- <head>
- <link rel="stylesheet" type="text/css" href="style.css" />
- </head>
而 style.CSS 包含所有样式规则. 例如:
- .xleftcol {
- float: left;
- width: 33%;
- background:#809900;
- }
- .xmiddlecol {
- float: left;
- width: 34%;
- background:#eff2df;
- }
外部样式表会影响它们所连接的任何文件, 这意味着如果你有一个 20 页的网站, 每个页面使用相同的样式表, 当需要改变的话只需编辑该样式表即可完成这些页面, 这使得长期站点管理变得更加容易.
更多 web 开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/html5/15958.html