CSS选择器 三大特性 背景

已于 2024-03-18 10:05:29 修改
阅读量842 收藏 16
点赞数 16
分类专栏： web 文章标签： css 学习 前端
于 2024-03-14 22:23:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73701759/article/details/136723287
版权

后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css简介</title>
    <style>
        h1 {
            color: #333;
            text-align: left;
        }
        p {
            text-indent: 2em;
            color: #444;
            font-size: 14px;
            line-height: 30px;
        }
        a {
            color: #0069c2;
        }
        li {
            font-size: 14px;
            color: #444;
            line-height: 30px;
        }
    </style>
</head>
<body>
    <h1>CSS（层叠样式表）</h1>
    <p>质叠样表(Casading Style Sheets，缩写为CSS)，是一种<a href="#">样式表</a>语言，
        用来播述 HTML XM(包 SVG、MathMLXHTML 之樊的XML 分支语言)文档的呈现。
        CSS 捕述了在屏幕、质、音等其它媒休上的元素应该如何被潼染的问题.</p>
    <p><strong>CSS是开放网络的核心诞言之一</strong>，由 W3C 规范 实现浏览器的准化。
        CSS 节省了大量的工作。样式可以通过定义保存在外部,CSS 文件中，同控制多个网页的布局，
        这意味着开发者不必经历在所有网页上编布局的烦，CSS 被分为不同等汲:CS1 现已废弃，
        CSS2.1 是推荐标准，CSS3分成多个小模块且正在标准化中。</p>
    <ul>
        <li>cSS介绍如果你是Web 开发的斯手
            请务必回读我们的CSS 基础文章以学习 CSS 的含义和用法</li>
        <li>CSS 教程 我们的CSS 学习区 包含了丰富的款程，它们盖了金部基础知识，
            能使你在CSS 之路上从初出茅声到游刃有余</li>
        <li>CSS 参考 针对资深 Web 开发者的<a href="#">详细参考手册</a> ，播述了 CSS 的个属性与概念</li>
    </ul>
</body>
</html>

子代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子代选择器</title>
    <style>
        div > span {
            color: red;
        }
    </style>
</head>
<body>
    <h3>子代选择器</h3>
    用div > span来定义作为子代选择器<br>
    <div>
    <span>这是 div 里面的 span</span>
        <p>
            <span>这是 div 里面的 p 里面的 span</span>
        </p>
    </div>
</div>
</body>
</html>

并集选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>并集选择器</title>
    <style>
        div ,
        p ,
        span {
            color: rebeccapurple;
        }
    </style>
</head>
<body>
    <h3>并集选择器</h3>
    并集选择器:选中多组标签设置相同的样式<br>
    选择器写法：选择器1, 选择器2,..., 选择器N（CSS属性），选择器之间用，隔开<br><br>
    <div>这是div标签</div>
    <p>这是p标签</p>
    <span>这是span标签</span>
</div>
</body>
</html>

交集选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交集选择器</title>
    <style>
        p.box {
            color: rebeccapurple;
        }
    </style>
</head>
<body>
    <h3>交集选择器</h3>
    交集选择器 - 了解<br>
    <strong>交集选择器:</strong> 选中同时满足多个条件的元素<br>
    <strong>选择器写法：</strong>选择器1选择器2{CSS 属性}，选择器之间连写，没有任何符号<br>
    <p class="box">p 标签，使用了类选择器 box</p>
    <p>p 标签</p>
    <div class="box">div 标签，使用了类选择器 box</div>
</body>
</html>

伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        a:hover {
            color: red;
            font-size: 100px;
        }
        div:hover {
            color: red;
        }
        .box:hover {
            color: red;
        }
    </style>
</head>
<body>
    <h3>伪类选择器</h3>
    <strong>伪类选择器：</strong>伪类表示元素状态，选中元素的某个状态设置样式。<br>
    <strong>鼠标悬停状态：</strong>选择器：hover{CSS属性} <br>
    <img src="./img/伪类选择器.png" alt=""><br><br>

    <a href="#">这是a标签,超链接</a>
    <div class="box">这是div标签</div>
</body>
</html>

伪类超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类超链接（拓展）</title>
    <style>
        a:link {
            color: red;
        }

        a:visited {
            color: green;
        }

        a:hover {
            color: blue;
        }

        a:active {
            color: orange;
        }
    </style>
</head>
<body>
    <h3>伪类超链接（拓展）</h3>
    超链接一共四个状态：<br>
    <ul>
        <li>:link：访问前</li>
        <li>:visited：访问后</li>
        <li><strong>:hover：鼠标悬停</strong></li>
        <li>:active：点击时（激活）</li>
    </ul>
    <img src="./img/伪类选择器-超链接.png"><br><br>

    <a href="#">这是a标签</a><br><br>
    这里访问前红色<br>
    这里访问后绿色<br>
    这里鼠标悬停蓝色<br>
    这里鼠标点击橙色<br>
</body>
</html>

CSS特性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS特性</title>
</head>
<body>
    <h3>CSS特性</h3>
    <strong>CSS特性:化简代码 /定位问题，并解决问题<br></strong>
    <ul>
        <li>继承性</li>
        <li>层叠性</li>
        <li>优先级</li>
    </ul><br>
    
</body>
</html>

CSS继承性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS继承性</title>
    <style>
        body {
            font: 30px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB," 5B8B 4F53",sans-serif;
            color: #777;
        }
    </style>
</head>
<body>
    <h3>CSS继承性</h3>
    <strong>继承性：</strong>子级默认继承父级的文字控制属性<br>
    <h4>如果标签自己有样式则生效自己的样式，不继承</h4>
    <img src="./img/继承性.png"><br><br>
    <strong>在这里全文除了a有自己的，其他的继承这个标签<br></strong>
    font: 12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB," 5B8B 4F53",sans-serif;<br>
    color: #666;<br>
    <br>
    <div>div 标签</div>
    <p>p 标签</p>
    <span>span 标签</span><br><br>

    <a href="#">这是a标签</a>
</body>
</html>

CSS层叠性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS层叠性</title>
    <style>
        div{
            color: red;
            font-weight: 700;
        }      
        
        div {
            color: green;
            font-size: 30px;
        }
    </style>    ·
</head>
<body>
    <h3>CSS层叠性</h3>
    <strong>特点：</strong><br>

    <ul>
        <li>相同的属性会覆盖:后面的 CSS 属性覆盖前面的 CSS 属性</li>
        <li>不同的属性会叠加:不同的 CSS 属性都生效</li>
    </ul>

    相同的属性会覆盖，这里会变成绿色<br>
    不同的属性会叠加，这里30px并且粗细700 <br>
    <img src="./img/层叠性.png"><br>
    <div>这是div标签，将被覆盖为绿色。</div>

</body>
</html>

CSS优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS优先级</title>
    <style>
        strong {
            color: red ;
        }
        * {
            color: black /* !important */;
        }
        div {
            color: green;
        }
        .box {
            color: blue;
        }
        #id {
            color: orange;
        }
    </style>
</head>
<body>
    <h3>CSS优先级</h3>
    <strong>优先级：</strong>权重，一个标签有多幢选择器，基于不同种类选择器的匹配规则<br>
    <strong>规则:</strong>选择器优先级高的样式生效<br>
    <strong>公式：</strong>通配符择器示，签选择器，类选择器，id选择器，行内样式，!important <br>
    <strong>（选中标签的范围越大，优先级越低）</strong>
    <br><br>
    <div>这是div标签，将被覆盖为绿色。因为div范围比*小</div>
    <div class="box">这是div标签，将被覆盖为蓝色。因为div范围比.box大</div>
    <div class="box" id="id">这是div标签，将被覆盖为橙色。因为id小于类选择器小于标签选择器小于通配符选择器</div>
    <div class="box" id="id" style="color: purple;">这是div标签，将被覆盖为紫色。因为行内样式选择器小于id小于类选择器小于标签选择器小于通配符选择器</div>
    <div class="box" id="id" style="color: purple;">这是div标签，将被覆盖为黑色。因为现在*里有！important小于行内样式选择器小于id小于类选择器小于标签选择器小于通配符选择器</div>
</body>
</html>

优先级权重叠加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优先级权重叠加</title>
    <style>
        /* 行内0，id0，类2，标签1 */
        .c1 .c2 div {
            color: blue;
        }
        /* 行内0，id1，类0，标签1 */
        div #box3 {
            color: green;
        }
        /* 行内0，id1，类1，标签0 */
        #box1 .c3 {
            color: orange;
        }
    </style>
</head>
<body>
    <h3>优先级权重叠加</h3>
    <img src="./img/优先级叠加计算.png" alt=""><br>
    <strong>叠加计算:</strong>如果是复合选择器，则需要权重叠加计算<br>
    <strong>公式:</strong> (每一级之间不存在进位)(行内样式，id选择器个数，类选择器个数，标签选择器个数) <br>
    <strong>规则:</strong>
    <ul>
        <li>从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较</li>
        <li>继承权重最低</li>
        <li>!important权重最高</li>
    </ul>
    <br>
    <div id="box1" class="c1">
        <div id="box2" class="c2">
            <div id="box3" class="c3">
                这行文本神魔颜色
            </div>
        </div>
    </div><br>
    <strong>对比发现橙色<br></strong>
    <img src="./img/优先级叠加计算2.png">
</body>
</html>

emmet写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>emmet写法</title>
    <style>
        div {
            height: 10px;
            width: 500px;
            background-color: #fff;
            width: 500px;
            height: 500px;
            background-color: red;
            
        }
    </style>
</head>
<body>
    <h3>emmet写法</h3>
    Emmet写法:代码的简写方式，输入缩写 VS Code 会自动生成对应的代码<br>
    <ul>
        <li>HTML <br> <img src="./img/Emmett写法HTML.png" alt=""></li>
        <li>CSS:大多数简写方式为属性单词的首字母</li>
    </ul><br>
    <div></div>
    <p class="box">这是p标签</p>
    <div class="box">div</div>
    <p id="box">p</p>
    <div></div>
    <p></p>
    <div>
        <p></p>
    </div>
    <div></div>
    <div></div>
    <div></div>
    <div>123</div>
</body>
</html>

背景图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background-image: url(./img/背景图1.png);
        }
    </style>
</head>
<body>
    <h3>背景图</h3>
    网页中，使用背景图实现装饰效果<br>
    <strong>属性名：</strong>background-image: url();<br>
    默认平铺效果<br>
    <div>这是div</div>
</body>
</html>

背景图平铺方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图平铺方式</title>
    <style>
        .div1 {
            width: 400px;
            height: 400px;
            background-color: red;
            background-image: url(./img/背景图1.png);
            background-repeat: no-repeat;
        }
        .div2 {
            width: 400px;
            height: 400px;
            background-color: red;
            background-image: url(./img/背景图1.png);
            background-repeat: repeat;
        }
        .div3 {
            width: 400px;
            height: 400px;
            background-color: red;
            background-image: url(./img/背景图1.png);
            background-repeat: repeat-x;
        }
        .div4 {
            width: 400px;
            height: 400px;
            background-color: red;
            background-image: url(./img/背景图1.png);
            background-repeat: repeat-y;
        }
    </style>
</head>
<body>
    <h3>背景图平铺方式</h3>
    网页中，使用背景图实现装饰效果<br>
    <strong>属性名：</strong>background-repeat: （简称bgr）<br>
    属性值：
    <ul>
        <li>no-repeat 不平铺</li>
        <li>repeat 平铺</li>
        <li>repeat-x x方向平铺</li>
        <li>repeat-y y方向平铺</li>
    </ul>
    <strong>不平铺</strong>
    <div class="div1">这是div</div><br>
    <strong>平铺</strong>
    <div class="div2">这是div</div><br>
    <strong>x方向平铺</strong>
    <div class="div3">这是div</div><br>
    <strong>y方向平铺</strong>
    <div class="div4">这是div</div><br>
</body>
</html>

背景图位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图位置</title>
    <style>
        .div1 {
            width: 400px;
            height: 400px;
            background-color: red;
            background-image: url(./img/背景图1.png);
            background-position: left;
            background-repeat: no-repeat;
        }
        .div2 {
            width: 400px;
            height: 400px;
            background-color: red;
            background-image: url(./img/背景图1.png);
            background-repeat: no-repeat;
            background-position: right;
        }
        .div3 {
            width: 400px;
            height: 400px;
            background-color: red;
            background-image: url(./img/背景图1.png);
            background-repeat: no-repeat;
            background-position: center;
        }
        .div4 {
            width: 400px;
            height: 400px;
            background-color: red;
            background-image: url(./img/背景图1.png);
            background-repeat: no-repeat;
            background-position: top;
        }
        .div5 {
            width: 400px;
            height: 400px;
            background-color: red;
            background-image: url(./img/背景图1.png);
            background-repeat: no-repeat;
            background-position: bottom;
        }
        .div6 {
            width: 400px;
            height: 400px;
            background-color: red;
            background-image: url(./img/背景图1.png);
            background-repeat: no-repeat;
            background-position: 0 20px;
        }
    </style>
</head>
<body>
    <h3>背景图位置</h3>
    <strong>属性名：</strong>background-position: （简称bgp）<br>
    <img src="img/背景图位置.png" alt="">
    属性值：
    <ul>
        <li>left 左侧</li>
        <li>right 右侧</li>
        <li>center 居中</li>
        <li>top 顶部</li>
        <li>bottom 底部</li>
        <li>直接坐标</li>
    </ul>
    <strong>提示：</strong>
    <ul>
        <li>关键字取值方式写法，可以颠倒取值顺序</li>
        <li>可以只写一个关键字，另一个方向默认为居中;数字只写一个值表示水平方向，垂直方向为居中
            <ul><li>水平：正数向右，负数向左</li>
                <li>竖直：正数向下，负数向上</li></ul>
        </li>
    </ul>
    <h4>这是都是平铺</h4>
    <strong>左侧</strong>
    <div class="div1">这是div</div><br>
    <strong>右侧</strong>
    <div class="div2">这是div</div><br>
    <strong>居中</strong>
    <div class="div3">这是div</div><br>
    <strong>顶部</strong>
    <div class="div4">这是div</div><br>
    <strong>底部</strong>
    <div class="div5">这是div</div><br>
    <strong>坐标</strong>
    <div class="div6">这是div</div><br>
</body>
</html>

背景图缩放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图缩放</title>
    <style>
        .div1 {
            width: 400px;
            height: 400px;
            background-color: red;
            background-image: url(./img/背景图1.png);
            background-repeat: no-repeat;
            background-size: cover;
        }
        .div2 {
            width: 400px;
            height: 400px;
            background-color: red;
            background-image: url(./img/背景图1.png);
            background-repeat: no-repeat;
            background-size: contain;
        }
        .div3 {
            width: 400px;
            height: 400px;
            background-color: red;
            background-image: url(./img/背景图1.png);
            background-repeat: no-repeat;
            background-size: 20%;
        }
        .div4 {
            width: 400px;
            height: 400px;
            background-color: red;
            background-image: url(./img/背景图1.png);
            background-repeat: no-repeat;
            background-size: 200px;
        }
    </style>
</head>
<body>
    <h3>背景图缩放</h3>
    <strong>作用：</strong>设置背景图大小。<br>
    <strong>属性名：</strong>background-size（bgz）。<br>
    <strong>常用属性值</strong> <br>
    <ul>
        <li>关键字
            <ul>
                <li>cover：等比例缩放背景图片以完全装入背景区，可能背景图片部分看不见</li>
                <li>contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白</li>
            </ul>
        </li>
        <li>百分比：根据盒子尺寸计算图片大小</li>
        <li>数字+单位(例如: px)</li>
    </ul>
    <div>这是div</div>
    <strong>关键字cover：等比例缩放背景图片以完全装入背景区，可能背景图片部分看不见</strong>
    <div class="div1">这是div</div><br>
    <strong>关键字contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白</strong>
    <div class="div2">这是div</div><br>
    <strong>百分比（这里20%）：根据盒子尺寸计算图片大小</strong>
    <div class="div3">这是div</div><br>
    <strong>数字+单位（这里100px）</strong>
    <div class="div4">这是div</div><br>
</body>
</html>

背景图固定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图固定</title>
    <style>
        .div1 {
            width: 4000px;
            height: 4000px;
            background-color: red;
            background-image: url(./img/背景图1.png);
            background-repeat: no-repeat;
            background-size: cover;
            background-attachment: fixed;

        }
        .div2 {
            width: 400px;
            height: 400px;
            background-color: red;
            background-image: url(./img/背景图1.png);
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
</head>
<body>
    <h3>背景图固定</h3>
    <strong>作用：</strong>背景不随元素内容滚动。<br>
    <strong>属性名：</strong>background-attachment: fixed;<br>
    <strong>常用属性值</strong> fixed<br>
    <strong>正常</strong>
    <div class="div2">这是div</div><br>
    <strong>fixed</strong>
    <div class="div1">这是div</div><br>
    
</body>
</html>

背景图符合属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景复合属性</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            /* background: pink url(./img/背景图1.png) no-repeat center/cover; */
            background: pink url(./img/背景图1.png) no-repeat center/contain ;
        }
    </style>
</head>
<body>
    <h3>背景复合属性</h3>
    <strong>属性名:</strong>background (bg) <br>
    <strong>属性值:</strong>背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定(空格隔开各个属性值，不区分顺序) <br>
    <img src="./img/背景复合属性.png" alt="" class=""><br>
    <br>
    <div>这是div</div>
</body>
</html>

显示模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示模式</title>
    <style>
        div {
            width: 100px;
            height: 100px;
        }
        .div1 {
            background-color: red;
        }
        .div2 {
            background-color: blue;
        }
        span {
            height: 200px;
            width: 200px;
        }
        .span1 {
            background-color: red;
        }
        .span2 {
            background-color: blue;
        }
        img {
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <h3>显示模式</h3>
    <strong>显示模式：</strong>标签元素的显示方式<br>
    <strong>作用：</strong>布局网页的时候，根据标签的显示模式选择合适的标签摆放内容。<br>
    <ul>
        <li>块级元素
            <ul><li>独占一行</li>
                <li>宽度默认是父级的100%</li>
                <li>增加宽度属性生效</li>
            </ul>
        </li>
        <li>
            行内元素：
            <ul>
                <li>一行共存多个</li>
                <li>内容决定尺寸</li>
                <li>加行宽高无效</li>
            </ul>
        </li>
        <li>行内块元素：
            <ul>
                <li>一行共存多个</li>
                <li>内容决定尺寸</li>
                <li>加行宽高有效</li>
            </ul>
        </li>
    </ul><br><br>
    <!-- 块级元素 -->
    <div class="div1">这是div标签</div>
    <div class="div2">这是div标签</div>
    <!-- 行内元素 -->
    <span class="span1">这是span标签</span>
    <span class="span2">这是span标签</span>
    <!-- 内容块元素 --> <br>
    <img src="./img/背景图1.png" alt="">
    <img src="./img/背景图1.png" alt="">
</body>
</html>

显示模式转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>转换显示模式</title>、
    <style>
        div {
            width: 100px;
            height: 100px;
        }
        .div1 {
            background-color: red;
            display: inline-block;
        }
        .div2 {
            display: inline;
            background-color: blue;
        }
        span {
            height: 200px;
            width: 200px;
        }
        .span1 {
            display: block;
            background-color: red;
        }
        .span2 {
            display: inline-block;
            background-color: blue;
        }
        img {
            width: 200px;
            height: 200px;
            display: block;
        }
    </style>
</head>
<body>
    <h3>转换显示模式</h3>
    <strong>属性名：</strong>disply <br>
    <strong>属性值：</strong>
    <ul>
        <li>block 块级</li>
        <li>inline 行内块</li>
        <li>inlin 行内</li>
    </ul><br><br>
    <!-- 块级元素 -->
    <div class="div1">这是div标签，转成行内块元素</div>
    <div class="div2">这是div标签，转成行内元素</div>
    <!-- 行内元素 -->
    <span class="span1">这是span标签，转成块元素</span>
    <span class="span2">这是span标签，转成行内块元素</span>
    <!-- 内容块元素 --> <br>
    <img src="./img/背景图1.png" alt="">转成块元素
    <img src="./img/背景图1.png" alt="">转成块元素
</body>
</html>

热词

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例热词</title>
    <style>
        a {
            display: block;
            width: 200px;
            height: 80px;
            background-color: #3064bb;
            color: #fff;
            text-decoration: none;
            text-align: center;
            line-height: 80px;
            font-size: 18px;
        }
        a:hover {
            background-color: #608dd9;
        }
    </style>
</head>
<body>
    <a href="#">HTML</a>
    <a href="#">CSS</a>
    <a href="#">Javascript</a>
    <a href="#">Vue</a>
    <a href="#">React</a>
</body>
</html>

banner效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例-banner效果</title>
    <style>
        .banner {
            height: 500px;
            background-color: #f3f3f4;
            background-image: url(./img/bk.png);
            background-repeat: no-repeat;
            background-position: left bottom;
            /* 文字控制属性 */
            text-align: right;
            color: #333;
            
        }
        .banner h2 {
            font-size: 36px;
            font-weight: 400px;
            line-height: 100px;
        }
        .banner p {
            font-size: 20px;
        }
        .banner a {
            width: 125px;
            height: 40px;
            background-color: #f06b1f;
            display: inline-block;
            text-align: center;
            line-height: 40px;
            text-decoration: none;
            font-size: 20px;
            color: #f3f3f4;
        }
    </style>
</head>
<body>
    <div class="banner">
        <h2>让创造产生价值</h2>
        <p>我们希想小游戏平台可以提供无限的可能性，让每一个创作者都可以将和创意传建给用户</p>
        <a href="#">我要报名</a>
    </div>
</body>
</html>

在这里插入图片描述

鷇韩
关注
  • 16
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
CSS三大特性及其选择器
yanyihan16的博客
05-23 630
目录 一、CSS三大特性 1.继承性 2.层叠性 3.优先级 权重 !important注意点 例子 二、CSS选择器 项目 项目 一、CSS三大特性 1.继承性 子标签可以继承父类的标签的样式 color,text-开头，line-开头，font-开头的 可以继承，关于文字样式的可以继承，但并不是所有的属性都可以继承的，比如所有关于盒子的，定位的，布局的属性不可以继...
CSS-复合选择器-CSS背景-CSS三大特性
解启超
02-18 386
重点： 复合选择器 后代选择器 并集选择器 标签显示模式 CSS背景 背景位置 CSS三大特性 优先级 1. CSS复合选择器 目标 理解 理解css复合选择器分别的应用场景 应用 使用后代选择器给元素添加样式 使用并集选择器给元素添加样式 使用伪类选择器 为什么要学习css复合选择器 CSS选择器分为 基础选择器 和 复合选择器 ，但是基础选择器不能满足...
css背景+选择器优先级
qq_66222563的博客
12-25 188
background-color:默认transparent。
CSS：选择器与三大特性
盒马的博客
12-15 1038
CSS选择器，CSS的三大特性
CSS——选择器及三大特性
Guizy
12-13 1566
目录 CSS选择器 标签选择器 id选择器 类选择器 id选择器和类选择器的区别 后代选择器 子元素选择器 后代选择器和子元素选择器之间的区别 交集选择器 并集选择器 兄弟选择器 相邻兄弟选择器 通用兄弟选择器 序选择器 属性选择器 通配符选择器 CSS选择器 标签选择器 跳转到目录 什么是标签选择器? 作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签,...
CSS 的复合选择器、元素显示模式、背景、三大特性
m0_73645234的博客
08-06 404
1. CSS 的复合选择器 1.1什么是复合选择器 1.2后代选择器（重要） 1.3子选择器（重要） 1.4并集选择器（重要） 1.5伪类选择器 1.5.1链接伪类选择器 1.6 :focus 伪类选择器 1.7复合选择器总结 2.CSS 的元素显示模式 2.1 什么是元素显示模式 2.2 块元素 2.2行内元素 2.3行内块元素 2.4 元素显示模式总结 2.5 元素显示模式转换
CSS常见选择器
Python老吕的博客
02-28 1240
要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。每一条css样式定义由两部分组成，形式如下： [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。
css3 复合选择器,CSS复合选择器
weixin_28987001的博客
08-03 1435
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。交集选择器交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。比如： p.one 选择的是： 类名为 .one 的 段落标签。使用率相对较少记忆技巧：交集选择器 是 并且的意思。 即...又...的意思并...
CSS选择器大全
认真学习前端的博客
03-08 1490
CSS选择器中的通用 ID class 标签 属性以及交集 并集选择器，伪类，伪元素选择器等等 还有选择器的优先级权值等内容
CSS基础2-选择器进阶+背景属性+元素显示模式+三大特性
12-05
CSS基础-选择器进阶+背景属性+元素显示模式+三大特性 CSS基础选择器进阶： 在CSS中，选择器是用于选择HTML元素并应用样式的核心机制。选择器进阶是指在基础选择器的基础上，进一步学习和应用选择器的高级规则和...
css3属性选择器,背景缩写
06-19
在CSS3中，属性选择器和背景缩写是两个重要的概念，它们极大地提高了CSS的效率和可维护性。本文将详细探讨这两个主题。 首先，让我们来看看CSS3的属性选择器。属性选择器允许我们根据HTML元素的特定属性来选择和...
CSS3颜色渐变选择器jQuery代码
06-10
CSS3是CSS（层叠样式表）的第三个版本，引入了许多新特性，其中颜色渐变就是其中之一。渐变效果使得网页的视觉表现更加生动，可以用于按钮、标题、段落背景等各个设计元素，以提升用户体验。 在CSS3中，有两种主要...
day04（CSS02-选择器进阶+背景相关属性+元素显示模式+三大特性）.rar
12-01
在"day04（CSS02-选择器进阶+背景相关属性+元素显示模式+三大特性）"这个课程中，我们将深入探讨CSS选择器的高级用法，以及元素的背景设置、显示模式和CSS的三大特性。 首先，让我们来看看选择器进阶。基础的选择器...
css3 svg网页底部波浪动画背景特效
06-11
总的来说，这个"css3 svg网页底部波浪动画背景特效"利用了CSS3的动画能力和SVG的矢量特性，创造出一个生动有趣的网页背景。设计师可以根据需要调整动画参数和SVG路径，以适应不同的设计需求，打造出各种风格的波浪...
CSS里的几个小知识
07-08 195
在 中，rel=“stylesheet” 表示被链接的文档（即 mystyle.css）是一个样式表（style sheet），用于为当前页面提供样式定义。在 HTML 中，用于指定链接指向的资源地址。标签的属性，可以帮助搜索引擎更好地理解和索引网页，优化页面在不同设备上的显示，以及实现一些特定的功能，如自动刷新、设置字符集等。1、“rel” 是 “relation” 或 “relationship” 的缩写，意思是“关系；在 HTML 中， 标签的 rel 属性用于定义当前文档与被链接文档之间的关系。
CSS的选择器、常用属性、盒子模型和定位
最新发布
secret010的博客
07-08 339
CSS选择器：选择页面(文档)中对应的标签，并设置样式。
旋转木马案例
喵喵的博客
07-08 498
旋转木马 如果接口需要的数据格式和原始数据提供的格式有差异 不要去改接口方法 也不要改原始数据 做一层中间件(数据处理函数/方法) <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
微信小程序：rpx详解，使用 tailwindcss最佳方案rem转rpx
Z_Wonderful的博客
07-05 236
微信小程序：rpx详解，使用 tailwindcss最佳方案rem转rpx
「2021」高频前端面试题汇总之CSS篇.pdf
12-14
1. CSS选择器及其优先级 - ID选择器 (#id)：优先级为100，用于唯一标识一个元素。 - 类选择器 (.classname) 和 伪类选择器 (如 li:last-child)：优先级为10，适用于分组或特定状态的选择。 - 属性选择器 (如 a...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鷇韩

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值