学习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>
相关推荐
DarkBule_4 分钟前
零基础驯服GitHub Pages
css·学习·html·github·html5·web
sen_shan11 分钟前
Vue3+Vite+TypeScript+Element Plus开发-02.Element Plus安装与配置
前端·javascript·typescript·vue3·element·element plus
疾风铸境23 分钟前
Qt5.14.2+mingw64编译OpenCV3.4.14一次成功记录
前端·webpack·node.js
晓风伴月27 分钟前
Css:overflow: hidden截断条件‌及如何避免截断
前端·css·overflow截断条件
最新资讯动态30 分钟前
使用“一次开发,多端部署”,实现Pura X阔折叠的全新设计
前端
余多多_zZ42 分钟前
鸿蒙学习手册(HarmonyOSNext_API16)_应用开发UI设计:Swiper
学习·ui·华为·harmonyos·鸿蒙系统
爱泡脚的鸡腿1 小时前
HTML CSS 第二次笔记
前端·css
灯火不休ᝰ1 小时前
前端处理pdf文件流,展示pdf
前端·pdf
智践行1 小时前
Trae开发实战之转盘小程序
前端·trae
最新资讯动态1 小时前
DialogHub上线OpenHarmony开源社区,高效开发鸿蒙应用弹窗
前端