层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种 样式表 语言,用来描述 HTML 或 XML(包括如 SVG、MathML、XHTML 之类的 XML 分支语言)文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。
CSS 是开放网络的核心语言之一,由 W3C 规范 实现跨浏览器的标准化。CSS节省了大量的工作。 样式可以通过定义保存在外部.css文件中,同时控制多个网页的布局,这意味着开发者不必经历在所有网页上编辑布局的麻烦。CSS 被分为不同等级:CSS1 现已废弃, CSS2.1 是推荐标准, CSS3 分成多个小模块且正在标准化中。
用于设置网页的样式及布局——比如,可以更改内容的字体、颜色、大小以及间距,或是将其分列,或是添加动画及赋予内容其它装饰性的特征。
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
- 规则
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
- selector {declaration1; declaration2; ... declarationN }
将CSS属性设置为特定值是CSS语言的核心功能。CSS引擎计算哪些声明应用于页面的每个元素,以便适当地布局和样式它。
整个结构称为 规则集(通常简称“规则”),各部分释义如下:
- 选择器(Selector)
HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素(在这个例子中就是 p 元素)。要给不同元素添加样式只需要更改选择器就行了。
- 声明(Declaration)
一个单独的规则,如 color: red; 用来指定添加样式元素的属性。
- 属性(Properties)
改变 HTML 元素样式的途径。(本例中 color 就是 <p> 元素的属性。)CSS 中,由编写人员决定修改哪个属性以改变规则。
- 属性的值(Property value)
在属性的右边,冒号后面即属性的值,它从指定属性的众多外观中选择一个值(我们除了 red 之外还有很多属性值可以用于 color )。
- 注意其他重要的语法:
- 每个规则集(除了选择器的部分)都应该包含在成对的大括号里({})。
- 在每个声明里要用冒号(:)将属性与属性值分隔开。
- 在css中,属性和值都是区分大小写的。
- 在每个规则集里要用分号(;)将各个声明分隔开。
如果要同时修改多个属性,只需要将它们用分号隔开,就像这样:
p {
color: red;
width: 500px;
border: 1px solid black;
}
重要事项:如果属性未知或某个值对给定属性无效,则声明被视为无效,并被浏览器的CSS引擎完全忽略。
重要:在CSS(和其他网络标准)中,当语言表达存在不确定性时,美国的拼写被视作公认的标准。例如,颜色应该始终拼写为color。colour是不起作用的。
CSS中使用的每个属性都允许拥有一个或一组值。
-
-
- CSS的值
-
在CSS规范上您将能够发现值的存在,因为它们将被尖括号包围,如<color>或<length>。当您看到值<color>对特定属性有效时,这意味着您可以使用任何有效的颜色作为该属性的值,如 <color>参考页面所列。
注意:您还将看到被称为数据类型的CSS值。这些术语基本上是可以互换的——当你在CSS中看到一些被称为数据类型的东西时,它实际上只是一种表示值的奇特方式。
注意: 是的,CSS值倾向于使用尖括号表示,以区别于CSS属性(例如color属性和 <color> 数据类型)。您可能还会混淆CSS数据类型和HTML元素,因为它们都使用尖括号,但这不太可能——它们在完全不一样的上下文中使用。
在下面的例子中,我们使用关键字设置标题的颜色,使用rgb()函数设置背景:
h1 {
color: black;
background-color: rgb(197,93,161);
}
CSS中的值是一种定义允许子值集合的方法。这意味着如果您看到<color>是有效的,那么您就不需要考虑可以使用哪些不同类型的颜色值—关键字、十六进制值、rgb()函数等等。假设浏览器支持这些可用的<color>值,则可以使用它们任意一个。
您可能会发现自己在CSS中使用了各种数值数据类型。 以下全部归类为数值:
长度
最常见的数字类型是<length>,例如10px(像素)或30em。CSS中有两种类型的长度——相对长度和绝对长度。重要的是要知道它们之间的区别,以便理解他们控制的元素将变得有多大。
绝对长度单位
以下都是绝对长度单位——它们与其他任何东西都没有关系,通常被认为总是相同的大小。
这些值中的大多数在用于打印时比用于屏幕输出时更有用。例如,我们通常不会在屏幕上使用cm。惟一一个您经常使用的值,估计就是px(像素)。
相对长度单位
相对长度单位相对于其他一些东西,比如父元素的字体大小,或者视图端口的大小。使用相对单位的好处是,经过一些仔细的规划,您可以使文本或其他元素的大小与页面上的其他内容相对应。下表列出了web开发中一些最有用的单位。
ems and rems
em和rem是您在从框到文本调整大小时最常遇到的两个相对长度。了解这些方法是如何工作的以及它们之间的区别是很有意义的,尤其是当您开始学习更复杂的主题时,比如样式化文本或CSS布局。下面的示例提供了一个演示。
HTML是一组嵌套的列表—我们总共有三个列表,并且两个示例都有相同的HTML。唯一的区别是第一个类具有ems,第二个类具有rems。
首先,我们将16px设置为<html>元素的字体大小。
概括地说,在排版属性中 em 单位的意思是“父元素的字体大小”。带有ems类的<ul>内的<li>元素从它们的父元素中获取大小。因此,每一个连续的嵌套级别都会逐渐变大,因为每个嵌套的字体大小都被设置为1.3em—是其父嵌套字体大小的1.3倍。
概括地说,rem单位的意思是“根元素的字体大小”。(“根em”的rem标准。)<ul>内的<li>元素和一个rems类从根元素(<html>)中获取它们的大小。这意味着每一个连续的嵌套层都不会不断变大。
但是,如果您在CSS中更改<html>字体大小,您将看到所有其他相关内容都发生了更改,包括rem和em大小的文本。
<ul class="ems">
<li>One</li>
<li>Two</li>
<li>Three
<ul>
<li>Three A</li>
<li>Three B
<ul>
<li>Three B 2</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="rems">
<li>One</li>
<li>Two</li>
<li>Three
<ul>
<li>Three A</li>
<li>Three B
<ul>
<li>Three B 2</li>
</ul>
</li>
</ul>
</li>
</ul>
html {
font-size: 26px;
}
.rems {
font-size: 20px;
}
.rems li {
font-size: 1.3rem;
}
百分比
在许多情况下,百分比与长度的处理方法是一样的。百分比的问题在于,它们总是相对于其他值设置的。例如,如果将元素的字体大小设置为百分比,那么它将是元素父元素字体大小的百分比。如果使用百分比作为宽度值,那么它将是父值宽度的百分比。
在下面的示例中,两个百分比大小的框和两个像素大小的框具有相同的类名。这两款相机分别为200px和40%宽。
不同之处在于,第二组两个框位于一个400像素宽的包装器中。第二个200px宽的盒子和第一个一样宽,但是第二个40%的盒子现在是400px的40%——比第一个窄多了!
尝试更改包装器的宽度或百分比值,看看这是如何工作的。
<div class="box px">I am 200px wide</div>
<div class="box percent">I am 40% wide</div>
<div class="wrapper">
<div class="box px">I am 200px wide</div>
<div class="box percent">I am 40% wide</div>
</div>
.wrapper {
width: 400px;
border: 5px solid rebeccapurple;
}
.px {
width: 200px;
}
.percent {
width: 40%;
}
下一个示例以百分比设置字体大小。每个<li>都有80%的字体大小,因此嵌套列表项在从父级继承其大小时将逐渐变小。
li {
font-size: 80%;
}
<ul>
<li>One</li>
<li>Two</li>
<li>Three
<ul>
<li>Three A</li>
<li>Three B
<ul>
<li>Three B 2</li>
</ul>
</li>
</ul>
</li>
</ul>
注意,虽然许多值接受长度或百分比,但也有一些值只接受长度。
数字
有些值接受数字,不添加任何单位。接受无单位数字的属性的一个例子是不透明度属性(opacity ),它控制元素的不透明度(它的透明程度)。此属性接受0(完全透明)和1(完全不透明)之间的数字。
.box {
opacity: 0.6;
}
<div class="wrapper">
<div class="box">I am a box with opacity</div>
</div>
注意: 当您在CSS中使用数字作为值时,它不应该用引号括起来。
在CSS中指定颜色的方法有很多,其中一些是最近才实现的。在CSS中,相同的颜色值可以在任何地方使用,无论您指定的是文本颜色、背景颜色还是其他颜色。
现代计算机的标准颜色系统是24位的,它允许通过不同的红、绿、蓝通道的组合显示大约1670万种不同的颜色,每个通道有256个不同的值(256 x 256 x 256 = 16,777,216)。让我们来看看在CSS中指定颜色的一些方法。
十六进制RGB值
您可能遇到的下一种颜色值类型是十六进制代码。每个十六进制值由一个散列/磅符号(#)和六个十六进制数字组成,每个十六进制数字都可以取0到f(代表15)之间的16个值中的一个——所以是0123456789abcdef。每对值表示一个通道—红色、绿色和蓝色—并允许我们为每个通道指定256个可用值中的任意一个(16 x 16 = 256)。
.one {
background-color: #02798b;
}
.two {
background-color: #c55da1;
}
.three {
background-color: #128a7d;
}
RGB 和 RGBA的值
我们将在这里讨论的第三种方案是RGB。RGB值是一个函数—RGB()—它有三个参数,表示颜色的红色、绿色和蓝色通道值,与十六进制值的方法非常相似。RGB的不同之处在于,每个通道不是由两个十六进制数字表示的,而是由一个介于0到255之间的十进制数字表示的——这有点容易理解。
.one {
background-color: rgb(2, 121, 139);
}
.two {
background-color: rgb(197, 93, 161);
}
.three {
background-color: rgb(18, 138, 125);
}
您还可以使用RGBA颜色——它们的工作方式与RGB颜色完全相同,因此您可以使用任何RGB值,但是有第四个值表示颜色的alpha通道,它控制不透明度。如果将这个值设置为0,它将使颜色完全透明,而设置为1将使颜色完全不透明。介于两者之间的值提供了不同级别的透明度。
.one {
background-color: rgba(2, 121, 139, .3);
}
.two {
background-color: rgba(197, 93, 161, .7);
}
.three {
background-color: rgba(18, 138, 125, .9);
}
HSL 和 HSLA 的值
与RGB相比,HSL颜色模型的支持稍差一些(在旧版本的IE中不支持),它是在设计师们感兴趣之后实现的。hsl() 函数接受色调、饱和度和亮度值作为参数,而不是红色、绿色和蓝色值,这些值的不同方式组合,可以区分1670万种颜色:
- 色调: 颜色的底色。这个值在0和360之间,表示色轮周围的角度。
- 饱和度: 颜色有多饱和? 它的值为0 - 100%,其中0为无颜色(它将显示为灰色阴影),100%为全色饱和度
- 亮度:颜色有多亮? 它从0 - 100%中获取一个值,其中0表示没有光(它将完全显示为黑色),100%表示完全亮(它将完全显示为白色)
.one {
background-color: hsl(188, 97%, 28%);
}
.two {
background-color: hsl(321, 47%, 57%);
}
.three {
background-color: hsl(174, 77%, 31%);
}
就像RGB有RGBA一样,HSL也有HSLA等效物,它使您能够指定alpha通道值。
.one {
background-color: hsla(188, 97%, 28%, .3);
}
.two {
background-color: hsla(321, 47%, 57%, .7);
}
.three {
background-color: hsla(174, 77%, 31%, .9);
}
<image> 数据类型用于图像为有效值的任何地方。它可以是一个通过 url()
函数指向的实际图像文件,也可以是一个渐变。
.image {
background-image: url(star.png);
}
.gradient {
background-image: linear-gradient(90deg, rgba(119,0,255,1) 39%, rgba(0,212,255,1) 100%);
}
<div class="box image"></div>
<div class="box gradient"></div>
注意:<image>还有一些其他可能的值,但是这些都是较新的,并且目前对浏览器的支持很差。
<position> 数据类型表示一组2D坐标,用于定位一个元素,如背景图像(通过 background-position)。它可以使用关键字(如 top
, left
, bottom
, right
, 以及center
)将元素与2D框的特定边界对齐,以及表示框的顶部和左侧边缘偏移量的长度。
一个典型的位置值由两个值组成——第一个值水平地设置位置,第二个值垂直地设置位置。如果只指定一个轴的值,另一个轴将默认为 center
。
.box {
height: 300px;
width: 400px;
background-image: url(star.png);
background-repeat: no-repeat;
background-position: right 40px;
}
<div class="box"></div>
在上面的示例中,我们看到关键字被用作值的地方(例如<color>
关键字,如 red
, black
, rebeccapurple
, and goldenrod
)。这些关键字被更准确地描述为标识符,一个CSS可以理解的特殊值。因此它们没有使用引号括起来——它们不被当作字符串。
在某些地方可以使用CSS中的字符串,在下面的示例中,我们使用非引号括起来的颜色关键字和引号括起来的内容字符串。
.box {
width:400px;
padding: 1em;
border-radius: .5em;
border: 5px solid rebeccapurple;
background-color: lightblue;
}
.box::after {
content: "This is a string. I know because it is quoted in the CSS."
}
<div class="box"></div>
在编程中,函数是一段可重用的代码,可以多次运行,以完成重复的任务,对开发人员和计算机都是如此。函数通常与JavaScript、Python或c++等语言相关联,但它们也以属性值的形式存在于CSS中。我们已经在颜色部分看到了函数的作用——rgb()、hsl()等。用于从文件返回图像的值——url()——也是一个函数。
行为更类似于传统编程语言的值是calc()函数。这个函数使您能够在CSS中进行简单的计算。如果您希望计算出在为项目编写CSS时无法定义的值,并且需要浏览器在运行时为您计算出这些值,那么它特别有用。
例如,下面我们使用calc()使框宽为20% + 100px。20%是根据父容器.wrapper的宽度来计算的,因此如果宽度改变,它也会改变。我们不能事先做这个计算,因为我们不知道父类的20%是多少,所以我们使用calc()来告诉浏览器为我们做这个计算。
.wrapper {
width: 400px;
}
.box {
width: calc(20% + 100px);
}
<div class="wrapper">
<div class="box">My width is calculated.</div>
</div>
外部样式表是指将CSS编写在扩展名为.css 的单独文件中,并从HTML<link> 元素引用它的情况:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
</body>
</html>
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
您可以将css链接到多个页面,从而允许您使用相同的样式表设置所有页面的样式。在大多数情况下,一个站点的不同页面看起来几乎都是一样的,因此您可以使用相同的规则集来获得基本的外观。
内部样式表是指不使用外部CSS文件,而是将CSS放在HTML文件<head>标签里的<style>标签之中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
<style>
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
</body>
</html>
有的时候,这种方法会比较有用(比如你使用的内容管理系统不能直接编辑CSS文件),但该方法和外部样式表比起来更加低效 。在一个站点里,你不得不在每个页面里重复添加相同的CSS,并且在需要更改CSS时修改每个页面文件。
内联样式表存在于HTML元素的style属性之中。其特点是每个CSS表只影响一个元素:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
</head>
<body>
<h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
<p style="color:red;">This is my first CSS example</p>
</body>
</html>
除非你有充足的理由,否则不要这样做!它难以维护(在需要更新时,你必须在修改同一个文档的多处地方),并且这种写法将文档结构和文档表现混合起来了,这使得代码变得难以阅读和理解。将不同类型的代码分开存放在不同的文档中,会让我们的工作更加清晰。