CSS(Cascading Style Sheets,层叠样式表),是开发前端应用必不可少的一个工具。打个比方,HTML5 是身体,那 CSS3 就是穿在身体上的衣服,他让一整个 HTML5 网页变得更美观。下文我们就来整理 CSS~
目录
1. CSS 简介
1.1 CSS 简史
话说在很久以前(比如民国时期),HTML 是单独存在的,跟 CSS 一点关系也没有。但是由于网络的逐渐发展,人们想要用 HTML 写出更多的东西,并且更加美观,于是,HTML2 诞生了(额……)。但是 HTML 添加了很多处理样式的东西之后,变得更加臃肿了。1994 年,哈坤·李提出了结构和样式分离的概念,并与他的好友伯特·波斯一起写出了 CSS。
1995 年,世界第一个 Web 组织 W3C 成立,组织成员们和 CSS 的作者一起标准化了 CSS,也就是 CSS 1.0。同年,CSS 在世界上被广泛使用,并且把 CSS 与 HTML 还有后来的 JavaScript 并称“前端三剑客”。这表明了 CSS 在前端开发时所起的重要性。
1997 年 CSS 2.0 发布,2000 年 CSS 3.0 发布,也就是我们现在常用的 CSS3。(别问我为什么没有 CSS 4.0,你去问 W3C 为什么 4.0 写了 20 年还没写出来)
以上是 CSS 的简史。还有在这要纠正一些同学一下,CSS 并不算是一门编程语言,HTML 也不是(HTML 是标记语言),前端三剑客中只有 JavaScript 属于编程语言。
除此之外 CSS 还有一些扩展模块,如 Less 和 SASS,这些模块对于 CSS 就相当于 C++ 对于 C,功能更强大了。不过我们实际编程一般用不到那么高深,CSS 完全够用。
1.2 CSS 语法
CSS 的语法非常简单,就是简单的 选择器{样式},示例如下:
body{ /* 选择器 */
background-color: white; /* 样式 */
font-size: 16px; /* 也是样式 */
}
而样式的语法就是 属性: 值;,这和 JSON 和 YAML 不能说相似,只能说完全一样啊!只不过注意句尾的分号。所以 CSS 的语法大家完全不用担心。
而如果想在 CSS 里添加注释,则使用 /* 注释内容 */,其中在 /* */ 之间的内容都会被视为注释。
2. CSS 选择器
2.1 选择器简介
刚刚说了 CSS 一整门语言里只有两个东西:选择器和样式,我们先来唠嗑选择器~
选择器,顾名思义就是选择一些东西的工具。在 CSS 中,选择器指定了 CSS 的样式要被作用到哪一个 HTML 元素。
在选择器之前,我们先来看一段 HTML 代码,等一会儿 CSS 会作用在这段 HTML 代码上。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello</title>
</head>
<body>
<h1>Head</h1>
<p id="article1">Article1</p>
<p class="article2and3">Article2</p>
<p class="article2and3">Article3</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
里面有一些属性看不懂没关系,等一会会讲解。这个 HTML 一开始长这样:
如果 HTML 还没学可以看看我之前的那片文章:这里。
我们还要认识一个小样式:把字体变为红色,如下:
color: red;
我感觉这个样式没学过编程的人应该都懂吧……
2.2 类型选择器
类型选择器,顾名思义就是使用标签的类型来选择 HTML 标签。比如 h 标签,p 标签等。它的实现方式非常简单,就是直接使用类型名来当作选择器,如 p{样式}。举个例子:
h1{
color: red;
}
它表明了这个 HTML 文档中所有的 h1 标签都要变成红色。放进浏览器看看效果(同学们由于还没学过 CSS 引入所以先别尝试):
我们再来尝试把所有的 p 标签变为红色:
p{
color: red;
}
丢进浏览器:
效果嘎嘎好~
我们还可以把所有的标签都变成红色,使用 *{样式}:
*{
color: red;
}
效果:
2.3 ID 选择器
id 这个选项大家应该都记得(什么?不记得?没做笔记?),当时使用锚链接的时候用到了这个属性。这里 id 有一个不一样的使用方式:作为选择器。
由于一个标签只能有一个 ID,而且这个 ID 在 HTML 文档中始终唯一,所以 id 是一个天生的选择器。它的语法也很简单:#id名{样式}。之前我们给一个 p 标签定义了 id article1,这时候就可以派上用场了:
#article1{
color: red;
}
丢进浏览器:
2.4 class 选择器
在实际编程中我们很容易遇见这种情况:两个标签想共用一个样式。有人说可以用两个 id 选择器,但是这样太麻烦。这时候我们就可以使用 class 选择器。我们在需要添加样式的标签加上一个属性 class,数值设为 class名(可以设多个:"类名1 类名2 类名3",中间用空格隔开),比如上面的两个 p 标签:
<p class="article2and3">Article2</p>
<p class="article2and3">Article3</p>
class 选择器的语法也很简单:.class名{样式},下面举个例子:
.article2and3{
color: red;
}
丢进浏览器:
2.5 继承选择器
同学们有没有遇见这种情况:想指定 ul 标签下所有的 li 元素,又不想写那么多 class?没关系,继承选择器帮你。继承选择器的语法也非常简单:父标签 子标签{样式},比如下面:
ul li{
color: red;
}
扔进浏览器:
2.6 链接选择器
我们经常会在网页上看到一些链接,当我们鼠标悬浮在链接上面这个链接就会变色。这用到了链接选择器。链接选择器分很多种,如下:
a:link { /* 未访问的链接 */
color: red;
}
a:visited { /* 已访问的链接 */
color: red;
}
a:hover { /* 鼠标悬浮链接 */
color: red;
}
其中 a:hover 鼠标悬浮链接最常用。由于我电脑录屏的问题这里就不上效果了,同学们后面可以自己去尝试~
2.7 其它选择器
CSS 中的选择器远远不止这些,还有结构伪类选择器,组合选择器等,这里由于不常用就不赘述了。想了解可以看下面:
还有如果想两个选择器共用一个样式,可以使用逗号操作符,如下:
h1,p{
color: red;
}
上效果:
2.8 HTML 导入 CSS
很多同学脑子里就问号挺多:前面学了那么多选择器,自己不能用还学它干嘛?这里教大家导入。 一般来说最简单的方式是新建一个 .css 文件,然后把 CSS 代码写进去,最后在 HTML 的 head 标签里引入。引入方式如下:
<!-- 引入语法:<link rel="stylesheet" type="text/css" href="CSS文件名"> -->
<!-- 假设在同目录下创建了一个 style.css 并已经写好了样式 -->
<link rel="stylesheet" type="text/css" href="style.css">
如果你想直接在 HTML 文件里写 CSS 代码,可以使用 style 标签。请注意,使用 style 标签是一种不规范的前端开发方法,破坏了 CSS 结构样式分离的原则。所以我们一般不使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello</title>
<style type="text/css">
/* 这个里面写 CSS 代码,不信你看这个注释的语法 */
h1{
color: red;
}
</style>
</head>
<body>
<h1>Head</h1>
</body>
</html>
还有一种更奇葩的 CSS 导入方法:行内样式。我们直接在标签上加入 style 属性,它的值就是 CSS 代码。这样多好!连选择器都省了(手动狗头.jpg)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello</title>
</head>
<body>
<!-- 行内样式 -->
<h1 style="color: red;">Head</h1>
</body>
</html>
2.9 样式优先级
CSS 全称层叠样式表,那它为什么是“层叠”样式表呢?说白了就是样式优先级。比如我们在 .css 文件里定义了 p 标签是红色,在 style 里定义了 p 标签是绿色,然后又在行内样式里定义了 p 标签是蓝色,那浏览器最终显示出来是什么颜色?这就涉及到了样式优先级。一般来说,样式优先级如下:
.css < style 标签 < 行内样式
也就是最后 p 标签是蓝色。那如果我们在类型选择器里定义了 p 标签是红色,又在 class 选择器中定义了 p 标签是绿色,最后又在 id 选择器里定义了 p 标签是蓝色,那最终显示出来是什么颜色?这又涉及到了样式优先级。一般来说,在同一个 CSS 块(比如 style 标签里)样式优先级如下:
通用选择器(*) < 类型/继承/组合选择器 < class 选择器 < 链接/结构伪类选择器 < id 选择器
也就是说 p 标签还是蓝色。别问我哪个深井冰会重复定义那么多样式,别说,当你以后真正去写这东西了,你真的会这么干。
3. CSS 样式
3.1 盒子模型
CSS 的选择器聊完了,我们再来聊样式~ CSS 里普通的样式其实都并不难,最难也最重要的是盒子模型。
盒子模型说难也不难。当你 F12 打开浏览器的开发工具时,你会看见这么一个盒子(什么?你把这个叫盒子?):
这个盒子有四层,第一层即外边距(margin),代表图中橙色的部分,是透明的;
第二层为边框(border),代表图中黄色的部分,默认是透明的;
第三层为内边距(padding),代表图中绿色的部分,是透明的;
第四层为内容(content),图中蓝色的部分;
这个盒子让网页中的每个元素的样式布局变得更加美观和灵活。它被应用在了 HTML 里的每一个元素。
我们一般对盒子模型进行的一些常用的操作
清空内外边距:我们一般在每一个 CSS 文件里都会使用,它限制了盒子模型的使用范围,只有我们需要的时候才使用它。这是一个 CSS 万能样式,每一个 CSS 文件开头最好都写这个。
*{
margin: 0;
padding: 0;
}
(盒子模型:你礼貌吗?刚来就把我的内外边距清空)
定义内外边距:当我们需要盒子模型的内/外边距时,我们可以定义它。如果你只想定义内/外边距的某一部分,如左边,就对应的在属性名之后加上 -left -right -top -bottom。它的单位是 px(pixel,像素)别忘写。
/* 定义内边距 */
padding: 30px;
/* 定义外边距 */
margin: 30px;
/* 里面的 30px 可以换成任何数值,只要结尾带 px */
居中显示标签:当我们想要将一个标签居中显示,也可以曲线用到盒子模型中的外边距。把 margin 设为 0 auto 即可,如下:
margin: 0 auto;
/* 上面的 0 可以换成任何数值,它代表这个元素的上下外边距 */
由于 auto 代表这个元素的左右外边距,而 auto 相当于把元素的左右外边距交给浏览器定义,所以浏览器就自动帮我们居中元素啦~
边框实线:默认边框是不显示的,那我们想让它显示怎么办?那就给盒子模型中的边框样式变为 solid,让它显示出来。我们还可以操控边框的粗细和颜色,具体看下面:
border-style: solid; /* 给边框加上实线 */
border-color: yellow; /* 给边框实线定义颜色 */
border-width: 1px; /* 给边框实线定义粗细,要加 px */
边框圆角:默认的元素是一个标准长方形,直愣愣的,我们想让它圆角,怎么办?还是得操控盒子模型中的边框,给它加上圆角。
border-radius: 10px; /* 后面的数值表示圆角的大小,要加 px */
盒子模型的难点在于比较抽象,但是只要理解了它,后面的内容就都很简单了。
3.2 Background 背景
现在我们学点简单的,就背景把~
背景(Background),顾名思义它代表元素的背景。它的作用范围是盒子中的内边距部分和内容部分。我们一般对背景的操作很简单:设置背景颜色和背景图片。
设置背景颜色:这个很简单,使用 background-color 样式即可。颜色可以使用它自带的如 red blue yellow 等,自带的颜色范围还是很广的。
background-color: red;
那如何让背景颜色更神仙呢?这里再提供一个超好用的取色器网站:HTMLColorCodes,左边选好颜色后右边那串十六进制数字就是颜色(如 3F923A),在 CSS 中加上 # 号然后使用就行,比如下面:
background-color: #3F923A;
还有如果满足不了纯色,可以尝试一个渐变色网站:Grabient。这个网站里有很多神仙渐变色,大师们已经预先调制好,而且一复制就是 CSS 代码,非常 nice。
设置背景图片:也很简单,使用 background-image 样式即可。当然比例要控制好,不然到时候显示出来的是人是鬼我也不知道~
background-image: url("image.png");
/* image.png 换成图像的 url */
3.3 Text 文本
设置文本颜色:这应该是文本最常用的样式了,直接使用 color: 颜色就可以。颜色的调制可以使用之前提供的 HTMLColorCodes 调色器,但是不支持渐变色~
color: red;
/* red 可以换成任何你想要的颜色 */
设置文本居中:可以使用 text-align 样式。而且这个样式不仅可以文本居中还可以左对齐右对齐。
text-align: center; /* 居中 */
text-align: left; /* 左对齐 */
text-align: right; /* 右对齐 */
设置文本上下居中:使用 line-height 属性,让 line-height 属性和 HTML 的元素高一样就可以了。当然这个方法仅适用于一行文本,多行文本就没办法了~
/* 比如这个 HTML 元素的高是 30px */
line-height: 30px;
设置文本样式:这是一个很好用的样式,比如它可以去掉链接自带的下划线,样式是 text-decoration,代码如下:
text-decoration: none;
我们还可以用这个样式给普通的文字加上上划线,中划线和下划线(至于中划线是什么你可以自己尝试)
text-decoration: overline; /* 上划线 */
text-decoration: line-through; /* 中划线 */
text-decoration: underline; /* 下划线 */
第一行文本缩进:就是平时写作文时常用的自然段前空两格,只不过单位改成了像素~
text-indent: 50px;
3.4 Font 字体
指定字体:这个样式指定了选中的文字使用什么字体。还可以定义多种字体,计算机会依次尝试字体,直到该字体能在设备上正常显示为止。如果设备上都没有这些字体,那就会使用默认字体。
font-family: "SF Pro"; /* 指定一种字体 */
font-family: "PingFang SC", "微软雅黑", "等线"; /* 指定多种字体,字体之间用逗号隔开 */
指定字体大小:单位 px~
font-size: 16px;
指定字体样式:只能设置斜体,粗体需要给文本套上 strong 标签才能实现。
font-style: italic; /* 一种设置斜体的方法 */
font-style: oblique; /* 另一种设置斜体的方法 */
就不理解斜体方法都两个了,为什么还是没有粗体方法呢~
3.5 List 列表
指定列表标头样式:ul 的每个 li 前面都会有一个圆形,那我们想把它换成正方形怎么办?用这个样式~
list-style-type: square;
表格样式:由于用的不多,这里直接放链接:Table 表格
3.6 Display 显示
前面讲了那么多简单的 CSS 样式,终于来一个难的了~
在 HTML 里,元素分为两类:行内元素和块元素。行内元素,就是常用的 strong em 这些元素。这些元素可以在一行之内显示,只不过不能设置高度,高度全凭文本的长度~
而块元素,就是 p div 这些元素,它们可以设置长宽,但是不能在一行显示。
懂了上面这些,就可以开始学习 Display 了。
div 标签与 span 标签:这是两个 HTML 标签,分别表示一个空的块元素和一个空的行内元素,它们的作用就是当作空盒子,简化排版布局,让 CSS 选择更容易(所有元素都可以加上 class 和 id 属性)
设置 display:我们可以通过设置 display 属性来选择这个元素是块元素还是行内元素,如下:
display: inline; /* 行内元素 */
display: block; /* 块元素 */
那如果你又想设置元素的长宽又想让它们在一行显示,那怎么办呢?这时候我们就需要用到 display 的 inline-block 值,让元素既有 inline 的特性在一行内显示,又有 block 的特性可以改变长宽。代码如下:
display: inline-block
隐藏元素:可以设置 display 属性为 none,如下:
display: none;
由于上面的代码相当于让元素消失了,也就是不占用 HTML 文档的空间。那如果我们只是想让他不显示,但是同样占用 HTML 空间呢?那可以使用 visibility 样式,设置值为 hidden(隐藏)。
visibility: hidden;
那如果你只是想让这个元素变透明,不想完全隐藏,怎么办呢?可以使用 opacity 属性设置透明值,0.0 - 1.0 之间,数值越小元素越透明。
opacity: 0.4;
设置长宽:前面说了那么多设置宽度和高度,那它们到底怎么设置呢?看下面代码。记得 px 一定要写上。
width: 300px; /* 宽度 */
height: 200px; /* 高度 */
3.7 Position 定位
定位是 CSS 中的两大难点之一,还有一个是后面的浮动。定位,顾名思义就是设置元素在 HTML 文档中的位置。定位有两种:相对定位和绝对定位。
相对定位:顾名思义就是改变元素对于自己的位置,简单来说,就是上下左右移动元素。在移动之前,我们先启用相对定位功能,不启用功能没法移动:
position: relative;
启用这项功能不会对原位置发生任何变化。然后我们可以使用 top 上移元素,bottom 下移元素,left 左移元素,right 右移元素。这里需要强调的一点是数字之前必须加负号 -,不然移动的方向会相反。还有要加 px。下面举个栗子:
right: -30px;
绝对定位:这个定位就有点厉害了,可以直接定位你在 HTML 文档中的绝对位置,像比如一些网页一直停在右下角的“回到顶部”,就是用绝对定位实现的。当然绝对定位也可以定位在父元素中的位置,但是要求父元素也启用绝对定位或是相对定位。一般需要这项功能可以给父元素启用相对定位,对父元素没有任何影响。首先我们要先启用绝对定位:
position: absolute;
然后这个元素就被移到了相对于 HTML 文档或是父元素的左上角,并且不占用 HTML 文档的任何空间。然后使用 top 定义这个元素相对于 HTML 文档或是父元素的 y 轴位置(x y 轴没学过可以百度),用 left 定义这个元素的 x 轴位置。单位 px,不用加负号。
left: 100px;
top: 200px;
3.8 Float 浮动
浮动也是 CSS 中的两大难点之一,其难度可以说是 CSS 之首。一个 div 元素,中间嵌套着很多 inline-block,正常应该是这样显示的:
但是如果我们想让元素1移动到最右边呢?有同学说可以用定位来实现,但是它太麻烦了,需要测量需要移动的长度。这时候我们就可以使用浮动来实现。浮动,简单来说,可以把嵌套 inline-block 的 div 元素看作一个栓气球的绳子,把 inline-block 看作气球,那浮动就是把气球脱离绳子的束缚飘到一边。被浮动的元素它在浏览器上已经不属于 div,但是代码上还是属于的~
左浮/右浮元素:这个很简单,使用 float 样式:
float: right; /* 右浮 */
/* float: left; 左浮 */
浮动后浏览器就变成这样:
我们可以看到元素 1 跑到了最右边~
解决父级边框塌陷问题:刚刚说了被浮动的元素它在浏览器上已经不属于 div,所以当 div 里所有元素都浮动之后,这个 div 里面什么都没有,就会塌陷,具体看图:
可以看到上面这个 div 由于没有了内容已经塌陷。那如何解决这个问题呢?有人说可以给 div 指定高度,但这样非常不灵活。这个问题我们有很多方法,这里只列出效果最好的一个:伪类 after 法。原理是啥网上可以自己搜搜,因为我自己也不知道(T-T)代码如下:
#father:after{ /* 这里的 #father 换成指向父类的选择器 */
content: '';
display: block;
clear: both;
}
效果因浏览器而异,有些浏览器可能不支持,但我的支持~
3.9 Overflow 溢出
CSS 马上就要完结撒花啦~ 当然在撒花之前还有一个芝士点~
在开发网页时,经常会出现一(或几个加在一起)个元素的长宽比它的父元素还大,那多出来的这一部分就叫溢出。如果溢出没有处理妥当会产生不可预期的结果。一般我们处理溢出的方式有两种:隐藏溢出和滚轮法。
隐藏溢出:很好理解,就是隐藏溢出的部分。下面给出代码:
overflow: hidden;
上效果:
滚轮法:顾名思义就是在元素旁边加一个滚轮,以便上下浏览内容。你可以选择在底部或右边增加滚轮,也可以全部增加。代码如下:
overflow-x: scroll; /* 在底部增加滚轮 */
overflow-y: scroll; /* 在右边增加滚轮 */
/* overflow: scroll; 在底部和右边增加滚轮 */
效果:
我们如果需要智能判定这个元素需不需要滚轮,可以把上面的 scroll 换成 auto,这样如果溢出了就自动添加滚轮,如果没有溢出就不添加。这个方法非常 nice~
4. 总结
CSS 其实真的不难,只有选择器和样式两个语法点(两个语法点就写了快 10000 字这事别在意)。学完了就可以开始 JavaScript 6 和 React.js 框架了(React.js 是目前比较流行的一个 JS 前端开发框架,与他相似的有 Vue.js 和 Angular.js 等。我个人推荐 React.js + Ant Design 组合(Ant Design 是阿里巴巴的一个组件库,里面原生自带很多好看的元素))
但是由于后面要考计算机二级 C++ 的原因(自己报的名,未满 18 岁也能报),后期要开始卷 C++ 和算法,初中学业负担也比小学重很多,所以可能不会那么快出 JavaScript 6 和 React.js。总之,前端系列敬请期待!