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-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选择器

posted @ 2021-08-09 19:09  Zeker62  阅读(27)  评论(0)  编辑  收藏  举报