美文网首页
2022-02-03 CSS第二天

2022-02-03 CSS第二天

作者: 学习生信的小兔子 | 来源:发表于2022-02-03 13:40 被阅读0次

emmet语法


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=o, initial-scale=1.0">
    <title>复合选择器之后代选择器</title>
    <style>
        /* 把ol 里面的小li选出来改为pink */
        ol li{
            color: pink;
        }
        ol li a {
            color: chartreuse;
        }
        .nav li a {
            color: coral;
        }
    </style>

</head>
<body>
    <ol>
        <li>我是ol 的孩子</li>
        <li>我是ol 的孩子</li>
        <li>我是ol 的孩子</li>
        <li><a href="#">xixixi</a></li>

    </ol>
    <ul>
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
    </ul>
    <ol class="nav">
        <li>我是ol 的孩子</li>
        <li>我是ol 的孩子</li>
        <li>我是ol 的孩子</li>
        <li><a href="#">xixixi</a></li>
        <li><a href="#">xixixi</a></li>
        <li><a href="#">xixixi</a></li>
        <li><a href="#">xixixi</a></li>
        
    </ol>
</body>
</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>子元素选择器</title>
    <style>
        .nav>a {
            color: pink;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#">hahaha</a>
        <p>
            <a href="#">xixixi</a>
        </p>


    </div>
    
</body>
</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>并集选择器</title>
    <style>
        /* 要求1，把熊大熊二改为粉色 */
        /* div,p {
            color: pink;
        } */
        /* 要求2，把熊大熊二改为粉色 还有 小猪一家改为粉色 */
        div,
        p,
        .pig li{
            color: pink;
        }
        /* 约定的规范 并集选择器喜欢竖着写 */
        /* 一定要注意 最后一个选择器 不需要加逗号 */
    </style>
</head>
<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>
    
</body>
</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>
    <style>
        a {
            color: pink;
            text-decoration: none;
        }
        a:hover {
            color: blue;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <a href="#">百度一下</a>
    
</body>
</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>伪类选择器</title>
    <style>
        /* 未访问的链接 a：link  把没有访问过的链接选出来*/
        
        a:link {
            color: #333;
            text-decoration: none;
        }
        /* a:visited 选择点击过的(访问过的)链接 */
        a:visited {
            color: orange;
        }
        /* 选择鼠标经过的那个链接 */
        a:hover {
            color: skyblue;
        }
        /* a:active 选择的是我们鼠标正在 */
        a:active {
            color: green;
        }

    </style>

</head>
<body>
    <a href="#">小猪佩奇</a>
    
</body>
</html>

focus伪类选择器

<!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>
        input:focus{
            background-color: pink;
            color: red;
        }
    </style>
</head>
<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>
</html>

复合选择器总结

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>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>比较霸道，独占一行</div>看看我
</body>
</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>
    <style>
        input {
            width: 200px;
            height: 150px;

        }
    </style>
</head>
<body>
    <input type="text">
    <input type="text">
</body>
</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>简单小米侧边栏</title>
    <style>
        a{
            display: block;
            width: 355px;
            height: 60px;
            background-color: #9d9b9b;
            font-size :14px;
            color: #fff;
            text-decoration: none;
            text-indent: 2em;
            line-height: 60px;

        }
        /*  鼠标经过链接变换背景颜色  */
        a:hover{
            background-color: #ff6700;
        }

    </style>
</head>
<body>
    <a href="#">手机 电话</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音响</a>
</body>
</html>

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>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</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>背景图片</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-image: url(./images/logo.png);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</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>背景图片</title>
    <style>
        div{
            background-color: pink;
            width: 300px;
            height: 300px;
            background-image: url(./images/logo.png);
            /* 背景图片不平铺 */
            /* background-repeat: no-repeat;
            /* 默认情况下 背景是平铺的 */
            /* background-repeat: repeat; */ 
            /* 沿着x轴平铺 */
            /* background-repeat: repeat-x; */
            /* 沿着y轴平铺 */
            background-repeat: repeat-y;
            /* 页面元素既可以添加背景元素也可以添加背景图片 只不过背景图片会压住背景颜色 */
        }
    </style>
</head>
<body>
    <div></div>
</body>
</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>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            background-image: url(./images/logo.png);
            background-repeat: no-repeat;
            /* background-repeat 方位名词 */
            /* /* background-position: center top; */
            /* background-position: right center; */
            /* background-position: center right; */ 
            /* 如果是方位名词 right center 和 right center效果是等价的 */
            /* 此时 水平一定是考右侧对齐 第二个参数省略y 轴是 垂直居中现实的 */
            /* background-position:right; */
            /*此时 第一个参数是top y轴 顶部对齐 第二个参数省略x 轴是水平居中显示的  */
            background-position:top;

        }



    </style>
</head>
<body>
    <div></div>
</body>
</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>
    <style>
        h3 {
            width: 118px;
            height: 40px;
            font-size: 14px;
            font-weight: 400;
            line-height: 40px;
            background-image: url(./images/icon.png);
            background-repeat: no-repeat;
            background-position:left center;
            text-indent: 1.5em;
        }
    </style>
</head>
<body>
    <h3>成长守护平台 </h3>
</body>
</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>
    <style>
        body{
            background-image: url(./images/bg.jpg);
            background-repeat: no-repeat;
            background-position: center 40px;
        }
    </style>
</head>
<body>
    
</body>
</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>
    <style>
        body{
            background-image: url(./images/bg.jpg);
            background-repeat: no-repeat;
            background-position: center 40px;
            font-size: 14px;
            color: chartreuse;
            background-attachment: fixed;
        }
    </style>
</head>
<body>
    <p>hahahaha</p>
    <p>hahahaha</p>
    <p>hahahaha</p>
    <p>hahahaha</p>
    <p>hahahaha</p>
    <p>hahahaha</p>
    <p>hahahaha</p>
    <p>hahahaha</p>
    <p>hahahaha</p>
    <p>hahahaha</p>
    <p>hahahaha</p>
    <p>hahahaha</p>
    <p>hahahaha</p>
    <p>hahahaha</p>
    <p>hahahaha</p>
    <p>hahahaha</p>
    <p>hahahaha</p>
    <p>hahahaha</p>
    <p>hahahaha</p>
    <p>hahahaha</p>
    <p>hahahaha</p>
    <p>hahahaha</p>
    <p>hahahaha</p>
    <p>hahahaha</p>
    
    
</body>
</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>背景色透明</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background: rgba(0,0,0,.3);
        }
    </style>
</head>
<body>
    <div>成功上岸</div>
</body>
</html>

CSS背景总结

image.png

综合案例


<!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>综合案例</title>
    <style>
        .nav a{
            display: inline-block;
            width: 120px;
            height: 58px;
            background-color: pink;
            text-align: center;
            line-height: 48px;
            color: white;
            text-decoration: none;

        }
        .nav .bg1 {
            background: url(./images/bg1.png) no-repeat;
        }
        .nav .bg1:hover{
            background-image: url(./images/bg11.png);
        }
        .nav .bg2 {
            background: url(./images/bg2.png) no-repeat;
        }
        .nav .bg2:hover{
            background-image: url(./images/bg22.png);
        }
        .nav .bg3 {
            background: url(./images/bg3.png) no-repeat;
        }
        .nav .bg3:hover{
            background-image: url(./images/bg11.png) ;
        }
        .nav .bg4 {
            background: url(./images/bg4.png) no-repeat;
        } 
        .nav .bg4:hover{
            background-image: url(./images/bg22.png);
        }
        .nav .bg5 {
            background: url(./images/bg5.png) no-repeat;
        }
        .nav .bg5:hover{
            background-image: url(./images/bg11.png);
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#" class="bg1">五彩导航</a>
        <a href="#" class="bg2">五彩导航</a>
        <a href="#" class="bg3">五彩导航</a>
        <a href="#" class="bg4">五彩导航</a>
        <a href="#" class="bg5">五彩导航</a>
    </div>
    
</body>
</html>

相关文章

  • 2022-02-03 CSS第二天

    emmet语法 CSS的复合选择器 后代选择器 子元素选择器 并集选择器 链接类选择器 focus伪类选择器 复合...

  • 橙子的ScalersTalk第六轮新概念朗读持续力训练Day 1

    练习材料：[Day 2688 2022-02-03] L8(2)：A famous monastery Durin...

  • Linux深入探索16-区域设置：locale

    ----- 最近更新【2022-02-03】----- 本文目录结构预览： 一、简介 二、查看区域设置：local...

  • 前端第二天

    前端第二天 目录: css三种引入方式 长度及颜色单位 常用样式 css选择器 一、css三种引入方式 1、行间式...

  • 《句句成章》78 深深烦恼

    原创 老区游子 游子岁月 2022-02-03 21:52 收录于话题 #学会生活 懂得快乐 36 个 #生活记忆...

  • 2022-02-03 CSS第三天

    CSS的三大特性 层叠性 继承性 行高的继承性 优先级 权重练习小例子

  • 2022-02-03

    《100天打卡》2022-02-03 小结：复盘重点，分心的原因 很多分心的事情，都是没啥产出的，但因为不用...

  • 2018-03-08

    css第二天 01 样式层叠 02样式继承 03 优先级（1）

  • 《断点》张敬轩

    《断点》 2022-02-03 静静地陪你走了好远好远 连眼睛红了都没有发现 听着你说你现在的改变 看着我依然最爱...

  • 转：顾笃璜谈昆曲

    顾笃璜谈昆曲 原创 道和曲社 道和曲社 2022-02-03 23:40 编者按：惊闻顾老笃璜先生于2022年2月...

网友评论

      本文标题：2022-02-03 CSS第二天

      本文链接：https://www.haomeiwen.com/subject/hcyrkrtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|2022-02-03 CSS第二天|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！