CSS介绍及常用选择器

最新推荐文章于 2023-06-30 23:05:06 发布

绿皮车的忧伤

最新推荐文章于 2023-06-30 23:05:06 发布

阅读量174

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/greentrainsad/article/details/127232010

版权

CSS介绍

1.css简介

网页分成三个部分：html是负责搭建网页的结构；JavaScript是负责网页外在行为的表现；css负责网页的样式

css 全称为层叠样式表

网页实际上是一个多层的结构，通过css可以分别为网页的每一层来设置样式

而最终我们能看到的只有最上边的一层

设置网页中元素的样式

2.css书写位置

第一种方式：内联样式/行内样式

写在开始标签里面，写一个style属性，将一组一组的样式写在style属性值里面

color: red; 样式名:样式值;

可以写多组样式，但一定要用;隔开

示例：给静夜思这首诗的第一句设置字体颜色为红色；字体大小为20px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div>
        <h1>
            静夜思
        </h1>
        <h3>
            李白
        </h3>
        <p style="color:red;font-size: 20px;">床前明月光，</p>
        <p>疑是地上霜。</p>
        <p>举头望明月，</p>
        <p>低头思故乡，</p>

    </div>
</body>
</html>

网页展示效果为：

优点：是方便书写，简单

缺点：

1、结构和表现耦合了

2、揉在一起，不容易修改

注意：

尽量少用

第二种方式：内部样式表

写在head标签内部，写一个子元素，style标签，

通过选择器选中对应的要设置的元素/标签，在{}里设置一组一组样式

也可以写多组样式，也需要用;隔开

示例：把古诗主体字体颜色变成蓝色，字号为30px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
p{
    color: blue;
    font-size: 30px;
}
    </style>
</head>
<body>
    
    <div>
        <h1>
            静夜思
        </h1>
        <h3>
            李白
        </h3>
        <p>床前明月光，</p>
        <p>疑是地上霜。</p>
        <p>举头望明月，</p>
        <p>低头思故乡，</p>

    </div>
</body>
</html>

网页显示效果为：

优点：结构清新一目了然看着不乱

缺点：不方便重复使用

第三种方式：外部样式表

在html文件的外部新建一个.css文件，在css文件里写样式

然后通过在head标签内部写子标签link标签，

将html文件和css文件联系在一起

link标签里有href属性，在href里写引入css文件的路径

示例：通过在html文件的外部新建一个.css文件，在css文件里写样式把古诗h1标题增加一个绿色的背景色，然后在html文件head标签内部写字标签link链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
p{
    color: blue;
    font-size: 30px;
}
    </style>
    <link rel="stylesheet" href="./05.h1.css">
</head>
<body>
    
    <div>
        <h1>
            静夜思
        </h1>
        <h3>
            李白
        </h3>
        <p>床前明月光，</p>
        <p>疑是地上霜。</p>
        <p>举头望明月，</p>
        <p>低头思故乡，</p>

    </div>
</body>
</html>

网页显示效果为：

注意：这种方式推荐使用因为写项目的时候代码特别多，这样既美观又方便管理查看

3.css语法

css的样式必须编写在style标签中，或者是css文件中

css的基本语法是：

1、css规则由选择器和一条或多条声明两个部分构成；

2、选择器通常是需要改变样式的HTML元素；

3、每条声明由一个属性和一个值组成；

4、属性和属性值被冒号分隔开。

名值对结构样式名:样式值;

常用选择器

1、元素选择器(标签选择器)

语法：标签名{}

作用：选中对应标签包裹的内容

例子：h1{},h2{},p{},div{},span{}

示例：将这首诗的h3标题变成黄色，字号设置为40px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
   h3{
    color: yelow;
    font-size: 30px;
     }
    </style>
   
</head>
<body>
    
    <div>
        <h1>
            静夜思
        </h1>
        <h3>
            李白
        </h3>
        <p>床前明月光，</p>
        <p>疑是地上霜。</p>
        <p>举头望明月，</p>
        <p>低头思故乡，</p>

    </div>
</body>
</html>

网页显示效果为：

2、id选择器 (id属性值不可以重复使用)

语法：#id属性值{}

作用：选中对应的id属性值的内容

例子：#p1{},#pp{},#abc{}

示例：给第一句诗添加一个黄绿色的背景颜色，先给第一句诗的p标签一个id属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
   h3{
    color: yelow;
    font-size: 30px;
     }
     #first{
        background-color: yellowgreen;
     }
    </style>
   
</head>
<body>
    
    <div>
        <h1>
            静夜思
        </h1>
        <h3>
            李白
        </h3>
        <p id="first">床前明月光，</p>
        <p>疑是地上霜。</p>
        <p>举头望明月，</p>
        <p>低头思故乡，</p>

    </div>
</body>
</html>

网页显示效果如下：

3、class选择器（用法跟id选择器是一样的，只不过它可以复用）

语法：.class属性值{}

作用：选中对应class属性值的内容

例子：.pp{},.p1{}

示例：给第二句诗和第三句诗字体颜色调整为橘色，字号设置为30px,先给第二句诗和第三句诗的p标签设定同一个class值 dd

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
   h3{
    color: yelow;
    font-size: 30px;
     }
     #first{
        background-color: yellowgreen;
     }
     .dd{
        color: orange;
        font-size: 30px;
     }
    </style>
   
</head>
<body>
    
    <div>
        <h1>
            静夜思
        </h1>
        <h3>
            李白
        </h3>
        <p id="first">床前明月光，</p>
        <p class="dd">疑是地上霜。</p>
        <p class="dd">举头望明月，</p>
        <p>低头思故乡，</p>

    </div>
</body>
</html>

网页显示效果如下:

4、通配选择器

语法：*{}

作用：选中页面中所有的标签

示例：给整体页面一个背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
   h3{
    color: yelow;
    font-size: 30px;
     }
     #first{
        background-color: yellowgreen;
     }
     .dd{
        color: orange;
        font-size: 30px;
     }
     *{
        background-color: blueviolet;
     }
    </style>
   
</head>
<body>
    
    <div>
        <h1>
            静夜思
        </h1>
        <h3>
            李白
        </h3>
        <p id="first">床前明月光，</p>
        <p class="dd">疑是地上霜。</p>
        <p class="dd">举头望明月，</p>
        <p>低头思故乡，</p>

    </div>
</body>
</html>

网页显示效果如下：