学习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类选择器

在以上基础中在我们的p标签中加上class为他起一个名字
在style中写上咱们起的名字并在起的名字前加一个英文的点.然后设置想要的效果
那么在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>