本文是一份详细的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>
11.选择器组——并集选择器
满足任意一个条件的元素都设置样式
<head><style>div,.one,[title="test"]{color:red;}</style></head>
<body><div class="two" title="test">会变色</div><div title="not">会变色</div
最低0.47元/天 解锁文章
扫一扫
505
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
