第四章 CSS样式基础

4.1 CSS概述
CSS（Cascading Style Sheets，层叠样式表）是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS能够对网页的布局、颜色、字体等外观进行控制和美化，从而实现内容与表现的分离。通过CSS，开发者可以将页面的内容（HTML）与样式（CSS）分开来管理，这样不仅使网页的结构更加清晰，还大大提高了网页的可维护性和复用性。

4.1.1 CSS的基本概念
‌CSS（Cascading Style Sheets）是用于描述HTML或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。‌ 它是一种用来美化网页的语言，可以实现网页内容的呈现与表现分离，使得网页的结构和样式可以独立开来，便于管理和维护。

4.1.2 传统HTML的缺点 
传统HTML在网页设计和开发过程中存在一些明显的缺点，这些缺点主要体现在以下几个方面：

维护困难：
当需要修改某个特殊标记的格式时，HTML往往要求开发者花费大量的时间进行逐一调整，尤其是在大型网站中，这种后期修改和维护的成本会非常高。由于HTML的标记主要用于定义内容结构，而非样式，因此样式的修改需要反复调整HTML中的多个地方，增加了维护的复杂度。
标记不足：

由于HTML没有统一对各种风格样式进行控制，开发者在编写网页时往往会在HTML文档中直接编写大量的样式信息，导致HTML页面体积过大。这不仅占用了宝贵的带宽资源，还影响了网页的加载速度，降低了用户体验。
定位与布局困难：
在整体布局页面时，HTML对于各个模块的位置调整显得捉襟见肘。由于HTML主要关注内容结构而非布局，因此开发者需要通过大量的标记和样式规则来实现复杂的布局效果，这不仅增加了开发的难度，还可能导致页面结构的混乱和后期维护的困难。
标准不统一，扩展困难：
HTML只采用了一部分SGML（标准通用标记语言）的思想，并且只使用其中一个固定的元素类型集。这使得HTML仅仅是符合SGML语法的一种固定格式的超文本标记语言，不可扩展。用户不能在其中增加有意义的并且能供他们自身使用的标记。同时，不同浏览器生产厂商为了各自的利益，发明了许多只能被自己的浏览器所识别的标记，这破坏了Web交互操作性，降低了不同浏览器之间的兼容性。
语义性差：
尽管HTML的标记越来越多，但其描述能力却还远远不够。HTML无法对各种标记所定义的数据含义进行说明，这就使得存放在HTML文档中的数据都是“死”数据，很难找到一种方法来从文档中搜索需要的数据，更不用说对HTML文档中包含的数据进行更深入的处理。在数据交换越来越频繁、越来越重要的今天，缺乏语义性可能是HTML的一个致命弱点。
综上所述，传统HTML在网页设计和开发过程中存在多方面的缺点，这些缺点限制了HTML在复杂网页设计和开发中的应用。为了克服这些缺点，开发者通常会结合CSS（层叠样式表）JavaScript等技术来增强网页的表现力和交互性。

4.1.3.CSS的特点和优势
CSS（Cascading Style Sheets，层叠样式表）是一种用来表现HTML或XML等文件样式的计算机语言，它定义了HTML元素的显示方式，是Web设计领域的一个突破。CSS的特点和优势可以归纳如下：

CSS的特点
丰富的样式定义：CSS提供了丰富的文档样式外观，包括设置文本和背景属性的能力，允许为任何元素创建边框，以及设置元素边框与其他元素间的距离、元素边框与元素内容间的距离，还可以改变文本的大小写方式、修饰方式以及其他页面效果。
易于使用和修改：CSS的样式可以定义在HTML元素的style属性中（内联式/内嵌样式），也可以声明在一个专门的CSS文件中（外部式/链入样式表），还可以通过@import语句导入HTML页面（导入样式表）。
样式统一管理：CSS样式表可以单独存放在一个CSS文件中，多页面可以共享同一个样式表，实现样式的统一管理。
层叠性：CSS允许对一个元素多次设置同一个样式，最终会使用最后一次设置的属性值，这种特性称为层叠性。
页面压缩：将样式声明单独放到CSS样式表中，可以减小页面体积，从而减少页面加载时间。
CSS的优势
内容与表现分离：使用CSS，可以将HTML的内容与表现样式分离，使HTML文档更加简洁，易于维护。
页面下载时间更快：由于CSS样式表可以单独存放并复用，大大减小了页面的体积，从而减少了页面下载时间，提升了用户体验。
节省开发和维护成本：CSS的复用性和统一管理特性，使得开发和维护成本大大降低。
令人满意的版面样式控制：CSS提供了强大的字体控制和排版能力，可以轻松地创建令人满意的版面样式。
轻松创建及编辑：CSS的编写相对简单，开发者可以像编写HTML代码一样轻松地编写CSS。
兼顾打印和Web页面设计：CSS不仅适用于Web页面设计，还可以用于打印样式的设计。
较好地控制元素在Web页面中的位置：CSS可以更好地控制页面布局，使页面元素在Web页面中的位置更加精确。
有利于搜索引擎的搜索：使用CSS将设计部分剥离出来放在一个独立样式文件中，可以减少未来网页无效的可能，同时，使用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到内容，并可能给予较高的评价。
综上所述，CSS以其丰富的样式定义、易于使用和修改、样式统一管理、层叠性、页面压缩等特点，以及内容与表现分离、页面下载时间更快、节省开发和维护成本、令人满意的版面样式控制等优势，在Web设计领域发挥着重要作用。

4.1.4.CSS的编写规则
CSS（Cascading Style Sheets）的编写规则涉及多个方面，包括格式、选择器、属性、命名以及注释等。以下是对CSS编写规则的详细归纳：

一、基本格式
编码：CSS文件建议使用无BOM的UTF-8编码，以确保在不同环境下的兼容性。
缩进：使用空格进行缩进，具体数量可以根据个人或团队规范来设定，但常见的有使用2个或4个空格作为一个缩进层级。需要注意的是，应避免使用Tab字符进行缩进，以保持代码的一致性。
行长度：每行代码的长度建议不要超过一定字符数（如120个字符），以便于阅读和维护。对于超长的样式，可以在样式值的空格处或逗号后换行，并按逻辑分组。
二、选择器
分组：将单独的选择器单独放在一行，以提高代码的可读性。
空格：在选择器与花括号“{}”之间必须包含空格，如.selector { ... }。
属性选择器：属性选择器中的值必须用双引号包围，如input[type="text"]。
层级：选择器的嵌套层级应不大于一定数量（如3级或5级），以避免过度嵌套导致的代码复杂性增加。
三、属性
声明：每条声明语句的冒号“:”后面应插入一个空格，并且所有声明语句都应以分号“;”结尾。
缩写：对于可以缩写的属性（如margin、padding、font等），应尽量使用缩写形式，但需要注意隐含值对实际数值的影响。当需要设置多个方向的值时才使用缩写，如果某些方向需要继承其他声明的值，则应该分开设置。
数值：当数值为0到1之间的小数时，可以省略整数部分的0，如.5代替0.5。
颜色：颜色值优先使用十六进制表示，并且保持小写。对于16进制颜色代码，可以进行缩写，如#eba代替#eebbbb。同时，应避免rgb和十六进制混用。
四、命名
1.类名：类名应使用小写字母，并且可以使用中横线来为长名称或词组进行命名。同时，类名应当尽可能短且意义明确。
2.ID与类：ID在JavaScript中是唯一的，不能多次使用；而类选择器可以重复使用。因此，应根据需要选择使用ID或类选择器。
命名空间：为了区分不同模块或功能的样式，可以使用命名空间进行命名，如以g-表示布局、s-表示状态、u-表示工具、m-表示组件、j-表示给JavaScript调用的类名等。
五、注释
1.描述性注释：在CSS文件中添加描述性注释，以说明样式的作用或目的。注释应简洁明了，避免冗长和重复。
2.注释格式：注释可以使用/* ... */的格式进行编写。在注释中，可以使用中文或英文进行描述，但应保持一致性。
4.2 CSS语法基础
CSS（Cascading Style Sheets，层叠样式表）的基本语法是构建网页样式的基础。以下是CSS基本语法的详细介绍：

CSS语法结构

CSS语法由选择器（selector）、属性和值（property and value）三部分构成，其基本格式如下：

selector {property: value;}
选择器：用于选择要添加样式的HTML元素或标签。

属性：表示要改变的样式特性。

值：为属性指定的具体样式值。

属性和值之间用冒号（:）分隔，多个声明之间用分号（;）分隔，整个声明块用大括号（{}）包围。

4.2.1.CSS基本语法
CSS规则由选择器（Selectorm属性（Property）和值（Value）组成，其基本结构如下：

selector {  
  property: value;  
  property: value;  
  /* 可以有多个属性和值对 */  
}

4.2.2.CSS选择器类型

1. 元素选择器（Type Selector）

选择所有指定标签名的元素

p {  
  color: red;  
}

2. 类选择器（Class Selector）

选择所有具有指定类名的元素。类选择器以.开头。

.myClass {  
  font-size: 12px;  
}

3. ID选择器（ID Selector）

选择具有指定ID的元素。ID选择器以#开头，且ID在页面中应该是唯一的。

#myId {  
  background-color: red;  
}

4. 属性选择器（Attribute Selector）

选择具有指定属性和属性值的元素。

1.  

   input[type="text"] {  
     border: 2px solid black;  
   }

   5. 伪类选择器（Pseudo-class Selector）

   选择元素的特定状

   a:hover {  
     color: red;  
   }  
     
   li:first-child {  
     color: green;  
   }

   4.2.3.CSS选择器声明 
   集体声明：

   在CSS中，群组选择器（也称为组合选择器）允许您同时选择多个选择器，并为它们应用相同的样式规则。这是通过逗号（,）分隔不同的选择器来实现的

   全局声明：

   在CSS中，全局选择器或通用选择器用星号（*）表示，它选择文档中的所有元素。

   这个规则将重置所有元素的边距和填充为0。虽然这可以被视为一种“全局”样式，但请注意，它并不是真正意义上的“全局声明”这一术语的标准用法。在CSS中，没有直接对应于“全局声明”的术语，但通常我们会谈论全局样式或全局规则，这些规则可以应用于整个文档或页面上的所有元素。

   派生选择器（也称为“后代选择器”）

   派生选择器（也称为后代选择器）用于选择某个元素内部的所有指定后代元素。它基于元素之间的层级关系来选择元素。

   4.2.4 示例
   html代码如下：

   <!DOCTYPE html>
   <html>
   	<head>
   		<meta charset="utf-8" />
   		<title></title>
   		<link rel="stylesheet" type="text/css" href="css/index.css"/>
   	
   	</head>
   	<body>
   		<p>这是第一段</p>
   		<p style="color: black;">这是第二段</p>
   		<p class="class1">这是class1的第一段内容</p>
   		<p class="class1">这是class1的第二段内容</p>
   		<p class="class1">这是class1的内容</p>
   		<p id="id1">这是id1的内容</p>
   		<a href="http://www.qq.com">腾讯</a>
   	</body>
   </html>

   css代码如下：

2. @charset "utf-8";  
   	*{
   				font-family: "宋体";
   			}
   			p,a{/*集体声明*/
   				font-size: 70px;
   			}
   			p{/*标签选择器*/
   				color:#0000ff;
   				font-size: 20px;
   			}
   			.class1{/*class选择器*/
   				color: #ff0000;
   				font-size: 20px;
   			}
   			#id1{/*id选择器*/
   				color: #fff000;
   				font-size: 15px;
   			}
   			a:link{
   				color: black;
   			}
   			a:hover{
   				color: green;
   			}
   			a:visited{
   				color: red;
   			}

   浏览效果如图 ：

3. 

   4.3 CSS引入方式
   CSS按其位置可以分为：内联样式表、内部样式表、链接外部样式表、以及导入外部样式表。

   4.3.1.内联样式表（行内样式表）
   CSS（层叠样式表）内联样式表（Inline Styles）是直接在HTML元素的style属性中定义样式的方法。这种方法通常不推荐用于大型项目，因为它会使HTML代码变得冗长且难以维护，但它对于快速测试样式或应用于特定元素的独特样式非常有用。

   注意事项

   可读性和维护性：

   内联样式会使HTML代码变得混乱，尤其是当页面包含大量样式时。

   难以在多个元素之间重用样式。

   优先级：

   内联样式的优先级高于内部样式表（在<style>标签中定义的样式）和外部样式表（通过<link>标签链接的样式表）。

   如果一个元素同时有内联样式和外部样式，内联样式将覆盖外部样式。

   调试：

   在使用开发者工具（如Chrome DevTools）进行调试时，内联样式会直接在元素上显示，但可能使调试过程更加复杂。

   代码重用：

   无法通过内联样式实现代码的重用。每个元素都需要单独定义样式。

   何时使用内联样式

   快速测试：当你需要快速测试某个元素的样式时，内联样式非常方便。

   独特样式：对于某些需要独特样式的特定元素，内联样式可能是一个合理的选择。

   小型项目：在非常小的项目中，使用内联样式可能不会影响代码的可读性和维护性。

   替代方法

   内部样式表：在HTML文档的<head>部分使用<style>标签定义样式。

   外部样式表：将样式定义在单独的CSS文件中，并通过<link>标签链接到HTML文档。

   这两种方法都支持样式的重用和更好的代码组织。

    代码示例：

   <!DOCTYPE html>
   <html>
   <head>
       <meta charset="utf-8" />
       <title>内部样式表</title>
   </head>
   <body>
   <p style="color: #FF0000; font-size: 20px; text-decoration: underline;">正文内容1</p>
   <p style="color: #000000; font-size: italic;">正文内容2</p>
   <p style="color: #FF00FF; font-size: font-weight:bold;">正文内容3</p>
   <p>这段话没有内联样式</p>
   </body>
   </html>

 浏览效果如图 ：

4.5 CSS继承与层叠
继承：某些CSS属性可以从父元素继承到子元素。继承使得开发者能够减少重复代码，提高样式表的可维护性。
层叠：CSS的层叠特性允许多个样式规则作用于同一个元素，并根据优先级规则来确定最终应用的样式。优先级规则包括选择器的特异性、重要性（如!important声明）、来源（如行内样式优先级高于内部和外部样式表）以及定义顺序等。
4.6 元素类型
在CSS中，元素类型是一个关键概念，它决定了元素在页面布局和表现上的特性。了解CSS元素类型对于掌握网页布局和样式设计至关重要。

一、元素类型分类

CSS元素类型主要分为以下几类：

块级元素（Block-level elements）：

特点：块级元素在页面上以块的形式展现，占据一整行，且可以设置宽度和高度。

示例：<div>、<p>、<h1>至<h6>、<ul>、<ol>、<li>、<table>等。

行内元素（Inline-level elements）：

特点：行内元素不占据一整行，仅占据其内容所需的宽度，且不能设置宽度和高度。

示例：<a>、<span>、<i>、<em>、<strong>、<img>（特殊内联元素，可设置宽度和高度，但不影响其行内特性）等。

行内块元素（Inline-block elements）：

特点：行内块元素结合了块级元素和行内元素的特点，既能设置宽度和高度，又能在同一行内显示。

示例：通过CSS的display: inline-block;属性将元素设置为行内块元素。

二、元素类型转换

在CSS中，可以使用display属性来改变元素的显示类型，实现元素类型的转换。常用的display属性值包括：

block：将元素设置为块级元素。

inline：将元素设置为行内元素。

inline-block：将元素设置为行内块元素。

none：隐藏元素，不占据任何空间。

通过元素类型的转换，可以灵活地调整网页的布局和样式，满足不同的设计需求。

三、实际应用

在网页设计实践中，了解和应用CSS元素类型是非常重要的。例如，可以使用块级元素来构建网页的主要结构和布局，使用行内元素来添加文本装饰和链接，以及使用行内块元素来实现复杂的布局效果。同时，通过合理地使用display属性进行元素类型转换，可以进一步优化网页的布局和样式。

综上所述，CSS元素类型是网页设计和前端开发的基础知识，掌握这一知识对于学好网页设计至关重要。