CSS3学习笔记--css介绍、CSS的四个选择器

本文链接：https://blog.csdn.net/qq_44765221/article/details/109772115

文章目录

1. 什么是CSS

1.1 简介

CSS(Cascading Style Sheets，层叠样式表)是一种用来表现HTML或XML等文件样式的计算机语言。
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

1.2 发展史

CSS1.0
1996年W3C发布了第一个有关样式的标准CSS1.0。这个版本中，已经包含了的相关font的相关属性、颜色与背景的相关属性、文字的相关属性、box的相关属性等。
CSS2.0
1998年5月，CSS2.0正式推出。这个版本推荐的是内容和表现效果分离的方式（HTML和CSS分离的思想），并开始使用样式表结构。这个版本使得网页变得简单
CSS2.1
2004年2月，CSS2.1正式推出。它在CSS2.0的基础上略微做了改动，主要新增了浮动和定位，删除了许多不被浏览器支持的属性。
CSS3
早在2001年，W3C就着手开始准备开发CSS第三版规范。虽然完整的、规范权威的CSS3标准还没有尘埃落定，但是各主流浏览器已经开始支持其中的绝大部分特性。CSS3新增了圆角、阴影、动画等等特性

1.3 快速入门

CSS3唯一语法：声明和声明之间用分号隔开
选择器：{
声明1；
声明2；
声明3；
…
}

使用CSS改变h1标签的颜色

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{color: aqua;}
    </style>
</head>
<body>
<h1>这是一个测试文件</h1>
</body>
</html>

1.4 CSS样式导入的三种方式

行内样式：在html的标签内直接写css的样式

<h1 style="color: brown">这是一个测试文件</h1>

内部样式：在html的head标签内书写CSS代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{color: aqua;}
    </style>
</head>
<body>
<h1>这是一个测试文件</h1>
</body>
</html>

外部样式：在html文件内链接一个样式

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--这里使用link标签链接到一个css文件，然后在文件内定义样式-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>这是一个测试文件</h1>
</body>

CSS文件的代码

h1{
    color: black;
}

三种样式的优先级：优先级遵从就近原则，即html标签会采用距离自己最近的定义的样式。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{color: aqua}
    </style>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 style="color: black">这是一个测试文件</h1>
</body>

在上述例子中，标签内定义的样式距离h1标签最近，其次是link标签指向的css文件，最后是style标签内定义的样式。所以此处h1采用的优先级是行内样式>外部样式>内部样式。

2. CSS选择器

2.1 CSS基本选择器

标签选择器：根据标签来指定样式
类选择器：根据标签的class属性指定样式
id选择器：根据标签的id属性来指定样式
选择器优先级：id选择器>类选择器>标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>
    <style>
        h1{color: aqua}
        .style1{color: brown}
        #test{color: aliceblue}
    </style>
</head>
<body>
<!--标签选择器-->
<h1>test</h1>
<!--类选择器,可以实现跨标签归类-->
<h1 class="style1">test</h1>
<p class="style1">testestsetsets</p>
<!--id选择器,id选择器必须保证全局唯一-->
<h1 id="test">test</h1>
</body>
</html>

2.2 CSS高级选择器（选择器的名字是我按照理解自己起的）

测试例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高级选择器</title>
    <style>
        /*后代选择器*/
        ul p{background: aqua;}
        /*子一代选择器*/
        body>p{background: brown;}
        /*唯一弟弟选择器*/
        .test + p{background: blueviolet}
        /*所有弟弟选择器*/
        .test1~p{background: blue}
    </style>
</head>
<body>
<p>pppppppppppp1</p>
<p>pppppppppppp2</p>
<p class="test">pppppppppppp3</p>
<p class="test1">pppppppppppp3</p>
<ul>
    <li>
        <p>pppppppppppp4</p>
    </li>
    <li>
        <p>pppppppppppp5</p>
    </li>
    <li>
        <p>pppppppppppp6</p>
    </li>
</ul>
<p>pppppppppppp7</p>
</body>
</html>

后代选择器：定义ul标签后面所有的p标签

        /*后代选择器*/
        ul p{background: aqua;}

子选择器：定义body标签后面所有的p标签的背景色

        /*子一代选择器*/
        body>p{background: brown;}

唯一弟弟选择器：定义test类标签后面的第一个同级的p标签

        /*唯一弟弟选择器*/
        .test + p{background: blueviolet}

所有弟弟选择器：定义test1类后面的所有同级的p标签

        /*所有弟弟选择器*/
        .test1~p{background: blue}

选择器优先级：大范围选择器<小范围选择器

上述例子的测试结果：
在这里插入图片描述

2.3 结构伪类选择器

基本语法：其中的伪类声明参数众多，用到的时候可以去查。

选择器：伪类声明 {
声明1；
声明2；
声明3；
…
}

例子：选中第一个p标签

p:first-child{background: blue}

2.4 属性选择器

语法：其中的伪类声明参数众多，用到的时候可以去查。

选择器 [正则表达式1][正则表达式2][正则表达式3]… {
声明1；
声明2；
声明3；
…
}

例子：将有 title 属性并且href属性按照pdf结尾的 HTML 超链接的文本设置为红色

a[href$=pdf][title] {color:red;}

3. CSS样式

CSS样式很多，只需记住几个常用的即可，其他的可以查。
https://www.w3school.com.cn/css/css_text.asp

4. CSS盒子模型

在这里插入图片描述
margin：外边距
border：边框
padding：内边距