CSS的样式有哪些？

 我来答

2个回答

#热议# 为什么有人显老，有人显年轻？

北京理工大学出版社
2020-01-02 · 德以明理，学以精工。

北京理工大学出版社

向TA提问

关注

展开全部

什么是CSS样式

层叠样式表（CascadingStyleSheet，CSS）是一系列样式或格式规格的集合，用于控制网页样式并允许将样式与网页内容分离的一种标记性语言。它是W3C组织用于改善HTML在显示网页方面的缺陷。虽然HTML在发布时已经制定了各种网页样式标签和各种页面修饰属性，但是随着网页容纳的信息越来越多，这种把信息显示内容与信息显示样式混在一起的方法，已经无法满足人们对网络信息的快速搜索需求，更不能适应大数据时代的展示数据的要求。

CSS的每一个样式表都是由相对应的样式规则组成的，使用HTML中的标签之间或者编写为一个单独的文件，然后将文件的扩展名保存为.css，利用标签链接或者导入到网页中即可。

CSS样式的优势

使用CSS样式可以对多个文档的样式进行控制，当CSS样式更新后，所有应用该CSS样式的页面都会自动更新。CSS样式可以页面元素进行定位、特殊效果和超链接效果等独特的HTML属性，可以充分地弥补HTML的不足，简化网页的源代码，避免重复劳动，减轻工作量。CSS具有以下优势：

CSS符合Web标准。W3C组织推荐CSS技术将替代HTML的

表格标签、标签、标签以及其他用于表现的HTLM元素。

提高页面的浏览速度。使用CSS样式比传统的Web设计方法至少节约50%以上的文件大小。

缩短网站改版周期。只需要修改相应CSS文件就可以重新设计一个有成百上千页面的站点。

强大的字体控制和排版能力。Font标签对于字体控制能力远没有CSS对于字体的控制能力强，使用CSS样式后不需要在使用font标签来控制文章标题、字体颜色以及字体样式等。

CSS易于编写。Dreamweaver提供了CSS编写辅助工具。

CSS具有良好的兼容性。只要浏览器能够识别CSS样式都可以很好的应用它。

表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，让多个网页文件共同使用它，省去在每一个网页文件中都要重复设定样式的麻烦。

CSS样式基本语法

CSS的语法结构由3部分构成：选择器、属性和值。

选择器{样式属性:取值;样式属性:取值;样式属性:取值;……}选择器（Selector）通常是指用户希望定义的HTML元素或标签，如body、h1；也可以是自定义的id或class的标签，如#main选择器表示选择，即一个被指定了main为id的对象。浏览器将对CSS选择器进行严格的解析，每一组样式均会被浏览器应用到对应的对象上。

属性（Property）是用户希望改变的属性，并且每个属性都有一个值。对于每一个HTML中的标签，CSS都提供了丰富的样式属性，如颜色、大小、位置以及浮动方式等。

值（Value）指属性的值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）。属性值有两种形式：一种是指定范围的值，如float属性的取值为left、right和none；另一种为数值，如height属性取值为0~9999px或者通过其他数学单位来指定。

例如，定义一个网页字体大小为12像素、加粗，段落首行缩进2字符，则可以设置样式如下：无标题文档

层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

浏览器通过解析内部样式表通常位于网页的头部区域，目的是让CSS源代码在页面加载前先被解析执行，这样可以避免当网页加载完成后，没有CSS样式渲染而使的页面信息无法正常显示。3．链接外部样式表链接外部样式表是在CSS中最常用的一种形式，它将CSS样式代码单独编写到一个独立的文件中，由网页进行调用，多个网页可以同时使用同一个样式文件，其格式如下：

其中，href属性设置外部样式表文件的地址，该地址可以是相对地址，也可以是绝对地址；rel属性定义该标签关联的是样式表标签；type属性定义文档的类型，即CSS文本文件。

网站通常采用链接外部样式表来设计网站的表现层，能够实现CSS样式与HTML结构的分离，这种分离原则是W3C所提倡的，因为这样可以高效地管理文档结构和样式表文件，实现代码的优化和重用。

4．导入外部样式表导入外部样式表是指在内部样式表的在@import关键字后面，使用url()函数来把外部样式表文件导入。注意使用时，外部样式表的路径、方法和链接外部样式表的方法类似，但导入外部样式表输入方式更有优势。实质上它是相当于存在内部样式表中的。

7.2CSS基本选择器

选择器决定样式规则作用于哪些元素。例如，如果要对table元素添加边框为实线、线宽1像素、蓝色的边框，则需要创建一个只识别table元素而不影响其他元素的选择器。如果要对每个区域中的table设置特殊格式，就需要创建一个稍微复杂一些的选择器，它只识别指定区域中的table元素。

7.2.1标签选择器

HTML文档都是由很多标签通过一定的规则编织而成的，我们也可以把这些标签称为网页元素。标签选择器使用网页元素定义样式。

例如，声明p元素首行缩进2字符，字体颜色为红色；所有h1字号为15px、加粗，代码如下：

其中，p和h1都是HTML特定的标签名称，直接引用即可。

注意：*号为通配符匹配页面中的所有元素名称。上面的代码设置每个元素的内外边距为0px。由于每个元素都有系统默认的内外边距值，且在不同的浏览器中显示的效果也不同，因此在设置网页样式之初使用通配符*将所有元素默认的内外边距去掉是常见做法。

7.2.2类别选择器

使用标签选择符可以方便地对标签进行样式设置，同时标签选择符也存在较多问题。因为标签选择符对标签所做的定义不单单影响所选择的标签元素，而是对整个页面中所有相同标签都会起作用。如果需要对同一个标签在网页中的不同位置显示不同的样式，使用这种方法定义的样式就存在很多不足。对于这个问题可以使用类选择器来解决。

类（Class）选择符就是为了不同元素拥有相同的显示样式而定义的。例如，在下面这个页面中包含三段文本，通过标签选择器将所有段落文本大小定义为13px，首行缩进2字符，字体颜色为蓝色。

层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。

CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

如果现在要求把第一段字体大小改为20px，字体加粗，这时就可以使用类选择符。定义格式如下：

.fontbold{font-size:20px;font-weight:bold;}

层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

CSS是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。

CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

在浏览器中预览，显示效果如图3所示，可以看到第一段字体被单独放大并加粗。类选择符可以精确地控制页面中某个具体元素对象，而不管这个对象是属于什么类型的标签，同时一个类样式可以在多个标签中被引用。

在自定义类名时，只能够使用字母、数字、下划线（_）和连接符号（-），类名必须以字母开头，否则无效。另外，类名是区分大小写的，所以类fontbold和类Fontbold是完全不同的两个类。

7.2.3ID选择器

ID是英文Identity的缩写，它表示身份标识号码，在网络上一般指用户账号，但是在Web设计中一般指标签在HTML文档中的唯一编号。从这点来看，ID选择器只能够在HTML页面中用一次，它是与标签选择符和类选择符作用范围相反的一个选择符。ID选择符通常被来定义HTML框架结构的布局效果，因为HTML框架元素的ID值都是唯一的。

ID选择符必须以井号（#）前缀开始，然后是一个自定义的ID名，定义格式如下：

#box{width:600px;height:auto;}例如，下面实例定义一个盒子，为该盒子指定宽度和高度，并设置盒子的背景颜色以及边框和内边距大小，显示效果如图4所示。7.3复合选择器如果仅仅掌握了标签选择符、类选择符和ID选择符还远远不够，对于网页设计者来讲还应该掌握高级选择符的使用，如子选择符、相邻选择符和属性选择符。

利用标签选择符和类选择符可以控制网页中众多对象的样式；而利用ID选择符、子选择符和相邻选择符可以精确控制页面中的特定对象样式；使用属性选择符可以更敏捷、更模糊地控制页面中包含不同属性的对象样式。

7.3.1子选择符

子选择符就是指定父元素所包含的子元素的样式。子选择符使用尖角号（>）来表示，定义格式如下：

div>span{font-size:20px;}其中，div为span元素的父元素，通过子选择符连接。

例如，定义span元素的字体大小为10px，再利用子选择符来定义所有div元素包含的子元素span样式字体大小为20px，显示效果如图5所示。

CSS基础入门

层叠样式表是一种用来表现HTML（标准通用标记语7.3.2相邻选择器

相邻选择符就是指定一个元素相邻的下一个元素的样式。相邻选择符使用加号（+）来表示，格式如下：

div+span{font-size:20px;}其中，div+span表示div元素与span元素相邻。例如，利用相邻选择符递进控制并列显示的几个元素的显示样式。h1+div表示标题元素h1后面相邻的div元素样式，div+p表示div元素后面相邻的元素p的样式，p+div表示p元素后面相邻的div元素的样式，而div+div表示div元素后面相邻的div元素的样式。效果如图6所示。

图1

图2

图4

图5

图6

详情