第四章 CSS样式基础

2301_82179289

已于 2024-09-29 19:19:10 修改

阅读量927

点赞数 17

文章标签： css 前端

于 2024-09-29 14:54:33 首次发布

本文链接：https://blog.csdn.net/2301_82179289/article/details/142587120

版权

4.1 CSS概述

CSS是用于简化html标签都，把关于样式部分提取出来，进行单独的控制，使结构和样式分离式开发。对页面布局等的控制更加精准，能够使得网站的设计风格趋向统一、维护更加容易，并且能够被多种浏览器支持。

4.1.1.CSS的基本概念

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

HTML页面结构文件

CSS页面样式文件

4.1.2传统HTML的缺点

HTML是用来标记文档内容，随着新的HTML标记添加到HTML规范中，要实现页面美化、文档内容清晰、独立于文档表现层的站点变得越来越困难。

4.1.2.1.维护困难

为了修改某个特殊标记的格式，需要花费很多时间，尤其对于整个网站来说，后期修改和维护的成本很高。

4.1.2.2.标记不足

HTML自身的标记并不丰富，很多标签都是为网页内容服务的，而关于美工的标记如文字间距等在HTML中都很难找到。

4.1.2.3.网页过“胖”

由于对各种风格样式没有统一进行控制，用HTML编写的页面往往是体积过大，占用了很多宝贵的带宽。

4.1.2.4.定位困难

在整体页面布局时，HTML对于各个模块的位置调整很困难。

4.1.3.CSS的特点和优势

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

其特点主要如下：
(1)页面的字体变得更漂亮，更容易编排。

(2)可以轻松控制页面的布局。

(3)可以在大多数浏览器上使用。

(4)以前一些必须通过图像转换才能实现的功能，现在只要用CSs就可以轻松实现，页面下载更快。

(5)可以使用一个CSS文件控制整个网站的显示风格。只要修改该CSS文件中相应的行，就可以改变整个网站上页面的显示样式。

CSS可以称得上Web设计领域的一个突破，具有以下优势。

4.1.3.1.表现和内容分离

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

4.1.3.2.增强了网页的表现力

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

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

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

4.1.4.CSS的编写规则

利用CSS样式设计虽然很大，但是设计人员管理不当将导致样式混乱。

学习CSS编写的技巧和规则。

4.1.4.1.目录结构命名规则

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

4.1.4.2.样式文件的命名规则

将不同的CSS文件整合到一个CSS文件中，这个文件一般命名为 style.css或css.css。

4.1.4.3.选择器的命名规则

所有选择器必须字母开头，由下划线和小写英文字母组成，设计要用有意义的单词或者缩写组合来命名选择器。

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基本语法

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

4.2.1.1.基本语法

selector{ propertyl: valuel;property2: value2;property3: value3;.. }
选择器{属性1:属性值1；属性2:属性值2；属性3:属性值3; ...}

4.2.1.2.语法说明

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

4.2.2.CSS选择器类型

CSS选择器主要有四种类型：标记选择器、class选择器、id选择器和伪类选择器。

4.2.2.1.标记选择器

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

4.2.2.2.class选择器

class选择器也叫类选择器，可以给指定的标签设置一个class属性和class值，然后通过class选择器找到相应的标签为其设置class值。使用class类选择器时，需要用英文（.）表示。

clss选择器和标记选择器

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	<title>class 选择器</title>
	<style type ="text/ess"> 
	p{/* 标记选择器*/
	color:blue; 
	funt-suze:28px;
	}
	.red{
	color:red;	
	font-size:18px;	
		}
	.green{
	color:green;
	font-size:20px;
	}
	</style>
	</head>
	<body>
	<p>class 选择器与标记选择器</p >
	<p class =" red">class 选择器1</p >
	<p class = " green" >class 选择器2</p >
	<h3 class = " green">h3 同样适用</h3>
	</body>
	</html>

运行结果：

4.2.2.3.ID选择器

用来对某个单一元素定义独立的样式，ID选择器只能在HTML页面中使用一次，针对性更强。

定义ID选择器时，需要在id名称前加一个“#”

实例 ID选择器

代码如下：

<!DOCTYPE html>
<html>
    <head>
<meta charset="UTF-8">
<title></title>
<style type=" text/css">
	#green{
font-size:30px;	/*字体大小*/	
color:#009900;	/*颜色*/	
}
</style>
</head>
<body>
<p id="green">ID 选择器1</p >
</body>
<html>

运行结果：

4.2.2.4.伪类选择器

常见的伪类选择器伪类名表：

伪类名	说明
link	用于可以设置未被访问的链接的样式
visited	用于设置已经被访问的链接的样式
hover	用于设置将鼠标悬浮在链接上的样式
active	用于设置鼠标点击链接时到鼠标松开时的样式
focus	用于设置用键盘将焦点放在链接上时的样式
first-child	设置第一个标记的样式
lang	设置具有lang属性的标记的样式

4.2.3.CSS选择器声明

在声明各种CSS选择器时，如果某些选择器的风格是完全相同的，或者部分相同，都以使用集体声明的方法，用“，”分隔多个选择器，对风格相同的CSS选择器同时声明。

4.2.3.1.集体生明

集体声明代码如下:

h3, h4,h5,p{color: red;font-size: 18px; }

4.2.3.2.全局声明

对于实际网站中的一些小型页面，例如弹出的小对话框和上传附件的小窗口等，希望这页面中所有的标记都使用同一种CSS样式，但又不希望通过逐个加人集体声明列表的方。这时可以利用全局声明符号“*”。

代码如下:

*{
color:red;

font-size: 18px;

}

4.2.3.3派生选择器（上下文选择器）

根据标记所在位置的上下文关系来定义样式，可以使标记更加简洁，派生选择器许根据文档的上下文关系来确定某个标记的样式。通过合理地使用派生选择器，可以使SS代码变得更加整洁

4.3 CSS引入方式

CSS按位置可以分为4种：内联样式表、内部样式表、链接外部样式表、导入外部样式表。

4.3.1.内联样式表（行内样式表）

内联样式表的CSS规则是写在首标记内，只对所在的标记有效，几乎任何一个HTML标记上都可以设置style属性，属性值可以包含CSS规则的声明，不包含选择器。

4.3.1.1.基本语法

<标记 style="属性1:属性值1；属性2:属性值2…">修饰的内容</标记>

4.3.1.2.语法说明

语法说明：

(1)标记是指HTML标记，如p， hl和 body等标记；

(2)标记的style定义的声明只对自身起作用；

(3)style属性的值可以包含多个声明，每一声明之间用“；”分隔；

(4)标记自身定义的style样式优先于其他所有样式定义。

4.3.2.内部样式表

内部样式表写在HTML的<head></head>里面，只对所在的网页有效。使用<style>N/ style>标记对来放置CSS规则。

4.3.2.1.基本语法

I <style type -"text/css">
选择器1{属性1:属性值1；属性2:属性值2；...}

选择器2{属性1:属性值1；属性2:属性值2；...}

选择器n{属性1:属性值1；属性2:属性值2；...}

</style>

4.3.2.2.语法说明

style标记是成对标记，有1个type属性是指style 元素以CSS的语法定义。

选择器1，…,选择器n，可以定义n个选择器，再定义声明部分。

属性和属性值之间用冒号连接，“属性/属性值”对之间用分号分隔。

4.3.3.外部样式表

外部样式表是将CsS规则写在以.css为后缀的CSs文件里，在需要用到此样式的网页里引用该CSS文件。

4.3.3.1.链接外部样式表

链接式是将所有的样式放在一个或多个以.ccs为扩展名的外部样式表中，通过网页的<head></head>标签中使用<link>标记将外部样式表文件链接到HTML文档中。

基本语法：

(2)语法说明:
语法中必须指定<link>标记的3个属性，其中href是定义链接外部样式表文件的url可以是相对路径和绝对路径;rel 是定义当前文档与被链接文档之间的关系，这里指定 stylesheet,表示被链接的文档是样式表文件;type是定义链接文档的类型，这里类型指定为 text/css，表示链接的外部文件为CSS 样式表。
这里面涉及3个属性，rel=”stylesheet"规定当前文档与被链接文档之间的关系。type=" text/css"规定被链接文档的MIME类型。href="mystyle.ess"规定被链接文档的位置，只需要记住这个固定写法即可。

4.3.3.2.导入外部样式表

导人式是将一个独立的CSS文件导人HTML文档中，其是在HTML.文档<head中应用< style>标签，并在<style>标签中的开头处用@ import语句，即可导人外部样式表文件。

(1)基本语法:

@import ul("CSS文件路径”);

/*此处还可以存放其他CSS样式*/ </style>

(2)语法说明。导人样式表必须在style标记内开头的位置定义，可以同时导人多个外部样式表，每条语句必须以“；”结束。一般导人外部样式写在最前面，内部样式写在后面。

4.4 CSS的属性单位

在CSS文字、排版、边界等的设置上，常常会在属性值后加上长度或者百分比单位。

4.4.1.长度、百分比单位

长度单位通常由两个英文字母的缩写表示，且设置大部分属性时仅能使用正数，只有少数属性可以使用正、负数的设置。而且必须注意，若属性值设置为负数，且超过浏览器所能接受的范围，以至于无法支持时，浏览器将会选择比较靠近且能支持的数值，长度单位在设置时分别为以下两种不同的类型。

4.4.1.1.相对类型

其指以该属性的前一个属性的单位值为基础来完成目前的设置，在浏览器内常用且支持的两种长度单位是以相对类型出现的。依据父元素的属性参考浏览器的默认值字号。

4.4.1.2.绝对类型

绝对类型所使用的单位不会随着显示设备的不同而改变，也就是当属性值使用绝对单位时，不论在哪种设备上显示都是一样的。

下面图表为浏览器支持的绝对类型的长度单位。

常用长度单位：

类型	长度单位	说明
绝对类型	in	英寸Inches(1英寸=2.54厘米)
	cm	厘米Centimeters
	mm	毫米Millimeters
	pt	点Points(1点=1/72英寸)
	pc	皮卡Picas(1皮卡=12点)
相对类型	em	元素的字体高度The height of the element's font
	ex	字母x的高度The height of the letter"x"
	px	像素Pixels
	%	百分比Percentage

4.4.2.色彩单位

HTML网页和CSS样式都是按照RGB来设置颜色的。在HTML标记中只提供了两种设置色彩的方法：十六进制和色彩英文名称。CSS提供了三种定义色彩的方法：十六进制和色彩英文名称还有rgb和rgba函数。

4.4.2.1.用十六进制数方式表示色彩值

在计算机中，定义每种颜色的强度范围为0~255.

都为0时，为黑色

都为255时，为白色

表现方法为#rrggbb

前两个数代表红光强度，中间两位数代表绿光强度，后两位代表蓝光强度

div{
color:#ff0000

}

如果参数各自在两位上数字相同，也可以缩写为#RGB方式。

4.4.2.2.用色彩名称方式表示色彩值

在CSS中也提供了与HTML一样用色彩英文名称表示色彩的方式。CSS只提供16中色彩名称。

4.4.2.3.使用RGB（x,y,z）函数表示

x,y,z分别代表红色，绿色，蓝色的值

4.5.CSS继承与层叠

CSS继承即子标记会继承父标记的所有样式风格，并且可以在父标记样式风格的基础上再加以修改，产生新的样式，而子标记的样式风格完全不影响父标记，值得注意的是，并不是所有的属性都会自动传给子元素。

CSS的继承。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>继承关系演示</title>
	<style>
		h1{
			color: blue;
			text-decoration: underline;
		}
		em{
			color: red;
		}
	</style>
	<body>
		<h1>学习<em>Web开发</em>教程</h1>
		<p>如果您有任何问题,欢迎联系我们</p>
	</body>
</html>

运行结果：

CSS层叠。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>CSS 层叠</title>
		<style type="text/css">
		p{
			color: green;
		}
		.red{
			color: red;
		}
		.purple{
			color: purple;
		}
		#line3{
			color: blue;
		}
	</style>
	</head>
	<body>
		<p>这是第一行文本</p>
		<p class="red">这是第二行文本</p>
		<p id="line3" class="red">这是第三行文本</p>
		<p style="color: orange;" id="line3">这是第二、四行文本</p>
		<p class="purple red">这是第五行文本</p>
	</body>
</html>