行内式(使用style属性,在HTML标签内使用)
使用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>
内嵌式(使用style标签把css代码放在特定页面的head部分中)
内嵌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>
外联式(使用link标签或@import规则,将外部css文件链接到HTML中)
外联式就是使用link标签或@import规则将外部CSS文件(.css文件)引用到HTML页面中,引用需要放在页面的<head>部分中。
1、使用link标签
<link> 标签定义文档与外部资源的关系。<link> 标签最常见的用途是链接样式表。此元素只能存在于 head 部分,不过它可出现任何次数。
例:
<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; }
说明:
这种方法会以网页文件主体装载前装载CSS文件,因此显示出来的网页从一开始就是带样式的效果的,它不会象导入式那样先显示无样式的网页,然后再显示有样式的网页。
2、使用@import规则
CSS @import规则,用于从其他样式表导入样式规则。这些规则必须先于所有其他类型的规则,@import不能在条件组的规则中使用。
语法:
@import url("文件路径");
示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> @import url("green.css"); </style> <link rel="stylesheet" href="yellow.css"> </head> <body> <div style="width: 50px; height: 50px;"></div> <!-- 盒子为黄色背景,黑色边框,即yellow.css生效 --> </body> </html>
说明:
这种方法会在整个网页装载完后再装载CSS文件,因此这就导致了一个问题,如果网页比较大则会儿出现先显示无样式的页面,闪烁一下之后,再出现网页的样式。这是导入式固有的一个缺陷。
以上就是HTML页面怎样添加CSS样式?的详细内容,更多请关注0133技术站其它相关文章!