CSS 书写位置

2020-08-05T09:25:23
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

CSS的样式书写位置

css的样式书写位置常用的有三种:

  • 行内样式(内联样式)
  • style标签
  • 外部样式(link标签)

行内样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css书写位置</title>
</head>
<body>
<p style="color:red;font-size:30px;">生当作人杰,死亦为鬼雄</p>
<p>至今思项羽,不肯过江东</p>
</body>
</html>

将样式直接编写到 style 属性中,这样的样式称为内联样式,也叫行内样式。

<p style="color:red;font-size:30px;">生当作人杰,死亦为鬼雄</p>

这句的意思是,通过p标签的 style 属性,为p标签的内容设置样式,样式颜色为红色,字体大小为30像素。

css的样式也是采用名值对结构,名与值用冒号连接, 多个名值对直接用分号分隔,最后一个也要加上分号。内联样式只对当前元素种的内容起作用,所以第二个p标签是没有应用到第一个p标签中的样式。

注意:body标签(元素)以及body中的标签都可以使用style属性。

缺点:

  • 因为样式只对当前元素起作用, 如果其它标签也需要这种样式,需要给其它标签复制该样式,所以内联样式不方便复用。
  • 内联样式属于结构与表现耦合,不方便后期的维护,不推荐使用。
<p style="color:red;font-size:30px;">生当作人杰,死亦为鬼雄</p>
<p style="color:red;font-size:30px;">至今思项羽,不肯过江东</p>

style标签

为了解决行内样式的缺点,引入了style标签。将css样式写到head中的style标签里。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css书写位置</title>
    <style type="text/css">
        p {
            color: red;
            font-size: 30px;
        }
    </style>
</head>
<body>
<p>生当作人杰,死亦为鬼雄</p>
<p>至今思项羽,不肯过江东</p>
</body>
</html>

将样式表编写的style标签中,通过css选择器选中指定元素,就可以同时为这些元素设置样式,使样式进一步复用。

    <style type="text/css">
        p {
            color: red;
            font-size: 30px;
        }
    </style>

style 标签的使用说明:

  • type属性以及属性值是固定的。可写可不写。为了兼容以前的浏览器,最好写上。
  • p代表选择了当前页面中所有的p标签,这些p标签应用了大括号中的样式。
  • css的注释以/开头,以 /结尾,类似于CLLE的注释。它只能用在style标签中或者css文件中。

缺点:这种写法虽然可以复用,但是它只能在当前页面复用样式,如果多个页面想复用同一个样式,就只能将样式拷贝到每个页面中,达不到复用的效果。

link标签

为了解决同一个样式在不同页面不能复用的问题, 引入了link 标签。

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

style.css 文件内容如下,注意文件名称可以随便命名。

p {
    color: red;
    font-size: 30px
}

这里面的样式内容和上面的style标签中的格式一样。下面html代码通过 link 标签引入了 style.css样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css书写位置</title>
    <link rel="stylesheet" type="text/css" href="https://segmentfault.com/a/1190000021367143/style.css"/>
</head>
<body>
<p>生当作人杰,死亦为鬼雄</p>
<p>至今思项羽,不肯过江东</p>
</body>
</html>

说明:上面代码中最重要的是:

<link rel="stylesheet" type="text/css" href="https://segmentfault.com/a/1190000021367143/style.css"/>
  • link 中的rel 和type属性都是固定的。
  • 外部文件style.css中只需要写css样式即可,通过 href 属性引入,需要相对路径。

优点:

  • 将css 样式统一编写到外部的样式表中,完全使结构和表现分离,可以使样式表在不同的页面中使用,最大限度地使样式进行复用。
  • 将样式统一写在样式表中,然后通过link标签引入,可以利用浏览器的缓存,加快用户访问的速度,提高了用户体验,所以在开发中最推荐使用外部的css文件。
扫一扫关注公众号添加购物返利助手,领红包
当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »
因本文不是用Markdown格式的编辑器书写的,转换的页面可能不符合MIP标准。