第四章 CSS样式基础

2402_83228554

已于 2024-10-05 20:15:43 修改

阅读量586

点赞数 9

文章标签： css 前端

于 2024-10-01 20:43:01 首次发布

本文链接：https://blog.csdn.net/2402_83228554/article/details/142674014

版权

4.1 CSS概述

4.1.1.CSS的基本概念

CSS用于简化HTML标签，将关于样式的内容提取出来进行单独控制。它允许开发者通过设置网页的外观显示样式，比如字体、颜色、背景以及整体布局等，来增强网页的表现力。此外，CSS还允许为不同的浏览器设置不同的样式，使得网页设计可以更加灵活和多样化。

4.1.2传统HTML文件的缺点

关于传统HTML的缺点，具体包括以下几个方面：
1. 维护困难：对于需要修改的特定标记格式，尤其是整个网站的修改，会耗费大量时间，后期的修改和维护成本很高。
2. 标记不足：HTML本身的标记并不丰富，很多标记主要是服务于网页内容，而关于美工方面的标记，如文字间距、段落缩进等，在HTML中很难找到。
3. 网页过“胖”：由于缺乏对各种风格样式的统一控制，用HTML编写的页面往往体积过大，占用了很多宝贵的带宽资源。
4. 定位困难：在进行整体页面布局时，HTML对于各个模块的位置调整存在困难，难以实现精确的布局控制。

4.1.3.CSS的特点和优势

4.1.3.1.表现和内容分离

表现和内容分离：CSS通过定义HTML标记如何显示来控制网页的格式，实现了页面内容和表现的分离。这样做简化了网页的格式设计，并且使得对网页格式的修改变得更加方便。

4.1.3.2.增强了网页的表现力

增强了网页的表现力：CSS样式属性提供了比HTML更多的格式设计功能。例如，可以使用CSS样式去掉网页中超链接的下划线，甚至可以为文字添加阴影效果等，从而增强了网页的视觉表现力。
4.1.3.3.使整个网站显示风格趋于统一

通过使用CSS样式表来实现网站显示风格的统一。具体来说，它提到了将CSS样式定义在样式表文件中，并在多个网页中应用这些样式，以确保网页格式的一致性。此外，还提到了通过更新样式表文件来自动更新多个网页的格式，这样可以降低网站的开发和维护成本。

4.1.4.CSS的编写规则

4.1.4.1目录结构命名规则：存放CSS样式文件的目录一般命名为 style 或 css 。
4.1.4.2样式文件的命名规则：在项目初期，会把不同类别的样式放在不同的CSS文件中，这样做是为了便于CSS编写和管理。在项目后期，为了网站性能上的考虑，可能会将多个CSS文件合并。
4.1.4.3选择器的命名规则：
选择器要用有意义的单词或缩写组合来命名，做到“见名知义”，以节省查找样式的时间。

4.1.4.4.CSS代码注释

像其他语言一样，CSS允许用户在源代码中嵌入注释。CSS注释被浏览器忽略，不影响页面的显示和功能。
4.1.4.5.CSS代码注释

CSS注释有助于记住复杂的样式规则的作用、应用的范围等。
CSS注释以字符“/”开始，以字符“/”结束。
注释可以是多行的，并且可以出现在CSS代码的任何地方。
浏览器会忽略CSS注释，它们不影响页面的显示和功能。

4.2 CSS语法基础

4.2.1.CSS基本语法

4.2.1.1.基本语法

CSS基本语法的主要内容如下：
CSS是一个包含一个或多个规则的文本文件，每个规则由选择器（Selector）和声明（Declaration）两个主要部分构成。
选择器：通常是需要改变样式的HTML元素。
声明：由一个或多个属性与属性值对组成。属性是CSS的关键字，如 font-family （字体）、 color （颜色）和 border （边框）等。属性用于指定选择器某一方面的特性，而属性值则用于指定选择器的特性的具体特征。
基本语法格式为： selector { property1: value1; property2: value2; property3: value3; } ，其中选择器后面跟着大括号 {} ，里面包含一个或多个属性和值对，每对之间用分号 ; 隔开。

4.2.1.2.语法说明

属性/属性值对必须一一对应，属性与属性值之间必须用冒号 : 分隔。
在CSS中，如果属性名称由两个或两个以上的单词构成时，单词之间以连字符 - 分隔，例如 background-color 。而在脚本语言中，类似的属性名则连写成 backgroundColor ，且从第二个单词开始的所有单词首字母必须大写。

4.2.2.CSS选择器类型

4.2.2.1标记选择器：根据HTML元素的标签名来选择元素。
4.2.2.2class选择器：根据元素的class属性来选择元素。

4.2.2.3ID选择器：根据元素的ID属性来选择特定的元素。ID选择器以井号（#）开头，后跟ID的名称。例如，如果一个元素的ID是 header ，那么ID选择器就是 #header 。ID在一个HTML文档中应该是唯一的，因此ID选择器用于选择页面上特定的单一元素。
4.2.2.4属性选择器：根据元素的属性及其值来选择元素。属性选择器可以是简单的，也可以是复杂的。

4.2.3.CSS选择器声明

1. 集体声明：当多个CSS选择器的风格完全相同或部分相同时，可以使用集体声明的方法。通过用逗号分隔多个选择器，可以对风格相同的选择器进行一次性声明。例如：
h3, h4, h5, p {
　　　　color: red;
font-size: 18px;
}
2. 全局声明：对于小型页面，如弹出的小对话框和上传附件的小窗口等，如果希望所有标记都使用同一种CSS样式，可以使用全局声明符号 * 。例如：
* {
color: red;
font-size: 18px;
}
3. 派生选择器（上下文选择器）：根据标记所在位置的上下文关系来定义样式，可以使CSS代码更加简洁。派生选择器允许根据文档的上下文关系来确定某个标记的样式。例如，要让列表项 <li> 中的 <strong> 标记变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：
li strong {
font-style: italic;
font-weight: normal;
}
strong {
font-weight: bold;
}
在上面的例子中，只有 <li> 元素中的 <strong> 元素的样式为斜体字，而其他 <strong> 元素的样式为粗体字。
此外，还提到了特别注意点： a:hover 必须位于 a:link 和 a:visited 之后才有效； a:active 必须位于 hover 之后才有效。这是指在定义链接的不同状态时，选择器的顺序很重要。

4.3 CSS引入方式

4.3.1内联样式表

内联样式表的CSS规则写在HTML元素的 style 属性内，只对该元素有效。几乎任何HTML元素都可以设置 style 属性，属性值可以包含CSS规则的声明，但不包含选择器。
基本语法：
<标记 style="属性1:属性值1;属性2:属性值2;">修饰的内容</标记>
语法说明：
(1) 标记指的是HTML标签，例如 p 、 h1 、 body 等。
(2) 通过 style 属性定义的声明只对自身起作用。
(3) style 属性的值可以包含多个声明，每个声明之间用分号（ ; ）分隔。
(4) 元素自身定义的 style 样式优先于其他所有样式定义。

4.3.2.内部样式表

内部样式表的位置：内部样式表写在HTML文档的 <head> 部分，只对当前HTML文档有效。
基本语法：
<style type="text/css">
　　选择器1 {
　　　　属性1: 属性值1;
　　　　属性2: 属性值2;
}
选择器2 {
...
}
</style>
语法说明：
<style> 标签是成对出现的，有一个 type 属性，通常设置为 text/css 。

4.4 CSS的属性单位

4.4.1.长度、百分比单位

单位类型：
相对单位：基于其他属性的值来设置，例如 em 或 rem ，通常依赖于字体大小。
绝对单位：不随显示设备变化，无论在何种设备上显示效果一致，如 cm 、 mm 、 in 、 pt 等。

4.4.2.色彩单位

十六进制数方式：
使用十六进制数来表示色彩值，范围从 00 到 FF 。
每种色彩（红、绿、蓝）的强度范围为 00 到 FF ，当三种色彩的强度都为 FF 时，产生白色。
在HTML中使用BGB概念指定色彩，例如 #00FFFF 代表青色（cyan）。
可以表示256x256种色彩，即16M种色彩。
如果每个参数各自在两位上的数字都相同，可以缩写，例如 #FFFFFF 可以缩写为 #FFF 。
色彩名称方式：
CSS提供了使用色彩英文名称表示色彩的方式，例如 black 、 blue 、 red 等。
表4-4列出了CSS规范推荐的颜色名称及其对应的颜色。

RGB函数方式：
使用RGB函数 RGB(x, y, z) 来表示色彩值，其中 x 、 y 、 z 分别是红色、绿色、蓝色的值。
RGB值的范围通常是从 0 到 255 。
还可以使用 RGBA 函数 RGBA(x, y, z, a) 来设置透明度，其中 a 是alpha通道，取值范围是 0 到 1 。