学习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>
相关推荐
Hello_Embed3 小时前
STM32HAL 快速入门(二十):UART 中断改进 —— 环形缓冲区解决数据丢失
笔记·stm32·单片机·学习·嵌入式软件
咸甜适中4 小时前
rust语言 (1.88) 学习笔记:客户端和服务器端同在一个项目中
笔记·学习·rust
人工智能训练师4 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny074 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
Grassto4 小时前
RAG 从入门到放弃?丐版 demo 实战笔记(go+python)
笔记
Magnetic_h5 小时前
【iOS】设计模式复习
笔记·学习·ios·设计模式·objective-c·cocoa
yddddddy5 小时前
css的基本知识
前端·css
昔人'5 小时前
css `lh`单位
前端·css
研梦非凡5 小时前
ICCV 2025|从粗到细:用于高效3D高斯溅射的可学习离散小波变换
人工智能·深度学习·学习·3d
破无差6 小时前
《赛事报名系统小程序》
小程序·html·uniapp