html如何添加css样式?本篇文章就给大家介绍html添加css样式的三种方法:行内式、内嵌式、外联式的优缺点。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。
首先我们要了解一下在html中添加css样式的三种方法是什么?它们分别为:
1、使用内联CSS来应用特定元素的规则,即:行内式
2、使用内部CSS并在
HTML文档部分包含CSS规则,即:内嵌式3、链接到包含所有CSS规则的外部文件(.css文件),即:外联式
下面我们就来具体的介绍一下行内式、内嵌式、外联式的实现与优缺点。
一、行内式
内联CSS要在特定的HTML标记内使用。标签之间。内部样式表的一个示例:
<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>
内嵌CSS的优点:
1、样式表只影响一个页面。
2、内部样式表可以使用类和ID。
3、无需上传多个文件。HTML和CSS可以在同一个文件中。
内嵌CSS的缺点:
1、增加页面加载时间。
2、它只影响一个页面 - 如果要在多个文档上使用相同的CSS,则无用。
三、外联式
将CSS添加到html页面上最方便的方法可能就是将其链接到外部文件(.css文件)。这样,您对外部CSS文件所做的任何更改都将反映在你的网站上。外部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; }
外联CSS的优点:
1、HTML页面的大小更小,结构更清晰。
2、加载速度更快。
3、相同的.css文件可以在多个页面上使用。
外联CSS的缺点:
1、在加载外部CSS之前,页面可能无法正确呈现。
结论
以上就是本篇文的全部内容,给大家介绍了向html页面添加CSS的不同方法,并了解内联,外部和内部样式表之间的差异。大家可以更加需要使用不同的方法添加css样式,希望能对大家的学习有所帮助。【推荐视频学习:css教程】
以上是html如何添加css样式?行内式、内嵌式、外联式的优缺点的详细内容。更多信息请关注PHP中文网其他相关文章!