CSS 指层叠样式表 (Cascading Style Sheets),是一种用来表现 HTML 文档样式的语言,样式定义如何显示 HTML 元素,是能够真正做到网页表现与结构分离的一种样式设计语言。样式通常存储在样式表中,外部样式表通常存储在 CSS 文件中,多个样式定义可层叠为一。
CSS 样式表极大地提高了工作效率:样式通常保存在外部的 .css 文件中,通过仅仅编辑一个简单的 CSS 文档,外部样式表有能力同时改变站点中所有页面的布局和外观。
CSS 创建样式表有三种方法:内联样式、内部样式、外部样式。
(1)内联样式
内联样式也叫行内样式或者行间样式,即在相关标签内使用样式(style)属性定义。如下:
内联式演示
由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。因此需要慎用这种方法,例如当样式仅需要在一个元素上应用一次时,可以使用内联样式。要使用内联样式,需要在相关的标签内使用样式属性定义,style 属性可以包含任何 CSS 属性。
将样式定义在style属性中。内容和表现形式高度耦合,维护困难,不利于分工合作。
只能应用于一个标签
(2)内部样式
内部样式也叫内嵌样式,即在文档中创建内嵌的样式表,需要使用
内联式演示
内部样式的演示1
内部样式的演示2
在
标签中通过标签来定义内容和表现形式的耦合程度降低了,但都还是在HTML文件中,没有实现完全分离。
定义的样式只能在当前页面使用
当单个文档需要特殊的样式时,就应该使用内部样式表。
(3)外部样式表
外部样式也叫做外联样式,即使用 标签链接到外部样式表,
首先需要定义一个样式表文件如下:
/*
定义了应用于段落的样式:
字体大小:36
颜色:红色
*/
p{
font-size: 36px;
color: #0dff11;
}
CSS中也可以使用注释,形式为/*...........*/
然后在需要使用这些样式的HTML文件中引入该样式列表文件
当样式需要应用于很多页面时,外部样式表将是理想的选择,在使用外部样式表的情况下,可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表,浏览器会从文件 style.css 中读到样式声明,并根据它来格式化文档。注意: 标签中 rel="stylesheet" type="text/css" 是固定代码格式,不可更改。
外部样式使得内容与表现形式彻底分离,有利于分工合作及维护。可在多个HTML中引用。
(4)、样式优先级
样式优先级,也可以称为层叠次序,即同一个 HTML 元素不止被一个样式定义时,会优先使用哪个样式。一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中:
内联样式 > 内部样式 > 外部样式
内联样式(在 HTML 元素内部)拥有最高的优先权,即优先采用在元素内部定义的样式信息,然后是内部样式表(位于 标签内部),最后是外部样式表中的样式声明,浏览器中的样式声明(缺省值)同外部样式处于同一层次。
优先级的顺序是有一个前提的,即内联样式、内部样式、外部样式表中 CSS 样式是在的相同权值的情况下。
但是内部样式 > 外部式也有一个前提,即内部样式的位置一定在外部样式的后面。
CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义。对光源进行设置的最低值可以是 0(十六进制 00)。最高值是 255(十六进制 FF)。
十六进制值使用三个双位数来编写,并以 # 符号开头。
可以用以下方法来规定 CSS 中的颜色:
十六进制色
RGB 颜色
RGBA 颜色
HSL 颜色
HSLA 颜色
预定义/跨浏览器颜色名
1.十六进制颜色
所有浏览器都支持十六进制颜色值。
十六进制颜色是这样规定的:#RRGGBB,其中的 RR(红色)、GG(绿色)、BB(蓝色)十六进制整数规定了颜色的成分。所有值必须介于 0 与 FF 之间。
举例说,#0000ff 值显示为蓝色,这是因为蓝色成分被设置为最高值(ff),而其他成分被设置为 0。
HSLA颜色
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%)。
HSLA颜色
RGBA 颜色
RGBA 颜色值得到以下浏览器的支持:IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。
RGBA 颜色值是 RGB 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不透明度。
RGBA 颜色值是这样规定的:rgba(red, green, blue, alpha)。alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字。
HSLA颜色
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% 是白色。
HSLA颜色
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(完全不透明)的数字。
HSLA颜色
6.预定义颜色
Css提供了一些常用的预定义颜色,比如red、green、blue等
预定义颜色表现形式
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