什么是CSS？
HTML 虽然规定了网页中的标题、段落应该使用的标签，但是没有涉及这些内容应该以何种样式(比如大小、位置、间距、缩进等属性)呈现在浏览器中。
引入采用CSS（层叠样式表）（Cascading Style Sheets）是用于增强和控制网页的样式和布局，以指定的特性去绘制页面元素，现代网页中HTML 和 CSS 总是那么密不可分的。
CSS允许将样式信息与网页内容分离，将页面的内容与表现形式分离，并放在一个独立外部样式文件中，同时控制多个网页的布局。HTML文件中只存放文本信息，这样的页面对搜索引擎更加友好，而且不必在所有网页上都进行编辑布局。
CSS 发展
CSS1指CSS的第一个版本，于1994年由伯特·波斯和哈肯·维姆·莱合作设计，于1996年12月17日成为W3C推荐标准，主要规定了选择器、样式属性、伪类 、对象几个大的部分。
CSS2是CSS的第二个版本，W3C组织于1998年5月由 W3C 推出的技术规范，基于 CSS1 设计的，扩充和改进了很多更加强大的属性。包括选择器、位置模型、布局、表格样式、媒体类型、伪类、光标样式。
CSS3是CSS技术的升级版本，集成了之前版本CSS 的部分内容，并进行了很多的增补与修订，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案。CSS3朝着模块化发展，分为若干个相互独立的模块，利于规范及时更新和发布，及时调整。
什么是CSS3？
CSS3 是最新的 CSS 标准。
CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的，被分为若干个相互独立的模块。一方面分成若干较小的模块较利于规范及时更新和发布，及时调整模块的内容，这些模块独立实现和发布。
CSS3 新特性
CSS3集成了 之前版本CSS 的部分内容，并进行了很多的增补与修订。
1.更多选择器支持
CSS3新增了许多可使用的选择器使得前端开发人员在选择页面元素时更加灵活。属性选择器、结构伪类选择器、UI元素状态伪类选择器、目标伪类选择器、否定选择器、通用兄弟选择器。
2.更多视觉效果支持
CSS3 新增圆角、盒子阴影、半透明、文字效果、渐变背景等视觉效果。
3.更多背景效果支持
CSS3 不再局限于背景色、背景图像的运用，还可以在一个元素上设置多层背景图片。
CSS3可以用图像、颜色为一个元素设置制图像边框。
CSS3规范提供了box-sizing属性并允许设置浏览器使用content-box或者border-box盒模型。
CSS3 引入了多列布局将像报纸、杂志那样，把一个简单的区块拆分成多列。
CSS3 弹性盒布局决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。
CSS3 网格布局将网页划分成一个个网格，同时处理列和行，可以任意组合不同的网格。
6.变形支持
CSS3 变形（transform）特性支持在 2D 或者 3D 空间里操作网页对象的位置和形状，例如旋转、扭曲、缩放或者移位。
7.过渡支持
CSS3 过渡（transition）特性能在网页制作中实现的一些简单的动画效果变得更具流线性、平滑性。
8.动画支持
CSS3 动画（animation）特性支持在网页制作中实现更复杂的样式变化，以及一些交互效果。
9.开放字体的支持
CSS3提供@font-face特性为页面自定义字体的展示提供支持。
10.媒体适配支持
CSS3 媒体特性可以实现一种响应式（Responsive）布局，根据用户的显示终端或设备特征选择对应的样式文件，从而在不同的显示分辨率或设备下具有不同的布局效果。
插入样式表
插入样式表的方法有三种:外部样式表(External style sheet)、内部样式表(Internal style sheet)、内联样式(Inline style)。
外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用 <style> 标签在文档头部定义内部样式表。使用内部样式表就意味着需要在每个这样的页面都进行同样的输入和维护。
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
内联样式
在相关的标签内使用样式（style）属性。style属性可以包含任何 CSS 属性。这种内联样式后期的维护投入很大的，应尽量避免使用内联样式。
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
多重样式表优先级
样式表允许以多种方式规定样式信息，属性可以在不同的样式表中被同样的选择器定义。
在单个的 HTML 元素中（内联），在 HTML 页的头元素中（内部），或在一个外部的样式表文件中（外部）。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
一般情况下，浏览器使用以下顺序查找属性值。
内联样式 （Inline style） - 使用元素上的style全局属性定义的样式。
内部样式 （Internal style sheet） - 在样式元素中定义的样式。
外部样式 （External style sheet） - 使用链接元素导入的样式。
浏览器默认样式 - 浏览器应用的默认样式。
内部样式表和外部样式表的优先级别跟他们在文档的先后顺序有关。
按照顺序判断哪些属性值与元素最相关以决定并应用到该元素上的。
CSS 语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。选择器用于选择你想要的HTML元素，声明由一个属性和一个值组成，被冒号分开。
选择器
HTML 元素的名称位于开始。用于选择一个或多个需要添加样式的HTML 元素。
声明
一个单独的规则。 用来指定添加样式元素的属性，根据结果绘制元素，排布样式。
属性
用可读的名称来表示该HTML 元素的特性 ，属性一般有以下几种类型：整数和实数、长度值、百分比值、URL和颜色5种。
属性的值
在属性的右边，冒号后面即属性的值，描述了浏览器引擎如何处理该特性。
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
CSS声明总是以分号(;)结束，声明总以大括号({})括起来。
样式层叠
层叠是CSS的一个基本特征，它是一个定义了如何合并来自多个源的属性值的算法。
CSS样式可能来自这些不同的样式表，相互之间的作用范围是重叠的，层叠算法则定义了它们如何相互作用。
当两个不同的css规则应用到同一个html元素上时，并且这两个不同的css规则对同一属性的修饰存在不同的值，css层叠规则会决定应用哪个样式。相当直观:通常权重更高的选择器胜出，如果权重相同，定义在后边的规则胜出。
层叠算法是先于优先级算法的。
样式继承
一些设置在父元素上的css属性是可以被子元素继承的，有些则不能。
当子元素元素的一个继承属性没有指定值时，则取父元素的同属性的计算值 。
当子元素的一个非继承属性没有指定值时，不取父元素的同属性的计算值，而取属性的初始值。
继承到样式的标签和定义样式的标签必须是从属关系（后代标签关系）。
对文本样式设置的属性基本能被默认/隐式继承（颜色color、样式text、字体font、行属性line）。
所有关于对于盒子模型（div、span等）的属性设置（border、定位）基本都不能默认/隐式继承。
inherit 关键字 用于显式地指定继承性，可用于继承性/非继承性属性。
继承遵从css样式层叠的规则。
CSS 知识题
| 题目 | 答案 |
|---|---|
| 在HTML文档中插入样式表的方式，优先级最高的 | 内联样式表 |
| 关于网页展示的图片中<img>和背景图 | 背景图属于css样式、img属于html结构 |
| css设置文本内容大小写 | text-transform、font-variant |
| font-color表示描述文本颜色 | 错 |
| margin外边距可以是负数 | 对 |
| margin外边距折叠/合并后的间距 | 两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠/合并，垂直间距是两者中的较大者 |
| css设置文本内容溢出省略号 | text-overflow: ellipsis |
567
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
