【CSS选择器】入门易懂1

3块钱的红包

已于 2022-10-10 20:04:04 修改

阅读量92

点赞数 1

分类专栏：一些前端文章标签： css

于 2022-10-09 20:33:35 首次发布

本文链接：https://blog.csdn.net/m0_58408789/article/details/127230319

版权

一些前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

CSS选择器：用于选择你想要的元素的样式的模式。

1、层叠样式表；

2、设计网页中元素的样式；

3、个人理解就是类似化妆和装修，使其到达自己想要的样式。

书写位置（3种方式）

1、第一种方式：行内样式 / 内联样式；

2、第二种方式：内部样式表；

3、第三种方式：外部样式表。

1、第一种方式：行内样式 / 内联样式；

<body>
    <p style="color: red;">我是内容</p>
</body>
<!--    1、style="样式名:样式值;" (在相关的标签中使用样式属性)
        2、可以写多组样式，但一定要用;隔开
           <p style="color: red;size: 50px;">我是内容</p>
        3、耦合强，不易修改，不建议使用
-->

2、第二种方式：内部样式表；

<head>
<style>
    body {background-color:green;}
    p {color:blue;}
</style>
</head>
<!--    1.写在head标签内部，写一个子元素，style标签
        2.也可以{}写多组样式，也需要用;隔开
          body {background-color:green;color:blue;}
        3.不方便复用
-->

3、第三种方式：外部样式表。

<head>
<link rel="stylesheet" href="wenjian.css">
</head>
<!--     1、在html文件的外部新建一个.css文件，在css文件里写样式
         2、link标签里有href属性，在href里写引入css文件的路径
            href="文件名.css"
         3、推荐使用
-->

常用选择器

<head>
<style>
/* 1、元素选择器(标签选择器)
      语法：标签名{}
      作用：选中对应标签包裹的内容
      例子：h1{},h2{},p{},div{},span{}
*/
h1 {
        color: red;
        width: 400px;
      }
/* 2、id选择器 (id属性值不可以重复使用)
      语法：#id属性值{}
      作用：选中对应的id属性值的内容
      例子：#p1{},#pp{},#abc{}
*/
#p1 {
        color: green;
      }
/* 3、class选择器（用法跟id选择器是一样的，只不过它可以复用）
      语法：.class属性值{}
      作用：选中对应class属性值的内容
      例子：.pp{},.p1{}
*/
.p2 {
        color: pink;
      }
/* 4、通配选择器
      语法：*{}
      作用：选中页面中所有的标签

*/
*{
        font-size: 30px;
      }
</style>
</head>