学习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>
相关推荐
PM简读馆16 分钟前
笔记本电脑研发笔记:BIOS,Driver,Preloader详记
笔记·电脑
Non importa4 小时前
【初阶数据结构】树——二叉树(上)
c语言·数据结构·学习·算法
Rousson5 小时前
硬件学习笔记--57 MCU相关资源介绍
笔记·单片机·mcu·学习
h汉堡6 小时前
C++入门基础
开发语言·c++·学习
Senar6 小时前
如何判断浏览器是否开启硬件加速
前端·javascript·数据可视化
HtwHUAT6 小时前
实验四 Java图形界面与事件处理
开发语言·前端·python
利刃之灵6 小时前
01-初识前端
前端
codingandsleeping6 小时前
一个简易版无缝轮播图的实现思路
前端·javascript·css
天天扭码6 小时前
一分钟解决 | 高频面试算法题——最大子数组之和
前端·算法·面试
Rinai_R6 小时前
MIT6.S081-2024版本的环境搭建
笔记·操作系统·环境搭建·计算机基础·xv6·mit6s081