这是全栈数据工程师养成攻略系列教程的第二十期:20 Web基础 网页的血肉CSS。
HTML决定了网页中包含哪些内容,而CSS则决定了这些内容所呈现的样式。
什么是CSS
CSS全拼是Cascading Style Sheets,即层叠样式表。之所以将CSS比作网页的血肉,是因为CSS决定了网页中的元素以何种样式呈现,例如页面内容的整体布局、DOM元素的宽度和高度、标签文字的大小和颜色等。CSS可以使原本单调难看的DOM元素变得灵动而美观,CSS3中添加的一些新功能更是可以进一步增强网页的动画效果和感染力。
在Chrome浏览器中网页元素上打开开发者工具,Elements标签页下左半部分中会自动高亮对应的DOM元素,右半部分中则会显示该元素对应的全部CSS样式。
基本结构
CSS语法的基本结构由两部分组成:选择器(selector)、样式(style)。选择器指定了CSS作用的目标DOM元素,而样式决定了在目标元素上应用何种样式,包括样式名(property)和样式值(value)。
举例来说,如果希望改变页面中全部一级标题以及段落的字体大小和颜色,使用以下CSS即可。选择器为h1
和p
,即直接使用目标DOM元素的名称,样式由大括号括起来,里面可以包含一行或多行样式,每行样式使用key: value
即键值对的形式指定并且以分号结束。这里将字体大小即font-size
分别设置为24和20,单位为像素px,字体颜色设置为蓝色和红色。
h1 {
font-size: 24px;
color: blue;
}
p {
font-size: 20px;
color: red;
}
使用CSS
使用CSS的方法主要有三种:
- 引入外部.css文件;
- 在HTML中定义CSS;
- 在DOM元素中使用内联CSS。
在我的Github上全栈数据工程师养成攻略的项目中,data文件夹里提供了一个template.html
,里面包含以下内容,可以在此基础上进一步编写代码。其中的六个meta
标签定义了网页的一些基本信息,title
标签用于设置网页的标题,而rel="shortcut icon"
的link
标签可用于指定网页所使用的浏览器图标。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<link rel="shortcut icon" href="">
</head>
<body>
</body>
</html>
第一种方法是新建一个.css文件,例如style.css
,在里面编写所需的CSS代码,就像之前设定h1
和p
的样式一样,然后在HTML的head
中用link
标签引入写好的样式文件。rel="stylesheet"
指定了引入的是CSS样式文件,href
属性则使用相对路径指明样式文件所在位置。
<link rel="stylesheet" href="style.css">
第二种方法直接在HTML中写CSS代码,需要使用style
标签包含起来,style
标签可以放在HTML中的任意位置,不过推荐放在head
标签中。
<style>
h1 {
font-size: 24px;
color: blue;
}
p {
font-size: 20px;
color: red;
}
</style>
第三种方法直接在DOM元素的开始部分中通过style
属性指定CSS样式。
<h1 style="font-size:30px;color:green;">这里是一级标题</h1>
<p style="font-size:24px;background-color:blue;">这里是一段内容</p>
以上三种方法都可以对目标DOM元素应用指定的CSS样式,并且优先级依次提高,即当定义同一条CSS属性时,后者中的属性值会覆盖前者。
因此,如果CSS样式较多,不妨选择引入外部.css文件,从而实现CSS代码和HTML代码分离,更加便于开发和维护;如果CSS样式较少,不妨直接选择在HTML中定义CSS,避免新建过多项目文件。如果希望将样式应用于多个DOM元素,使用第一种和第二种方法都更为便捷和高效;如果希望仅将样式应用于某一个DOM元素,则使用第三种方式更加直接简单。
常用选择器
CSS中支持多种选择器,使得可以根据需求从不同的维度进行选择,灵活地控制网页中DOM元素的样式。
最简单的选择器是DOM元素的标签名称,例如我们之前使用的h1
和p
,这类选择器适用于同时更改某一种DOM元素的样式。
也可以使用id作为选择器,适用于只控制某一个DOM元素的样式。应当注意,每个id在整个网页中都应只出现一次,以下将id为main
的对应元素color
值设为red
。
#main {
color: red;
}
为了使样式生效,在HTML的body
中需要有对应的DOM元素。
<p id="main">这是一段内容</p>
还可以使用class作为选择器,适用于同时控制多个DOM元素的样式,只需将它们设为同一个class即可,以下将class为content
的全部元素color
值都设为red
。
.content {
color: red;
}
这样一来,在HTML中的DOM元素,如果class等于content
,都会受到CSS样式的作用。
<h1 class="content">这是一级标题</h1>
<h2 class="content">这是二级标题</h2>
<p class="content">这是一段内容</p>
标签名、id、class可以组合使用,例如h1#main
表示id为main的h1标签,p.content
表示class为content的p标签。
如果某个DOM元素符合多个选择器,则会对CSS样式进行合并覆盖操作。不同的属性名进行合并,其对应的属性值叠加作用于DOM元素之上;相同的属性名进行覆盖,仅应用优先级最高的选择器所对应的属性值。标签名、class、id选择器优先级依次提高,并且它们组合之后的选择器优先级更高。总而言之,选择器越具体越细化、条件越严格,则对应的优先级越高。
除此之外,还有后代选择器、子元素选择器、相邻兄弟选择器、普通相邻兄弟选择器四种组合选择器,举例来说:
-
h1 p
为后代选择器,表示h1
标签中的p
标签,样式作用于所有符合要求的p
; -
h1>p
为子元素选择器,表示h1
标签直接子元素中的p
标签,h1
必须是p
的直接父元素,限制条件比后代选择器更严格,样式作用于所有符合要求的p
; -
h1+p
为相邻兄弟选择器,表示和h1
标签处于同一层级并且直接相邻的p
标签,样式作用于所有符合要求的p
,至多一前一后两个; -
h1~p
为普通相邻兄弟选择器,表示和h1
标签处于同一层级的全部p
标签,两者处于同一级别即可,限制条件不及相邻兄弟选择器严格,样式作用于所有符合要求的p
。
从以上选择器的概念中也可以看出DOM的作用,DOM的层级树形结构可以清楚地描述HTML标签之间的父代、后代、子代、兄弟等关系,只有理解了DOM的概念和各类选择器的定义,才能根据需求快速选出最恰当而简洁的选择器。另外,以上四种组合选择器也可以和标签名、id、class三种基础选择器进行自由组合,从而实现更加复杂和灵活的选择器。
最后还有一类称为伪类的选择器,这里介绍其中最常用的一种:hover
,表示当鼠标悬浮时才生效的样式。相对于其他几种选择器,:hover
所定义的样式并非静态,而是响应鼠标悬浮事件才会生效,因此可以用来实现一些动态交互效果。
h1:hover {
color: red;
}
常用样式
CSS中的常用样式包括背景、大小、文本、边距、边框、显示、定位等几大类。
背景指DOM元素所显示的背景。任何DOM元素都可以设置背景样式,例如文字、按钮等,但我们一般仅为大范围的DOM元素设置背景,例如整个html
或body
等,从而实现一种底层衬托的效果。
-
background-color
:用于设置背景颜色,RGB、十六进制、颜色名都可以; -
background-image
:用于设置背景图片,需要用url()
函数提供图片链接,使用相对路径或互联网上可访问的图片链接都行; -
background-repeat
:当图片不足以覆盖DOM元素时,是否重复平铺; -
background-size
:使用图片作为背景时,背景图片的大小; -
background-position
:使用图片作为背景图,如果图片大于背景,优先显示图片的哪一块。
body {
background-color: rgb(150, 234, 213);
background-image: url(http://zhanghonglun.cn/blog/wp-content/uploads/2015/09/bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
如果使用图片作为背景,则在不影响清晰度的前提下尽量选择小文件图片,避免加载缓慢影响用户体验。同时需要恰当地组合设置以上样式,使得图片背景对于不同分辨率的浏览器都能达到满意的展示效果。
每个DOM元素都有自己的宽和高,即width
和height
。对于文本类标签则可以设置字体大小,即font-size
。大小的单位有像素px
和百分比%
等,前者为绝对值,后者为相对于父元素的相对值。默认情况下,html
的宽和高都是浏览器大小的100%。DOM元素的默认高度为其所占内容所需的高度,默认宽度则取决于是块级元素还是内联元素,前者宽度默认为父元素的100%,而后者宽度默认为其所占内容所需的宽度。
文本类标签可设置的样式包括:
- color:文本的颜色,RGB、十六进制、颜色名都可以;
- text-align:文本居向,可以是
left
、right
或center
; - text-decoration:文本是否有下划线,设为
none
可以取消掉链接的默认下划线; - text-indent:文本首行缩进宽度;
- line-height:文本段落的行距;
- font-size:文本的大小,一般以像素
px
为单位; - font-family:文本的字体,可以同时设置多个值,浏览器将逐一尝试直到字体可用。
h1 {
color: #ddd;
text-align: center;
text-decoration: none;
text-indent: 1em;
line-height: 1.2;
font-size: 22px;
font-family: Microsoft Yahei;
}
边距主要包括margin
和padding
,前者是DOM元素四周外部的边距,后者是DOM元素四周内部的边距,默认情况下DOM元素的宽高包括padding
但不包括margin
。边距的单位可以是像素px
或百分比%
,如果提供一个值则代表上下左右四个方向,提供两个值则第一个值代表上下、第二个值代表左右,提供四个值则依次代表上、右、下、左。
p {
margin: 30px 40px;
padding: 5px;
}
margin
和padding
之间还存在一个边框即border
,可以设置边框的粗细、线型、颜色、圆角和阴影。
div {
border: 1px solid #ddd;
border-radius: 4px;
box-shadow: 1px 1px 1px rgba(20, 20, 20, 0.4);
}
margin
、border
和padding
构成了DOM元素的盒模型(Box Model)。在开发者工具Element标签页下,右半部分底部即可看到当前高亮元素所对应的盒模型,从外到内依次是橙色的margin
、黄色的border
、绿色的padding
和蓝色的内容部分。
display
属性可以决定DOM元素的显示方式,可以设置为inline
、block
、inline-block
等,分别对应内联元素、块级元素、内联块级元素,使用以下代码即可将span
设置为块级元素。
<span style="display:block;">块级元素span</span>
<span style="display:block;">块级元素span</span>
position
即定位,是CSS中非常重要的一项属性,决定了HTML页面中DOM元素的位置和布局。DOM元素会遵循默认的文档流进行排版,即从上到下依次排列,并且都占据相应的空间。块级元素单独占据一行,内联元素排列于同一行中直到超出浏览器宽度,并且所有DOM元素默认居左对齐。如果我们希望网页内容按照预期的设计进行布局,例如将DOM元素居中显示、在特定位置添加一个按钮或图标等,则需要灵活地使用多种定位方式。
position
可取的值包括static
、fixed
、relative
、absolute
和float
,其中static
即为默认遵循的文档流定位方式。
fixed
是指固定在浏览器窗口中的某个位置,需要结合top
、bottom
、left
、right
使用,例如将DOM元素固定在相对浏览器窗口上端40个像素、左端50个像素的位置。
p {
position: fixed;
top: 40px;
left: 50px;
}
relative
同样需要结合top
等属性使用,不同的是参照物不是浏览器窗口的四端,而是static
定位方式所对应的默认位置,因此可以理解为在默认的位置上叠加一些偏移。
absolute
即绝对定位,需要结合top
等属性使用,以其直接父元素为参照物进行定位。可以将某一个DOM元素A设为position:absolute
,同时将其直接父元素B设为position:relative
,从而可以自由任意地将A放置在B中的任何位置。
float
即浮动定位,可以将一个或多个DOM元素浮动至浏览器窗口的最左端或最右端。浮动定位虽然很自由,可以实现瀑布流之类的布局效果,但是破坏了默认的文档流,并且在操作不当时容易导致意料之外的结果,因此并不推荐。
<h2 style="float:right;">浮动的内容</h2>
以上定位方式中,static
和relative
对应的DOM元素占据相应的页面空间,而fixed
、absolute
、float
对应的DOM元素不占据任何空间,只是叠加在已有的页面内容上,并且可以通过z-index
属性设置多元素叠加时的显示顺序。
CSS3
CSS3是CSS的最新版本,引入了许多更为丰富的新属性,并且已经被大多数主流浏览器所支持,例如渐变、变换、过渡、动画等,还包括之前提及的边框圆角和阴影。如果说CSS给DOM元素赋予了丰富的样式,那么CSS3带来的则是更为炫酷的特效。
渐变包括线性渐变和径向渐变,可以作为DOM元素的背景效果,不过比较鸡肋,在实际情况中使用并不多。
transform
即变换,包括平移、旋转、缩放、斜切等二维变换,以及3D旋转、3D缩放、透视等3D变换。可以将变换直接应用于DOM元素,用于修改其显示效果,也可以仅将变换应用于被鼠标悬浮下的状态,从而实现鼠标悬浮动画效果。需要注意的是,CSS3属性需要在属性名前加上相应的前缀,用于适应不同的浏览器。
/*鼠标悬浮后变换*/
#transform {
width: 200px;
height: 120px;
}
#transform:hover {
cursor: pointer;
/* Safari and Chrome */
-webkit-transform: rotate(180deg);
/* Firefox */
-moz-transform: rotate(180deg);
/* IE */
-ms-transform: rotate(180deg);
/* Opera */
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
另一项极为常用的CSS3属性是transition
即过渡,用于在CSS属性变化时提供一段过渡效果。例如以上的鼠标悬浮变换,结合使用过渡可以实现更好的交互体验。
#transform {
width: 200px;
height: 120px;
/* 过渡 */
-webkit-transition: -webkit-transform .4s;
-moz-transition: -moz-transform .4s;
-ms-transition: -ms-transform .4s;
-o-transition: -o-transform .4s;
transition: transform .4s;
}
#transform:hover {
cursor: pointer;
/* Safari and Chrome */
-webkit-transform: rotate(180deg);
/* Firefox */
-moz-transform: rotate(180deg);
/* IE */
-ms-transform: rotate(180deg);
/* Opera */
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
transition
后面可以提供4个参数,分别表示需要过渡的CSS属性、过渡持续时间、过渡的时间变化曲线、过渡效果开始的延时时间,后两项可以省略,默认值分别为线性过渡和无延时。需要注意,所有的CSS3属性前都需要加上相应的浏览器前缀。由于transition
是DOM元素始终具备的属性,所以应当直接应用于DOM元素,而不是仅应用于悬浮状态下。
animation
即动画,可以为DOM元素添加丰富而流畅的动画效果。使用之前需要先用@keyframes
定义一个动画,其中包括多个关键帧,用于说明动画的不同时间节点所呈现的属性。以下动画定义了四个关键帧,不同帧所对应的位置和背景颜色不同。这样一来,动画运行之后便会从每一帧过渡到下一帧,直到回到最初的状态。
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
定义好动画之后再使用animation
属性将动画绑定至DOM元素即可。animation
可以使用6个参数,分别对应动画的名称、动画持续时间、动画的时间曲线、动画开始的延时、动画播放的轮数、相邻轮数之间的动画方向,后四项可以省略,默认值分别为线性动画、无延时、播放1轮、正常播放。
#animation {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}
关于CSS3的更多内容,可以参考以下链接:http://www.runoob.com/css3/css3-tutorial.html。
CSS实例
HTML中button
的默认样式十分难看,现在让我们用CSS的强大功能对其进行美化,并添加鼠标悬浮效果。
首先,给button
周围一些边距,将背景色设为透明,设置边框样式,并将字体调大一些。
button {
padding: 16px 20px;
margin: 10px;
outline: none;
background-color: transparent;
border: 1px solid #000;
font-size: 30px;
}
然后,通过开发者工具交互地调整颜色,得到一个看起来还不错的颜色#6ebade
,作为边框和文本的颜色,并设置边框圆角和文本字体,同时加上过渡。
button {
padding: 16px 20px;
margin: 10px;
outline: none;
background-color: transparent;
border: 1px solid #6ebade;
font-size: 30px;
color: #6ebade;
border-radius: 5px;
font-family: Microsoft Yahei;
-webkit-transition: color, background-color .4s;
-ms-transition: color, background-color .4s;
-moz-transition: color, background-color .4s;
-o-transition: color, background-color .4s;
transition: color, background-color .4s;
}
最后,添加鼠标悬浮后的样式,包括改变鼠标样式、背景色和文本颜色。
button:hover {
background-color: #6ebade;
color: #fff;
cursor: pointer;
}
补充学习
CSS的基本内容无非选择器和样式,但由于选择器类型丰富,选择器之间也可以自由灵活地进行组合,CSS可设置的样式属性名非常之多,每个属性名又对应许多种可选的属性值,这些都使得CSS相对HTML而言更加博大精深。同样的HTML、不同的CSS,最后呈现的效果可能差之千里。只有通过不断的练习,观察不同CSS代码组合之后的效果,才能更好地感受和理解每一项CSS属性的作用。以下链接提供了关于CSS的更多内容,http://www.runoob.com/css/css-intro.html,里面提供了更为详细和系统的讲解,并结合大量实例代码加以巩固,推荐完整地浏览和尝试一遍。
视频链接:
网友评论