css引入、选择器

照一江明月

已于 2022-09-25 16:57:17 修改

阅读量195

点赞数

文章标签： css 前端

于 2022-07-22 22:26:06 首次发布

本文链接：https://blog.csdn.net/w8666999/article/details/125900524

版权

一、css引入

1.1、行内式

是在元素标签内部的style属性中设定CSS样式。

style意思为样式

<body>
   <p style="background: #ff0000;font-size:20px;">行内式写法</p>
    <div style="border: 3px solid #000;">行内式写法</div>
    <div>正常文本</div>
</body>

优点：适合于修改简单样式。

缺点：1、样式不能复用。
2、样式权重太高，样式不好覆盖。
3、样式与结构没有分离。

1.2、内嵌式

内嵌式是先在head标签中写一个style标签，然后把样式都放在style中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
        span{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p>内嵌式写法</p>
    <span>内嵌式写法</span>
    <div>正常文本</div>
</body>
</html>

优点：无需上传多个文件

只影响一个页面

缺点：如果多个页面要使用相同的样式则复用效果不好

1.3、外链式

外链式是独立存在的的一个文件

鼠标右键单击文件夹创建一个文件后缀名为“css”的文件

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 在head标签中写一个link标签，引入方式和我发布于22/7/11的图片引入方式一样 -->
    <link rel="stylesheet" href="../css基础/外链式.css">
</head>
<body>
    
</body>
</html>

优点：结构清晰，可以多个网页引用

缺点：需要上传的文件多

二、选择器

无论是什么标签，样式都写在大括号里

class和id命名规范：

1、只能用字母，数字，短横线组成

2、不能以数字开头

3、最好见名知意

权重由低到高：标签选择器<class选择器<id选择器

2.1、标签选择器

标签选择器只能选中该标签，但选中后，该标签样式都会被改变，不易修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p{
            font-size: 25px;
        }
        div{
            background-color: #ff0000;
        }
    </style>
</head>
<body>
    <p>我是段落标签111</p>
    <p>我是段落标签222</p>
    <div>我是容器</div>
</body>
</html>

2.2、class选择器

一个class里可以写多个名称

class一般用于重复使用或该标签需要多个名称

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

        <div class="box box2">class选择器111</div>
        <div >class选择器222</div>
</body>
</html>

2.3、id选择器

i一个id里只能写一个名称

id选择器一般用于只需要写一个名称的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       
        #d1{
            height: 150px;
            width: 100px;
            background-color: #ff0000;
        }
        #d2{width: 50px;
            height: 100px;
            background: #000;
            color: #fff;
        }
    </style>
</head>
<body>

        <div id="d1">id选择器111</div>
        <div id="d2">id选择器222</div>
</body>
</html>