初入WEB前端（6）CSS 基本语法

最新推荐文章于 2021-06-15 18:17:02 发布

宋辰轩

最新推荐文章于 2021-06-15 18:17:02 发布

阅读量165

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/weixin_44004068/article/details/107021376

版权

HTML5 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1.基本语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- style标签里面和外面是两个世界，学习CSS，相当于学了一门新的语言 -->
    <style>
        /*CSS里的注释
        
        CSS基本语法：选择器 声明块
            选择器：选中页面的指定元素，比如p的作用就是选中页面中所有的p元素
            声明块：通过声明块来指定要为元素设置的样式
                   声明块由一个一个声明组成，每个声明是一个键值对组成，如color:red;
        */
        p{
            color:red;
            font-size:25px;
        }
    </style>
</head>
<body>
    <h1>我不是红的，指定的是p不是我</h1>
    <p>选择器</p>
</body>
</html>

在这里插入图片描述

2.选择器类选择器覆盖通配选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*
        元素选择器
            作用：根据标签名选中指定的元素
            语法：标签名{}
            例子：p{} h{}
        
        但是他一选就全选了，有时候也会不方便，这时候要考虑使用id或者class

        一定要注意：id不能重复，
        比如
        <p id="an1">锄禾日当午</p>
        <p id="an1">锄禾日当午1</p>  就是不好的，因为JavaScript中id的原因（讲不太明白）
        但是class可以重复使用
        <p class="an2">汗滴禾下土</p>
        <p class="an2">汗滴禾下土2</p> 这样是好的 class NB!!!而且class可以覆盖
        */

        #an1{
            color: red;
            font-size: 35px;
        }    
        .an2{
            color: saddlebrown;
        }
        .an3{
            font-size: 40px;
        }
                  
    </style>
</head>
<body>
    <p id="an1">锄禾日当午</p>
    <p class="an2 an3">汗滴禾下土,class的覆盖</p>
    <p>谁知盘中餐</p>
    <p>粒粒皆辛苦</p>
</body>
</html>

在这里插入图片描述

通配选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>Document</title>
    <style>
        /*通配选择器
               作用：影响全部的样式
               定义：*{}
        */
        *{
            color: saddlebrown;
            font-size: 35px;
        }
    </style>
</head>
<body>
    <p>锄禾日当午</p>
    <p>锄禾日当午</p>
    <p>锄禾日当午</p>
    <p>锄禾日当午</p>
</body>
</html>

在这里插入图片描述

宋辰轩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初入WEB前端（6）CSS 基本语法

1.基本语法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title>  <style> /*CSS里的注释 CSS基本语法：选择
复制链接

扫一扫