CSS层叠样式脚本概述

Zeker62

于 2021-08-09 19:09:18 发布

阅读量133

点赞数

分类专栏：网络安全学习文章标签： css html

本文链接：https://blog.csdn.net/ZripenYe/article/details/119544735

版权

网络安全学习专栏收录该内容

134 篇文章 21 订阅

订阅专栏

CSS

俗称层叠样式脚本，多用于对HTML的美化

CSS样式

元素内容颜色： color
元素内容标记背景颜色 background-color
字体大小 font-size

<html>

<head>
    <title>CSS</title>
    <meta charset="utf-8">
</head>

<body>
    <span style="color:red;background-color: pink;font-size: 111;">事实胜于雄辩,疗效战胜一切</span>
</body>

</html>

CSS 与html的三种组合方式

内联：把样式表写进标签里面，使用style传递参数;

<html>

<head>
    <title>CSS</title>
    <meta charset="utf-8">
</head>

<body>
    <span style="color:red;background-color: pink;font-size: 111;">事实胜于雄辩,疗效战胜一切</span>
</body>

</html>

内部样式：写在head标签里面，用<style></style>

<html>

<head>
    <title>CSS</title>
    <meta charset="utf-8">
    <style>
        span {
            background-color: pink;
            font-size: 60;
        }

        .blood {
            color: aqua;
            background-color: blue;
        }

        #xb {
            color: chocolate;
            background-color: cornflowerblue;
            font-size: 100;
        }
    </style>

</head>

<body>
    <span>事实胜于<span id="xb">雄辩</span>,疗效<span class="blood">战胜</span>一切</span>
    <span>没有对比就<span class="blood">没有</span>伤害</span>
</body>

</html>

在这里插入图片描述

外部选择：css代码以css文件分离，html代码用link标签连接

<html>

<head>
    <title>CSS</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css.css">

</head>

<body>
    <span>事实胜于<span id="xb">雄辩</span>,疗效<span class="blood">战胜</span>一切</span>
    <span>没有对比就<span class="blood">没有</span>伤害</span>
</body>

</html>

span{
            background-color: pink;
            font-size: 60;
        }
        .blood{
            color: aqua;
            background-color: blue;
        }
        #xb{
            color:chocolate;
            background-color: cornflowerblue;
            font-size: 100;
        }

在这里插入图片描述

选择器

我们在上面的代码看到，不同的span中间有着id和class参数，这叫选择器，可以选特定的内容做修改。
优先级：标签<类选择器<id选择器

Zeker62

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS层叠样式脚本概述

CSS俗称层叠样式脚本，多用于对HTML的美化CSS样式元素内容颜色： color元素内容标记背景颜色 background-color字体大小 font-size<html><head> <title>CSS</title> <meta charset="utf-8"></head><body> <span style="color:red;background-co
复制链接

扫一扫