第四章 CSS样式基础

最新推荐文章于 2025-05-10 21:09:53 发布

会飞的生菜.

最新推荐文章于 2025-05-10 21:09:53 发布

阅读量982

点赞数 39

文章标签： css 前端

本文链接：https://blog.csdn.net/2302_80780936/article/details/142579823

版权

4.1 CSS概述

随着HTML的发展，为了满足页面设计者的要求，HTML添加了很多显示功能，但是随着这些功能的增加，使得HTML变得越来越杂乱，HTML页面也越来越臃肿，CSS便诞生了。CSS是用于简化 HTML标签，把关于样式部分的内容提取出来，进行单独地控制，使结构与样式分离式开发。对页面布局等的控制也更加精确，同时能够实现内容和表现的分离使得网站的设计风格趋向统一、维护更加容易，并且能够被多种浏览器支持。

4.1.1.CSS的基本概念

CSS 全称为“Cascading Style Sheet”，中文解释为“层叠样式表”，它是以HTML为基础，设置网页的外观显示样式，如字体、颜色、背景的控制及整体的布局等，还可以针对不同的浏览器设置不同的样式。在网页设计时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一些简单的修改，既可以改变同一页面的不同部分效果，也可以改变同一个网站中不同网页的外观和格式。

HTML（页面结构文件）

CSS（页面样式文件）

4.1.2传统HTML的缺点

4.1.2.1.维护困难
4.1.2.2.标记不足
4.1.2.3.网页过“胖”

4.1.2.4.定位困难

4.1.3.CSS的特点和优势

4.1.3.1.表现和内容分离
4.1.3.2.增强了网页的表现力
4.1.3.3.使整个网站显示风格趋于统一(颜色、字体......)
4.1.4.CSS的编写规则
4.1.4.1.目录结构命名规则
4.1.4.2.样式文件的命名规则

4.1.4.3.选择器的命名规则

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

4.1.4.4.CSS代码注释

/* */

CSS注释以字符“/*”开始，以字符“*/”结束。注释可以是单行，也可以是多行，并可以出现在CSS代码的任何地方。

小写字母、下划线

4.1.4.5.CSS代码注释

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

4.2 CSS语法基础

CSS 控制页面是通过CSS规则实现的，CSS规则由选择器和声明组成，声明由属性和属性值对组成。CSS提供了丰富的选择器类型，包括标记选择器、类选择器、id选择器及伪类选择器等，能够灵活地对整个页面、页面中的某个标记或一类标记进行样式设置。

4.2.1.CSS基本语法

Slector选择器、Declaration声明

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

4.2.1.1.基本语法

4.2.1.2.语法说明

(1) 选择器。选择器可以是 HTML 标记名称或者属性的值，也可以是自定义的标识符。
(2) 属性/属性值对。“属性：属性值”必须一一对应，属性与属性值之间必须用“：”连接，每个属性/属性值对之间用分号 (；)隔开。
(3) 属性。在CSS中对属性命名与脚本语言中有一点不同，即属性名称的写法，在CSS中，凡是属性名为两个或两个以上的单词构成时，单词之间以连词符号(-)分隔，例如背景颜色属性background-color;而在脚本语言中, 对象属性则连写成 backgroundColor。在脚本语言中，属性由两个以上单词构成，则从第二个单词开始向后，所有单词首字母必须大写。

4.2.2.CSS选择器类型

4.2.2.1.标记选择器

标记选择器(也可称为“元素选择器”)即直接使用HTML标记名称作为选择器。它定义的样式作用于页面中所有与选择器同名的标记

                p{/*<!--4.2.2.1.标记选择器-->*/
					color: #ff0000;
					font-size: 20px;
				}
                <p>这是第一段内容</p>
		        <p>这是第二段内容</p>

4.2.2.2.class选择器

class选择器也叫“类”选择器，可以给指定的标签设置一个class属性和clas值然后通过class选择器找到对应的标签，为其设置class值，即添加CSS 样式。使用 class 类选择器时，需要用英文(.)进行表示

        		p{/*<!--4.2.2.1.标记选择器-->*/
					color: #ff0000;
					font-size: 20px;
				}
				.class1{
					color: #ffff00;
					font-size: 30px;
				}
				.class2{
					font-size: 30px;
				}
        <p class="class1">这是class1的内容</p>
		<p class=