HTML5+CSS笔记教程（CSS教程篇）_html5css怎么用-优快云博客

本文是一份详细的HTML5和CSS3教程，涵盖了从基础到高级的各种概念，包括CSS的四种引入方式、常用选择器、属性及布局类型。通过实例解析了如何将CSS样式应用到元素上，以及各种选择器的工作原理，如通配选择器、元素选择器、类选择器、ID选择器、属性选择器、伪类和伪元素。此外，还介绍了常用属性，如颜色、字体大小、背景颜色、宽度和高度等，并探讨了布局类型，包括标准流、定位流、浮动流和flex布局。文章最后提到了网络字体的应用和字体图标的优点。

我所看的B站教程：最新最全HTML5-CSS3教程_哔哩哔哩_bilibili

官方文档：Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification (w3.org)

全属性表：Full property table (w3.org)

中文文档：CSS（层叠样式表） | MDN (mozilla.org)

查询属性是否可用：Can I use... Support tables for HTML5, CSS3, etc

CSS的全称为Cascading Style Sheet，即层叠样式表。

顾名思义，它可以一层一层的叠起来，所以这个样式应该是后定义的可以覆盖先定义的，立体一点思考页面的话，就是将页面当成一个沙盘，html是其中的布局，而CSS是其中凹凸不平的建筑，我们从顶部的视角去看，就是html的布局加最顶层的样式组合而成的页面。（有学过PS的图层概念应该更好理解）

一、熟悉CSS

带着问题：如何将CSS样式应用到元素上？为什么h1标签的字体那么大？

1.内联样式（inline style）

顾名思义，这是在行内直接定义样式。我们可以通过给h元素赋予样式进行改变

<h2>h2的样式</h2>

<h2 style="color:red;font-size:50px;">改变h2的样式</h2>

如果你使用调试工具对原始h2元素进行检查，就会发现使用该标签浏览器会自带样式

h2 {

display: block;

font-size: 1.5em;

margin-block-start: 0.83em;

margin-block-end: 0.83em;

margin-inline-start: 0px;

margin-inline-end: 0px;

font-weight: bold;

}

由于需要保证标签语义化，不建议使用<p>标签改变样式成<h2>标签之类的

这里可以要注意的是样式的格式-->style="属性：属性值;"<--键值对应，冒号分号不能丢

2.文档样式表（document style sheet）、内嵌样式表（embed style sheet）

带着问题：内联样式的缺陷在哪里？如果我们希望整篇文章都红色，要一个一个标签设置样式吗？

这样的结果会导致代码太过冗余了，我们将共同的代码抽出来然后统一管理，看例子

<head><style>h2,p{color:green;} .red{background-color:red;}</style></head>

<body><h2>变绿色标题</h2><p>变绿色段落</p><div class="red">占用多大</div></body>

以上head和body元素各自需要添加的内容，利用style标签统一管理其他标签的样式

需要注意的是，h1,p等的标签的前面不需要的加“.”，而.red是自己定义的选择器，需要加“.”且需要在标签中利用class属性引用

3.外部样式表（external style sheet）

带着问题：现在把共同的样式都抽取出来了，但是一个页面上千行样式放在页面开头真的好吗？

所谓外部样式表，顾名思义，就是将样式放在HTML文件外的另一个文件里，然后在HTML文件中导入它（或者说引用它好理解点）

我们在当前目录下新建一个style.css文件，将刚刚的样式复制过去

h2,p{color:green;} .red{background-color:red;}

在HTML文件将style元素删除，在<head>元素里使用link标签与style.css链接，如下图

<head><link rel="stylesheet" href="./style.css"></head>

这样就可以实现HTML文件与CSS文件分离，一般来说，项目中都是CSS一个文件夹，JS文件一个文件夹，这里推荐使用外部样式表

4.注意事项

css文件在开头最好指定编码

@charset "utf-8";

导入的时候下面的<link>会覆盖上面的，因此更重要的样式要放在更下面（style.css更重要）

<link rel="stylesheet" href="./base.css">

<link rel="stylesheet" href="./style.css">

导入的方法不止一种，也可以，别忘了分号-->效率比较低

<style>@import url(./style.css);</style>

在CSS文件可以导入其他CSS文件吗？也可以,如在style.css中

@import url(./base.css);

二、常用选择器（selectors）介绍

选择器有很多种，可以是HTML的标签名或者自定义的.red等

可以参考一下：CSS 选择器参考手册 (w3school.com.cn)

以下演示采用文档样式表的方式

1.通配选择器

可以为所有的元素附加样式，以下代码作用自己测试-->效率比较低

*{margin:0;padding:0;}

2.元素选择器

以HTML标签为名设置样式

p{color:red;}

3.类选择器

一般来说，一个网页的某一个元素的样式不会完全一样，所以需要构建类来进行层叠。使用频率高

<head><style>.box1{color:red;}.box2{font-size:25px;}</style></head>

<body><p class="box1 box2">应用两个类选择器</p></body>

特点在哪呢？定义选择器的名字前要加一个“.”，class属性应用时多个选择器中间用空格隔开

命名规范可以百度一下命名规范 - iBowen - 博客园 (cnblogs.com)

4.id选择器

id是标签的唯一标识，我们可以根据id构建选择器

<head><style>#id_selector{color:red;}</style></head>

<body><p id="id_selector">id选择器记得要加</p></body>

5.属性选择器

顾名思义，就是有某个属性且它的值满足我们要求便可以设置样式，示例

<head><style>[title="one"]{color:red;}[title]{font-size:50px;}[title*="o"]{font-style:italic;}</style></head>

<body><p title="one">大红</p><p title="two">大</p></body>

属性选择器 - CSS（层叠样式表） | MDN (mozilla.org)，不常用，需要再去查文档

6.后代选择器

使用两个标签，如果第二个标签是在第一个标签的“盒子”里（被包裹），则满足条件

<head><style>div span{color:red;}</style></head>

<body><div><p>试试，<span>最里面也可以</span></p></div></body>

多个标签以此类推

7.子代选择器

从名字就可以看出和上一个选择器的区别，需要加“>”号，示例

<head><style>div>span{color:red;}</style></head>

<body><div><span>会变色</span><p><span>不会变色</span></p></div></body>

选择器并不是只允许标签之间的嵌套，类选择器也可以参与其中

<head><style>.box>span{color:red;}</style></head>

<body><div class="box"><span>会变色</span></div></body>

8.相邻兄弟选择器

很明显，就是相邻的两个元素之间的关系，不过有先后关系，即兄与弟之间的关系

div元素后面紧挨着的p元素

<head><style>div+p{color:red;}</style></head>

<body><p>不会变色</p><div><p>不会变色</p></div><p>会变色</p><p>不会</p></body>

9.全体兄弟选择器

这个和上一个的区别主要在于它不限制相邻这个条件，即<div>标签后面的所有<p>

<head><style>div~p{color:red;}</style></head>

<body><p>不会变色</p><div><p>不会变色</p></div><p>会变色</p><p>会变色</p></body>

10.选择器组——交集选择器

同时符合条件的元素，直接看例子

同时符合2个条件的元素，div元素、div元素的class为one

<head><style>div.one{color:red;}</style></head>

<body><div class="one">会变色</div><div class="two">不会变色</div></body>

同时符合3个条件的元素，div元素、div元素的class为one，title属性为test

<head><style>div.one[title="test"]{color:red;}</style></head>

<body><div class="one" title="test">会变色</div><div class="one" title="not">不会变色</div></body>