学习CSS第五天

学习文章目录

一.CSS基本选择器

*:统配选择器(在head中加上{}书写)

会将整个页面调制同意颜色与具体大小,可以选中所有html中的元素

html 复制代码
 <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS基本选择器</title>
    <style>
       * {
            color: aqua;
            font-size: 60;
      }
    </style>  
</head>
<body>
    <h1>欢迎来到语文书</h1>
    <h2>文言文</h2>
    <p>明月几时有,把酒问青天</p>
    <p>唧唧复唧唧木兰当户织</p>
    <p>山不在高有仙则灵,水不在深有龙则灵</p>
    
</body>
</html>

二.CSS元素选择器

在head中写上style:样式,标签明名后面后面跟上{}里面写上样式那么,在html中写上标签名的将全部变换(无法差异化)

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS基本选择器/元素选择器</title>
    <style>
    h1 {
        font-size: 90;
     }
     h2 {
        color: blue;
        font-size: 60;
     }
     p {
        color: cyan;
     }
    </style>  
</head>
<body>
    <h1>欢迎来到语文书</h1>
    <h2>文言文</h2>
    <p>明月几时有,把酒问青天</p>
    <p>唧唧复唧唧木兰当户织</p>
    <p>山不在高有仙则灵,水不在深有龙则灵</p>
    
    <h1>欢迎来到语文书</h1>
    <h2>文言文翻译篇</h2>
    <p>明月从什么时候开始有的呢?我拿着酒杯遥问苍天</p>
    <p>叹息声一声接着一声,木兰对着房门在织布</p>
    <p>山不在于它有多高,只要有仙人居住就会出名且令人神往;水不在于它有多深,只要有蛟龙潜藏其中就会显得有灵气</p>
</body>
</html>

三.CSS类选择器

  1. 在以上基础中在我们的p标签中加上class为他起一个名字
  2. style中写上咱们起的名字并在起的名字前加一个英文的点.然后设置想要的效果
  3. 那么在p标签中被我们加入class:mingzi中就能呈现想要的效果而没有被加入类名的p标签就不会显示
html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS类选择器</title>
    <style>
        .translate {
            color: chartreuse;
        }
    </style>  
</head>
<body>
    <h1>欢迎来到语文书</h1>
    <h2>文言文</h2>
    <p class="translate">明月几时有,把酒问青天</p>
    <p class="translate">唧唧复唧唧木兰当户织</p>
    <p class="translate">山不在高有仙则灵,水不在深有龙则灵</p>
    
    <h1>欢迎来到语文书</h1>
    <h2>文言文翻译篇</h2>
    <p>明月从什么时候开始有的呢?我拿着酒杯遥问苍天</p>
    <p>叹息声一声接着一声,木兰对着房门在织布</p>
    <p>山不在于它有多高,只要有仙人居住就会出名且令人神往;水不在于它有多深,只要有蛟龙潜藏其中就会显得有灵气</p>
</body>
</html>
相关推荐
coder_pig19 分钟前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
万少25 分钟前
01-自然壁纸实战教程-免费开放啦
前端
独立开阀者_FwtCoder27 分钟前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
yuki_uix38 分钟前
AI辅助网页设计:从图片到代码的实践探索
前端
我想说一句38 分钟前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
陈随易39 分钟前
MoonBit助力前端开发,加密&性能两不误,斐波那契测试提高3-4倍
前端·后端·程序员
小飞悟1 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子1 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
Whoisshutiao1 小时前
网安-XSS-pikachu
前端·安全·网络安全
惊鸿2871 小时前
Taro3+小程序Canvas动态生成海报和二维码分享到朋友圈
前端