CSS入门篇01.简介与三种使用方法

最新推荐文章于 2023-07-24 09:05:28 发布

大白菜·

最新推荐文章于 2023-07-24 09:05:28 发布

阅读量127

点赞数 3

文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_62404129/article/details/126273237

版权

Css—层叠样式表

网页是多层的，可以给每层设置样式，最终看到最上一层

第一种方法：内联样式、行内样式

直接写在开始标签里面

Style属性，在属性值里写css样式，可写多组样式，；隔开

代码演示为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <DIV>
        <!-- 普通样式 -->
        <P> 丰量览在狂派会秦是杀。</P>
        <!-- css内联样式、行内样式 -->
        <P style="color: red; font-size: 40px;">丰量览在狂派会秦是杀。</P>
    </DIV>
</body>
</html>

效果图为：

优势：1.比较有针对性

缺点：1.修改起来不方便

2.结构和表现耦合了

第二种方法：内部样式表

写在head标签内部，写一个style标签，选中对应元素，在{}内设置样式，多组样式；隔开

代码演示为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            /* 字体颜色 */
           color: aqua;
           /* 字体大小 */
           font-size: 20px; 
           /* 字体加粗 */
           font-weight: bold;
        }
    </style>
</head>
<body>
    <DIV>
        <!-- 普通样式 -->
        <span>丰量览在狂派会秦是杀。</span><br>
        <P> 丰量览在狂派会秦是杀。</P>
    </DIV>
</body>
</html>

效果图为：

优势：1.修改比较方便2.结构和表现分开

缺点：不方便复用

第三种方法：外部样式表

在html文件外，新建.css文件，在css文件里，选中对应元素，设置样式；通过link标签，引入.css文件，即可生效

html代码演示为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- link标签来引入.css -->
    <link rel="stylesheet" href="./reset.css">
</head>
<body>
    <DIV>
        <!-- 普通样式 -->
        <span>丰量览在狂派会秦是杀。</span><br>
        <P> 丰量览在狂派会秦是杀。</P>
    </DIV>
</body>
</html>

css代码演示：

p{
    color: blue;
    font-size: 25px;
    font-weight: bold;
}

效果图为：

以上就是引用css的三种样式

大白菜·

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
CSS入门篇01.简介与三种使用方法

在html文件外，新建.css文件，在css文件里，选中对应元素，设置样式；通过link标签，引入.css文件，即可生效。写在head标签内部，写一个style标签，选中对应元素，在{}内设置样式，多组样式；Style属性，在属性值里写css样式，可写多组样式，；以上就是引用css的三种样式。直接写在开始标签里面。...
复制链接

扫一扫