在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样式>标记样式