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样式>标记样式
扫一扫
1385
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
