HTML与CSS入门--第四章 理解层叠样式表_html/css_WEB-ITnose

知识点：

　　1.创建基本样式表的方法

　　2.使用样式类的方法

　　3.使用样式ID的方法

　　4.构建内部样式表和嵌入样式的方法

立即学习“前端免费学习笔记（深入）”；

4.1 CSS工作原理：

　　CSS：层叠样式表的缩写，是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和实现的方式。

　　扩展名：.css

　　分内部样式表，外部样式表以及内联样式表

　　"层叠"的概念理解：（有助于理解CSS的优先级）CSS样式表中的样式会形成一个层次结构，更具体的样式会覆盖通用的样式。优先级由CSS根据这个层级结构决定，从而实现级联效果。可以用类似继承的关系来理解。

　　PS：元素的概念：表示标签及其内部的描述信息（如属性、文本、图像等）。

4.2 一个基本的样式表：

　　标准的额书写方式：一行一个样式规则，便于阅读。

　　字体专栏，需要抓一个时间段来分析一下，包括字体家族以及字体大小

　　简单地列一下字体大小的各种单位：

　　　　pt：点，1英寸相当于72点

　　　　in：英寸

　　　　cm：厘米

　　　　px：像素

　　　　em：字母m的宽度

4.3 CSS样式入门：

　　CSS中的样式属性分为两大类：

　　　　布局属性：影响网页上元素位置的属性。

　　　　格式化属性：影响网站中元素的视觉显示的属性。

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

26

查看详情

　　布局属性之display：　　block:块元素，自带clear：both

　　　　　　　　　　　　　 list-item:列表项处理　　/*从目前的实际角度来看与block没有什么区别*/

　　　　　　　　　　　　　 inline，none，其他……

　　布局属性之width，height

　　格式化属性之border：最新增加border-radius可以控制矩形的圆角

　　格式化属性之font：

　　　　1.text-decoration常用于删去链接的下划线

　　　　2.line-height设置文本行高

4.4 使用样式类：

　　当需要使网页中的有些文本域其他文本不同时，可以通过创建自定义HTML标签。

　　我们这里所说的定义的特殊格式文本称为样式类。因此它使一组自定义的格式化说明。例子：

　　　　h1 { color:blue }

　　h1是选择符；color是样式属性；blue是该属性的值

　　选择符：标签（h1）,类（.title）,ID（#container）等……

　　PS：注意组合选择器中"标签.类"与"标签 .类"的区别。

4.5 使用样式ID：

　　出于布局，格式化，与后台交互的考虑都可以选择使用ID。

　　ID在同一个页面中必须唯一存在。

4.6 内部样式表和内联样式：

　　内部样式表：

　　内联样式：style属性

　　PS：外部样式表，link，注意需要href，type以及rel属性