本文共 2840 字,大约阅读时间需要 9 分钟。
由发表在
在Web早期样式和内容是不区分的,比如可以通过<bold>
标签来显示加粗字体。随着页面内容的丰富,浏览器性能的提高,内容和样式的耦合使得HTML文件难以理解和维护。CSS的出现正是为了将样式分离到独立的文件中。
(Cascading Style Sheets,CSS),又称串样式列表、层次结构式样式表文件,一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的计算机语言,由W3C定义和维护。
最初主流浏览器为了显示更丰富的web文档,不断地将新的标签和属性添加到HTML标签中。这最终使得文档内容与文档样式偶合在一起,难以创建内容清晰的文档。为了解决这个问题,万维网联盟在 HTML 4.0 之外提出层叠样式表(CSS),使用CSS完成样式与内容的分离。
样式与内容分离是计算机软件开发中的一条重要原则。不仅可以更清晰地分别表达样式或者内容,更重要的是这一分离使得二者不再耦合,样式变得可复用、组件化。
我们知道HTML文件中根节点是<html>
标签,它包含<head>
和<body>
。我们在<head>
中可以引入外部的样式文件,文件中的样式将被应用到当前HTML。例如在上一章中的hello.html
中引入我们写好的hello.css
:
引入前后的变化如下图:
除了在<head>
中引入外部CSS文件,还有两种方式可以引入样式:
设置标签的style
属性,例如:
Strawberry
在<html>
的任何地方,添加<style>
标签,语法同外部CSS文件。例如:
在实际项目中,一般在<head>
引入外部样式文件。相比于上述两种方式,样式文件的分离:
这是一个简单的 CSS 文件,先不必在意其细节,大致观察一下CSS的语法。
div p{ padding-left: 20px;}body img, body div{ float: left;}.avatar{ width: 100px; height: 100px;}
可以观察到上述文件分为3部分内容,每一内容都包含一行逗号分隔的字符串、紧接着的一组大括号、以及大括号内的内容。
“特性”由“属性”(property)和“值”(value)组成,以冒号分隔:
类型选择器是最常用的CSS选择器,用于选择指定类型的HTML标签。请看:
body{ margin: 50px;}div p{ padding-left: 20px;}body img, body div{ float: left;}
body
:为50像素;body
下的p
:为20像素;body
下的img
和body
下的div
:向左。现在页面便有了边距,并且图片和下面的文字排成了一行:
类选择器用于选择指定class
的HTML标签,在CSS库中很常见。首先需要给HTML标签设置class
:
然后在CSS中用.
来选择对应的类:
.avatar{ width: 100px; height: 100px; border-radius: 50px;}
我们设置<img>
的长和高使之变成矩形,再把边框圆角设为半边长,此时图片就变成了圆形:
ID选择器用于选择指定id(这是任何HTML标签都可以有的属性,其定义方式见下面的代码)的HTML标签,常用于自定义样式。同样地,先给HTML标签设置id
:
i am a little, cute catie...
在CSS中使用ID选择器:
#subtitle{ font-style: italic; color: grey;}
这样便可以改变h2
的字体和颜色了:
顾名思义,伪类选择器用于选择伪类。伪类(如:hover
,:focus
)是浏览器生成的,不出现在HTML文件中,主要用于标识用户操作造成的元素状态改变。
例如鼠标悬停时,鼠标所在的元素便会拥有:focus
伪类。继续给.avatar
类添加一个伪类:
.avatar:hover{ filter: blur(20px); -webkit-filter: blur(5px); cursor: pointer;}
在鼠标悬停在图片上时:
-webkit-
是一种CSS前缀,用来支持webkit
核心的浏览器;
请使用 Chrome 内核的浏览器!鉴于优秀的兼容性和对HTML5、CSS3的支持,请您在整个课程的学习过程中都使用Chrome浏览器。
说起CSS前缀,一般CSS属性名都是以字母起始的,它们由W3C标准化。浏览器厂商为了支持一些新的尚未标准化的特性,会提供一些额外的CSS属性。这些属性都会添加该厂商定义的前缀。有四种常见的CSS前缀:
-moz-
:支持Firefox-webkit-
:支持Safari、Chrome-o-
:支持Opera-ms-
:支持Internet Explorer事实上CSS共有5种基本选择器和2种伪类选择器。
h1
,p
等):用于选择指定类型的HTML标签;.classname
):用于选择指定class的HTML标签;#idname
):用于选择指定id的HTML标签;*
):用于选择所有类型的HTML标签;属性选择器([foo='bar']
):用于选择某属性为指定值的HTML标签;
属性选择器 用来选择特定属性值的元素,例如div[class=avatar]
可以选择class
属性为avatar
的<div>
元素,当然HTML元素的属性很多,属性选择器可以匹配任何属性。
属性选择器还支持更复杂的匹配,例如
[name^="sz_"]
表示属性name
的值具有前缀:sz_
。
:before
,:first-letter
,用于向某些选择器设置特殊效果,以实现复杂的样式。组合选择符 可描述元素之间的层级关系,例如:
A > B
将会选择A
下一层的元素B
。如果以空格间隔,则会匹配任何一级的子元素。
更多CSS选择器的信息可参考:。
更多文章请访问
转载地址:http://hjjii.baihongyu.com/