【FCC前端教程】44关学习CSS与CSS3基础「一」

「前言」

欢迎回来三钻的FCC前端教程，上一篇文章我们通过28关学会了HTML与HTML5网页开发基础。这一期我们一起攻破前端第二大知识点《CSS基础入门》。因为这一课一共有44关，我把文章分成两期更新。敬请期待！

「CSS基础知识」

Cascading Style Sheet缩写为CSS，顾名思义就是层叠样式表的意思。CSS是HTML中的一个样式表，告诉浏览器网页上的文字和其他内容是如何展示的。

理解CSS

以上是一个官方的定义。我们用一个更简单的方式理解CSS到底是一个什么东东：

如果HTML是骨架，那CSS就是装饰这个骨架的一层皮和身上的装饰品。我们可以通过CSS控制皮肤的颜色，毛孔的粗细。甚至还可以控制我们装饰品上的特效，动效等等（有LED灯的口罩也是一种特效）。

回归HTML中的CSS，我们可以使用CSS控制哪些东西呢？

• color：颜色
• fonts：字体
• positioning：定位
• spacing：间隙
• sizing：大小
• decoration：装饰
• transition：过渡/特效/动效

应用方式

我们一共有3种应用CSS样式的方法。

1. 我们可以在HTML元素行内的style中编写样式；
2. 在HTML文档中添加

   过关目标

   • 创建一个smaller-image的CSS类，并且用这个类来缩小一个图片的大小为100像素宽；

   注意：因为浏览器的设置，有一些用户会默认把网页放大缩小了，不是默认的100%。如果是的话，请还原100%伸缩值后才能正常通过此关哦！

   过关条件

   • img元素需要有smaller-imge类；
   • img元素应该是100px宽，并且浏览器缩放是在100%；

   学会了什么？

   这关卡主要教会我们：

   1. 控制元素宽度

   

   答案

   

   

   「第十关」添加元素边框

   关卡名：Add Borders Around Your Elements

   知识点

   • CSS边框有这些属性：style, color 和 width；
   • 举例：如果我们想给一个HTML元素创建一个红色的，5像素边框，我们就需要用这样一个CSS类来实现；

   还有一种更简单快捷的写法：

   过关目标

   • 创建一个类叫thick-green-border；
   • 这个CSS类给HTML元素加入一个10px，实线（solid）和绿色（green）的边框；
   • 给我们的猫咪图片加入这个类；

   记住：我们是可以给HTML元素中的class属性添加多个类，只要使用空格分隔即可。如：
   

   过关条件

   • img元素需要有smaller-imge类；
   • img元素需要有thick-green-border类；
   • 图片应有一个10px宽的边框；
   • 图片应有一个实线的边框样式；
   • 图片应有一个绿色的边框样式；

   学会了什么？

   这关卡主要教会我们：

   1. 给元素添加边框；
   2. 给边框加入宽度，线的样式和颜色；

   

   答案

   

   

   「第十一关」使用border-radius实现圆边

   关卡名：Add Rounded Corners with border-radius

   知识点

   • 我们的喵咪图片现在是直角边的；
   • 我们可以使用border-radius把图片的四个角改圆边；

   过关目标

   • 我们可以给border-radius一个弧度像素值；
   • 现在给我们的猫咪图片一个10px的border-radius；

   注意：这一关中，是有多个接单方案的：

   1. 在.thick-green-border中添加border-radius；
   2. 在.smaller-image中添加border-radius；

   过关条件

   • img元素需要有thick-green-border类；
   • 图片应有一个10px的边框弧度；

   学会了什么？

   这关卡主要教会我们：

   1. 给属性边框弧度；

   

   答案

   

   

   「第十二关」实现圆形图片

   关卡名：Make Circular Images with a border-radius

   知识点

   • CSS的border-radius属性不止可以使用像素为单位，我们还可以使用百分比；

   过关目标

   • 给我们的猫咪图片一个50%的border-radius；

   过关条件

   • 图片应有一个50%的边框弧度；
   • 图片的边框弧度必须是一个百分比值50%；

   学会了什么？

   这关卡主要教会我们：

   1. 给元素添加百分比弧度值；

   

   答案

   

   

   「第十三关」给元素一个背景颜色

   关卡名：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.

   • 创建一个CSS类silver-background，其中加入background-color属性和属性值为silver；
   • 然后把这个类加入到div元素的class属性中；

   过关条件

   • div元素应有一个silver-background类；
   • div元素应有银色（silver）背景颜色；
   • style标签中应该有一个.silver-background类选择器，并且有background-color属性和属性值为silver；

   学会了什么？

   这关卡主要教会我们：

   1. 给元素添加背景颜色；

   

   答案

   

   

   「第十四关」给元素ID值

   关卡名：Set the id of an Element

   知识点

   • 除了classCSS类属性，我们还可以给每一个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；

   学会了什么？

   这关卡主要教会我们：

   1. 给元素添加id属性；

   

   答案

   

   

   「第十五关」使用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;
   }
   

   注意：在我们的样式表