CSS3-样式位置(重点)
CSS3可以理解为CSS的第三个版本;可实际上CSS是分为各种模块的,有的模块版本可能是2,有的可能是4或5等等,就即各个不同模块版本可能不一致。因此CSS3只是一个统称而已,不必深究。
CSS书写的位置,一共有3个:
1. 行内写法,如下:
<div style="color: red;font-size: 30px;"></div>
行内写法叫做内联样式。只作用于当前标签。此方式有非常大的弊病,和html耦合度太高了,有时候其他标签也要相同的样式时,需要多次重写,就非常冗余;不推荐使用
2. 内部样式表写法,如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ color: red; font-size: 30px; } </style> </head> <body> </body> </html>
此方式是开发中最常使用的;至于什么原因,等第3个样式说完再详细说明。他的好处是当前页面被选择的标签都可以共用此样式。
特别注意点:style标签的位置习惯是放在head内层的
3. 外部样式表写法,具体如下步骤:
1. 先在外部创建一个css文件
2. 在html页面引用,引用标签如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 引用外部CSS --> <link rel="stylesheet" type="text/css" href="base.css"/> </head> <body> </body> </html>
也特别注意,link位置也是在head里面,然后也属于加载的一部分。
最后,说下实际开发常用的吧。
第一种基本不考虑。内联样式是最常用的,可能会有一些小伙伴会反驳:不是外部样式使用最多吗?他的耦合度是很低,共用信很强。有这个想法是非常好,可实际中,通常我们会采用第三方组件库,都是已写好的公共样式了,不需要我们再单独去写CSS文件,基本组件库都能满足。反而是组件库提供的在某些样式上你不太满意,所以经常对某些特殊的页面单独去写内联CSS
并且内联的css还有一个很大的好处:直观易找。假设是外部样式,又引用了很多的link,根本不知道你关注的标签被哪个css文件所修饰。