4.1 CSS概述
4.1.1 CSS的基本概念
CSS（Cascading Style Sheets，层叠样式表）是一种用于描述HTML或XML（包括如SVG, MathML之类的XML语言）文档外观和格式的样式表语言。CSS使开发者能够将内容与表现形式分离，从而提高了网页的可维护性和可重用性。
4.1.2 传统HTML的缺点
- 内容与样式混合：在HTML中直接使用标签属性（如
<font>、<color>等）来控制样式，导致代码混乱。 - 难以维护：当需要修改样式时，需要逐个修改HTML文件中的相关标签，效率低下。
- 复用性差：相同的样式需要在多个地方重复定义，增加了代码冗余。
4.1.3 CSS的特点和优势
- 内容与样式分离：提高了代码的可读性和可维护性。
- 样式复用：通过定义类（class）和ID（id），可以在多个元素间复用相同的样式。
- 灵活性：支持多种选择器，可以精确控制元素的样式。
- 响应式设计：通过媒体查询等技术，可以创建适应不同设备和屏幕尺寸的网页。
4.1.4 CSS的编写规则
CSS规则由选择器和声明块组成。选择器用于指定要应用样式的HTML元素，声明块则包含一对大括号内的属性和值对，用于定义具体的样式。
4.2 CSS语法基础
4.2.1 CSS基本语法
选择器 {
属性: 值;
属性: 值;
...
}
4.2.2 CSS选择器类型
- 元素选择器：直接选择HTML元素，如
p、h1等。 - 类选择器：选择具有特定类的元素，使用
.前缀，如.myClass。 - ID选择器：选择具有特定ID的元素，使用
#前缀，如#myId。 - 属性选择器：选择具有特定属性的元素，如
[type="text"]。 - 伪类选择器：选择元素的特定状态，如
:hover、:first-child。 - 伪元素选择器：选择元素的一部分内容，如
::before、::after。
4.2.3 CSS选择器声明
选择器后紧跟一对大括号，大括号内包含属性和值对，用于定义样式。
4.2.4 示例
p {
color: blue;
font-size: 16px;
}
.myClass {
background-color: yellow;
}
4.3 CSS引入方式
4.3.1 内联样式表（行内样式表）
直接在HTML元素的style属性中定义样式。
<p style="color: red;">这是一个段落。</p>
4.3.2 内部样式表
在HTML文档的<head>部分使用<style>标签定义样式。
<head>
<style>
p {
color: green;
}
</style>
</head>
4.3.3 外部样式表
将样式定义在独立的CSS文件中，通过<link>标签引入。
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
4.4 CSS的属性单位
4.4.1 长度、百分比单位
- 绝对单位：如
px（像素）、pt（点）、in（英寸）等。 - 相对单位：如
em（相对于父元素的字体大小）、rem（相对于根元素的字体大小）、%（百分比）等。
4.4.2 色彩单位
- 颜色名称：如
red、blue等。 - 十六进制：如
#FF0000表示红色。 - RGB/RGBA：如
rgb(255, 0, 0)或rgba(255, 0, 0, 0.5)。 - HSL/HSLA：如
hsl(0, 100%, 50%)或hsla(0, 100%, 50%, 0.5)。
4.4.3 示例
p {
font-size: 1.5em;
color: #333;
background-color: rgba(0, 0, 255, 0.3);
}
4.5 CSS继承与层叠
例 CSS继承
某些CSS属性可以从父元素继承到子元素。
body {
font-family: Arial, sans-serif;
}
/* 所有body内的元素将继承font-family属性 */
例 CSS层叠
当多个规则应用于同一个元素时，根据优先级决定最终样式。
p {
color: blue; /* 普通选择器 */
}
.special {
color: red; /* 类选择器，优先级高于普通选择器 */
}
<p class="special">这个段落将是红色的。</p>
4.6 元素类型
4.6.1 块级元素
占据其父元素的整个宽度，如<div>、<p>、<h1>等。
4.6.2 行级元素
只占据其内容所需的宽度，如<span>、<a>、<img>等。
4.6.3 列表项元素
用于创建列表，如<ul>、<ol>、<li>。
4.6.4 隐藏元素
使用display: none;或visibility: hidden;来隐藏元素。
.hidden {
display: none; /* 元素完全从文档流中移除 */
}
.invisible {
visibility: hidden; /* 元素仍在文档流中，但不可见 */
}
扫一扫
491
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
