CSS 书写位置

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

css 书写位置

行内样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css书写位置</title>
</head>
<body>
    <p style="color: red;">生当作人杰,死亦为鬼雄</p>
</body>
</html>

注意这句:

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

p 标签有 style 属性,可以给p标签设置样式,这种称为行内样式,又叫内联样式。

注意: 除了 body 元素之外的标签,所有HTML标签都能设定style属性。行内样式只对当前元素起作用,不方便复用,假如另一个元素也要使用相同的样式,那么只能复制一份,不推荐使用

如下:两个标签内的相同样式,使用行内样式只能复制一份。

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

style标签

为了解决上面的问题,使用style标签可以解决,将样式写入到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 type="text/css">
        p {
            color: red;
            font-size: 30px
        }
   </style>

在style标签中,p 是要选中的标签名称,大括号里面的是样式,上面的意思是所有 p 标签内容都设置为红色、30个像素大小。这里就解决了在同一个文本中样式不能复用的问题。但是如果想在不同的文件中复用样式呢?这种方式不能解决。

link标签

为了解决不同文件共享同一种样式,link 标签出现了,这需要我们把css写在外部,然后html文件引入样式即可,做到了结构和样式的分离。

首先需要编写 css 样式文件: style.css,内容如下:

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

然后在 html 文件中引入即可:

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

这里最关键的是:

<link rel="stylesheet" type="text/css" href="https://segmentfault.com/a/1190000021358065/style.css">

link 的前两个属性是固定的,href 属性是要引入外部css的相对位置。如果还有别的 html 文件想用到这个样式文件,同样也引入即可,实现了样式复用的效果,提高了访问速度。

注意:link标签在同一个文档中可以加载多个外部样式。

总结

上面我们使用了三种方式为 html 标签添加样式,归结起来就三种:

1.元素内部: 行内样式
2.文档内部: style标签
3.外部样式: link标签

一般工作中都是使用外部样式,其余两种可以在学习测试的时候使用,不建议在生产工作中使用。

关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看