前端css——外部css文件样式、内部样式与内联样式

style标签,三大样式

        • 外部css文件(最推荐使用,对所有页面都起作用)
        • 内部样式(只对当前页面起作用)
        • 内联样式

外部css文件(最推荐使用,对所有页面都起作用)

还可以将样式表编写到外部的css文件中,然后通过link标签来将外部的css文件引入到当前页面中
这样外部文件中的css样式表将会应用到当前页面中

将css样式统一编写到外部的样式表中,完全使结构和表现分离,可以使用样式表在不同的页面中使用
最大限度的使样式可以进行复用,,将样式同意写在样式表中,然后通过link标签引入,可以利用浏览器的缓存
加快用户访问的速度,提高了用户体验,使用在开发中最推荐使用的是外部的css文件

<head>
    <!--
        还可以将样式表编写到外部的css文件中,然后通过link标签来将外部的css文件引入到当前页面中
        这样外部文件中的css样式表将会应用到当前页面中

        将css样式统一编写到外部的样式表中,完全使结构和表现分离,可以使用样式表在不同的页面中使用
        最大限度的使样式可以进行复用,,将样式同意写在样式表中,然后通过link标签引入,可以利用浏览器的缓存
        加快用户访问的速度,提高了用户体验,使用在开发中最推荐使用的是外部的css文件
    -->
    <link rel="stylesheet" type="text/css" href="class.css"/>
</head>
<body>
  <P>谁知盘中餐</P>
  <P>粒粒皆辛苦</P>
  <p>床前明月光</p>
  <p>崂山道士</p>
</body>

前端css——外部css文件样式、内部样式与内联样式_第1张图片

内部样式(只对当前页面起作用)

也可以将css样式编写到head中的style标签里
将样式表编写的style标签中,然后通过css选择器选中指定元素(如指定元素p)(内部样式)
然后同时为这些标签设置样式,这样可以使样式进一步的复用
将样式表编写到style标签中,也可以使表现和结构进一步分离,也是我们推荐的使用样式


> 只对当前页面起作用


```csharp
<head>
  <style type="text/css">
        P{
            color:red;
            font-size:40px;
        }
    </style>
</head>
<body>
  <P>谁知盘中餐</P>
  <P>粒粒皆辛苦</P>
  <p>床前明月光</p>
  <p>崂山道士</p>
</body>

内联样式

可以将css样式编写到元素的style属性中
内联样式直接编写到style属性中,这种样式我们称为内联样式
内联样式只对当前的元素中的内容起作用,内联样式不可复用
内联样式属于结果与表现耦合,不方便后期的维护,不推荐使用
《元素也就是标签》

<!--
            可以将css样式编写到元素的style属性中
                将内联样式直接编写到style属性中,这种样式我们称为内联样式
                内联样式只对当前的元素中的内容起作用,内联样式不可复用
                内联样式属于结果与表现耦合,不方便后期的维护,不推荐使用
                
            <P style="color:red;font-size:40px;">谁知盘中餐</P>
            <P style="color:red;font-size:40px;">粒粒皆辛苦</P>
        -->

你可能感兴趣的:(前端HTML,CSS,JavaScript)