1 CSS的引入方式

  • 1 CSS的引入方式已关闭评论
  • 144 次浏览
  • A+
所属分类:Web前端
摘要

CSS样式有三种不同的使用方式,分别是行内样式,嵌入样式以及链接式。我们需要根据不同的场合不同的需求来使用不同的样式。


1 CSS的引入方式

CSS样式有三种不同的使用方式,分别是行内样式,嵌入样式以及链接式。我们需要根据不同的场合不同的需求来使用不同的样式。

  • 行内样式
    行内样式,就是写在元素的style属性中的样式,这种样式仅限于元素内部起作用。当个别元素需要应用特殊样式时就可以使用内联样式。但不推荐大量使用内联样式,因为那样不利于后期维护。
  • 嵌入式
    嵌入式,是把CSS样式写在HTML文档内部head标签中的style标签里。浏览器加载HTML的同时就已经加载了CSS样式了。当单个文档需要特殊,单独的样式时,可以使用内部样式表。
  • 链接式
    链接式,就是把CSS样式写在HTML文档的外部,一个后缀为 .css 的外部样式表中,然后使用时在head标签中,使用link标签的href属性引入文件即可。当CSS样式需要应用在很多页面时,外部样式表是最理想的选择。在使用外部样式表的情况下,我们可以通过改变一个文件来改变这所有页面的外观。

common.css

div{       color: white;       background-color: #369;       text-align: center } 
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>css的引入方式</title>  <!--    链接式-->     <link rel="stylesheet" href="common.css">  <!--    嵌入式-->     <style>         p{             color: darkseagreen;         }     </style> </head> <body>     <div>故人西辞黄鹤楼</div>     <div>烟花三月下扬州</div>      <p>君不见黄河之水天上来,<br>奔流到海不复回.</p>  <!--    行内样式-->     <div style="color: white;background-color: #369;text-align: center">行内设置</div> </body> </html>