CSS样式选择器

最新推荐文章于 2024-04-08 16:45:21 发布

小栗子的普

最新推荐文章于 2024-04-08 16:45:21 发布

阅读量1.5k

点赞数

分类专栏： CSS 文章标签： CSS 选择器基础

本文链接：https://blog.csdn.net/weixin_43885459/article/details/84672170

版权

CSS 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

样式的分类
1.行内样式：直接在标签里添加样式
例：创建一个div，直接在标签里写它的样式

    <div style="width: 200px;height: 200px;background-color: red"></div>

结果如下
在这里插入图片描述

2.内部样式：在head标签里创建style标签，在其里面写样式
如果要写内部样式或外部样式，就需要用到样式选择器

样式选择器分类

1.标签选择器：直接在style标签中写其标签名语法 {}
例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>

    <div></div>

</body>
</html>

结果如下在这里插入图片描述

2.类选择器 class 语法 .{}
给标签一个class,再在style中写样式
例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .div1{
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>

    <div class="div1"></div>

</body>
</html>

结果如下
在这里插入图片描述

3.id选择器：给标签一个id 语法： #{} id的名字不能重复

例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>

    <div id="div1"></div>

</body>
</html>

结果如下
在这里插入图片描述

4.后代选择器语法：通过一个空格实现
例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{
            width: 200px;
            height: 200px;
          border: 1px solid red;
        }
        #div1 p{
            color: green;
        }
    </style>
</head>
<body>

    <div id="div1">
        <div>  <p>hello world</p></div>
      <p>今天是2018年12月第一天</p>
    </div>

</body>
</html>

结果如下
在这里插入图片描述

5.子代选择器通过 >s实现（直系）
例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{
            width: 200px;
            height: 200px;
          border: 1px solid red;
        }
        #div1>p{
            color: green;
        }
    </style>
</head>
<body>

    <div id="div1">
        <div>  <p>hello world</p></div>
      <p>今天是2018年12月第一天</p>
    </div>

</body>
</html>

结果如下
在这里插入图片描述

6.交集选择器中间什么也不加
例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      p.p{
          color: red;
      }
    </style>
</head>
<body>

    <p class="p">hello  world</p>
<p>今天星期六了</p>
<p class="p">今天是12月份第一天</p>
</body>
</html>

结果如下
在这里插入图片描述

3.外部样式：创建一个stylesheet,通过link把HTML和css连接起来
例
html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="zongjie.css"/>
</head>
<body>

    <p class="p">hello  world</p>
<p>今天星期六了</p>
<p class="p">今天是12月份第一天</p>
</body>
</html>

css:

@charset "UTF-8";
*{
    padding: 0;
    margin: 0 auto;
}
.p{
    font-size: 30px;
    font-weight: bold;
    color: brown;
}

结果如下：
在这里插入图片描述

小栗子的普

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
CSS样式选择器

样式的分类1.行内样式：直接在标签里添加样式例：创建一个div，直接在标签里写它的样式 &amp;amp;lt;div style=&amp;quot;width: 200px;height: 200px;background-color: red&amp;quot;&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt;结果如下2.内部样式：在head标签里创建style标签，在其里面写样式如果要写内部样式或外
复制链接

扫一扫