4.1 CSS概述
CSS（层叠样式表，Cascading Style Sheets）是一种用于控制网页样式和布局的语言。它通过将样式（如字体、颜色、间距等）与HTML内容分离，使得网页设计和维护更加高效和有组织。
4.1.1.CSS的基本概念
-
样式表：用于控制网页外观的规则集合。
-
选择器：定位HTML中的元素，以便应用样式。
-
属性：定义样式的特征，如字体、颜色、间距等。
-
值：为属性指定的具体样式设置。
-
规则集：由选择器和声明块组成，用于应用样式。
-
层叠：当多个样式规则冲突时，决定哪个规则优先应用。
-
继承：子元素自动继承父元素的某些样式属性。
-
盒模型：每个元素都被视为一个包含内容、内边距、边框和外边距的盒子。
-
定位：控制元素在页面上的位置。
-
布局：安排页面上的元素布局，如使用Flexbox或Grid。
-
媒体查询：根据不同设备特性应用不同的样式，实现响应式设计。
-
优先级：选择器的特异性，影响样式的覆盖规则。
4.1.2传统HTML的缺点
-
样式与内容混合：
- 在HTML中直接使用
<font>标签、bgcolor属性等来控制样式，导致样式与内容混合在一起，难以维护和更新。
- 在HTML中直接使用
-
重复样式代码：
- 如果多个页面需要相同的样式，需要在每个页面中重复相同的HTML标签和属性，这增加了代码的冗余和维护难度。
-
缺乏灵活性：
- HTML标签和属性提供的样式选项有限，难以实现复杂的布局和设计效果。
-
难以维护：
- 随着网页内容的增加，修改和更新样式变得更加困难，因为需要在多个文件中查找和修改相同的标签和属性。
-
布局限制：
- 传统HTML缺乏有效的布局控制，难以实现复杂的页面布局，如多列布局、灵活的盒子布局等。
-
性能问题：
- 重复的样式代码和内联样式会影响页面的加载速度和性能。
-
缺乏响应式设计：
- 传统HTML难以实现响应式设计，即根据不同设备（如手机、平板、桌面）的屏幕尺寸和分辨率自动调整布局和样式。
-
难以实现高级视觉效果：
- 传统HTML难以实现一些高级视觉效果，如渐变、阴影、动画等。
-
缺乏一致性：
- 不同浏览器对HTML标签和属性的解释可能存在差异，导致样式在不同浏览器中显示不一致。
-
不利于可访问性：
- 传统HTML缺乏对可访问性的支持，如为视觉障碍用户提供的样式和布局。
4.1.2.1.维护困难
-
代码重复：样式直接写在HTML标签内，导致相同样式在多个页面或同一页面的多个位置重复。
-
修改繁琐：更改样式需要手动查找和修改每个实例，耗时且容易出错。
-
结构混乱：样式与内容混合，使得HTML文档结构混乱，难以理解和编辑。
-
更新不便：统一更新样式时，需要在所有相关文件中进行更改，增加了维护的工作量。
-
缺乏组织：没有集中的样式管理，导致样式规则分散在各个HTML文件中，难以组织和控制。
-
浏览器差异：不同浏览器对HTML样式的解释可能不同，需要额外的样式代码来确保一致性。
-
扩展性差：随着网站规模的扩大，传统HTML的维护成本急剧增加，难以适应新的设计需求。
-
可访问性问题：缺乏对可访问性特性的支持，如为视觉障碍用户提供的样式，难以维护。
4.1.2.2.标记不足
-
样式控制有限：HTML标签主要用于定义内容结构，不提供丰富的样式控制选项。
-
布局能力弱：缺乏灵活的布局工具，如流动布局、栅格系统等，难以实现复杂的页面设计。
-
视觉效果单一：难以实现现代网页设计中的高级视觉效果，如阴影、渐变、动画等。
-
响应式设计缺失：不支持媒体查询，难以根据不同设备特性调整样式，实现响应式设计。
-
可访问性支持不足：缺乏对可访问性特性的内置支持，不利于为残障用户提供友好体验。
-
浏览器兼容性问题：不同浏览器对HTML的解释可能存在差异，导致样式在不同浏览器中表现不一致。
-
扩展性和灵活性差：随着网页功能的增加，传统HTML的扩展性和灵活性不足，难以适应新的设计趋势和技术要求。
4.1.2.3.网页过“胖”
-
代码冗余：样式直接嵌入HTML标签，造成大量重复代码。
-
文件膨胀：每个页面都包含内联样式，导致文件大小增加。
-
加载缓慢：大量内联样式增加页面加载时间，影响用户体验。
-
性能下降：重复的样式代码和过大的文件大小影响网页性能。
-
维护不便：随着网页内容增加，维护和更新样式变得更加困难。
-
资源浪费：重复的样式代码浪费服务器带宽和用户下载时间。
4.1.2.4.定位困难
-
定位选项有限：缺乏精确控制元素位置的手段。
-
布局固定：难以实现流动布局或响应式设计。
-
重叠和覆盖问题：元素重叠难以控制，影响页面布局。
-
对齐和分布难题：难以实现复杂的对齐和分布效果。
-
绝对定位缺乏：没有提供绝对定位的概念，难以精确放置元素。
4.1.3.CSS的特点和优势
-
样式与内容分离：提高代码的可读性和可维护性。
-
样式重用：通过类和ID选择器，样式可以在不同页面和元素间重用。
-
减少代码量：使用外部样式表可以减少HTML中的内联样式，简化代码。
-
提高性能：减少页面加载时间，因为样式可以缓存。
-
易于维护和更新：集中管理样式，方便统一修改和更新。
-
丰富的布局选项：支持多种布局方式，如Flexbox和Grid。
-
响应式设计：通过媒体查询实现不同设备的适配。
-
视觉效果丰富：支持多种视觉效果，如阴影、渐变、转换和动画。
-
浏览器兼容性：大多数现代浏览器都支持CSS标准。
-
可访问性支持：通过样式可以提高网站的可访问性。
-
层叠和继承：允许样式的层叠和继承，增加设计的灵活性。
-
优先级和特异性：提供了一套规则来解决样式冲突。
-
预处理器支持：如Sass和Less，提供变量、混合、函数等高级功能。
4.1.3.1.表现和内容分离
-
分离：样式（表现）和结构（内容）分开，使用外部或内部样式表定义样式。
-
维护：样式更改不影响内容，简化维护和更新。
-
重用：样式可以在多个页面间重用，提高效率。
-
清晰：HTML专注于结构，CSS专注于表现，代码更清晰。
-
灵活性：样式独立于内容，易于调整和扩展。
-
缓存：样式表可以被浏览器缓存，提高页面加载速度。
-
专业：允许设计师专注于样式，开发者专注于内容和功能。
4.1.3.2.增强了网页的表现力
-
样式控制：提供丰富的属性来控制文本、颜色、背景等。
-
布局设计：支持多种布局方式，如Flexbox和Grid。
-
视觉效果：实现阴影、渐变、动画等高级视觉效果。
-
响应式设计：通过媒体查询适应不同设备和屏幕尺寸。
-
交互增强：定义鼠标悬停、点击等交互状态的样式。
-
图形设计：使用CSS绘制图形和背景图案。
-
动画和过渡：创建平滑的动画和过渡效果。
-
可定制性：用户可以自定义样式，提升个性化体验。
-
跨浏览器：大多数样式在主流浏览器中表现一致。
-
性能优化：合理使用CSS可以提高网页性能和加载速度。
4.1.3.3.使整个网站显示风格趋于统一
-
统一样式：通过共享样式表，确保所有页面使用一致的样式。
-
易于调整：集中修改样式表即可更新全站风格。
-
提高效率：减少重复代码，提高开发和维护效率。
-
增强一致性：确保品牌元素如颜色、字体在全站一致。
-
改善体验：统一的视觉风格提升用户浏览体验。
-
灵活扩展：新增页面可轻松继承现有风格。
4.1.4.CSS的编写规则
-
选择器：定位要样式化的HTML元素。
-
属性：定义元素的视觉样式特征。
-
值：为属性指定具体的样式值。
-
声明块：用大括号
{}包含选择器的一组声明。 -
规则集：选择器和声明块的组合。
-
层叠：多个规则冲突时，根据优先级决定最终样式。
-
继承：子元素继承父元素的某些样式属性。
-
特异性：选择器的优先级，影响层叠规则。
-
重要性：使用
!important可以提高规则的优先级。 -
媒体查询：为不同设备和条件定义样式。
-
注释：用
/* 注释内容 */添加注释，提高代码可读性。 -
代码组织：合理组织代码，提高可维护性。
-
性能优化：避免过度复杂的选择器和过多的规则，减少计算量。
-
浏览器兼容性：考虑不同浏览器对CSS属性的支持差异。
-
预处理器：使用Sass、Less等预处理器增强CSS功能。
4.1.4.1.目录结构命名规则
-
逻辑分组：按功能或组件逻辑分组，如
layout.css、components.css、variables.css。 -
前缀命名：使用前缀区分不同类别的样式，如
.btn-、.nav-、.card-。 -
BEM命名：采用Block Element Modifier（块、元素、修饰符）命名方法，如
.block__element--modifier。 -
一致性：保持命名一致性，易于理解和维护。
-
简洁性：命名应简洁明了，避免过长或难以理解的名称。
-
可读性：确保命名易于阅读和理解，避免使用缩写，除非它们是广泛认可的。
-
扩展性：考虑未来可能的扩展，命名应有足够的灵活性。
-
文件命名：使用有意义的文件名，避免使用数字或无意义的缩写。
-
避免全局污染：使用具有明确作用域的类名，避免样式全局污染。
-
注释和文档：在CSS文件中添加注释，说明文件内容和用途，便于团队协作。
-
版本控制：在文件名中包含版本号，方便跟踪更改。
-
组织结构：建立清晰的目录结构，如按页面、组件、基础样式等分类。
4.1.4.2.样式文件的命名规则
-
描述性：文件名应描述内容，如
header.css、footer.css。 -
简洁性：避免过长名称，保持简洁。
-
一致性：命名应遵循一致的模式，便于识别。
-
模块化：按功能模块命名，如
modal.css、navbar.css。 -
前缀：使用前缀区分类别或状态，如
.btn-primary.css。 -
避免缩写：除非广泛认可，否则避免使用不易理解的缩写。
-
可读性：使用连字符
-或下划线_提高可读性，如site-navigation.css。 -
扩展名：通常使用
.css作为文件扩展名。 -
版本控制：可以在文件名中包含版本号，如
styles-v2.css。 -
响应式：为响应式样式使用特定名称，如
responsive.css或在原有文件名后加-responsive。 -
组件化：对于组件样式，使用组件名命名，如
button.css。 -
状态：为不同状态的样式使用描述性名称，如
error.css、success.css。
4.1.4.3.选择器的命名规则
-
语义化：选择器名称应反映其用途，如
.nav、.btn。 -
简洁：避免冗长，尽量简短且直观。
-
可读性：使用易于理解的命名，避免复杂或模糊的术语。
-
一致性：整个项目中使用统一的命名约定。
-
避免全局类：尽量减少使用通用类名，如
.red、.large，以免造成样式冲突。 -
BEM：考虑使用BEM（Block Element Modifier）命名方法，如
.block__element--modifier。 -
组件化：为组件选择器使用明确的命名空间，如
.my-component--button。 -
状态和变异：为状态和变异选择器使用明确的后缀，如
.is-active、--hover。 -
层级关系：在嵌套选择器中体现层级关系，如
.parent .child。 -
避免ID：尽量不使用ID选择器，因为它们具有很高的特异性。
-
避免过度嵌套：避免过深的嵌套，以减少特异性和提高性能。
-
可维护性：选择器应易于修改和维护。
-
避免魔法类：不使用没有明确含义的类名，如
.m-1、.p-2。 -
注释：对复杂的选择器使用注释，说明其用途和上下文。
4.1.4.4.CSS代码注释
-
解释目的：注释样式的作用和目的。
-
标记开始和结束：为复杂的样式规则或组件标记开始和结束。
-
使用多行注释：对于详细说明，使用多行注释
/* 注释内容 */。 -
简洁明了：保持注释简短且直接。
-
避免过度注释：只对需要解释的代码进行注释。
-
更新注释：随着代码的更新，同步更新注释。
-
使用单行注释：对于简单的说明，使用单行注释
// 注释内容。 -
注释样式规则：对不直观的样式规则进行注释。
-
注释代码块：对代码块或逻辑分组进行注释。
-
注释媒体查询：对媒体查询的用途进行注释。
-
注释变量和混合：在使用预处理器时，注释变量和混合的定义。
-
注释重要规则：对使用
!important的规则进行注释说明。 -
注释兼容性：对特定浏览器的兼容性样式进行注释。
-
注释TODO项：标记需要后续处理或考虑的代码部分。
-
注释版本和作者：在文件顶部注释版本信息和作者。
4.1.4.5.CSS代码注释
-
说明：用注释解释复杂的样式规则。
-
标记：用注释标记样式规则的开始和结束。
-
简洁：保持注释简洁，避免冗余。
-
更新：及时更新注释以反映代码变化。
-
单行：使用
//进行单行注释。 -
多行：使用
/*和*/进行多行注释。 -
组注：对相关样式规则进行分组注释。
-
状态注：注释不同状态（如:hover、:active）的样式。
-
媒体注：注释媒体查询的适用条件。
-
TODO：标记待办事项或待解决的问题。
-
版本：注释文件版本和更新日期。
-
作者：注释作者信息和联系方式。
-
兼容性：注释浏览器兼容性信息。
-
重要性：注释使用
!important的原因。
4.2 CSS语法基础
-
规则集：由选择器和声明块组成，如：
css
selector { property: value; } -
选择器：定位HTML元素，如
.class、#id、element。 -
属性：定义样式特征，如
color、margin。 -
值：属性的具体设置，可以是颜色、尺寸、百分比等。
-
声明：属性和值的组合，如
color: blue;。 -
声明块：由大括号
{}包围的一组声明。 -
层叠：多个规则冲突时，根据优先级决定最终样式。
-
继承：子元素继承父元素的某些样式属性。
-
盒模型：包括内容、内边距、边框和外边距。
-
定位：控制元素位置，如
static、relative、absolute、fixed。 -
布局：使用Flexbox、Grid等进行页面布局。
-
媒体查询：根据不同设备特性应用样式，实现响应式设计。
-
伪类和伪元素：添加特殊效果，如
:hover、::before。 -
注释：用
/* 注释内容 */添加注释。 -
单位：使用各种单位表示值，如px、em、rem、%。
-
简写属性：合并多个属性，如
margin: top right bottom left;。 -
颜色：使用颜色名、十六进制、RGB、RGBA等表示。
-
选择器组合：组合多个选择器，如
.class#id。 -
优先级：根据特异性和来源确定规则的优先级。
-
重要性：使用
!important提高规则优先级。
4.2.1.CSS基本语法
-
规则结构：由选择器和声明块组成。
css
selector { property: value; } -
选择器：定位HTML中的元素。
- 元素选择器：
h1、p。 - 类选择器：
.className。 - ID选择器：
#idName。
- 元素选择器：
-
声明：属性和值的组合。
- 属性：
color、background-color。 - 值：
red、#ffffff。
- 属性：
-
声明块：用大括号
{}包围的一组声明。 -
层叠：当多个规则冲突时，根据特异性和来源决定哪个规则生效。
-
继承：某些属性如
color可从父元素继承。 -
盒模型：控制元素的
width、height、padding、border、margin。 -
定位：通过
position属性控制元素位置。 -
布局：使用
display属性进行布局，如block、inline-block、flex、grid。 -
媒体查询：根据不同屏幕尺寸和特性应用样式。
-
伪类：如
:hover、:active、:first-child。 -
伪元素：如
::before、::after。 -
注释：用
/* 注释内容 */添加注释。 -
单位：使用长度单位如
px、em、rem，颜色单位如hex、rgb。 -
简写属性：合并多个属性，如
margin: 10px 15px;。 -
颜色简写：使用简写形式表示颜色，如
#fff代替#ffffff。 -
CSS Reset：统一不同浏览器的默认样式。
-
CSS预处理器：如Sass、Less，提供变量、混合、函数等。
-
CSS变量：使用
var(--variable-name)定义和使用变量。 -
CSS Grid：二维布局系统，定义行和列。
4.2.1.1.基本语法
- 规则结构：
选择器 { 属性1: 值1; 属性2: 值2; } - 选择器：指定要样式化的HTML元素。
- 属性：定义样式特征，如
color、font-size。 - 值：属性的具体设置，如
red、16px。 - 声明块：用
{}包含的一组属性和值。 - 层叠：多个规则冲突时，按优先级决定最终样式。
- 继承：子元素继承父元素的样式。
- 盒模型：控制元素的
width、height、padding、border、margin。 - 定位：通过
position属性控制元素位置。 - 布局：使用
display属性进行布局，如block、inline-block、flex、grid。 - 媒体查询：根据不同屏幕尺寸和特性应用样式。
- 伪类：如
:hover、:active、:first-child。 - 伪元素：如
::before、::after。 - 注释：用
/* 注释内容 */添加注释。 - 单位：使用长度单位如
px、em、rem，颜色单位如hex、rgb。
4.2.1.2.语法说明
-
选择器：定位HTML元素，如
h1、.nav、#header。 -
声明块：用大括号
{}包围的一组声明。 -
属性：定义样式特征，如
color、margin。 -
值：属性的具体设置，如
blue、10px。 -
声明：属性和值的组合，如
color: blue;。 -
层叠：根据特异性和来源决定样式优先级。
-
继承：子元素继承父元素的某些样式属性。
-
盒模型：控制元素的
width、height、padding、border、margin。 -
定位：使用
position属性控制元素位置。 -
布局：使用
display属性进行布局，如flex、grid。 -
媒体查询：根据不同设备特性应用样式。
-
伪类：添加交互效果，如
:hover、:active。 -
伪元素：添加装饰，如
::before、::after。 -
注释：用
/* 注释内容 */添加注释。 -
单位：使用长度单位如
px、em、rem，颜色单位如#fff、rgb(255,255,255)。 -
简写属性：合并多个属性，如
margin: 10px 15px;。 -
CSS变量：使用
var(--variable-name)定义和使用变量。 -
优先级：
!important用于提高规则优先级。 -
特异性：选择器的优先级，如ID > 类 > 元素。
-
代码组织：合理组织代码，提高可读性和可维护性。
4.2.2.CSS选择器类型
-
元素选择器：直接使用元素名称，如
p、div。 -
类选择器：使用点号
.，如.className。 -
ID选择器：使用井号
#，如#idName。 -
属性选择器：根据属性或属性值选择，如
[type="text"]。 -
伪类选择器：模拟类，如
:hover、:first-child。 -
伪元素选择器：模拟元素，如
::before、::after。 -
组合器：
- 后代选择器：空格，如
.parent .child。 - 子选择器：大于号
>，如.parent > .child。 - 相邻兄弟选择器：加号
+，如.element + .sibling。 - 通用兄弟选择器：波浪线
~，如.element ~ .sibling。
- 后代选择器：空格，如
-
通配符选择器：使用星号
*，匹配所有元素。 -
否定伪类：如
:not(.selector)，匹配非指定选择器的元素。 -
属性选择器匹配：
- 存在：
[attribute]。 - 等于：
[attribute="value"]。 - 包含：
[attribute*="value"]。 - 开头：
[attribute^="value"]。 - 结尾：
[attribute$="value"]。
- 存在：
4.2.2.1.标记选择器
p{
color: #0000ff;
font-size: 20px;
}<p>第一段的内容</p>
<p>第二段的内容</p>4.2.2.2.class选择器
.class1{
color: #ff0000;
font-size: 30px;
}<p class="class1">这个是CLASS1的内容</p>
<p class="class2">这个是CLASS2的内容</p>4.2.2.3.ID选择器
#id1{
color: #00aaff;
font-size: 40px;
}
<p id="id1">这是一个id1内容</p>4.2.2.4.伪类选择器
a:visited{
color: #ffaaaa;
}
a:link{
color: #000000;
}
a:hover{
color: #00ff00;
}
<a href="https://www.baidu.com">百度一下</a>4.2.3.CSS选择器声明
4.2.3.1.集体声明
p,a{
font-size: 70px;
}4.2.3.2.全局声明
*{
font-family: fangsong;
} 
4.2.3.3派生选择器（上下文选择器）
-
后代选择器：使用空格分隔，如
.ancestor .descendant。 -
子选择器：使用大于号
>，如.parent > .child。 -
相邻兄弟选择器：使用加号
+，如.element + .sibling。 -
通用兄弟选择器：使用波浪线
~，如.element ~ .sibling。 -
属性选择器：根据属性或属性值选择，如
[type="radio"]。 -
伪类选择器：模拟类，如
:hover、:active。 -
伪元素选择器：模拟元素，如
::before、::after。 -
相邻兄弟选择器：选择紧随其后的兄弟元素。
-
通用兄弟选择器：选择所有后续的兄弟元素。
-
组合使用：可以组合不同类型的选择器，如
ul li:first-child。
4.3 CSS引入方式
<link rel="stylesheet"
href="css/index.css"
type="text/css"/>4.3.1.内联样式表（行内样式表）
-
直接在HTML元素中：在HTML标签的
style属性中直接写样式。 -
格式：
<tag style="属性1: 值1; 属性2: 值2;">内容</tag> -
优先级最高：通常具有最高特异性，除非使用
!important。 -
适用于单个元素：只影响当前标签。
-
示例：
html
<p style="color: red; font-size: 20px;">这是内联样式</p> -
优点：快速、直接应用样式。
-
缺点：难以维护，不便于样式复用。
-
适用场景：临时或特定元素的样式。
4.3.1.1.基本语法
-
规则结构：选择器 + 声明块
css
selector { property: value; } -
选择器：定位HTML元素
- 标签选择器：
element - 类选择器：
.class - ID选择器：
#id
- 标签选择器：
-
属性：定义样式特征，如
color、margin。 -
值：属性的具体设置，如
blue、10px。 -
声明块：大括号
{}内一组声明。 -
层叠：冲突时按优先级应用样式。
-
继承：子元素继承父元素样式。
-
盒模型：控制元素的
width、height、padding、border、margin。 -
定位：通过
position属性控制元素位置。 -
布局：使用
display属性进行布局。 -
媒体查询：根据不同设备特性应用样式。
-
伪类：如
:hover、:active。 -
伪元素：如
::before、::after。 -
注释：
/* 注释内容 */。 -
单位：使用长度单位如
px、em、rem。 -
简写属性：合并多个属性，如
margin: 10px 15px;。 -
CSS变量：用
var(--variable-name)定义变量。 -
优先级：根据特异性和来源确定规则的优先级。
-
重要性：
!important提高规则优先级。 -
代码组织：合理组织代码，提高可读性和可维护性
4.3.1.2.语法说明
-
规则结构：由选择器和声明块组成。
css
selector { property: value; } -
选择器：匹配HTML元素以应用样式。
-
属性：指定要样式化的CSS特性。
-
值：为属性指定的具体样式。
-
声明：属性和值的组合。
-
声明块：由大括号
{}包围的声明集合。 -
层叠：解决样式冲突的规则。
-
继承：子元素继承父元素的样式。
-
盒模型：处理元素的尺寸和布局。
-
定位：控制元素在页面上的位置。
-
布局：确定元素的排列方式。
-
媒体查询：为不同设备或视口尺寸定义样式。
-
伪类：定义元素的特殊状态。
-
伪元素：创建元素的虚拟部分。
-
注释：对代码进行说明，不影响页面。
-
单位：为属性值提供度量或范围。
-
简写属性：合并多个属性声明以简化代码。
-
CSS变量：定义可复用的属性值。
-
优先级：确定多个规则的适用性。
-
重要性：声明的覆盖级别。
4.3.2.内部样式表
-
位置：在HTML文档的
<head>标签内。 -
用法：使用
<style>标签包裹CSS规则。 -
作用域：仅影响当前HTML文档的样式。
-
示例：
html
<head> <style> /* CSS规则 */ body { font-family: Arial; } h1 { color: blue; } </style> </head> -
优点：使HTML和CSS关联更紧密，方便统一管理。
-
缺点：对于多页面网站，代码重复可能导致维护困难。
-
媒体类型：可以指定媒体类型，如
screen、print。 -
CSS规则：在
<style>标签内编写标准的CSS规则。 -
注释：使用
/* 注释内容 */进行注释。 -
scoped：如果使用
scoped属性，样式只作用于当前HTML元素的子元素。
4.3.2.1.基本语法
4.3.2.2.语法说
4.3.3.外部样式表
4.3.3.1.链接外部样式表
4.3.3.2.导入外部样式表
4.4 CSS的属性单位
-
像素 (px)：屏幕显示的最小单位。
css
font-size: 16px; -
百分比 (%)：相对于父元素的度量。
css
width: 50%; -
em：相对于当前元素的
font-size。css
font-size: 2em; -
rem：相对于根元素的
font-size。css
font-size: 1.5rem; -
vw/vh：相对于视口宽度和高度的百分比。
css
width: 100vw; height: 100vh; -
cm/毫米/mm：长度单位。
css
margin: 2cm; -
in/英寸：长度单位。
css
width: 10in; -
pt/磅：印刷行业的长度单位。
css
line-height: 1.5pt; -
ex：相对于当前字体中小写字母x的高度。
css
line-height: 2ex; -
ch：相对于数字0的宽度。
css
width: 12ch; -
fr：用于网格布局中，表示可用空间的比例。
css
grid-template-columns: 1fr 2fr 1fr; -
deg/度：角度单位，用于旋转。
css
transform: rotate(45deg); -
rad：弧度，用于旋转。
css
transform: rotate(3.14rad); -
s：时间单位，用于动画。
css
transition-duration: 0.5s; -
Hz/kHz：频率单位，用于音频。
css
transition-timing-function: 5Hz; -
%/百分比：透明度或颜色亮度。
css
opacity: 50%; -
无单位：主要用于
line-height和border-width等。css
line-height: 1.2;
4.4.1.长度、百分比单位
-
px (像素)：屏幕显示的最小单位。
css
width: 100px; -
% (百分比)：相对于父元素的宽度或高度。
css
width: 50%; -
em：相对于当前元素的
font-size。css
font-size: 2em; -
rem：相对于根元素的
font-size。css
font-size: 1.5rem; -
vw：相对于视口宽度的百分比。
css
width: 75vw; -
vh：相对于视口高度的百分比。
css
height: 100vh; -
cm (厘米)：长度单位。
css
margin: 3cm; -
mm (毫米)：长度单位。
css
margin: 5mm; -
in (英寸)：长度单位，1英寸等于2.54厘米。
css
height: 11in; -
pt (磅)：印刷行业的长度单位，1英寸等于72磅。
css
line-height: 18pt; -
pc (十二点活字)：传统的印刷行业单位，1pc约等于 12pt。
css
letter-spacing: 2pc; -
ch：相对于数字0的宽度。
css
font-size: 3ch;
4.4.1.1.相对类型
-
% (百分比)：相对于父元素的尺寸。
css
width: 50%; /* 父元素宽度的50% */ -
em：相对于当前元素的
font-size。css
font-size: 2em; /* 当前元素字体大小的2倍 */ -
rem：相对于根元素的
font-size。css
line-height: 1.5rem; /* 根元素字体大小的1.5倍 */ -
vw：相对于视口宽度的百分比。
css
width: 100vw; /* 视口宽度的100% */ -
vh：相对于视口高度的百分比。
css
height: 100vh; /* 视口高度的100% */ -
ex：相对于当前字体中小写字母x的高度。
css
line-height: 2ex; /* 小写字母x高度的2倍 */ -
ch：相对于数字0的宽度。
css复制
width: 12ch; /* 数字0宽度的12倍 */
4.4.1.2.绝对类型
-
px (像素)：屏幕显示的最小单位。
css
width: 100px; -
cm (厘米)：长度单位。
css
margin: 3cm; -
mm (毫米)：长度单位。
css
margin: 5mm; -
in (英寸)：长度单位，1英寸等于2.54厘米。
css
height: 11in; -
pt (磅)：印刷行业的长度单位，1英寸等于72磅。
css
line-height: 18pt; -
pc (十二点活字)：传统的印刷行业单位，1pc约等于 12pt。
css
letter-spacing: 2pc;
4.4.2.色彩单位
-
颜色名：如
red、blue、green。css
color: red; -
十六进制 (Hex)：6位十六进制数表示颜色。
css
color: #ff0000; -
RGBA：红、绿、蓝和透明度。
css
color: rgba(255, 0, 0, 0.5); -
HSLA：色相、饱和度、亮度和透明度。
css
color: hsla(0, 100%, 50%, 0.5); -
RGB：红、绿、蓝颜色值。
css
color: rgb(255, 0, 0); -
透明：
transparent关键字用于完全透明。css
background-color: transparent; -
currentColor：使用当前元素的文本颜色。
css
border-color: currentColor; -
预定义的颜色值：如
black、white、gray。 -
操作色彩：使用色彩计算，如
darken、lighten（在Sass或Less中）。 -
使用缩写：在RGB和HSL后使用简写形式。
css
color: rgb(255, 0, 0); /* 完整形式 */ color: #f00; /* 简写形式 */ color: hsl(0, 100%, 50%); /* 完整形式 */ color: #f00; /* 与十六进制相同 */
4.4.2.1.用十六进制数方式表示色彩
-
格式：
#RGB或#RRGGBBcss
color: #FFF; /* 简写形式 */ color: #FFFFFF; /* 完整形式 */ -
RGB：红绿蓝颜色值，每两个字符代表一个颜色通道。
-
简写：如果RGB的三个颜色值相同，可以缩写为六个字符。
css
background-color: #333; /* 等同于 #333333 */ -
透明度：在CSS3中，可以使用
#RGBA或#RRGGBBAA表示透明度。css
background-color: #FFF0; /* 透明度为F0，简写形式 */ background-color: #FFFFFF00; /* 透明度为00，完整形式 */ -
3位十六进制：每个颜色通道一位数字，可以表示256种颜色。
-
6位十六进制：每个颜色通道两位数字，可以表示大约1677万种颜色。
-
例子：
css
/* 使用3位十六进制表示颜色 */ color: #F00; /* 红色 */ background-color: #0F0; /* 绿色 */ border-color: #00F; /* 蓝色 */ /* 使用6位十六进制表示颜色 */ color: #FF0000; /* 红色 */ background-color: #00FF00; /* 绿色 */ border-color: #0000FF; /* 蓝色 */
4.4.2.2.用色彩名称方式表示色彩值
-
格式：
rgb(r, g, b)或rgba(r, g, b, a)css
color: rgb(255, 0, 0); /* 纯红色 */ background-color: rgba(255, 0, 0, 0.5); /* 半透明红色 */ -
参数：
r、g、b：分别代表红、绿、蓝颜色通道的强度，取值范围是0-255。
-
透明度：
a：代表透明度，取值范围是0.0-1.0，其中0.0完全透明，1.0完全不透明。
-
简写：
- 如果红、绿、蓝值都相同，可以简写为两位数，如
rgb(255, 0, 0)可以简写为rgb(ff0000)。
- 如果红、绿、蓝值都相同，可以简写为两位数，如
-
百分比：
- 也可以使用百分比来定义颜色通道，如
rgb(100%, 0%, 0%)。
- 也可以使用百分比来定义颜色通道，如
-
使用例子：
css
/* 使用RGB表示颜色 */ color: rgb(255, 255, 0); /* 黄色 */ background-color: rgb(0, 128, 0); /* 绿色 */ /* 使用RGBA表示颜色和透明度 */ color: rgba(0, 0, 255, 0.5); /* 半透明蓝色 */ -
优点：可以精确定义颜色和透明度。
-
缺点：比颜色名称或十六进制表示法稍复杂。
4.4.2.3.使用RGB（x,y,z）函数表示
-
基本格式：
css
color: rgb(x, y, z); -
取值范围：x、y、z的取值范围为0到255。
-
透明度：使用RGBA格式。
css
color: rgba(x, y, z, a); -
百分比格式：使用百分比来表示颜色通道。
css
color: rgb(p%, q%, r%); -
简写形式：当RGB值相同时，可以用简写形式。
css
color: rgb(x); /* 相当于 rgb(x, x, x) */ -
例子：
css
color: rgb(255, 0, 0); /* 红色 */ color: rgba(255, 0, 0, 0.5); /* 半透明红色 */ color: rgb(100%, 0%, 0%); /* 红色 */
4.5.CSS继承与层叠
-
继承：
- 子元素从父元素继承某些属性。
- 继承属性包括：
font-family、color、line-height等。
-
层叠：
- 当多个规则应用于同一个元素时，层叠决定最终应用的样式。
- 层叠顺序：内联样式 > ID选择器 > 类选择器 > 标签选择器 > 继承。
-
特异性：
- 根据选择器的类型计算优先级。
- 优先级：内联和!important > ID > 类/伪类 > 标签/伪元素 > 继承。
-
!important：
- 用于覆盖继承和层叠规则。
- 声明中使用
!important的属性具有最高优先级。
-
计算规则：
- 浏览器计算应用到元素上的所有样式规则。
-
例子：
css
/* 继承 */ body { font-family: Arial; } h1 { color: blue; } /* h1会继承body的font-family */ /* 层叠 */ p { color: black; } .red-text { color: red; } p.red-text { color: green; /* 这里的绿色会覆盖.red-text的红色 */ } -
重要性：
- 理解和使用继承和层叠是编写有效CSS的关键。
-
实践：
- 利用继承减少代码重复。
- 明智使用层叠和特异性来覆盖样式。
4.6 元素类型
-
块级元素 (Block-level elements)：
- 独占一行，可设置宽高。
- 如：
<div>,<p>,<h1>-<h6>,<ul>,<li>。
-
内联元素 (Inline elements)：
- 与其他元素同行显示，不可设置宽高。
- 如：
<span>,<a>,<b>,<i>,<img>。
-
内联块级元素 (Inline-block elements)：
- 同行显示，可设置宽高。
- 如：
<input>,<button>,<label>。
-
替换元素 (Replaced elements)：
- 内容由浏览器渲染，不可控。
- 如：
<img>,<video>,<iframe>。
-
匿名元素：
- 浏览器生成的没有明确HTML标签的元素。
- 如：匿名块级盒子，匿名内联盒子。
-
CSS伪元素：
- 用于创建元素的虚拟部分。
- 如：
::before,::after。
-
CSS选择器：
- 用于选择元素以应用样式。
- 如：标签选择器，类选择器，ID选择器。
-
display属性：
- 控制元素的类型。
- 值：
block,inline,inline-block等。
-
元素类型转换：
- 通过设置
display属性改变元素类型。
- 通过设置
-
例子：
css
/* 块级元素 */ div { display: block; } /* 内联元素 */ span { display: inline; } /* 内联块级元素 */ button { display: inline-block; }
4.6.1.块级元素
- 定义：开始于新行，占据一整行的空间。
- 特点：宽度默认填满父容器。
- 常见块级元素：
<div><p><h1>到<h6>（标题标签）<ul><ol><li><table><tr><td><th><form><blockquote><hr>
- 默认显示：
display: block; - 宽度：默认100%父元素宽度，除非设置宽度。
- 示例：
css
div { display: block; } - 布局：通常用于页面结构布局。
- 换行：前后有换行，独占一行。
4.6.2.行级元素
-
定义：行级元素与其他元素同行显示。
-
特点：
- 不能设置宽高，但可以设置水平边距（
margin-left和margin-right）。 - 默认无法设置垂直边距，除非更改
display属性。
- 不能设置宽高，但可以设置水平边距（
-
常见行级元素：
<span><a><b><i><em><strong><sub><sup><label><input><img>
-
默认显示类型：
display: inline; -
示例：
css
span { display: inline; } -
转换为行级元素：
- 可以使用
display: inline;或display: inline-block;将块级元素转换为行级元素。
- 可以使用
-
行级元素的尺寸：
- 宽度随内容变化，高度随字体大小变化。
-
行级元素与块级元素的区别：
- 行级元素不会导致元素独占一行。
-
内联块级元素：
display: inline-block;允许设置宽高，同时与其他元素同行显示。
-
使用场景：
- 当需要在一行内显示多个元素时使用。
4.6.3.列表项元素
-
定义：用于呈现有序或无序列表中的单个项目。
-
基本元素：
<li>：表示列表中的一个项目。
-
相关元素：
<ul>：无序列表。<ol>：有序列表。<li>可以包含块级元素和其他行级元素。
-
默认显示类型：
display: list-item; -
标记：
- 列表项前默认显示的标记（圆点或数字）可以通过
list-style-type属性修改。
- 列表项前默认显示的标记（圆点或数字）可以通过
-
列表样式：
list-style-type：控制列表项前的标记，如disc,circle,square,decimal等。list-style-position：控制列表项标记的位置，如inside或outside。
-
示例：
css
ul { list-style-type: square; /* 无序列表项使用方块标记 */ } ol { list-style-type: upper-roman; /* 有序列表项使用大写罗马数字 */ } li { list-style-position: inside; /* 列表项标记位于内容内部 */ } -
去除列表标记：
- 设置
list-style: none;可以去除列表项前的标记。
- 设置
-
自定义标记：
- 可以通过
list-style-image属性设置列表项前的图像。
- 可以通过
-
使用场景：
- 当需要创建项目列表时使用。
4.6.4.隐藏元素
-
使用
display属性：display: none;：元素完全不会被显示，并且不会占据页面空间。
css
.hidden { display: none; } -
使用
visibility属性：visibility: hidden;：元素不可见，但仍然占据页面空间。
css
.invisible { visibility: hidden; } -
使用
opacity属性：opacity: 0;：将元素透明度设置为0，使其完全透明，但仍占据空间。
css
.transparent { opacity: 0; } -
使用
z-index属性：- 通过设置一个负的
z-index值，可以将元素置于其他内容之下，使其被覆盖。
css
.behind { z-index: -1; } - 通过设置一个负的
-
使用
position属性：- 将元素的位置设置在视图之外，例如
position: absolute;与left: -9999px;。
css
.offscreen { position: absolute; left: -9999px; } - 将元素的位置设置在视图之外，例如
-
使用
clip-path或clip属性：- 将元素的可视区域裁剪到零，使其不可见。
css
.clipped { clip-path: inset(100%); } -
使用
width和height属性：- 将元素的宽度和高度设置为0。
css
.collapsed { width: 0; height: 0; overflow: hidden; } -
使用
aria-hidden属性：aria-hidden="true"：指示辅助技术忽略该元素，但视觉上可能仍可见。
html
<div aria-hidden="true">Hidden from assistive technologies</div>
选择隐藏元素的方法取决于你的具体需求，比如是否保留元素的空间、是否允许屏幕阅读器读取等
4.7 例题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第四章 4.7</title>
<style>
h1{
color: blue;
text-decoration: underline;
}
em{
color: red;
}
</style>
</head>
<body>
<h1>学习<em>web开发</em>教程</h1>
<p>如果您有任何问题，欢迎联系我们</p>
</body>
</html>
4.8 例题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第四章 4.8</title>
<style>
p{
color: green;
}
.red{
color: red;
}
.purple{
color: purple;
}
#line3{
color: blue;
}
</style>
</head>
<body>
<p>这是第1行文本</p>
<p class="red">这是第2行文本</p>
<p id="line3" class="red">这是第3行文本</p>
<p style="color: orange;" id="line3">这是第4行文本</p>
<p class="purple red">这是第5行文本</p>
</body>
</html>
4.9综合实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>开平碉楼</title>
<link type="text/css" rel="stylesheet" href="css/ZON_HE_AN_LI.css"/>
</head>
<body>
<div id="content">
<h2 class="biaoti">开平碉楼申遗大事记</h2>
<hr color="#d3b175" size="5"/>
<img src="img/pic200.jpg"/>
<p class="tx1">2000年,开平成立申遗小组</p>
<p>2000年2月,从国务院信访局到开平挂市委常委职务的李玫同志在香港侨团团拜会上向胡耀坤、吴荣治等侨领首次提出将开平碉楼申报为世界文化遗产。
2000年10月30日,开平市成立"开平碉楼"申报世界文化遗产领导小组。领导小组下设办公室,分整治组、资料组、宣传组。</p>
<p class="tx1">2001年,省申遗领导小组成立</p>
<p>2001年4月30日,开平市市长办公会议研究将开平碉楼申遗项目名称定为“开平碉楼与民居”。
2001年6月19日,申遗办谭伟强、张健文、邝积康3位负责人赴北京,在李玫同志的陪同下拜访了中国国际古迹遗址理事会秘书长郭旃、清华大学教授陈志华,就申遗的有关事宜进行会谈。
2001年3月至6月,开平市开展"开平碉楼"的普查工作,并请上海同济大学、华南理工大学专家对33座碉楼测绘了立面图、剖面图、平面图和细部特征图。
2001年6月,江门市成立了以时任市长雷于蓝为组长的江门市申报世界文化遗产领导小组。
2001年7月11日至17日,清华大学陈志华、楼庆西、李秋香教授,五邑大学张国雄、梅伟强教投,深入到三埠、长沙、沙冈、塘口、蚬冈、百合、月山、赤坎、大沙等镇(办事处)对碉楼与民居进行了认真细致的考察。开平市政府特聘几位专家为"开平碉楼与民居"申报世界文化遗产工作高级顾问。
2001年9月6日至7日,时任副省长的李兰芳到江门市视察碉楼,对开平碉楼申遗工作给予了充分的肯定,并表示省政府对此将大力支持。
2001年9月12日,联合国世界遗产评估机构——国际古迹遗址理事会总协调员亨利博士考察开平碉楼,对开平碉楼的价值和开平乃至广东的文物保护工作表示了充分的肯定。
2001年11月,广东省成立申报世界文化遗产领导小组及其办公室。
2001年,开平籍旅港同胞、恒生银行董事长利国伟爵士就开平碉楼申报事宜专门写信给时任国务院总理的朱镕基。
</p>
<p class="tx1">2004年,世遗专家评估开平申遗</p>
<p>2004年4月10日至11日,联合国世界遗产专家乔拉·索拉先生及夫人、以色列文物专家阿里·拉哈米莫夫先生及夫人,中国国际古迹遗址理事会秘书长郭旃先生,澳门文化局文化财产厅陈泽成厅长的陪同下到开平考察碉楼。
2004年5月,任仲夷同志致函省委书记张德江,请德江同志向中央汇报开平碉楼申报世界文化遗产工作。
2004年5月17日,张德江同志在开平市委、市政府《关于请张德江书记向中央汇报开平碉楼申报世界遗产工作的请示》中批示：我赞成和支持开平碉楼申报世界文化遗产。
2004年6月,开平市被中国建筑学会授予"中国碉楼之乡"的称号。
2004年7月2日,中国100多个申遗"预备清单"中已有5个申报项目被世界遗产中心受理,分别是澳门历史建筑群、开平碉楼、殷墟、福建土楼和红河哈尼梯田。
2004年10月28日,蚬冈镇锦江里昇峰楼业主旅加华侨胡黄惠英(乳名：黄滚盛)女士及其兄长黄雄畅先生在梁金山世外豪园酒店正式将他们的碉楼无偿委托给开平人民政府管理。
</p>
<p class="tx1">2005年,世遗专家评估开平申遗</p>
<p>2005年4月21日,由清华大学建筑学院与开平市申遗办合作开展的第二次全市性碉楼普查工作于圆满完成。本次碉楼普查从2005年3月16日开始,历时13个月。第二次碉楼普查深入到全市每条村庄逐幢碉楼进行登记、拍照、调查核实,拍摄2万多张图片,采集到一些珍贵的、鲜为人知的历史资料。
2005年9月18日,联合国世界遗产协调员乔拉先生、建筑规划师阿里先生来到开平,指导开平碉楼申报世界文化遗产工作。
2005年9月24日,由省人民政府主办,省文化厅、江门市人民政府、开平市人民政府承办的广东省开平碉楼申报世界文化遗产动员大会在省博物馆门前隆重举行。
2005年11月,开平碉楼申报世界文化遗产的项目名称由"开平碉楼与民居"变为"开平碉楼与村落”,极大地延伸了开平碉楼的文化内涵和历史价值,更有利于申报世界文化遗产。
2005年12月5日,北京大学世界遗产中心沈文权博士,中国古文物保护专家张志平女士(郭旃夫人)抵达开平,着手开展修改北大制订的开平碉楼文化遗产保护规划,为适应申报的需要,该规划将改名为《开平碉楼与村落保护管理规划》,并对相关内容进行增补。
</p>
<p class="tx1">2006年,世遗专家评估开平申遗</p>
<p>2006年1月11日,国家文物局局长单霁翔正式签署英文申报文本。
2006年1月,国务院正式批准"开平碉楼与村落"作为2007年代表中国向联合国申报世界文化遗产的项目,英文申报文本已被联合国教科文组织确认合格接收。
2006年3月2日至3日,联合国教科文组织专家乔拉·索拉先生和阿里先生按原计划来到开平考察"申遗"准备工作。
2006年4月3日下午,国家文物局、省政府、江门和开平市委、市政府在开平市行政大楼召开了开平碉楼与村落申报世界文化遗产工作会议,研究申遗工作进入第二个重要环节——环境整治阶段存在的问题,提出下一步工作意见。
2006年5月9日,黄华华省长在江门市委书记陈继兴、市长王南健的陪同下到江门市检查指导开平碉楼与村落申遗工作。
2006年8月21日至22日,经业主方其祥、方其赏、方其锦授权,塘口镇自力村三座尘封了大半个世纪的居庐——叶生居庐、官生居庐、澜生居庐被依次打开,并发现大量珍贵文物。
2006年8月27日至28日,著名歌唱家阎维文与中央电视台摄制组一行10多人来到开平,拍摄开平碉楼与村落申报世界文化遗产主题曲——《碉楼颂》音乐电视。
2006年9月,中国华侨出版社出版了两本关于开平碉楼与村落的学术著作,总结开平碉楼与村落研究所取得的丰硕成果,支持开平碉楼与村落申报世界文化遗产。
2006年9月15日,开平市举行"共同的心愿——全力支持开平碉楼与村落申报世界文化遗产"为主题的申遗文艺晚会,世遗评估专家卢光裕先生、副省长雷于蓝、国家文物局有关领导观看了晚会。晚会结束时,共收到来自社会各界的捐款1480多万元,其中,著名侨领吴荣治先生及夫人捐款100万元。
2006年9月15至18日,受联合国教科文组织世界遗产中心的委派,"世遗"评估专家卢光裕先生到江门市对开平碉楼与村落进行评估。
</p>
<p class="tx1">2007年,世遗专家评估开平申遗</p>
<p>2007年1月,开平碉楼与村落申遗项目顺利通过国际古迹遗址(ICOMOS)委员会执委会在巴黎召开的专家会议的评审。
2007年6月20日,开平市赴新西兰、澳大利亚申遗代表团一行30多人经香港转机后抵达新西兰。
2007年6月22日,中国政府代表团飞赴新西兰,出席世界遗产委员会第31届大会,为开平碉楼与村落申遗助威。
2007年6月底,开平碉楼与村落申遗项目顺利通过在新西兰召开的第31届世界遗产大会的表决,正式列入《世界遗产名录》。
</p>
<p id="t1">来源:开平碉楼</p>
</div>
</body>
</html>4.9.1CSS文件代码如下：
*{
width: 1024px;
margin-left: auto;
margin-right: auto;
}
.biaoti{
font-family: "微软雅黑";
text-align: center;
}
#content{
text-indent: 2em;
font-family: "微软雅黑";
font-size: 18px;
}
.tx1{
font-weight: bold;
font-family: "微软雅黑";
font-size: 24px;
color: #8b4513;
background-color: #d3b175;
line-height: 200%;
}
#t1{
color: #333;
text-align: right;
}
扫一扫
1133
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
