欢迎回来三钻的FCC前端教程
,上一篇文章我们通过28关学会了HTML与HTML5网页开发基础。这一期我们一起攻破前端第二大知识点《CSS基础入门》。因为这一课一共有44关,我把文章分成两期更新。敬请期待!
Cascading Style Sheet
缩写为CSS,顾名思义就是层叠样式表
的意思。CSS是HTML中的一个样式表,告诉浏览器网页上的文字和其他内容是如何展示的。
以上是一个官方的定义。我们用一个更简单的方式理解CSS到底是一个什么东东:
如果HTML是骨架,那CSS就是装饰这个骨架的一层皮和身上的装饰品。我们可以通过CSS控制皮肤的颜色,毛孔的粗细。甚至还可以控制我们装饰品上的特效,动效等等(有LED灯的口罩也是一种特效)。
回归HTML中的CSS,我们可以使用CSS控制哪些东西呢?
我们一共有3种应用CSS样式的方法。
style
中编写样式;<style>
标签,然后在标签内编写CSS代码;CSS
样式文件,然后在需要使用的HTML文档中使用<link>
引入。一般项目中都会选择使用第三种方式,因为比较大型的前端页面,很多样式都是有重复性的,应用引入型的CSS样式,我们就可以把通用的写在一起然后在所有HTML中引入即可,不需要重复编写。并且可以把CSS分类存放,提高可读性和可维护性。
CSS背后的原理是,使用CSS选择器选中DOM(文档对象模型)里面的某个HTML元素。然后将各种CSS样式和属性应用到该元素中,从而改变元素在页面中的展现方式或者样式。
在本节中,我们将学会如何应用CSS样式到CatPhotoApp的元素中,从而将它从简单的文本装修成一个页面。让我们立即开始吧!
关卡名:
Change the Color of Text
h2
元素添加style
属性,然后使用样式属性改变文字颜色;color
就是用来定义文字颜色的样式属性;以下例子演示如何给h2
应用一个蓝色字体颜色的代码:
<h2 style="color: blue;">CatPhotoApp</h2>
注意: 在行内样式中,所有样式属性结束后需要加上一个
;
符号,代表这一个样式属性定义结束。然后后面还可以加入更多的样式属性。
h2
的文字颜色为红色(red
);h2
元素中需要有style
属性;h2
元素的color
样式属性应该赋予red
这个值;style
属性值里的样式属性应该以;
符号结束;这关卡主要教会我们:
style
样式属性;color
;关卡名:
Change the Color of Text
<h2 style="color: red;">CatPhotoApp</h2>
,这里我们使用行内样式,使用了文字颜色样式来单独改变h2
元素中的文字。在代码的最顶端加入style
标签:
<style>
</style>
在style
中,使用CSS选择器选中所有h2
标签,并且给所有h2
标签加入字体颜色样式属性color: red
:
<style>
h2 {
color: red;
}
</style>
注意: 选择器名中的样式元素必须用两个大括号包裹着 (开始
{
与结束}
)。在样式属性的最后必须加入一个分号;
来结束。
h2
行内样式;style
样式表代码区;h2
元素内的字体改变为蓝色blue
;h2
元素中的style
属性需要被移除;style
元素;h2
元素中的文字应该是蓝色blue
的;style
元素有接受标签;这关卡主要教会我们:
style
元素关卡名:
Use a CSS Class to Style an Element
类声明例子:
<style>
.blue-text {
color: blue;
}
</style>
style
元素中我们编写了一个.blue-text
CSS类(CSS类需要在我们的名字前加入.
符号, 然后CSS类的命名规范必须使用-
分割);<h2 class="blue-text">CatPhotoApp</h2>
;class="blue-text"
,即可获得该CSS类的样式属性。.
这个符号在最前面的。style
元素中,把h2
CSS选择器改为.red-text
;blue
改为red
;h2
元素的问题应该是红色的;h2
元素应该拥有一个red-text
的类;style
样式表中有定义一个.red-text
,并且样式属性color
的值为red
;h2
中使用行内style
属性来改变元素的字体颜色;这关卡主要教会我们:
关卡名:
Change the Color of Text
几年前
bootstrap
,就是结合很多这种分类好的的类,让我们在HTML元素中组合使用就可以快速布局网页。所以合理的分类好不同种类的类,然后给他们一种特定用途,有利于CSS开发时提高代码复用性,提高可读性和可维护性。
p
元素也加入red-text
类;h2
元素的文字应该是红色;h2
元素应该拥有一个red-text
类属性;p
元素的内容应该是红色;p
元素的内容颜色应该不是红色;p
元素应该拥有一个red-text
类属性;这关卡主要教会我们:
关卡名:
Change the Color of Text
font-size
样式属性控制的;h1 {
font-size: 30px;
}
style
元素中,.red-text
下方加入p
元素选择器;p
选择器中加入font-size
样式属性,并且把值设置为16px
(16像素);style
元素中为p
元素的内容的字体改为16px
的大小;这关卡主要教会我们:
关卡名:
Set the Font Family of an Element
font-family
样式属性,我们可以定义一个元素所使用的字体;h2
元素使用sans-serif
字体,在CSS中需要这么些:h2 {
font-family: sans-serif;
}
p
元素使用monospace
字体;p
元素都使用monospace
字体;这关卡主要教会我们:
关卡名:
Import a Google Font
web fonts
网页字体。Google Fonts
库(顾名思义,就是使用谷歌公司提供的公开字体库 - 也就是免费使用的)注意: 如果我们无法访问谷歌字体的话,这一关是无法过的,只能跳过。但是作为开发人员,我们是有办法的。(你们懂的 ?)
Lobster
字体;<meta></meta>
标签之中);<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
font-family: Lobster;
, font-family
字体属性值的格式是: font-family: FAMILY_NAME, GENERIC_NAME;
;FAMILY_NAME
就是指定的字体名,如果这个字体找不到,或者语言不适应的话,就会往后面定义的字体进行应用;GENERIC_NAME
就是后备字体,可以用,
分割输入多个,这个也会在下一关详细解说;"Open Sans"
。因为Lobster
这个字体不存在这种情况,所以不需要使用双引号;font-family
CSS规则,并且使用Lobster
字体。必须保证我们的h2
元素应用了这个字体定义。Lobster
字体;h2
元素中的字体使用了Lobster
字体;h2
CSS选择器的来改变字体;p
元素应该保持原来的monospace
字体;这关卡主要教会我们:
关卡名:
Specify How Fonts Should Degrade
monospace
, serif
和 sans-serif
;Helvetic
作为我们的默认字体,当这个字体无法使用的时候自动往后选择使用sans-serif
字体,这种场景我们就需要用以下方式:p {
font-family: Helvetica, sans-serif;
}
Generic font family
的字体名是没有大小写限制的,只要名字正确就可以了。并且不需要双引号,因为它们是CSS关键词而已。
h2
追加monospace
字体,让h2
元素拥有默认字体为Lobster
,备用自己为monospace
;link
标签引入了谷歌字体库中的Lobster
字体。这里我们注释掉这个引用,从而Lobster
这个字体就变成无法使用了,所以h2
元素中就会往后取用monospcae
字体;注意:如果我们的电脑中安装了
Lobster
字体,那这个例子中的Lobster
字体是可用的,自然就无法看到浏览器往后取用的效果了。
h2
元素使用Lobster
字体;Lobster
字体无法使用时,h2
元素应该往后取用monospace
字体;link
标签的签名加入<!--
和在结尾加入-->
;-->
;这关卡主要教会我们:
关卡名:
Size Your Images
width
(宽度),顾名思义这个元素是用来控制元素的宽度的;px
(像素)为单位来定义图片的宽度larger-image
,并且使用这个类来把HTML元素的宽度定义为500像素,我们就用以下写法:<style>
.larger-image {
width: 500px;
}
</style>
smaller-image
的CSS类,并且用这个类来缩小一个图片的大小为100像素宽;注意:因为浏览器的设置,有一些用户会默认把网页放大缩小了,不是默认的100%。如果是的话,请还原100%伸缩值后才能正常通过此关哦!
img
元素需要有smaller-imge
类;img
元素应该是100px
宽,并且浏览器缩放是在100%;这关卡主要教会我们:
关卡名:
Add Borders Around Your Elements
style
, color
和 width
;<style>
.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
}
</style>
还有一种更简单快捷的写法:
<style>
.thin-red-border {
border: 5px red solid;
}
</style>
thick-green-border
;记住:我们是可以给HTML元素中的
class
属性添加多个类,只要使用空格分隔即可。如:<img class="class1 class2">
img
元素需要有smaller-imge
类;img
元素需要有thick-green-border
类;这关卡主要教会我们:
关卡名:
Add Rounded Corners with border-radius
border-radius
把图片的四个角改圆边;border-radius
一个弧度像素值;10px
的border-radius
;注意:这一关中,是有多个接单方案的:
.thick-green-border
中添加border-radius
;.smaller-image
中添加border-radius
;img
元素需要有thick-green-border
类;这关卡主要教会我们:
关卡名:
Make Circular Images with a border-radius
border-radius
属性不止可以使用像素为单位,我们还可以使用百分比;50%
的border-radius
;50%
的边框弧度;50%
;这关卡主要教会我们:
关卡名:
Give a Background Color to a div Element
background-color
属性来设置一个元素的背景颜色;green
)的背景,我们就要给予这个元素一个background-color
属性;.green-background {
background-color: green;
}
Create a class called silver-background
with the background-color
of silver. Assign this class to your div
element.
silver-background
,其中加入background-color
属性和属性值为silver
;div
元素的class
属性中;div
元素应有一个silver-background
类;div
元素应有银色(silver)背景颜色;style
标签中应该有一个.silver-background
类选择器,并且有background-color
属性和属性值为silver
;这关卡主要教会我们:
关卡名:
Set the id of an Element
class
CSS类属性,我们还可以给每一个HTML元素一个id
属性;id
属性是有好几个实用的用途的:我们可以用id
选择器来给一个元素CSS样式属性,同时也可以让JavaScript找到指定id
的元素,并且对此进行修改等;id
属性的属性值应该是唯一的;id
的唯一性,但是在实践中被广大认可id
是需要唯一的,所以不要在多个一个元素中赋予同一个id
属性;举例:在我们的h2
元素中添加一个id
属性cat-photo-app
:
<h2 id="cat-photo-app">
form
元素添加一个id
属性值cat-photo-form
;id
属性值为cat-photo-form
;这关卡主要教会我们:
id
属性;关卡名:
Use an id Attribute to Style an Element
id
属性与CSS类一样可以为他们绑上CSS样式;id
是无法复用,只能给予一个元素(源自于我们上一关所说的原因);id
在样式表中相对比CSS类,它有更好的权重,如果class
和id
的样式同时给予一个元素,那id
的样式会覆盖类的样式;举例:我们现在给一个id
属性为cat-photo-element
,然后给这个id
属性在样式表中绑定一个背景颜色background-color
为绿色green
。
#cat-photo-element {
background-color: green;
}
注意:在我们的样式表
<style>
中,我们用. + 类
名来声明类的样式,但是如果是id
的话我们会用# + id名
来声明id
的样式。
form
元素一个id
属性,属性值为cat-photo-form
;id
一个绿色(green
)的背景颜色;form
元素中应有一个id
属性为cat-photo-form
;form
元素的背景颜色应该是绿色的;form
元素应有id
属性;form
元素中不能有class
或者style
;这关卡主要教会我们:
id
属性;id
属性的样式;关卡名:
Adjust the Padding of an Element
padding
(内边距),margin
(外边距)和border
( 边框);padding
,控制一个元素内容四边的空间,还有内容与border
边框的距离;padding
比蓝色盒子的边距要宽;如果想更深入的理解内容与margin
,padding
和border
之间距离,我们需要一个更好的图解方式,请看下图:
上图中有3组颜色,从内到外:蓝色是content
(内容部分),绿色部分是padding
(内边距),黄色部分是border
(边框),最外面的橙色部分是margin
(外边距)。通过这个图,我们就能清晰理解这些边距的实际产生的距离的效果。
padding
,盒子内容里面的字体与边框的距离就越远;Change the padding
of your blue box to match that of your red box.
padding
,从而让蓝色盒子与红色盒子的padding
一致;padding
应改为20px
;这关卡主要教会我们:
padding
(内边距),margin
(外边距)和border
(边框);关卡名:
Adjust the Margin of an Element
margin
(外边距),控制这个元素与周围元素之间的空间;margin
,同时让红色盒子看起来更小了;margin
的时候,也会看到同等的变化。因为蓝色盒子与周边元素的间距会加大,同时蓝色盒子的content
内容可以用的空间就需要伸缩适应。最后蓝色盒子就会变小了;为了更好的理解为什么内容区域宽高会变动,我们先来看看红色盒子的空间信息:
首先这个例子中,红色盒子的content
内容区域是没有给宽高的,所以会根据浏览器窗口大小适应。也就是说,内容区域是一个弹性宽高盒子。这个时候我们给了20px
的padding
,5px
的border
,20px
的margin
。那盒子的总宽高是多少?
这个时候盒子的总宽高 = content宽高
+ padding
+ border
+ margin
对吧?
假设现在浏览器窗口的宽度是1000px
,这里我们先假设外层没有一个黄色盒子,这个红色盒子可以填满这个浏览器宽度。这个时候红色盒子的content
宽度就是:
1000 - 20*2 (左右的
margin
外边距) - 5*2(左右的border
边框) - 20*2(左右的padding
内边距) = 910px。
如果现在我把浏览器窗口变成800px呢?安装刚刚的公式我们会得出710px,对内容部分少了200px。
好了按照我们刚刚的公式,现在浏览器窗口宽度不变,只把margin
外边距加大,这个时候内容是不是也会变?因为最终内容区域的大小都是受到margin
,border
和padding
的总额所影响的?所以在上面的例子里面我们发现加大了蓝色盒子的margin
后,蓝色盒子显然是变小了。因为我们加大了margin
。
同时也是因为我们看到的盒子大小是基于盒子的边框,不是真的在看盒子的content
内容部分。
如果我们给盒子一个宽高后,我们加大padding
时盒子就会变大。甚至有时候在排版的过程中,使用padding
就会发现盒子会超出了父级的元素盒子。这里我们可以深入解说一下CSS中的两种盒模型
:
盒模型:标准盒模型
其他间距都是额外加入的,会影响盒子总体呈现的宽高
如果不希望使用盒子的
padding
的时候影响盒子总体大小,我们就要把盒子变成IE盒模型
在盒子的CSS中添加box-sizing: border-box
盒模型:IE盒模型
盒子的框高包含了边框和内边距,所以整体的盒子高度不受
padding
和border
影响。
margin
,从而让蓝色盒子和红色盒子又一样的展示效果;blue-box
类应有20px
的margin
;这关卡主要教会我们:
margin
的使用;padding
对盒子的宽高的影响;标准盒模型
和IE盒模型
;关卡名:
Add a Negative Margin to an Element
margin
控制它的周边与它的边框之间的空隙;margin
,这个元素会变大;所以给一个元素负
margin
就会变大?是,也不是!但是为什么呢?margin
是外边框,不应该会对元素的内容产生大小变动呀?
要回答这个疑问,我们首先来看看改为负margin
之前和之后是怎么样的:
margin
是20px
,那盒子的宽度就是149 (内容)
+ 20+20 (左右内边距)
+ 5+5 (左右边框)
= 199px
,最后还有左右的20px
的margin
;margin
为-15px
后,这时宽度就是 219 (内容)
+ 20+20 (左右内边距)
+ 5+5 (左右边框)
= 269px
,最后左右的-15px
的margin
;219
- 149
= 70px
,那这70像素的增加是从哪里来的呢?-15px
和20px
的区别。因为蓝色盒子没有定义宽度,所以宽度是自适应的。从左右负15来算一共给这个盒子左右各增加了15像素的空间。然后原本是20像素的边框现在没有了,所以另外再加了左右20像素的距离。一共就是15+15+20+20
= 70
。就是这样我们的内容就多了70px
的宽度,所以蓝色盒子总体来说是不是宽度扩大了70px
呢?懂了!问题来了,为什么刚刚说给一个元素的
margin
变化时,会,也不会
导致元素放大呢?主要原因是因为我们这个例子中的蓝色盒子没有给宽度。如果给了宽度,盒子正数的margin
和负数margin
都不会影响这个盒子的宽的。所以只有当这个盒子的宽度是自适应的时候才会导致盒子变大变小哦。
margin
,让它与红色盒子的呈现样式一样;margin
改为-15px
,从而让蓝色盒子与红色盒子一样占了黄色盒子的总宽度;blue-gox
的类应有一个-15px
的margin
;这关卡主要教会我们:
margin
;关卡名:
Add Different Padding to Each Side of an Element
padding
;padding-top (上)
、padding-right (右)
、padding-bottom (下)
和padding-left (左)
;40px
的padding
, 然后底部和右边20px
;blue-box
类中应有40px
的padding-top
;blue-box
类中应有20px
的padding-right
;blue-box
类中应有20px
的padding-bottom
;blue-box
类中应有40px
的padding-left
;这关卡主要教会我们:
关卡名:
Add Different Margins to Each Side of an Element
margin
;margin-top (上)
、margin-right (右)
、margin-bottom (下)
和margin-left (左)
;40px
的margin
, 然后底部和右边20px
;blue-box
类中应有40px
的margin-top
;blue-box
类中应有20px
的margin-right
;blue-box
类中应有20px
的margin-bottom
;blue-box
类中应有40px
的margin-left
;这关卡主要教会我们:
关卡名:
Use Clockwise Notation to Specify the Padding of an Element
padding-top (上)
、padding-right (右)
、padding-bottom (下)
和padding-left (左)
来给一个元素特定的内边距;padding: 10px 20px 10px 20px;
;其他语法:
/* 应用于四个边 */
padding: 1em;
/* 垂直方向| 水平方向*/
padding: 5% 10%;
/* 顶部| 水平方向| 底部*/
padding: 1em 2em 2em;
/* 顶部| 右边| 底部| 左边*/
padding: 2px 1em 0 1em;
.blue-box
类的顶部和左边padding
为40px
,然后底部和右边padding
为20px
;blue-box
类中应有40px
的顶部padding
;blue-box
类中应有20px
的右边padding
;blue-box
类中应有20px
的底部padding
;blue-box
类中应有40px
的左边padding
;padding
;这关卡主要教会我们:
关卡名:
Use Clockwise Notation to Specify the Margin of an Element
padding
可以使用顺时针语法,margin
也一样可以;margin-top (上)
、margin-right (右)
、margin-bottom (下)
和margin-left (左)
来给一个元素特定的外边距;margin: 10px 20px 10px 20px;
;其他语法:
margin: 5%; /* 所有的边都是 5% 的边距 */
margin: 10px; /* 所有的边都是 10像素 的边距 */
margin: 1.6em 20px; /* 上和下边是 1.6字距, 左和右是 20像素 边距 */
margin: 10px 3% 1em; /* 上边 10像素, 左和右 3%, 下边 1字距 边距 */
margin: 10px 3px 30px 5px; /* 上边 10像素, 右边 3像素, bottom 30px, left 5px margin */
margin: 1em auto; /* 上和下边 1字距 边距, 该盒子是水平居中的 */
margin: auto; /* 该盒子是水平居中的, 上下边距为0 */
在现代浏览器中,如果要把一些东西水平居中,使用
display:flex; justify-content: center;
. 然而, 在一些老的浏览器,如IE8-9, 这些是不可用的. 想要把一个元素在其父元素中居中, 使用margin: 0 auto;
.blue-box
类的顶部和左边margin
为40px
,然后底部和右边margin
为20px
;blue-box
类中应有40px
的顶部margin
;blue-box
类中应有20px
的右边margin
;blue-box
类中应有20px
的底部margin
;blue-box
类中应有40px
的左边margin
;margin
;这关卡主要教会我们:
这周我们一起闯过了22关,下一期我们会一起把剩余的22关完成。学习是一种像爬山一样的过程,要经历过漫长的上坡路,一步一个脚印。“路漫漫其修远兮,吾将上下而求索。”, 在追寻知识的道路上,前方的道路还很漫长,但我们将百折不挠,不遗余力地,上天下地的去追求和探索。让我们继续坚持学习,终身学习成长。在大前端的时代爬到技术的巅峰,做一个有深度的技术人员。
我是三钻,一个在技术银河中等和你们一起来终身漂泊学习。点赞是力量,关注是认可,评论是关爱!下期再见 ?!