第四章CSS样式基础-CSDN博客

4.1 CSS概述

4.1.1.CSS的基本概念

以HTML为基础，设置网页的外观显示样式，采用css技术可以有效地对页面的布局，字体，颜色，背景和其他效果实现更加精确的控制。

4.1.2传统HTML的缺点

1.维护困难：为了修改某个特殊标记格式需要很多时间，对于整个网站而言后期修护和维护的成本很高。
2.标记不足：HTML自身的标记并不丰富，很多标记都是为网页内容服务的，而关于美工的标记，例如文字间距、段落缩进等，这些HTML中都很难找到。
3.网页过“胖”：由于对各种风格样式没有统一进行控制，用HTML编写的页面往往是体积过大，占用了很多宝贵的带宽。
4.定位困难：在整体页面布局时，HTML对于各个模块的位置调整很困难。

4.1.3.CSS的特点和优势

CSS通过定义标记如何表现，对页面结构风格进行控制，分离文档的内容和表现，克服了传统HTML的缺点。将CSS嵌入在页面中，通过浏览器解释执行，而且CSS文件是文本文件，只要理解 HTML都可以掌握它。其特点主要如下：

(1）页面的字体变得更漂亮，更容易编排。
(2）可以轻松控制页面的布局。
(3）可以在大多数浏览器上使用。
(4）以前一些必须通过图像转换才能实现的功能，现在只要用CSS就可以轻松实现，页面下载更快
(5）可以使用一个CSS文件控制整个网站的显示风格。只要修改该CSS文件中相应的行就可以改变整个网站上页面的显示样式。

4.1.3.1.表现和内容分离

CSS通过定义HTML标记如何显示控制网页的格式，使得页面内容和表现分离，简化了
网页格式设计，也使得对网页格式的修改更方便。

4.1.3.2.增强了网页的表现力

CSS样式属性提供了比HTML更多的格式设计功能。例如，可以通过CSS样式去掉网页
中超链接的下划线，甚至可以为文字添加阴影效果等。

4.1.3.3.使整个网站显示风格趋于统一

将CSS样式定义到样式表文件中，然后在多个网页中同时应用样式表文件中的样式就可以确保多个网页具有一致的格式，并且可以随时更新样式表文件，实现自动更新多个网页的格式功能，从而大大降低网站的开发与维护的成本。

4.1.4.CSS的编写规则

4.1.4.1.目录结构命名规则

存放CSS样式文件的目录一般命名为style或css

4.1.4.2.样式文件的命名规则

在项目初期，会把不同类别的样式放于不同的CSS文件，是为了CSS编写和调试的方便；在项目后期，为了网站性能上的考虑，会将不同的CSS文件整合到一个CSS文件中，这个文件一般命名为style.css或css.css。

4.1.4.3.选择器的命名规则

所有选择器必须由小写英文字母或下划线组成，必须以字母开头，不能为纯数字。设计者要用有意义的单词或缩写组合来命名选择器，做到“见名知义”，这样就节省了查找样式的时间。样式名必须能够表示样式的大概含义（禁止出现如 Divl，Div2和Style等

4.1.4.4.CSS代码注释

css以“/*”开始，“*/”结束，注释可以是单行也可以是多行。

4.1.4.5.CSS代码注释

代码缩进可以保证CSS代码的清晰可读。在实际应用中，可以按一次Tab键来缩进选择
器，按两次 Tab 键来缩进声明和结束大括号。这样的排版规则便于查询，避免代码混乱。

4.2 CSS语法基础

4.2.1css基本语法

CSS就是一个包含一个或多个规则的文本文件，CSS规则由两个主要的部分构成：选择
器（Selector 选择器）和声明（Declaration）。
选择器通常是需要改变样式的HTML元素。
声明由一个或多个属性与属性值对组成。属性是CSS的关键字，如font-family（字体)color（颜色）和border（边框）等，属性用于指定选择器某一方面的特性，而属性值则用于指定选择器的特性的具体特征。

4.2.1.1基本语法

selector{ property1: value1; property2:value2; property3: value3;...}

选择器（属性1：属性值1；属性2：属性值2；属性3：属性值3；

4.2.1.2.语法说明

（1）选择器：选择器可以是HTML标记名称或者属性的值，也可以是自定义的标识符。

(2）属性/属性值对。“属性：属性值”必须一一对应，属性与属性值之间必须用“：“连接，每个属性/属性值对之间用分号（；）隔开。

（3）属性：在CSS中对属性命名与脚本语言中有一点不同，即属性名称的写法，在CSS中，凡是属性名为两个或两个以上的单词构成时，单词之间以连词符号（一）分隔，例如背景颜色属是background-color；而在脚本语言中，对象属性则连写成 backgroundColoro在脚本语言中，属性由两个以上单词构成，则从第二个单词开始向后，所有单词首字母必须大写。

(4)复合属性：在css中有些属性可以表示多个属性的值。

（5）多个属性指：在css中有些属性可以设置多个属性的值。

4.2.2.CSS选择器类型

4.2.2.1.标记选择器

标记选择器也可以叫元素选择器即直接使用HTML标记名称作为选择器，它定义的样式作用于页面之中所有与选择器同名的标记

4.2.2.2.class选择器

class选择器也叫"类"选择器，可以给指定标签设置一个class属性和class值如何通过class选择器找到对应的标签，设置class值，即添加css样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>4.2.1.CSS基本语法</title>
		<style>
			p{
				color: #0000ff;
				font-size: 30px;
			}
			.class1{
				color:#ff0000;
			}
			.class2{
				color:#aaccff;
			}
		</style>
	</head>
	<body>
		<p>