我有一段时间没有更新FCC前端教程了,这一周就继续写完CSS与CSS3基础的教程。最近工作和生活都比较繁忙所以文章更新也受到了一定的影响。不过技术文章写作再忙也不会放弃的。我会继续努力坚持着一周一篇文章的进度,继续为大家带来我学习到的知识。让我们一起继续终身学习吧!
这一篇文章是上一篇《44关学习CSS与CSS3基础「一」》的第二部分,一共闯了44关。废话少说,让我们一起来闯关吧!
关卡名:
Use Attribute Selectors to Style Elements
id
和class
属性选择器给特定的元素改变样式;ID
和CLASS
选择器;[attr=value]
(属性=值)这种属性选择器来给我们的 checkboxes (复选框)添加样式;比如一下例子,所有type
属性值为radio
的元素加入 margin(外边距)做出改变:
[type='radio'] {
margin: 20px 0px 20px 0px;
}
type
属性为复选框的元素;type
属性选择器必须用来选中所有复选框;这关卡主要教会我们:
关卡名:
Understand Absolute versus Relative Units
px
单位之外,还可以使用其他可选的单位;in
(英寸) 和 mm
(厘米),绝对长度单位近似于屏幕上的实际测量值,但是根据屏幕的分辨率会有一些差异;em
或者 rem
, 两者分别都是相对单位,都会根据一个相对的元素转换自己的大小;那么 em
和 rem
有什么区别呢?
EM是相对长度,它是相对于当前元素的字体大小,如果当前元素没有设置字体大小就会一直往父级找,然后相对于父级字体大小来转换。 EM特性:
REM是CSS3新增的一个相对单位,它是 root em 的缩写,顾名思义就是根em。 REM特性:
这些相对单位的使用会在《响应式页面开发》的关卡中详细介绍使用场景。
red-box
类的元素加入 padding
属性,值为 1.5em
;red-box
类元素必须含有 padding
属性;red-box
类元素的padding
属性值必须为1.5em
;这关卡主要教会我们:
em
,这种相对单位;关卡名:
Style the HTML Body Element
body
元素;background-color
属性给body
元素一个背景颜色为black
;body
元素的;以下例子演示如何给body
应用一个黑色背景的代码:
body {
background-color: black;
}
body
元素的背景色变成黑色;body
元素;body
元素必须拥有background-color
属性,并且值为black
;这关卡主要教会我们:
body
元素;关卡名:
Inherit Styles from the Body Element
body
元素;body
元素也是可以使用CSS给它定制样式的;记住:
body
元素与其他HTML中的元素一样,都是可以使用CSS给予样式控制的。不同的就是,body
元素中的样式会被HTML中其他元素默认继承。意思就是说,任何在 body 中的样式都会携带到其他元素中,如果 body 中给予了背景颜色是黑色,那我们加入一个div
元素,默认也是黑色背景。
h1
元素,内容填入文字 “Hello World”;body
元素中加入color: green
即可;body
元素定义字体为monospace
,我们只需要在body
样式中加入font-family: monospace
属性值即可;h1
元素;h1
元素内容是 Hello World;h1
元素有关闭标签;body
元素应该有color
属性,并且值为green
;body
元素应该有font-family
属性,并且值为monospace
;h1
元素的字体应该继承body
元素的字体定义;h1
元素的字体颜色应该继承body
元素的字体颜色;这关卡主要教会我们:
关卡名:
Prioritize One Style Over Another
h1
元素无法同时拥有绿色和粉红色字体颜色的属性;body
元素中的color: green
CSS属性;pink-text
;pink-text
加入字体颜色color: pink
;pink-text
类赋予h1
元素;h1
元素必须拥有pink-text
类;<style>
标签中必须含有pink-text
类样式,并且含有改变字体颜色的属性;h1
元素的字体应该是粉红色(pink);这关卡主要教会我们:
body
元素的样式;关卡名:
Override Styles in Subsequent CSS
pink-text
类覆盖了body
元素的CSS样式;body
元素的CSS;pink-text
类的样式呢?<div class="class1 class2"></div>
注意:元素中多个CSS类的摆放顺序是不会影响CSS样式的权重的。真正决定CSS样式的权重的是在CSS样式表中的顺序,CSS样式表的样式规则会从上往下写,越是在后面的权重越高。因为
.blue-text
的样式在.pink-text
的后面,所以最后.blue-text
的样式会覆盖.pink-text
。
blue-text
,然后赋予这个类蓝色字体样式;blue-text
类在样式表中必须放在pink-text
之后;pink-text
类的h1
元素上叠加blue-text
类;h1
元素中需要有pink-text
类;h1
元素中需要有blue-text
类;blue-text
和pink-text
都需要赋予给h1
元素;h1
元素中的字体应该是蓝色的;这关卡主要教会我们:
关卡名:
Override Class Declarations by Styling ID Attributes
h1
元素中,把pink-text
放在blue-text
的前面,blue-text
类中的CSS属性权重也是更大,会覆盖pink-text
的CSS属性;h1
元素添加一个ID
名为orange-text
,然后在CSS样式表中给这个ID橙色字体颜色的样式,从而覆盖掉blue-text
类和pink-text
类的样式;给一个元素加入ID属性需要使用以下写法:
<h1 id="orange-text"></h1>
在CSS样式表中定义ID属性需要使用以下写法:
#brown-text {
color: brown;
}
h1
元素一个ID属性,值为orange-text
;blue-text
类和pink-text
类在h1
元素中;orange-text
的CSS声明,并且给予color: orange
的属性;h1
元素需要有一个pink-text
类;h1
元素需要有一个blue-text
类;h1
元素需要有一个orange-text
ID;h1
元素;orange-text
ID需要声明好CSS的属性;h1
元素不应该有任何style
属性;h1
元素中的字体应该是橙色的;这关卡主要教会我们:
关卡名:
Override Class Declarations with Inline Styles
style
属性;不记得行内样式的写法的同学,可以看看以下例子:
<h1 style="color: green"></h1>
h1
元素中的字体变成白色(color: white
);h1
元素中的blue-text
类,pink-text
类和orange-text
ID属性;h1
元素需要有一个pink-text
类;h1
元素需要有一个blue-text
类;h1
元素需要有一个orange-text
ID;h1
元素需要有一个style
属性;h1
元素中的字体是白色的;这关卡主要教会我们:
关卡名:
Override All Other Styles by using Important
!important
,顾名思义就是“重要”的意识,也是表达着这个样式有最高优先级;为何要强制覆盖CSS样式?又有什么时候需要我们这么做呢? 在很多情况下,我们需要使用到CSS库,甚至是某UI框架。因为是使用别的开发者写好的样式,自然就有可能我们写的样式是被原有库或者框架的样式所覆盖了。所以当我们需要保证我们编写的CSS拥有最高优先级,并且绝对有效,这个时候我们就可以使用
!important
。
pink-text
类样式声明,一开始我们使用了写在后面的blue-text
类覆盖了它的样式;orange-text
ID属性覆盖它;所以样式声明的优先级顺序就是:
CSS类声明顺序 < ID属性样式 < 行内样式
pink-text
类的颜色声明后面加入!important
;pink-text
类的样式声明得到最大优先级;!important 的使用例子:
.brown-text {
color: brown !important;
}
h1
元素需要有一个pink-text
类;h1
元素需要有一个blue-text
类;h1
元素需要有一个orange-text
ID;h1
元素中应该有行内属性为color: white
;pink-text
类样式声明中应该有 !important
结尾;h1
元素中的字体应该是粉红色;这关卡主要教会我们:
!important
;关卡名:
Use Hex Code for Specific Colors
什么是十六进制? 学过计算机的同学应该都知道,通常用小数,或者以10为底的数,那就是用数字0到9。十六进制,顾名思义就是用16为底的数。也就是说需要使用16个不同的符号。符号0到9用来代表数字中的零到九,然后A,B,C,D,E,F就是第十到十五的符号。从0到9,A到F一共就有16个符号组成十六进制的代码。
红(R)
,绿(G)
,蓝(B)
三种色系。#000000
的黑色作为例子,如果红,绿,蓝都调到最低,自然就是没有颜色,那就是黑色了;#000000
就等同于三盏灯都关掉,自然是黑色了。如果三盏灯都调到最亮,那就会是白色了,也就是我们用的#FFFFFF
;颜色码使用例子如下:
body {
color: #000000;
}
body
元素中的black
属性值为#000000
;body
元素的背景颜色应该是黑色;black
,并且使用Hex颜色码;这关卡主要教会我们:
关卡名:
Use Hex Code to Mix Colors
红(R)
,绿(G)
,蓝(B)
三种色系;#FFA500
;0
在Hex码中是最低的数值,等同于把这个颜色调到没有为止;F
就是Hex码中最大值,等同于把这个颜色调到最亮值;颜色 | Hex 码 |
---|---|
Dodger Blue | #1E90FF |
Green | #00FF00 |
Orange | #FFA500 |
Red | #FF0000 |
h1
元素的字体I am red!
需要是红色;hex 码
替换颜色值red
;h1
元素的字体I am green!
需要是绿色;hex 码
替换颜色值green
;h1
元素的字体I am dodger blue!
需要是宝蓝色;hex 码
替换颜色值dodgerblue
;h1
元素的字体I am orange!
需要是橙色;hex 码
替换颜色值orange
;这关卡主要教会我们:
关卡名:
Use Abbreviated Hex Code
#FF0000
可以被缩写为 #F00
,这个缩写版只给红色一个数值,绿色一个数值和蓝色一个数值;#F00
和 #FF0000
为同一个颜色;颜色 | 缩写Hex码 |
---|---|
Cyan | #0FF |
Green | #0F0 |
Red | #F00 |
Fuchsia | #F0F |
h1
元素的字体I am red!
需要是红色;hex 码
替换颜色值#FF0000
;h1
元素的字体I am green!
需要是绿色;hex 码
替换颜色值#00FF00
;h1
元素的字体I am cyan!
需要是宝青色;hex 码
替换颜色值#00FFFF
;h1
元素的字体I am fuchsia!
需要是樱红色;hex 码
替换颜色值#FF00FF
;这关卡主要教会我们:
关卡名:
Use RGB values to Color Elements
RGB
值;rgb(0, 0, 0)
;rgb(255, 255, 255)
;红(R)
,绿(G)
,蓝(B)
三种色系的亮度来混合出1600万种颜色;RGB
使用的是0到255,如果我们计算一下,其实16 x 16 就是256,而计算机都是从0开始,所以 ;
RGB
和十六进制都是拥有一样的颜色种数,并且都是调整三种色系来变换颜色的;以下是把背景颜色换成橙色的CSS代码:
body {
background-color: rgb(255, 165, 0);
}
body
元素的背景颜色换成RGB
中的黑色值:rgb(0, 0, 0)
;h1
元素的字体I am red!
需要是红色;RGB
值替换Hex颜色值;h1
元素的字体I am orchid!
需要是淡紫色;RGB
值替换Hex颜色值;h1
元素的字体I am blue!
需要是蓝色;RGB
替换Hex颜色值;h1
元素的字体I am sienna!
需要是赭色;RGB
替换Hex颜色值;这关卡主要教会我们:
关卡名:
Change the Color of Text
RGB
值来混合出各种颜色;RGB
值来替换CSS中的Hex颜色代码:颜色 | RGB值 |
---|---|
Blue | rgba(0, 0, 255) |
Red | rgb(255, 0 , 0) |
Orchid | rgb(218, 112, 214) |
Sienna | rgb(160, 82, 45) |
h2
元素中需要有style
属性;h2
元素的color
样式属性应该赋予red
这个值;style
属性值里的样式属性应该以;
符号结束;这关卡主要教会我们:
RGB
混合颜色;关卡名:
Use CSS Variables to change several elements at once
penguin
类中,改变一下内容:--penguin-skin
的black
为gray
;--penguin-belly
的gray
为white
;--penguin-beak
的yellow
为orange
;/* Only change code below this line */
和 /* Only change code above this line */
这两个备注之间修改代码;penguin
类中的--penguin-skin
CSS变量的值改为gray
;penguin
类中的--penguin-belly
CSS变量的值改为white
;penguin
类中的--penguin-beak
CSS变量的值改为orange
;这关卡主要教会我们:
关卡名:
Create a custom CSS Variable
-
)”即可;--penguin-skin: gray;
--penguin-skin
,并且赋予了这个变量的值为gray
;penguin
类中,创建一个变量名--penguin-skin
;gray
;/* Only change code below this line */
和 /* Only change code above this line */
这两个备注之间编写代码;penguin
类中需要含有一个--penguin-skin
变量,并且变量值为gray
;这关卡主要教会我们:
关卡名:
Use a custom CSS Variable
background: var(--penguin-skin);
background
属性的值,这个值我们用了CSS变量;gray
,这个值会被关联过来;注意:使用的变量名字必须是和定义的变量名完全一致,要不就不会生效!
background
属性的值都替换成--penguin-skin
CSS变量:penguin-top
CSS类中的background
属性值需要改为使用--penguin-skin
CSS变量;penguin-bottom
CSS类中的background
属性值需要改为使用--penguin-skin
CSS变量;right-hand
CSS类中的background
属性值需要改为使用--penguin-skin
CSS变量;left-hand
CSS类中的background
属性值需要改为使用--penguin-skin
CSS变量;这关卡主要教会我们:
关卡名:
Attach a Fallback value to a CSS Variable
注意:这个回退值并不是用来提高浏览器兼容的,在IE浏览器下回退值也不会生效的。所以这个回退值只是用于当变量无法获取到值时,浏览器有一个可回退的值可用,并且可以保证有效显示。
如下是如何设置回退值的例子:
background: var(--penguin-skin, black);
--penguin-skin
变量无法获取到值,就会自动回退使用black
做为背景颜色属性的值;.penguin-top
类和.penguin-bottom
类中的背景颜色属性的值中的变量名拼写错误了,所以导致变量无法取到变量所定义的值;.penguin-top
类和.penguin-bottom
类中的background
属性的变量值加上回退颜色:black
;penguin-top
类中的background
属性的变量值加入回退值black
;penguin-bottom
类中的background
属性的变量值加入回退值black
;这关卡主要教会我们:
关卡名:
Improve Compatibility with Browser Fallbacks
.red-box
类样式中的background
属性值使用了--red-color
CSS变量;background: red
,从而兼容其他不支持CSS变量的浏览器;.red-box
类中的background
属性上面添加一个background: red
的兼容属性;这关卡主要教会我们:
关卡名:
Inherit CSS Variables
--penguin-skin
变量下载.penguin
类选择器中,那就能.penguin
中可以调用这个CSS变量;.penguin
的所有子节点中使用,除外都是无法调用的;那些才是子节点呢? 比如现在我们有一段这样的HTML:
<div class="foo"><span class="bar"/></div>
这段HTML中bar
就是foo
的子节点,他们彼此有继承关系。
:root
元素;:root
是一个伪类(pseudo-class)选择器,它会直接匹配HTML文档(document)中的根元素,那就是html
元素;:root
伪类中添加我们的CSS变量,遵循继承关系这些变量全局都可以使用了;:root
伪类选择器中声明一个--penguin-belly
变量,并且给予pink
属性值;--penguin-belly
变量需要在:root
伪类选择器中声明,并且属性值是pink
;这关卡主要教会我们:
关卡名:
Change a variable for a specific area
:root
伪类选择器中定义CSS变量,整个页面使用到这个变量的地方都会被影响;penguin
类中改变--penguin-belly
属性值为white
;penguin
类中加入--penguin-belly
属性,并且值赋予white
;这关卡主要教会我们:
关卡名:
Use a media query to change a variable
:root
选择器中的media query
内,重新定义--penguin-size
的值为200px
;--penguin-skin
变量的值为black
;:root
中需要重新定义--penguin-size
的值为200px
;:root
中需要重新定义--penguin-skin
的值为black
;这关卡主要教会我们:
这一期我们终于完成了CSS与CSS3基础的所有关卡,个人觉得这个FCC集训营的关卡中的CSS知识还是比较全面的。在编写这些关卡的过程中确实重温了不少前端基础,也是收益匪浅。在跟着我的教程一起闯关的同学们,也希望你们也有所收获。
我是三钻,一个在技术银河中等你们一起来终身漂泊学习。点赞是力量,在看是认可并且关爱博主!下期再见 ?!