在HTML文档中应用CSS

1.1 内联式

  内联式是所有样式应用方式中最为直接的一种,它通过对HTML标记使用style属性,将CSS代码直接写在其中。

<body>

  <h1 style="color:red;font-size:36px;" >内联样式</h1>

</body>

  内联式是最简单、直接的CSS使用方法,但它的针对性很明显,只能作用于当前标记,造成代码冗余,维护比较困难。

1.2 内嵌式/内部式

  内嵌式与内联式使用方法不同,它将CSS代码写在<head>标记之间,并需要采用<style>标记进行声明

<head>

  <style>

    h1{

      backgroud:red;

      text-decoration:underline;

    }  

  </style>

</head>

  使用内嵌式CSS用法时CSS代码将被集中放在<head>标记中,这样方便查找,对后期维护比较方便,页面代码也会减少。但是,如果一个网站有很多页面,如果多个网页的某个标记要使用相同的样式效果,内嵌式也会出现代码冗余和维护困难的问题,所以,内嵌式比较适合个别风格特殊的页面效果设置。

1.3 链接式/外部式/外联式

  在实际的网站建设中,链接式CSS用法是最常用的,也是效果最好的。链接式特点是将CSS代码单独放在一个或多个.css文件中,实现了CSS代码和HTML代码的分离,这样使前期设计和后期维护都很方便,也有助于实现前台美工与后台程序设计人员的合理分工。

  链接式CSS使用时需要在<head>标记中使用<link>标记,通过<link>标记的相关属性指明外部CSS文件的路径,以方便找到其中定义的CSS样式并应用在当前页面元素上。

<head>

  <link rel="stylesheet" type="text/css" href="mycss.css" />

</head>

  链接式CSS用法的最大特点是将CSS代码和HTML代码分离,这样就可以实现将一个CSS文件链接到不同的HTML网页中。使用链接式CSS,可以在设计整个网站时,将多个页面都会用到的CSS样式定义在一个或多个.css文件中,然后在需要用到该样式的HTML网页中通过<link>标记链接这些.css文件,通过链接式CSS可以降低整个网站的页面代码冗余并提高网站的可维护性。

1.4 CSS应用的优先级

●  内联式>内嵌式>外部样式

●  在多个外部样式中,后出现的样式优先级高于先出现的样式

●  在样式中,选择器的优先级:ID样式>class样式>标记样式

原文地址:https://www.cnblogs.com/jacinthcc/p/4688314.html