前端学习笔记之二：CSS（1）

晓文_C

已于 2024-03-14 00:45:23 修改

阅读量343

点赞数 7

文章标签：前端学习笔记

于 2024-03-12 00:09:53 首次发布

本文链接：https://blog.csdn.net/m0_74233667/article/details/136635071

版权

一、CSS简介

CSS诞生的目的：使用css的唯一目的就是让网页具有美观一致的页面。

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明（样式）：

举个例子，将H1增加更多的内容：

<style>
    h1{
        color: blue;
        font-size: 12px;
    }
</style>

对CSS的理解：类似C++中的继承，在上面代码中，h1不仅具备原本的特征，还具备了两个新的特征（颜色，宽度）。

二、CSS的引入方式

如同C++一样，CSS类似于继承，这种继承关系是原本的类型的增加和扩展，那么这种继承父类后的子类，要想被找到，就有局部定义、全局定义、头文件的定义，主要区分在作用域方面。

1. 局部定义：内联样式（行内样式）

<!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>

    <p style="color:red;font-size: 30px;">我是内联样式的方案</p>
    <p>我是第二个p标签</p>
    
</body>
</html>

在P标签的内部进行定义，

<p style="color:red;font-size: 30px;">我是内联样式的方案</p>

2. 内部样式

<!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: red;
            font-size: 30px;
        }
    </style>
</head>
<body>

    <p>我是内联样式的方案</p>
    <p>我是第二个p标签</p>
    <p>我是第三个p标签</p>
    
</body>
</html>

全局定义，则这整个HTML中关于P标签都会是继承后的子类

3、外部样式（类似头文件）

先创建一个CSS当头文件：

p{
    color: green;
    font-size: 30px;
}

随后引入这个头文件后的HTML源码均会被改变

<!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>
    <link rel="stylesheet" href="./public.css">
</head>
<body>

    <p>首页</p>
    <a href="./product.html">产品</a>
    
</body>
</html>

注意上面的引入方法：
<link rel="stylesheet" href="./public.css">

href就是文件路径，rel一般用固定写法。

三、选择器（单元素选择）

1. 全局选择器

可以与任何元素匹配，优先级最低，一般做样式初始化

例如：

<!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: red;
            font-size: 30px;
        }
    </style>
</head>
<body>

    <p>我是内联样式的方案</p>
    <p>我是第二个p标签</p>
    <p>我是第三个p标签</p>
    
</body>
</html>

2. 元素选择器

HTML文档中的元素，p、b、div、a、img、body等。

标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”

p{
    font-size:14px;
}

再比如说，我想让“学完前端，继续学Java”这句话中的“前端”两个变为红色字体，那么我可以用<span>标签把“前端”这两个字围起来，然后给<span>标签加一个标签选择器

<p>学完了<span>前端</span>，继续学Java</p>
span{
    color: red;
}

举个大例子：

<!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>

        span{
            color: red;
        }

        p{
            color: blue;
        }
       
    </style>
</head>
<body>
    
    <p>我是第一个</p>
    <p>我是第二个</p>
    <h3>标题</h3>
    <p>我是第三个</p>

    <p>学完<span>前端</span>，继续学Java</p>

    <div>
        <ul>
            <li>
                <p>你好</p>
            </li>
        </ul>
    </div>
    
</body>
</html>

3. 类选择器

规定用圆点 . 来定义，针对你想要的所有标签使用

<!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>

        .content{
            color: red;
        }

        .size{
            font-size: 30px;
        }

    </style>
</head>
<body>

    <p>大家好</p>
    <p>我很好</p>
    <p class="content">我emo!</p>
    <p class="content">我哭泣了</p>
    <h3 class="content size">我是标题</h3>
    
</body>
</html>

4. ID选择器

针对某一个特定的标签来使用，只能使用一次。css中的ID选择器以 # 来定义。

<!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>

        #text{
            color: red;
            font-size: 30px;
        }

        .t1{
            color: green;
        }

        #myText{
            color: blue;
            font-size: 30px;
        }

    </style>
</head>
<body>

    <p id="text">Hello1</p>
    <p id="myText">Hello2</p>

    <p class="t1">文本1</p>
    <p class="t1">文本2</p>
    
</body>
</html>

5. 合并选择器

语法：选择器1,选择器2,...{ }

<!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>

        .text,.title{
            font-size: 50px;
            color: red;
        }

    </style>
</head>
<body>

    <p class="text">我是P标签</p>
    <h3 class="title">我是标题标签</h3>
    
</body>
</html>