css入门1（选择器）

斑马L*

已于 2022-01-25 20:26:44 修改

阅读量276

点赞数 1

分类专栏： Web 搭建文章标签： css css3 html

于 2022-01-25 16:39:35 首次发布

本文链接：https://blog.csdn.net/qq_47326711/article/details/122687030

版权

Web 搭建专栏收录该内容

4 篇文章 0 订阅

订阅专栏

css选择器

css :（Cascading Style Sheet）层叠样式表，用来美化页面的一种语言。

标签选择器

以标签名开头，选择html文件中的标签，给标签加样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS学习</title>

    <style>
        p{
            color:red;
        }
    </style>
</head>
<body>
    <p>hello world</p>
</body>
</html>

在这里插入图片描述

类选择器

以点开头，根据类名选择标签，给标签添加样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS学习</title>

    <style>
        .myp{
            color:red;
        }
    </style>
</head>
<body>
    <p>hello world</p>
    <p class="myp">我是一个段落标签</p>
</body>
</html>

在这里插入图片描述
标签使用两个类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS学习</title>

    <style>
        .myp{
            color:red;
        }
        .mybg{
            background: aqua;
        }
    </style>
</head>
<body>
    <p>hello world</p>
    <p class="myp">我是一个段落标签</p>
    <p class="mag mybg">我是第二个段落标签</p>
</body>
</html>

在这里插入图片描述

层级选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    div div{
      color:greenyellow;
    }
    div.box{
      color:deepskyblue;
    }
    div div p{
      color:plum;
    }
  </style>
</head>
<body>
  <div>
    <div>我试遍了所有的方法，<br>
　　总是不能在不爱你那一点，<br>
　　让方程收敛。</div>
    <div class="box">岁月荏苒<br>
      青灯孤影月为伴弱水三千<br>
      不敌昔日你巧笑嫣然
    </div>
    <div>
      <p>槐火纷乱<br></br>寒烟微凉<br></br>你在彼方莫失莫忘</p>
    </div>
  </div>
  <div>你是我的高等代数，<br>
　　你是我的数学分析，<br>
　　你是我生命的基础课。</div>
</body>
</html>

在这里插入图片描述
层级选择器不一定必须是父子关系，祖孙关系的子标签也可以找到。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    div div{
      color:greenyellow;
    }
    div.box{
      color:deepskyblue;
    }
    /*div div p{*/
    /*  color:plum;*/
    /*}*/
    div p{
        color:aqua;
    }
  </style>
</head>
<body>
  <div>
    <div>我试遍了所有的方法，<br>
　　总是不能在不爱你那一点，<br>
　　让方程收敛。</div>
    <div class="box">岁月荏苒<br>
      青灯孤影月为伴弱水三千<br>
      不敌昔日你巧笑嫣然
    </div>
    <div>
      <p>槐火纷乱<br></br>寒烟微凉<br></br>你在彼方莫失莫忘</p>
    </div>
  </div>
  <div>你是我的高等代数，<br>
　　你是我的数学分析，<br>
　　你是我生命的基础课。</div>
</body>
</html>

在这里插入图片描述

id选择器

以#开头，根据id名选择html中的标签，给标签添加样式
id是唯一的，不能重复。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS学习</title>

    <style>
        #myid1{
            color:blue;
        }
        #myid1{
            color:blueviolet;
        }
    </style>
</head>
<body>
    <p id="myid1">
        一曲相思 <br>
        半点离愁<br>
        如何与君共白头</p>
    <p id="myid2">
        谁抚了江山覆了天下 <br>
        谁抚了江山覆了天下<br>
        这天下，不过我博他一笑的烟花</p>

</body>
</html>

在这里插入图片描述

组选择器

就是多个选择器的组合，把功能的代码可以放在组选择器里面
css里面出现同样的选择器，后面的不会覆盖前面的，会在前面选择器的基础上追加。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS学习</title>

    <style>
        .box1,.box2,.box3{
            width:100px;
            height:100px;

        }
        .box1{
            background:red;
        }
        .box2{
            background:green;
        }
        .box3{
            background:blue;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>

</body>
</html>

在这里插入图片描述

伪类选择器

给其他选择器添加特殊的效果，表现形式选择器后面加上冒号。
在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS学习</title>

    <style>
        div{
            width:200px;
            height:100px;
            background: green;
        }
        div:hover{
            width:200px;
            height:200px;
            background:red;
        }
    </style>
</head>
<body>
    <div>槐火纷乱<br></br>寒烟微凉<br></br>你在彼方莫失莫忘</div>

</body>
</html>

在这里插入图片描述

斑马L*

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
css入门1（选择器）

标签选择器以标签名开头，选择html文件中的标签，给标签加样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS学习</title> <style> p{ color:red; } </style></head>
复制链接

扫一扫