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文件所修饰。

原文地址:https://www.cnblogs.com/ibcdwx/p/15417143.html