css样式表可以将格式和结构分离,CSS的样式有哪些？

css样式表可以将格式和结构分离,CSS的样式有哪些？详细介绍

本文目录一览： 16．下面说法错误的是( )。 A.CSS 样式表可以将格式和结构分离 B．CSS 样式表可以控制页面的布局 C．CSS

16.D
17.C
18.B
19.B
20.B
16 D
17 D
18 B
19 B
20 我觉得没有正确答案
DDAB

为什么说引入CSS实现了网页内容和表现形式的分离？

因为HTML代码当中已经不包含样式代码了，样式文件被单独放到了一块，可以单独调用，也可以包含在 标记里。总之和html代码不在交叉了。
css就是web中常说得表现层，而网页内容在html网页中，引入css样式，随时可以改变内容的表现形式，所以做到了人们常说的分离
这样便于优化啊，有时候可以用一个css文件去控制很多的html页面
因为页面显示的是内容和相应的表单，而CSS可以很好的将这些内容进行分块组装后，再按照整体的布局进行调整，可以在后期的改版等方面能够不动前面的内容只是更改布局以及背景、图片、表现形式等，这样更便于优化，所以才进行了分离；其实不分离的话就是说每个页面你都需要给在里面嵌入CSS内部样式，这样你要是每个页面的样式都一样，那每个页面的样式都要重新COPY一边，对于后面的修改来说更改量太大了，而用CSS和页面分离的方式可以只要修改一个CSS文件来使得整个网站的样式进行优化，便于修改。

表单可以和什么放在一行

from标签。文件信息需要包裹在一个from标签里，通常在一个表单里面，有许多表单控件，有文本框等，css样式表可以将格式和结构分离。

什么是CSS,CSS有什么用？

楼上的回答都很详细。嘎嘎。。。
我个人的理解哈，简单的说，css就是为了帮助html显示网页的。
我们可以在html中搭建网页的构架，比如，哪里该放一个文本框了，哪里该放一个按钮了，哪里该放一张图片了，哪里要放一个链接了等等之类的内容。
然后呢，我们想美化下我们的页面，比如这个链接要是一张图，这个按钮是浅蓝色的。这个图片要多大多小。这个文本框中的文字要粉红色，要14px。这些问题呢，我们就写在css里面。
当然了，css里面不光可以控制单个元素的样式，也可以给html布局。比如通过给元素div加右浮动的属性了，也可以控制该元素在页面上的右面显示。
CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。
样式表······
通过定义CSS样式表，能让网页具有美观一致的界面，可以将网页制作得更加绚丽多彩。一个样式文件可以作用于多个页面，具有更好的易用性和扩展性，通过修改样式文件，能制作出内容相同，而外观不同的多姿多彩的页面。此外，使用样式表能有效地分离网页的内容与外观控制，从而便于美工与程序员之间的分工协作，发挥各自的优势。
为什么需要CSS样式表主要是基于以下几点原因：
(1) HTML标签的外观样式比较单一。
大家在学习前面几章时，不知发现没有？前面几章网页中的文字的字体、颜色、大小、超链接、间距等样式都比较单一，为了弥补这个缺点，就需要使用CSS样式表来对HTML标签进行控制，从而实现更加丰富多彩的效果。
(2) 样式表的作用相当于华丽的衣服。
同样的内容，采用不同的CSS样式文件，可以看到不同的布局和效果。从美工的角度来看，可以更容易地调整页面外观，调整页面里某个部分的文字或者图片等，从而实现复杂多变的页面效果，因此样式表相当于一个页面甚至一个网站的华丽的衣服。如图1所示，就是内容相同，外观不同的两个页面。
(3) 样式表能实现内容与样式的分离，方便团队开发。
由于当今社会竞争日趋激烈，分工越来越细，每个人做的事越来越单一，我们开发一个网站也不例外，往往需要美工和程序设计人员的配合，美工做样式，程序员写内容，为了迎合这种需要，就出现了样式表。样式表能把内容结构和格式控制相分离，使网页可以仅由内容构成，而将所有的网页格式通过CSS样式表文件来控制，从而方便美工和程序员分工协作、各司其职、各尽其能，为开发出优秀的网站提供了有力的保障。

CSS样式的主要特点及其类型

CSS样式表教程:CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀. * 可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少工作量 http://www.enet.com.cn/eschool/zhuanti/css/
　　CSS样式是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
　　CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计。
　　类型如下：
　　1、内部样式表。
　　2、外部样式表。
　　3、内联样式。
　　特点如下：
　　一、精简代码，降低重构难度。
　　二、网页访问速度快。
　　三、SEO优化。
　　四、浏览器兼容性。
查看下一下网站 里面很详细 http://www.enet.com.cn/eschool/zhuanti/css/ http://www.htmlhelp.com/zh/reference/css/
Vue实践-CSS样式position/display/float属性对比使用
CSS(Cascading Stylesheets，层叠样式表)是一种制作网页的新技术，现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。
层叠样式表的特点
　　且不说过去的网页缺少动感，就是在网页内容的排版布局上也有很多困难，如果不是专业人员或特别有耐心的人，很难让网页按自己的构思和创意来显示信息。即便是掌握了HTML语言精髓的人也要通过多次地测试，才能驾驭好这些信息的排版，过程十分漫长和痛苦。为了Internet的发展，让更多人早日踏足这个多姿多彩的世界，新的HTML辅助工具呼之欲出。
　　样式表就是在这种需求下诞生的，它首先要做的是为网页上的元素精确地定位，可以让网页设计者象导演一样，轻易地控制由文字、图片组成的演员们，在网页这个舞台上按剧本要求好好地表演。
　　其次，它把网页上的内容结构和格式控制相分离。浏览者想要看的是网页上的内容结构，而为了让浏览者更好地看到这些信息，就要通过格式控制来帮忙了。以前两者在网页上的分布是交错结合的，查看修改很不方便，而现在把两者分开就会大大方便网页的设计者。内容结构和格式控制相分离，使得网页可以光由内容构成，而将所有网页的格式控制指向某个CSS样式表文件。这样一来的好出表现在两个方面:
　　第一，简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量(因为重复设置的格式将被只保存一次)。
　　第二，只要修改保存着网站格式的CSS样式表文件就可以改变整个站点的风格特色，在修改页面数量庞大的站点时，显得格外有用。避免了一个一个网页的修改，大大减少了重复劳动的工作量，当你面对的是有数百个网页的站点时，CSS简直象是神对我们的恩赐!^_^
　　添加层叠样式表的方法
　　我们为网页添加样式表的方法有四种。
　　1.最简单的方法是直接添加在HTML的标识符(tag)里:
　　< Tag style=”properties”>网页内容< /tag>
　　举个例子:
　　< p style=”color: blue; font-size: 10pt”>CSS实例< /p>
　　代码说明:
　　用蓝色显示字体大小为10pt的“CSS实例”。尽管使用简单、显示直观，但是这种方法不怎么常用，因为这样添加无法完全发挥样式表的优势“内容结构和格式控制分别保存”。
　　2.添加在HTML的头信息标识符< head>里:
　　< head>
　　< style type=”text/css”>
　　< !-- 样式表的具体内容 -->
　　< /style>
　　< /head>
　　type=”text/css”表示样式表采用MIME类型，帮助不支持CSS的浏览器过滤掉CSS代码，避免在浏览器面前直接以源代码的方式显示我们设置的样式表。但为了保证上述情况一定不要发生，还是有必要在样式表里加上注释标识符“< !--注释内容-->”。
　　3、链接样式表
　　同样是添加在HTML的头信息标识符< head>里:
　　< head>
　　< link rel=”stylesheet” href=”*.css” type=”text/css” media=”screen”>
　　< /head>
　　*.css是单独保存的样式表文件，其中不能包含< style>标识符，并且只能以css为后缀。
　　Media是可选的属性，表示使用样式表的网页将用什么媒体输出。取值范围:
　　·Screen(默认):输出到电脑屏幕
　　·Print:输出到打印机
　　·TV:输出到电视机
　　·Projection:输出到投影仪
　　·Aural:输出到扬声器
　　·Braille:输出到凸字触觉感知设备
　　·Tty:输出到电传打字机
　　·All:输出到以上所有设备
　　如果要输出到多种媒体，可以用逗号分隔取值表。
　　Rel属性表示样式表将以何种方式与HTML文档结合。取值范围:
　　·Stylesheet:指定一个外部的样式表
　　·Alternate stylesheet:指定使用一个交互样式表
　　4、联合使用样式表
　　同样是添加在HTML的头信息标识符< head>里:
　　< head>
　　< style type=”text/css”>
　　< !--
　　@import “*.css”
　　其他样式表的声明
　　-->
　　< /style>
　　< /head>
　　以@import开头的联合样式表输入方法和链接样式表的方法很相似，但联合样式表输入方式更有优势。因为联合法可以在链接外部样式表的同时，针对该网页的具体情况，做出别的网页不需要的样式规则。
　　需要注意的是:
　　·联合法输入样式表必须以@import开头。
　　·如果同时输入多个样式表有冲突的时候，将按照第一个输入的样式表对网页排版。
　　·如果输入的样式表和网页里的样式规则冲突时，使用外部的样式表。

使用CSS格式化网页

使用CSS格式化网页
　　在前一章，读者学习了如何使用表格将信息排列为行和列。表格作为网页布局工具曾被大量用于Web，但随着样式表的出现，表格的这种用途已被摒弃。表格仍很有用，但主要用于其原始目的，也就是将信息排列为行和列。除取代表格作为网页布局机制外，样式表也是指定字体、控制边距、指定边框和调整网页外观的首选方法。
　　样式表背后的概念很简单：创建一个独立的样式表文档，以指定字体、颜色、背景和其他确定网站外观的特征。然后链接需要使用该样式表的所有网页，而不是在每个文档中都重复指定这些样式。决定修改字体或颜色主题时，只要修改一两个样式表，就可以一次性修改所有网页。因此，样式表是一组格式化指令，能够同时控制众多HTML页面的外观。
　　样式表的作用不仅是将网页内容同格式分离。CSS样式表能够设置许多以前没有大量工作不可能实现的格式化特征，这包括精确的字体控制、字间距和行间距、页面边距和边框以及对非欧洲语言和字符的扩展支持。样式表还能够以人们熟悉的英寸、毫米、点和picas等来指定大小和其他度量值。你还可以使用样式表正确地控制图像和文本在网页上的位置。
　　总之，样式表将面向纸张的复杂的出版机制引入了Web。样式表确实实现了这一点。
　　注意：如果有3个或更多的网页使用类似的格式和字体，可能想在阅读本章时为它们创建一个样式表。即使不想创建完整的样式表，将样式直接应用于网页中的HTML元素也很有帮助。
　　12.1 理解CSS
　　样式表背后的技术称为CSS，即级联样式表(Cascading Style Sheets)。CSS是一种定义样式(如字体、颜色和位置)的语言，用于描述如何格式化和显示网页中的信息。CSS样式可直接存储在HTML网页中，也可存储为独立的样式表文件。不管以哪种方式保存，样式表都包含将样式应用于特定元素类型的样式规则。在外部使用时，样式表规则放在外部样式表文档中，文件扩展名为.css。
　　121 理解CSS
　　样式规则是可应用于网页中元素，如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式表直接放在网页中，外部样式表保存在独立的文档中，网页通过一个特殊标签链接外部样式表——稍后将介绍这个标签。
　　名称CSS中的“级联(cascading)”表示样式表规则应用于HTML文档元素的方式。具体地说，CSS样式表中的样式形成一个层次结构，更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定，从而实现级联效果。如果上述解释还不是很清楚，可将 CSS的级联机制看成一种类似继承的关系，在这种继承关系中，父亲的特征传递给子女，但子女有更特殊的特征;基样式规则适用于整个样式表，但可被更具体的样式规则覆盖。
　　用一个简单例子可能更能够解释清楚。看下面的代码，你是否能够说出文本的颜色：
　　

　　This text is green.
　　
　　This text is blue.
　　
　　
　　This text is still green.
　　
　　

　　在这个例子中，颜色green通过样式属性color应用于
标签。因此

　　标签中的文本是绿色的。由于
标签是
标签的子标签，因此绿色的文本样式传递给
中的文本。然而，第一个
标签覆盖了color样式，将它改为蓝色。最后的结果是，第一段文本是蓝色的，第二段文本仍为传递而来的绿色。
　　注意：你可能注意到了，我在本章和下面几章中大量使用了术语“元素”。元素就是网页中的信息(内容)，如图像、段落或链接。标签用于对元素进行编码，可以将元素看成标签及其内部的描述信息(属性、文本、图像等)。
　　与许多Web技术一样，CSS已经发展很多年了。CSS最初的版本称为Cascading Style Sheets Level 1(CSS1)，创建于1996年。后来的CSS2标准创建于1998年，虽然这似乎是很久以前了，但直到最近CSS2仍得到所有网页浏览器的支持。由于 CSS的强大功能，浏览器的支持始终是一个问题。幸运的是，浏览器最后支持了大部分功能，现在你可以安全地使用CSS2样式表，不用担心太多事情。因此，当我在本书中谈到CSS时，指的是CSS2。
　　警告：即使在最新的网页浏览器中，仍有一些CSS2特性没有得到正确支持。我将在本书接下来的几章中指出这些特性及相关的解决方法。
　　在http://www.w3.org/Style/CSS/上可以找到关于样式表语言CSS1和CSS2的完整参考，还可以找到各个CSS版本都包含哪些样式。本章接下来将解释如何以与最新的网页浏览器兼容的方式使用这些参考文档中的信息。

总结几种常见的div+css布局实例

学习前端html和css技术，最重要的是在于实践，无论朋友们看了多少的教程，视频课程或者是相关的书籍，只有亲手去实践才会对这些有全新的认识。有时看别人代码一眼能看懂，自己却无从下手写起；有时不能理解的技术知识与问题，怎么思考也想不明白等等。本篇文章就给朋友们介绍一下各种常见的 div+css 布局方式和实践技巧。DIV + CSS布局相关内容1. DIV+CSS布局样式详解a 符合 W3C标准，微软等公司均为 W3C支持者。b 能够对网页的布局、字体、颜色、背景等图文效果实现更加精确的控制,调整更加方便,现在很多网站均使用p+CSS框架模式,更加印证p+CSS是大势所趋c 将格式和结构分离，有利于格式的重用及网页的修改维护，在团队开发中更容易分工合作而减少相互关联性d CSS的极大优势表现在简介的代码，制作体积更小，下载更快，节省大量带宽，而且众所周知，搜索引擎喜欢简洁的代码。e 利用CSS样式表，可以将站点上的所有网页都只指向同一个CSS文件，可以实现许多网页同时更新。2. Html+CSS布局技巧的代码分享我们都知道，每个人都有不同的嗜好，有的人喜欢吃甜食，有的人喜欢吃辣的东西，有的人不喜欢吃芹菜，有的人不喜欢吃羊肉等等。CSS中的有些元素也是这样，他们有的只对牛奶感兴趣，有的只喜欢吃坚果和果冻，而讨厌牛奶。而vertical-align呢，是个比较挑食的家伙，它只喜欢吃果冻，从小吃果冻长大，没有了果冻，它就会闹脾气，对你不理不睬。我称之为“果冻依赖型元素”，又称之为“inline-block依赖型元素”，也就是说,只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用。3. DIV+CSS布局中自适应高度的解决方法要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。4. 详解CSS布局之圣杯布局与双飞翼布局示例html代码中，middle部分首先要放在container的最前部分，然后是left，right 1）将三者都设置 float:left, position:relative (因为相对定位后面会用到） 2）middle设置 width:100% 占满一行 3）此时middle占满一行，所以要把left拉到middle所在行的最左边，使用 margin-left:-100% 4）这时left拉回到middle所在行的最左边，但会覆盖middle内容的左端，要把middle内容拉出来，所以在外围container加上 padding:0 210px 5）middle内容拉出来了，但left也跟着出来了，所以要还原，就对left使用相对定位 left:-210px 6）同理，right要拉到middle所在行的最右边，使用 margin-left:-210px，right:-210px 5. 必看的css布局小技巧分享当页面左右宽度缩小时，为了避免出现左右滚动条的糟糕体验，就可以用到max-width啦！页面比宽度小时，会自动缩小哦～对元素设置box-sizing:border-box后，确定宽度后再设置padding和border，不会改变宽度。可以对全局设置边框自适应内容的大小，不会出现overflow的情况6. CSS布局居中对齐，左侧定宽右侧自适应详细介绍CSS页面布局是web前端开发的最基本的技能，本文将介绍一些常见的布局方法，涉及到盒子布局，column布局，flex布局等内容。本文中，你可以看到一些水平垂直居中的方法，左侧固定宽度，右侧自适应的一些方法。相关问答1. css布局 table cellspacing2. 脚部布局和CSS布局问题3. css布局的设置问题【相关推荐】1. DIV+CSS布局入门教程：5个div+css零基础入门教程推荐2. DIV+CSS 盒子模型知识总结，轻松掌握div+css布局

怎样理解结构与样式的彻底分离

是不是想知道分离的优缺点啊？
CSS与HTML分离的优点
1、使页面载入得更快
由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小。相对于表格嵌套的方式的逐层加载速度快。
2、修改设计时更有效率
在修改页面的时候更加容易省时。根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式。而表格布局则更不省事。
4、保持视觉的一致性
DIV+CSS最重要的优势之一：保持视觉的一致性；以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。
5、更好地被搜索引擎收录
由于将大部分的HTML代码和内容样式写入了CSS文件中，这就使得网页中代码更加适合搜索引擎。
6、对浏览者和浏览器更具亲和力
对浏览者和浏览器更具亲和力，由于CSS富含丰富的样式，使页面更加灵活性，更加的美观，它可以根据不同的浏览器，而达到显示效果的统一和不变形。
CSS与HTML分离的缺点
1、CSS网站制作的设计元素通常放在1个外部文件中，或几个文件，有可能相当复杂，甚至比较庞大。
3、虽然说DIV+CSS解决了大部分浏览器兼容问题，但是也有在部分浏览器中使用出现异常，比如火狐浏览器，在IE中显示正常的页面，到了火狐浏览器中可能会面目全非。当然这应该是浏览器的问题，但是可以说在目前来看，DIV+CSS还没有实现所有浏览器的统一兼容。
4、DIV+CSS对搜索引擎优化与否,取决于网页设计的专业水平,而不是DIV+CSS本身。

在网页中css有什么作用

CSS是Cascading Style Sheets（层叠样式表单）的简称。CSS就是一种叫做样式表（stylesheet）的技术。也有的人称之为“层叠样式表”（Cascading Stylesheet）。那么CSS的作用是什么呢？下面先来看一下CSS配合DIV或div+css作用： 1、CSS技术帮我们控制网页中的字体大小、页面宽度、页面内容靠左靠右、字体样式、某些网页里区域背景图片、背景颜色、超链接鼠标事件样式、图片居中、文字居中、网页中内容板块间隔等样式。 网页中一些标签元素样式控制，如：标题、段落、、列表等等网页元素设置控制，包括上面讲的文字图片大小、DIV CSS布局宽度颜色等属性。 CSS除了以上的作用，还有哪些具体的作用呢？CSS的作用具体如下： CSS除了以上的作用，还有哪些具体的作用呢？CSS的作用具体如下： （1）在几乎所有的浏览器上都可以使用。 （2）以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。 （3）使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。 （4）你可以轻松地控制页面的布局 。 （5）你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。 你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。想一想，没有使用CSS前我们是如何控制字体的颜色和大小以及所使用的字体的？我们一般使用HTML标签来实现，代码非常烦琐。很难想象，如果在一个页面里需要频繁地更替字体的颜色大小，最终生成的HTML代码的长度一定臃肿不堪。说实话，CSS就是为了简化这样的工作诞生的，当然其功能决非这么简单。结合DIV CSS是通过对页面结构的风格控制的思想，来控制整个页面的风格的属性。浏览器通过CSS类解释来呈现CSS属性来表现样式里设置的样式。
css的作用是：1、主要用来设计网页的样式，美化网页；2、能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式；3、对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
css的作用：
css（Cascading Style Sheets，层叠样式表），它是一种用来表现HTML或XML等文件样式的计算机语言，是用来表示html样式的一种编程语言，是可以做到网页和内容进行分离的一种样式语言。
CSS主要用来设计网页的样式，美化网页；它不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。
在css进入前端语言之前，很多一部分人都把css当做一种前端语言，发展至今，css不仅能装饰网页，也可以配合各种脚本对于网页进行格式化。
使用CSS的优点
CSS的最大优点是它允许将样式和布局从文档的内容中分离出来。这里有一些更多的优点，为什么我们应该开始使用CSS呢？
1、CSS节省大量时间
CSS为设置元素的样式属性提供了很大的灵活性。您可以编写一次CSS；然后可以将相同的代码应用于HTML元素组，也可以在多个HTML页面中重用。
2、 易维护
CSS提供了一种简单的方法来更新文档的格式，并保持多个文档之间的一致性。因为可以使用一个或多个样式表轻松控制整个网页集的内容。
3、页面加载速度更快
CSS使多页能够共享格式信息，从而减少了文档结构内容的复杂性和重复性。它显着地减少了文件传输的大小，从而导致了更快的页面加载。
4、HTML的高级样式
CSS比HTML具有更广泛的表示能力，并且对网页的布局提供了更好的控制。因此，与HTML表示元素和属性相比，您可以更好地查看您的网页。
5、多设备兼容性
CSS还允许为多种设备或媒体优化网页。使用CSS，可以为不同的呈现设备(如桌面、手机等)以不同的查看样式表示相同的HTML文档。

CSS的样式有哪些？

1、CSS的常用样式有哪些？
答：CSS背景、CSS文本、CSS字体、CSS超链接、CSS列表、CSS表格
什么是CSS样式
层叠样式表（CascadingStyleSheet，CSS）是一系列样式或格式规格的集合，用于控制网页样式并允许将样式与网页内容分离的一种标记性语言。它是W3C组织用于改善HTML在显示网页方面的缺陷。虽然HTML在发布时已经制定了各种网页样式标签和各种页面修饰属性，但是随着网页容纳的信息越来越多，这种把信息显示内容与信息显示样式混在一起的方法，已经无法满足人们对网络信息的快速搜索需求，更不能适应大数据时代的展示数据的要求。
CSS的每一个样式表都是由相对应的样式规则组成的，使用HTML中的标签可以将样式表规则加入到HTML。标签位于HTML的head部分，其中也包含网页的样式规划，如图1所示。CSS语句可以内嵌在HTML中，所以编写CSS样式规则和编写HTML的方法相同。CSS语言不需要编译，也不需要特殊处理。用户只要把它们放在标签之间或者编写为一个单独的文件，然后将文件的扩展名保存为.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样式应用到页面上，如图2所示。多个样式可以并列在一起写，不需要考虑如何进行分隔。例如，定义一个段落文本的背景色为紫色，则可以在上面样式的基础上进行增加样式：
Body{font-size:12px;font-weight:bold;text-indent:2em;}p{backgroundcolor:#FF00FF;}由于CSS语言自动忽略空格（除了选择器内部的空格），因此可以利用空格和换行符来美化CSS样式源代码，上面的代码可以进行如下美化：
Body{font-size:12px;font-weight:bold;text-indent:2em;}p{background-color:#FF00FF;}经过美化的CSS源代码看上去一目了然，既方便阅读，也便于修改。
CSS源代码有时候需要通过一些注释来标注，CSS代码表示什么意思。在HTML中注释标记使用“”，CSS中注释标记使用“/*注释内容*/”。例如，可以对上面的代码进行注释：
Body{/*页面的基本属性*/font-size:12px;font-weight:bold;text-indent:2em;}/*设置段落的背景颜色为紫色*/p{background-color:#FF00FF;}添加CSS的方法
在HTML中添加CSS的方法主要有4种，分别为链接内嵌样式、内部样式表、链接外部样式表和导入外部样式表。
1．内嵌样式表
内嵌样式表是混合在HTML标记里使用的，该方法可以很简单地对某个元素单独定义样式，主要是在body内实现。
内嵌样式表的使用是直接在HTML标记里加入style参数，而style参数的内容就是CSS的属性和值，在style引号里的内容相当于在样式表的大括号里的内容，其格式如下：
字体大小为12px，颜色为红色当浏览器解析到这些标签时，检测到该标签中包含style属性，就会调用CSS引擎来解析style属性，并把效果展现到页面上。
该方法与传统网页设计在标签内增加属性的设计方法相同，该方法实际并没有满足W3C提出的将HTML结构与CSS表现剥离来进行设计，因此在网页设计中不建议使用该方法，除非为页面中个别元素设置某个特定样式效果而单独定义。
2．内部样式表
内部样式表与内嵌样式表的相似之处在于，都将CSS样式编写到页面中。而不同的是，内部样式表可以统一放置在一个固定的位置，其格式如下：
内部样式表通常位于网页的头部区域，目的是让CSS源代码在页面加载前先被解析执行，这样可以避免当网页加载完成后，没有CSS样式渲染而使的页面信息无法正常显示。3．链接外部样式表链接外部样式表是在CSS中最常用的一种形式，它将CSS样式代码单独编写到一个独立的文件中，由网页进行调用，多个网页可以同时使用同一个样式文件，其格式如下：
其中，href属性设置外部样式表文件的地址，该地址可以是相对地址，也可以是绝对地址；rel属性定义该标签关联的是样式表标签；type属性定义文档的类型，即CSS文本文件。
网站通常采用链接外部样式表来设计网站的表现层，能够实现CSS样式与HTML结构的分离，这种分离原则是W3C所提倡的，因为这样可以高效地管理文档结构和样式表文件，实现代码的优化和重用。
4．导入外部样式表导入外部样式表是指在内部样式表的标签内使用@import关键字导入外部样式表文件，格式如下：
在@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