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="bac公斤round-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%;
bac公斤round:#809900;
}
.xmiddlecol {
float: left;
width: 34%;
bac公斤round:#eff2df;
}
如今大都数网站运用外边样式表,外边样式是在单独的文档中编写而后附加到各样Web文档的样式。外边样式表会影响它们所连接的任何文件,这寓意着倘若你有一个20页的网站,每一个页面运用相同的样式表,当必须改变的话只需编辑该样式表就可完成这些页面,这使得长时间站点管理变得更加容易。
以上便是html怎么添加css样式?的仔细内容,更加多请关注我!!!
|