CSS 指层叠样式表 (Cascading Style Sheets)，是一种用来表现 HTML 文档样式的语言，样式定义如何显示 HTML 元素，是能够真正做到网页表现与结构分离的一种样式设计语言。样式通常存储在样式表中，外部样式表通常存储在 CSS 文件中，多个样式定义可层叠为一。
CSS 样式表极大地提高了工作效率：样式通常保存在外部的 .css 文件中，通过仅仅编辑一个简单的 CSS 文档，外部样式表有能力同时改变站点中所有页面的布局和外观。
CSS 创建样式表有三种方法：内联样式、内部样式、外部样式。
（1）内联样式
内联样式也叫行内样式或者行间样式，即在相关标签内使用样式（style）属性定义。如下：
<p style="font-size: 24px;color: blueviolet">内联式演示</p>
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。因此需要慎用这种方法，例如当样式仅需要在一个元素上应用一次时，可以使用内联样式。要使用内联样式，需要在相关的标签内使用样式属性定义，style 属性可以包含任何 CSS 属性。
将样式定义在style属性中。内容和表现形式高度耦合，维护困难，不利于分工合作。
只能应用于一个标签
（2）内部样式
内部样式也叫内嵌样式，即在文档中创建内嵌的样式表，需要使用 <style> 标签在文档头部定义内部样式表，如下：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
p{
font-size: 36px;
color: #8fff33;
}
</style>
</head>
<body>
<p style="font-size: 24px;color: blueviolet">内联式演示</p>
<p>内部样式的演示1</p>
<p>内部样式的演示2</p>
</body>
在<head>标签中通过<style>标签来定义
内容和表现形式的耦合程度降低了，但都还是在HTML文件中，没有实现完全分离。
定义的样式只能在当前页面使用
当单个文档需要特殊的样式时，就应该使用内部样式表。
（3）外部样式表
外部样式也叫做外联样式，即使用 <link> 标签链接到外部样式表，
首先需要定义一个样式表文件如下：
/*
定义了应用于段落的样式：
字体大小：36
颜色：红色
*/
p{
font-size: 36px;
color: #0dff11;
}
CSS中也可以使用注释，形式为/*...........*/
然后在需要使用这些样式的HTML文件中引入该样式列表文件
当样式需要应用于很多页面时，外部样式表将是理想的选择，在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表，浏览器会从文件 style.css 中读到样式声明，并根据它来格式化文档。注意：<link> 标签中 rel="stylesheet" type="text/css" 是固定代码格式，不可更改。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css"href="css/E102-01-02.css"/>
</head>
外部样式使得内容与表现形式彻底分离，有利于分工合作及维护。可在多个HTML中引用。
(4)、样式优先级
样式优先级，也可以称为层叠次序，即同一个 HTML 元素不止被一个样式定义时，会优先使用哪个样式。一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中：
内联样式 > 内部样式 > 外部样式
内联样式（在 HTML 元素内部）拥有最高的优先权，即优先采用在元素内部定义的样式信息，然后是内部样式表（位于 <head> 标签内部），最后是外部样式表中的样式声明，浏览器中的样式声明（缺省值）同外部样式处于同一层次。
优先级的顺序是有一个前提的，即内联样式、内部样式、外部样式表中 CSS 样式是在的相同权值的情况下。
但是内部样式 > 外部式也有一个前提，即内部样式的位置一定在外部样式的后面。
CSS 颜色
CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义。对光源进行设置的最低值可以是 0（十六进制 00）。最高值是 255（十六进制 FF）。
十六进制值使用三个双位数来编写，并以 # 符号开头。
可以用以下方法来规定 CSS 中的颜色：
十六进制色
RGB 颜色
RGBA 颜色
HSL 颜色
HSLA 颜色
预定义/跨浏览器颜色名
1.十六进制颜色
所有浏览器都支持十六进制颜色值。
十六进制颜色是这样规定的：#RRGGBB，其中的 RR（红色）、GG（绿色）、BB（蓝色）十六进制整数规定了颜色的成分。所有值必须介于 0 与 FF 之间。
举例说，#0000ff 值显示为蓝色，这是因为蓝色成分被设置为最高值（ff），而其他成分被设置为 0。
<p style="color: HSLA(120,50%,50%,0.4)">HSLA颜色</p>
2.RGB 颜色
所有浏览器都支持 RGB 颜色值。
RGB 颜色值是这样规定的：rgb(red, green, blue)。每个参数 (red、green 以及 blue) 定义颜色的强度，可以是介于 0 与 255 之间的整数，或者是百分比值（从 0% 到 100%）。
举例说，rgb(0,0,255) 值显示为蓝色，这是因为 blue 参数被设置为最高值（255），而其他被设置为 0。
同样地，下面的值定义了相同的颜色：rgb(0,0,255) 和 rgb(0%,0%,100%)。
<p style="color: HSLA(120,50%,50%,0.4)">HSLA颜色</p>
RGBA 颜色
RGBA 颜色值得到以下浏览器的支持：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。
RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。
RGBA 颜色值是这样规定的：rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。
<p style="color: HSLA(120,50%,50%,0.4)">HSLA颜色</p>
4.HSL 颜色
HSL 颜色值得到以下浏览器的支持：IE9+、Firefox、Chrome、Safari 以及 Opera 10+。
HSL 指的是 hue（色调）、saturation（饱和度）、lightness（亮度） - 表示颜色柱面坐标表示法。
HSL 颜色值是这样规定的：hsl(hue, saturation, lightness)。
Hue 是色盘上的度数（从 0 到 360） - 0 (或 360) 是红色，120 是绿色，240 是蓝色。Saturation 是百分比值；0% 意味着灰色，而 100% 是全彩。Lightness 同样是百分比值；0% 是黑色，100% 是白色。
<p style="color: HSLA(120,50%,50%,0.4)">HSLA颜色</p>
5.HSLA 颜色
HSLA 颜色值得到以下浏览器的支持：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。
HSLA 颜色值是 HSL 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。
HSLA 颜色值是这样规定的：hsla(hue, saturation, lightness, alpha)，其中的 alpha 参数定义不透明度。alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。
<p style="color: HSLA(120,50%,50%,0.4)">HSLA颜色</p>
6.预定义颜色
Css提供了一些常用的预定义颜色，比如red、green、blue等
<p style="color:red)">预定义颜色表现形式</p>
1.em：相对长度单位。相对于当前对象内文本的字体尺寸。
如当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
2.Vh:就是当前屏幕可见高度的1%，也就是说
height:100vh == height:100%;
但是有个好处是当元素没有内容时候，设置height:100%该元素不会被撑开，
但是设置height:100vh，该元素会被撑开屏幕高度一致。
3.Vw:就是当前屏幕宽度的1%
补充一句，当设置width:100%，被设置元素的宽度是按照父元素的宽度来设置，
但是100vw是相对于屏幕可见宽度来设置的，所以会出现50vw 比50%大的情况
絶対単位：px,in,cm,mm
相对单位：em,%,vh,vw
扫一扫
2933
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
