Java web学习day03 css选择器

最新推荐文章于 2023-10-10 22:19:20 发布

折叠的饼干

最新推荐文章于 2023-10-10 22:19:20 发布

阅读量153

点赞数

分类专栏： Javaweb

本文链接：https://blog.csdn.net/weixin_45627369/article/details/120474403

版权

css java html5

Javaweb 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

CSS选择器

1.标签名选择器

标签名选择器的格式：
标签名{
属性：值
}
标签名选择器可以决定那些标签被动的使用这个样式。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            color:blue;
            font-size:30px ;
            border:1px solid yellow;
        }
        span {
            color:yellow;
            font-size: 20px;
            border:5px blue dashed;
        }
    </style>
</head>

2.id选择器

id选择器的格式：
#id 属性值{
属性：值;
}
id选择器，可以让我们通过id属性选择性的去使用这个样式。
要求：第一个div标签定义id为id001，第一个span标签定义id为id002
注意：id不可以重复，是唯一的

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

        #id001{
            color:blue;
            font-size:30px ;
            border:1px solid yellow;
        }
        #id002 {
            color:yellow;
            font-size: 20px;
            border:5px blue dotted;
        }
    </style>
</head>
<body>
       <!--
       div标签默认独占一行
       span标签长度是封装数据的长度
       p段落标签，默认在段落的上方/下方各空出一行
       -->
      <div id="id001">div标签1</div>
      <div >div标签2</div>
      <span id="id002">span标签1</span>
      <span >span标签2</span>
      <p >p段落标签1</p>
      <p >p段落标签2</p>

</body>
</html>

3.class选择器（类选择器）

class类型选择器的格式是：
.class属性值{
属性:值；
}
class类型选择器，可以通过class属性有效的选择性地去使用这个样式
class可重复

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

        .class01{
            color:blue;
            font-size:30px ;
            border:1px solid darkblue;
        }
        .class02{
            color:yellow;
            font-size: 20px;
            border:5px blue dotted;
        }
    </style>
</head>
<body>
       <!--
       div标签默认独占一行
       span标签长度是封装数据的长度
       p段落标签，默认在段落的上方/下方各空出一行
       -->
      <div class="class01">div标签1</div>
      <div class="class01">div标签2</div>
      <span class="class02">span标签1</span>
      <span class="class02">span标签2</span>
      <p >p段落标签1</p>
      <p >p段落标签2</p>

</body>
</html>

4.组合选择器

组合选择器的格式是：
选择器1，选择器2，选择器n{
属性;值；
}
组合选择器可以让多个选择器共用一个css样式代码。

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

        .class01,#id01,div{
            color:blue;
            font-size:30px ;
            border:1px solid darkblue;
        }
        .class02{
            color:yellow;
            font-size: 20px;
            border:5px blue dotted;
        }
    </style>
</head>
<body>
       <!--
       div标签默认独占一行
       span标签长度是封装数据的长度
       p段落标签，默认在段落的上方/下方各空出一行
       -->
      <div id="id01">div标签1</div>
      <div >div标签2</div>
      <span class="class02">span标签1</span>
      <span class="class02">span标签2</span>
      <p >p段落标签1</p>
      <p >p段落标签2</p>

</body>
</html>