0基础学web----CSS进阶

最新推荐文章于 2024-07-25 14:15:14 发布
最新推荐文章于 2024-07-25 14:15:14 发布
阅读量445 收藏
点赞数 1
分类专栏： web前端 文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QQ675396947/article/details/121961993
版权

01-选择器-后代

<!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 p{
            /* div标签后面的所有p标签都会显示样式 */
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>这是选择器后代1</p>
        <p>这是选择器后代2</p>
        <div>
        <p>这是选择器后代3</p>
        <p>这是选择器后代4</p>
    </div>
    </div>
</body>
</html>

02-选择器-子代

<!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>a {
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <a href="">选择器后代的a标签</a>

        <p>
            <a href="">选择器后代的p标签的a标签</a>
        </p>

    </div>

</body>

</html>

 

03-选择器-并集 

<!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,p,span三个标签渲染 */
        div,p,span{
            color: red;
        }
    </style>
</head>
<body>
    <div>div标签</div>
    <p>p标签</p>
    <span>span标签</span>
    <br>
    <a href="#">a标签</a>
    <h1>h1标签</h1>
</body>
</html>

04-选择器-交集

<!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.box{
            color: red;
        }
    </style>
</head>
<body>
    <p>这是p标签</p>
    <p class="box">这是p标签带box类</p>
    <div class="box">这是div标签带box类</div>
</body>
</html>

05-选择器-伪类

<!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:hover{
            color: red;
        }
    </style>
</head>
<body>
    <p>这是悬停改变颜色的P标签</p>

    
</body>
</html>

1.原来的字体颜色

2. 鼠标放在字体后更变了字体颜色

06-emmeh语法

<!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>
        .box{
            /* w300+h300+bgc */
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
    <!-- div.box -->
    <div class="box"></div>
    <!-- div#box -->
    <div id="box"></div>
    <!-- div+p -->
    <div></div>
    <p></p>
    <!-- ul>li -->
    <ul>
        <li></li>
    </ul>
    <!-- ul>li*3 -->
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <!-- ul>li{$}*3 -->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

</body>
</html>

07-背景-背景颜色

<!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>
        #box{
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box">哈哈哈哈</div>
    
</body>
</html>

08-背景-背景图

<!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>
        #box{
            width: 500px;
            height: 500px;
            /* 背景图片 */
            background-image: url(/CSS进阶/images/che.jpg);
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

09-背景-背景平铺

<!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>
        #cox {
            width: 500px;
            height: 500px;
            background-color: red;
            background-image: url(/CSS进阶/images/che.jpg);
            /* 水平方向平铺 
            background-repeat: repeat-x; */
            /* 垂直方向平铺 
            background-repeat: repeat-y; */

            /* 不平铺 */
            background-repeat: no-repeat;
        }
    </style>
</head>

<body>
    <div id="cox"></div>
</body>

</html>

水平方向平铺   

background-repeat: repeat-x;

垂直方向平铺   

background-repeat: repeat-y;

不平铺 

background-repeat: no-repeat; 

10-背景-背景位置

<!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>
        .box{
            width: 500px;
            height: 500px;
            background-color: red;
            background-image: url(/CSS进阶/images/che.jpg);
            /* 不平铺 */
            background-repeat: no-repeat;
            /* background-position: 水平位置 垂直位置 */
            background-position: center bottom;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

 

11-背景-background

<!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>
        #box{
            width: 500px;
            height: 500px;

            /* background：color image repeat position */
            background: red url(/CSS进阶/images/che.jpg) no-repeat right bottom;
          
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

 

12-背景图和img的区别

13-显示模式-块

<!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>
 .box{
        width: 300px;
        height: 300px;
        background-color: red;
    }
    </style>
   
</head>
<body>
    <div class="box">1111</div>
    <div class="box">2222</div>
</body>
</html>

 

14-显示模式-行内

<!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>
        span{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <span>11111</span>
    <span>22222</span>
</body>
</html>

 

注：设置了行宽和高也无法渲染，因为它不是块级。

15-显示模式-行内块

 

<!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: 100px;
            height: 50px;
            background-color: red;
        }
    </style>
</head>
<body>
    注册：<input type="text">
</body>
</html>

 

16-显示模式-转换

<!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>
        span{
            width: 200px;
            height: 200px;
            background-color: red;

            display: block;
        }
    </style>
</head>
<body>
    <span>111</span>
    <span>111</span>
</body>
</html>

 注：可以转换行内和块级以及行内块标签。

17-拓展-标签嵌套

不能嵌套的注意事项

<!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: red;
        }
    </style>
</head>
<body>
    <p>
        <div>1111</div>
    </p>
</body>
</html>

注：由于嵌套错误还能显示的原因，浏览器会进行自动分隔开标签进行渲染。 

18-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{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        我这里是div,,, 
        <span> 我这里是span</span>
    </div>
</body>
</html>

 注：span标签没有特写进行字体颜色渲染，但由于父级div有颜色渲染让它继承了。

<!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{
           font-size: 16px;
           font-weight: 400;
        }

    </style>
</head>
<body>
    <div>
        <h1>我是H1</h1>
    </div>
       
    
</body>
</html>

注：由于h1标签有字体大小和字体粗细自身的设置，所有父级是无法更改其渲染。

 

19-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>
        p{
            color: red;
            color: royalblue;
        }
        .font{
            font-size: 25px;
        }
    </style>
</head>
<body>
    <div>
        <p class="font">你看我是层叠性的小伙子</p>
    </div>
</body>
</html>

注意：标签类以及添加了字体颜色，但他有双重颜色以最下方为渲染。类标签进行字体大小补充。 

   想要视频教学？

请点击下方链接吧！

https://www.bilibili.com/video/BV1Kg411T7t9?p=1

情绪员Tim
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Web-101:探索 Web 的基础知识，包括 HTML、CSS 和 JavaScript
08-03
网101 TechDrill 发起的 Web Development 101 计划向所有对 Web 开发入门感兴趣的人开放。 我们将从 HTML、CSS 和 JavaScript 的基础开始。 而且，到本周末，参与者可以使用 HTML、CSS 和 JavaScript 创建自己的网页...
Web-前端html+css从入门到精通 158. textshadow文字阴影.zip
05-23
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); } ``` 在这个例子中，`h1`标签内的文本会有一个向右下偏移2像素，模糊半径为4像素的黑色阴影，颜色的透明度为50%。 `text-shadow`属性还可以接受多个阴影，用逗号...
Web前端----CSS进阶教学总结
软件测试的坑，让我来踩吧
08-07 355
前言随着计算机的不断发展，Web前端这门技术也越来越重要，很多人都开启了前端的学习，本篇文章就是简单的写了一下CSS的语法，用来对CSS进行基础的学习。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。...
web前端学习-css3进阶
qq_54422936的博客
07-17 324
web前端-css3进阶
web前端-CSS进阶-标签嵌套
qq_53584660的博客
06-05 359
web前端-CSS进阶-标签嵌套
web学习-前端进阶
yong_19930826的博客
04-30 1355
web学习-前端进阶(html5+css3+移动端项目布局)
Web前端----CSS进阶-选择器
软件测试的坑，让我来踩吧
08-07 234
随着计算机的不断发展，Web前端这门技术也越来越重要，很多人都开启了前端的学习，本篇文章就是简单的写了一下CSS的语法，用来对CSS进行基础的学习。
web前端学习-CSS
yong_19930826的博客
03-22 1707
web前端学习-CSS1 CSS基础1.1 CSS的基础认知1.2 CSS基础选择器1.2.1标签1.2.2 类选择器1.2.3 id选择器1.2.4 通配符选择器1.3 文字和文本样式1.3.1 文字基本样式1.3.2 文字-字体1.3.3 拓展-层叠性1.3.4 font复合属性1.3.5 文本缩进1.3.6 水平对齐方式1.3.3 文本修饰线1.3.3 行高 1 CSS基础 1.1 CSS的基础认知 1.2 CSS基础选择器 1.2.1标签 1.2.2 类选择器 先定义 后使用 每个类都
Web开发基础-CSS-13
csdnlaoban的博客
05-15 980
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
Web开发基础-CSS-14
2401_84152177的博客
05-15 410
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
Web开发基础-CSS-15
2401_84152189的博客
05-15 368
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
CTFHub-Web进阶-JWT练习
Atkx's Blog
07-25 2799
什么是JWTJWT的结构CTFHub-Web-JWT练习敏感信息泄露 什么是JWT Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准（(RFC7519)。该token被设计为紧凑且安全的，特别适用于分布式站点的单点登录（SSO）场景。JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息，以便于从资源服务器获取资源，也可以增加一些额外的其它业务逻辑所必须的声明信息，该token也可直接被用于认证，也可被加密。 JWT的结构 .
Web-前端html+css从入门到精通 126. 表格扩展学习.zip
05-23
在Web开发领域，HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是构建网页界面的基础。本课程“Web-前端html+css从入门到精通 126. 表格扩展学习”旨在帮助初学者深入理解如何使用HTML表格进行...
Web-前端html+css从入门到精通 146. animate.css动画库.zip
05-23
《animate.css动画库：Web前端HTML+CSS进阶必学》 在Web开发领域，前端设计与用户体验密不可分，而动态效果则是提升用户体验的重要手段。在这个教程中，我们将深入探讨animate.css，一个强大且易用的开源CSS动画库...
Web-前端html+css从入门到精通 138. transform旋转与斜切.zip
05-23
在Web前端开发中，HTML和CSS是构建网页的基础。本教程聚焦于HTML+CSS的进阶技巧，特别是关于`transform`属性的使用，包括旋转（rotate）和斜切（skew）两个重要的变形操作。`transform`属性允许我们对元素进行2D或3D...
flex：1
m0_47999208的博客
07-25 379
2.flex-shrink,在flex布局中经常会遇到页面宽度不够而导致的文字换行问题，由于flex布局默认flex-shrink为1,就是默认可以缩小然后会导致换行，需要设置flex-shrink:0,默认不缩小就可以了。上面是120px高，给下面的外盒子高度设置为calc(100% - 120px);答：给外部盒子添加display：flex,内部盒子设置为flex-grow：1。现在有一个上下盒子，上面是固定值，下面是随页面高度变换的，如何让下面盒子的子盒子高度适应外部的高度呢？
CSS 自适应图片根据 div 大小进行均匀填充
gz_qiulinyong的博客
07-24 939
在Web开发中，经常需要图片根据其容器的大小进行自适应填充，使得图片在任何设备和屏幕尺寸下都能保持良好的显示效果。本文将介绍如何使用CSS中的object-fit属性来实现这一需求。使用object-fit属性可以非常方便地实现图片在容器中的自适应填充，保持图片的宽高比并使其均匀填充容器。这个方法适用于各种情况，例如响应式设计和多设备支持。
css更改图片颜色
最新发布
程序员
07-25 182
这些滤镜组合在一起，可以产生独特的视觉效果，可能用于特定的设计需求或视觉效果。：将图像的颜色反转51%。即把图像的颜色变为它们的补色，反转比例为51%。css更改图片颜色，比较时候颜色单一的图片，比如logo之类的。：将图像转换为深褐色调，类似于旧照片效果，深褐色比例为94%。：增加图像的饱和度，使颜色更加鲜艳，饱和度为原来的6433%。：调整图像的亮度，使图像的亮度变为原来的93%。：调整图像的对比度，使对比度变为原来的101%。) 添加一系列的滤镜效果。：改变图像的色相，将色相顺时针旋转190度。
css 作业 2
没有 bug 的代码是不完美的！
07-25 707
写完了
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

情绪员Tim

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

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

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

打赏作者

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

抵扣说明：

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

余额充值