44 关学习 CSS 与 CSS3 基础「一」

最新推荐文章于 2024-10-04 18:16:53 发布
最新推荐文章于 2024-10-04 18:16:53 发布
阅读量174 收藏 1
点赞数
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45768871/article/details/108166023
版权
本文深入浅出地讲解了CSS的基础知识，包括颜色、字体、定位、间隙、大小、装饰等核心概念。通过实例演示了如何使用行内样式、样式表及类选择器来改变元素样式，介绍了引入Google字体、控制图片大小、添加边框和背景颜色等技巧。
摘要由CSDN通过智能技术生成

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文档中添加<style>标签，然后在标签内编写CSS代码；

\3. 把CSS样式单独写入一个CSS样式文件，然后在需要使用的HTML文档中使用<link>引入。

一般项目中都会选择使用第三种方式，因为比较大型的前端页面，很多样式都是有重复性的，应用引入型的CSS样式，我们就可以把通用的写在一起然后在所有HTML中引入即可，不需要重复编写。并且可以把CSS分类存放，提高可读性和可维护性。

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属性值里的样式属性应该以;符号结束；

学会了什么？

这关卡主要教会我们：

  1. 行内添加style样式属性;
  2. 字体颜色样式属性color;

img

答案

img

「第二关」使用CSS选择器改变元素样式

关卡名：Change the Color of Text

知识点

  • CSS有几百种样式属性可应用到一个HTML元素中，来改变它在页面中的显示方式。
  • 上一关编写的<h2 style="color: red;">CatPhotoApp</h2>，这里我们使用行内样式，使用了文字颜色样式来单独改变h2元素中的文字。
  • 这种应用方式只能单独针对HTML中某一个元素进行样式影响，但是更好的方式是使用CSS样式表。

在代码的最顶端加入style标签：

<style></style>

在style中，使用CSS选择器选中所有h2标签，并且给所有h2标签加入字体颜色样式属性color: red：

<style></style>

注意： 选择器名中的样式元素必须用两个大括号包裹着 (开始{与结束})。在样式属性的最后必须加入一个分号;来结束。

过关目标

  • 删除h2行内样式;
  • 在代码顶部加入style样式表代码区;
  • 在样式代码区使用CSS选择器把所有h2元素内的字体改变为蓝色blue;

过关条件

  • h2元素中的style属性需要被移除；
  • 需要创建一个style元素；
  • h2元素中的文字应该是蓝色blue的；
  • 样式表中的样式属性都应该遵循规范，有大括号和结束时的分号；
  • style元素有接受标签；

学会了什么？

这关卡主要教会我们：

  1. 使用style元素
  2. CSS样式元素规范

img

答案

img

「第三关」使用CSS类

关卡名：Use a CSS Class to Style an Element

知识点

  • CSS中的类是为了解决服用样式的问题；

类声明例子：

<style></style>

  • 在style元素中我们编写了一个.blue-textCSS类（CSS类需要在我们的名字前加入.符号, 然后CSS类的命名规范必须使用-分割）；
  • 接着我们可以把这个类加入HTML元素中，比如：<h2 class="blue-text">CatPhotoApp</h2>；
  • 只要给我们需要应用字体颜色为蓝色的HTML元素上加入class="blue-text"，即可获得该CSS类的样式属性。
  • 记住在HTML中加入类，是不需要.这个符号在最前面的。

过关目标

  • 在style元素中，把h2CSS选择器改为.red-text；
  • 并且把颜色值从blue改为red;

过关条件

  • h2元素的问题应该是红色的；
  • h2元素应该拥有一个red-text的类；
  • style样式表中有定义一个.red-text，并且样式属性color的值为red;
  • 不允许在h2中使用行内style属性来改变元素的字体颜色；

学会了什么？

这关卡主要教会我们：

  1. 在CSS样式表中定义类；
  2. 在HTML元素中加入类；
  3. 用类改变HTML元素的样式；

img

答案

img

「第四关」使用CSS类改变多个元素样式

关卡名：Change the Color of Text

知识点

  • 一个类可以赋予给多个元素，让所有被赋予同一个类的元素拥有同一套样式；

几年前twitter公司很火的前端框架bootstrap，就是结合很多这种分类好的的类，让我们在HTML元素中组合使用就可以快速布局网页。所以合理的分类好不同种类的类，然后给他们一种特定用途，有利于CSS开发时提高代码复用性，提高可读性和可维护性。

过关目标

  • 给代码中第一个p元素也加入red-text类;

过关条件

  • h2元素的文字应该是红色；
  • h2元素应该拥有一个red-text类属性；
  • 第一个p元素的内容应该是红色；
  • 第二和第三个p元素的内容颜色应该不是红色；
  • 第一个p元素应该拥有一个red-text类属性；

学会了什么？

这关卡主要教会我们：

  1. 用类名对多个HTML元素赋予同一个样式；

img

答案

img

「第五关」改变文字大小

关卡名：Change the Color of Text

知识点

  • 字体大小是font-size样式属性控制的；

h1 {
  font-size: 30px;
}

过关目标

  • 在style元素中，.red-text下方加入p元素选择器；
  • 在p选择器中加入font-size样式属性，并且把值设置为16px（16像素）；

过关条件

  • 在style元素中为p元素的内容的字体改为16px的大小；

学会了什么？

这关卡主要教会我们：

  1. 改变元素字体大小；

img

答案

img

「第六关」改变元素字体

关卡名：Set the Font Family of an Element

知识点

  • 使用font-family样式属性，我们可以定义一个元素所使用的字体；
  • 举例，如果我们想h2元素使用sans-serif字体，在CSS中需要这么些：

h2 {
  font-family: sans-serif;
}
过关目标

  • 让所有p元素使用monospace字体；

过关条件

  • 所有p元素都使用monospace字体；

学会了什么？

这关卡主要教会我们：

  1. 使用CSS样式属性制定元素使用的字体；

img

答案

img

「第七关」引入Google字体

关卡名：Import a Google Font

知识点

  • 在我们的操作系统中，会有很多通用的字体可以使用。但是除了这些字体之外我们还可以引入自定义字体，也叫web fonts网页字体。
  • 在项目中，有一些设计师会使用一些特殊的字体，主要是为了提高整体页面的美观和协调，这种也是非常常见的。
  • 这个时候我们就需要在HTML中引入字体了。
  • 这个关卡我们使用了Google Fonts库（顾名思义，就是使用谷歌公司提供的公开字体库 - 也就是免费使用的）

注意： 如果我们无法访问谷歌字体的话，这一关是无法过的，只能跳过。但是作为开发人员，我们是有办法的。（你们懂的 😂）

  • 要引入谷歌字体，我们只需要在HTML中加入谷歌字体的URL；
  • 这个关卡中我们需要引入谷歌字体库中的Lobster字体；
  • 我们只需要复制黏贴以下代码，加入到我们代码的顶端即可（如果是在正常的HTML文件格式中，就是加入到<meta></meta>标签之中）；

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

  • 现在我们可以在CSS中使用font-family: Lobster;, font-family字体属性值的格式是: font-family: FAMILY_NAME, GENERIC_NAME;;
  • 里面的FAMILY_NAME就是指定的字体名，如果这个字体找不到，或者语言不适应的话，就会往后面定义的字体进行应用；
  • 换言之GENERIC_NAME就是后备字体，可以用,分割输入多个，这个也会在下一关详细解说；
  • 如果我们的字体名中含有空格，那我们就需要用双引号包裹着，例如："Open Sans"。因为Lobster这个字体不存在这种情况，所以不需要使用双引号；

过关目标

  • 创建一个font-familyCSS规则，并且使用Lobster字体。必须保证我们的h2元素应用了这个字体定义。

过关条件

  • 引入了谷歌字体库中的Lobster字体；
  • h2元素中的字体使用了Lobster字体；
  • 使用h2CSS选择器的来改变字体；
  • 其他p元素应该保持原来的monospace字体；

学会了什么？

这关卡主要教会我们：

  1. 引入谷歌字体;
  2. 使用谷歌字体;

img

答案

img

「第八关」定义字体如何往后取用

关卡名：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标签的签名加入<!--和在结尾加入-->；
  • 注释的结尾必须有-->；

学会了什么？

这关卡主要教会我们：

  1. 给HTML元素追加后备字体；

img

答案

img

「第九关」控制图片大小

关卡名：Size Your Images

知识点

  • CSS中有一个样式属性叫width（宽度），顾名思义这个元素是用来控制元素的宽度的；
  • 与字体大小一样，我们使用px（像素）为单位来定义图片的宽度
  • 举例：如果我们创建一个CSS类larger-image，并且使用这个类来把HTML元素的宽度定义为500像素，我们就用以下写法：

<style></style>

过关目标

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

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

过关条件

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

学会了什么？

这关卡主要教会我们：

  1. 控制元素宽度

img

答案

img

「第十关」添加元素边框

关卡名：Add Borders Around Your Elements

知识点

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

<style></style>

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

<style></style>

过关目标

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

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

过关条件

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

学会了什么？

这关卡主要教会我们：

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

img

答案

img

「第十一关」使用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. 给属性边框弧度；

img

答案

img

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

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

知识点

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

过关目标

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

过关条件

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

学会了什么？

这关卡主要教会我们：

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

img

答案

img

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

关卡名：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. 给元素添加背景颜色；

img

答案

img

「第十四关」给元素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属性；

img

答案

img

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

学会了什么？

这关卡主要教会我们：

  1. 使用id属性；
  2. 在样式表中声明id属性的样式；

img

答案

img

「第十六关」给元素添加内边距

关卡名：Adjust the Padding of an Element

知识点

  • 我们把Cat Photo App放一边，先来学习更多的HTML样式；
  • 可能大家都注意到了，HTML的元素基本上都是一个个像积木一样的正方形盒子组成的；
  • 在排版中最常用的三大属性，它们是用来控制HTML元素之间的空隙的：padding（内边距），margin（外边距）和border（ 边框）；
  • 一个元素的padding，控制一个元素内容四边的空间，还有内容与border边框的距离；
  • 在预览区中的蓝色与红色盒子被包裹在一个黄色盒子之中，我们应该注意到，红色盒子的padding比蓝色盒子的边距要宽；

如果想更深入的理解内容与margin，padding和border之间距离，我们需要一个更好的图解方式，请看下图：

img

上图中有3组颜色，从内到外：蓝色是content(内容部分)，绿色部分是padding(内边距)，黄色部分是border(边框)，最外面的橙色部分是margin(外边距)。通过这个图，我们就能清晰理解这些边距的实际产生的距离的效果。

  • 这里我们可以看到，当我们加大蓝色盒子的padding，盒子内容里面的字体与边框的距离就越远；

过关目标

Change the padding of your blue box to match that of your red box.

  • 改变蓝色盒子的padding，从而让蓝色盒子与红色盒子的padding一致；

过关条件

  • 蓝色盒子的padding应改为20px；

学会了什么？

这关卡主要教会我们：

  1. 使用padding（内边距），margin（外边距）和border(边框)；

img

答案

img

「第十七关」调整元素外边距

关卡名：Adjust the Margin of an Element

知识点

  • 一个元素的margin(外边距)，控制这个元素与周围元素之间的空间；
  • 所以我们可以看到黄色盒子内的蓝色盒子与红色盒子，红色盒子拥有一个更大的margin，同时让红色盒子看起来更小了；
  • 当我们加大蓝色盒子的margin的时候，也会看到同等的变化。因为蓝色盒子与周边元素的间距会加大，同时蓝色盒子的content内容可以用的空间就需要伸缩适应。最后蓝色盒子就会变小了；

为了更好的理解为什么内容区域宽高会变动，我们先来看看红色盒子的空间信息：

img

首先这个例子中，红色盒子的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内容部分。

img

如果我们给盒子一个宽高后，我们加大padding时盒子就会变大。甚至有时候在排版的过程中，使用padding就会发现盒子会超出了父级的元素盒子。这里我们可以深入解说一下CSS中的两种盒模型：

盒模型：标准盒模型

  • 盒子宽度 = 内容的宽度
  • 盒子高度 = 内容的高度

其他间距都是额外加入的，会影响盒子总体呈现的宽高

img

如果不希望使用盒子的padding的时候影响盒子总体大小，我们就要把盒子变成IE盒模型

>

在盒子的CSS中添加box-sizing: border-box

盒模型：IE盒模型

  • 盒子宽度 = border + padding + 内容的宽度
  • 盒子高度 = border + padding + 内容的高度

盒子的框高包含了边框和内边距，所以整体的盒子高度不受padding和border影响。

img

过关目标

  • 改变蓝色盒子的margin，从而让蓝色盒子和红色盒子又一样的展示效果；

过关条件

  • blue-box类应有20px的margin；

学会了什么？

这关卡主要教会我们：

  1. margin的使用；
  2. padding对盒子的宽高的影响；
  3. 标准盒模型和IE盒模型；

答案

img

「第十八关」给元素负外边框

关卡名：Add a Negative Margin to an Element

知识点

  • 一个元素的margin控制它的周边与它的边框之间的空隙；
  • 如果我们给一个元素一个负数的margin，这个元素会变大；

所以给一个元素负margin就会变大？是，也不是！但是为什么呢？margin是外边框，不应该会对元素的内容产生大小变动呀？

要回答这个疑问，我们首先来看看改为负margin之前和之后是怎么样的：

img

img

  • 首先第一最外层的黄色盒子没有定义宽高，所以它是自适应浏览器窗口宽高；
  • 第二我们没有给蓝色盒子定义宽高，所以它的内容宽高也是跟随着父级宽高；
  • 蓝色盒子原本的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；

学会了什么？

这关卡主要教会我们：

  1. 给元素负margin；

img

答案

img

「第十九关」给元素每个边缘不同的内边距

关卡名：Add Different Padding to Each Side of an Element

知识点

  • 有时候我们需要自定义一个元素，并且要给一个元素每个边缘一个不同的padding；
  • CSS让我们可以控制一个元素4个边的内边距，控制的属性分别是：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；

学会了什么？

这关卡主要教会我们：

  1. 单独给每一个边缘不同的内边距；

img

答案

img

「第二十关」给元素每个边缘不同的外边距

关卡名：Add Different Margins to Each Side of an Element

知识点

  • 有时候我们需要自定义一个元素，并且要给一个元素每个边缘一个不同的margin；
  • CSS让我们可以控制一个元素4个边的外边距，控制的属性分别是：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；

学会了什么？

这关卡主要教会我们：

  1. 单独给每一个边缘不同的外边距；

img

答案

img

「第二十一关」使用顺时针语法指定元素内边距

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

学会了什么？

这关卡主要教会我们：

  1. 使用顺时针语法给元素分配内边距；

img

答案

img

「第二十二关」使用顺时针语法指定元素外边距

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

学会了什么？

这关卡主要教会我们：

  1. 使用顺时针语法给元素分配外边距；

img

答案

img

妙趣前端
关注
专栏目录
CSS，CSS3基础
11-05
**CSS与CSS3基础知识概述** CSS（层叠样式表）是一种用于描述网页及应用程序用户界面外观和表现的样式语言。它是Web开发中的关键技术之一，与HTML或XML（包括SVG、MathML等）配合使用，为网页添加样式和布局。CSS3...
CSS样式的基础学习总结
09-25
学习CSS需要理解选择器的工作原理，如元素选择器、类选择器、ID选择器，以及更高级的选择器如伪类和伪元素。同时，掌握CSS的层叠原则（Cascading）对于正确应用样式至关重要。随着技术的发展，CSS预处理器（如Sass、...
【FCC前端教程】44关学习CSS与CSS3基础「二」
三钻 - 之前端到全栈之路
07-11 1627
我有一段时间没有更新FCC前端教程了，这一周就继续写完CSS与CSS3基础的教程。最近工作和生活都比较繁忙所以文章更新也受到了一定的影响。不过技术文章写作再忙也不会放弃的。我会继续努力坚持着一周一篇文章的进度，继续为大家带来我学习到的知识。让我们一起继续终身学习吧！
【FCC前端教程】44关学习CSS与CSS3基础「一」
三钻 - 之前端到全栈之路
05-17 2758
这周我们一起闯过了22关，下一期我们会一起把剩余的22关完成。学习是一种像爬山一样的过程，要经历过漫长的上坡路，一步一个脚印。“路漫漫其修远兮，吾将上下而求索。”， 在追寻知识的道路上，前方的道路还很漫长，但我们将百折不挠，不遗余力地，上天下地的去追求和探索。让我们继续坚持学习，终身学习成长。在大前端的时代爬到技术的巅峰，做一个有深度的技术人员。
HTML + CSS3 基础入门与进阶
weixin_49809163的博客
04-06 3461
HTML + CSS3 基础入门与进阶简介一、HTML 入门与进阶二、CSS 入门与进阶1、CSS 基础入门（1）CSS3简介（2）CSS 的书写位置（3）CSS 的基本语法2、CSS 选择器（1）标签选择器（2）id 选择器（3）class 选择器（4）复合选择器（5）伪类（6）元素关系选择器（7）序号选择器（8）属性选择器（9）CSS3 新增的伪类（10）伪元素（11）层叠性和选择器权重计算3、文本与字体属性（1）常用文本样式属性（2）常用字体属性（3）段落和行相关属性（4）继承性4、CSS 盒模型（1
css学习
weixin_66989547的博客
06-11 1155
CSS（Cascading Style Sheets）是一种用于设置网页元素的样式和布局的代码语言。它允许设计师和开发者在网页中定义文本、背景、边距、填充等样式属性，以及使用不同的布局模型来创建各种布局和效果。学习 CSS 可以帮助你更好地理解和掌握网页设计和开发的基本技能。它不仅可以让你创建美观、易用的网页，还可以让你更好地与设计师和前端开发者进行沟通和协作。虽然 CSS 看起来很简单，但它也有很多高级技术和功能，可以让你创建更加复杂和动态的网页效果。
HTML与CSS学习Day03（移动端适配）
m0_74154295的博客
08-19 1237
此外，一个适当配置的视口还有助于改善网站的可访问性和搜索引擎优化（SEO）。Less 是一种动态样式语言，属于 CSS 预处理器的一种，它扩展了 CSS 的功能，包括变量、嵌套、混合（Mixins）、运算功能以及函数等，使得 CSS 更加强大和富有表现力。HTML 的响应式设计（通过 CSS 实现）可以使网页根据设备的屏幕尺寸自动调整布局、字体大小、图片大小等，从而避免内容超出屏幕或字体太小的问题。总之，视口是响应式Web设计中的一个核心概念，它使得网页能够适应不同设备的屏幕尺寸，从而提供更好的用户体验。
[前端学习之CSS3]（02）：盒模型、浮动与定位属性
最新发布
m0_75100421的博客
10-04 1059
本次学习了：1，盒模型的四个属性。2，布局常用属性：浮动与定位属性。
CSS基础知识
weixin_67804833的博客
07-21 1263
(Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，
CSS基础学习
weixin_45680116的博客
03-01 1240
css 第三天css基础 css是什么? css的中文名称：层叠样式表 css书写位置：一般情况下是在head标签中创建style标签，在style标签中书写样式 css语法：选择器{样式属性：属性值；} css引入方式 ####1. 内嵌式 内嵌式 2. 外联式 外联式 stylesheet 样式表 3. 行内式 行内式 < p style=“font-size:small; color: red;”>撒地方技术的开发看< /p>
HTML5+CSS3+JavaScript从入门到精通【文末送书】
一键难忘的博客
05-23 7577
第二，对图书内容进行了深度更新、优化，如优化了内容布置，弥补了讲解疏漏，将开发环境和工具更新为新版本，增加了对新技术点的剖析，将项目替换为更能体现当今IT开发现状的热门项目等，使其更与时俱进，更适合读者学习；全书共计有205个应用实例，141个编程训练，81个综合练习，1个项目案例，为初学者打造“学习+训练”的强化实战学习环境。读者对象：初学编程的自学者，编程爱好者，大中专院校的老师和学生，相关培训机构的老师和学员，进行毕业设计的学生，初、中级程序开发人员，程序测试及维护人员，参加实习的“菜鸟”程序员。
html入门学习---css基础
gua_Piter的博客
10-28 739
注意1 内部样式：style标签 2 内联模式：在body外添加，即 style属性 外部样式 外部输出的代码书写 1. 单词表示法：red，green… 2. 十六进制表示法：#000000 #ffffff 3. rgb三原色表示法： rgb(255,255,255)红绿蓝表示, 取值范围0~255. 1.4 css背景样式 1. backeground-color 背景色 2. backgground-image 背景图 url（背景地址） 默认：将整个背景铺满 3. background-r
HTML+CSS3基础知识点资源
03-14
学习HTML+CSS3时，动手实践至关重要。通过创建简单的网页并不断修改样式，你可以直观地感受这两门技术的力量。此外，理解响应式设计原理，即如何利用媒体查询(`@media`)来使网页在不同设备上呈现良好，是现代网页...
html+css基础学习入门教程标记语言——网页应用CSS样式
01-08
前端开发是一个不断发展的领域，随着浏览器对CSS新特性的支持度提升，开发者需要不断学习和掌握新的技巧，以创建更高效、更美观的网页。无论你是初学者还是有一定经验的开发者，了解并熟练运用这些CSS应用方法都至关...
CSS实现平行四边形
热门推荐
qq_45768871的博客
01-21 2万+
作者：晴栀Sunset 平行四边形 文章目录平行四边形背景知识难题嵌套元素方案伪元素方案总结 时间有三种步伐：未来姗姗来迟，现在象箭一样飞逝，过去永远静止不动。 背景知识 基本的 CSS 变形 难题 平行四边形其实是矩形的超集：它的各条边是两两平行的，但各个角则不一定都是直角。在视觉设计中，平行四边形往往可以传达出一种动感。 让我们试着用 CSS 创建一个按钮状的平行四边形链接。我们的起点就是一个普通的块状按钮，辅以一些简单的样式，如图 3-13 所示。然后，我们可以通过skew() ..
大前端介绍
qq_45768871的博客
09-11 6502
前端 简单来说，大前端就是所有前端的统称，比如Android、iOS、web、Watch等，最接近用户的那一层也就是UI层，然后将其统一起来，就是大前端。大前端最大的特点在于一次开发，同时适用于所有平台，开发者不用为一个APP需要做Android和iOS两种模式而担心。大前端是web统一的时代，利用web不仅能开发出网站，更可以开发手机端web应用和移动端应用程序。 为什么出现大前端 由于node的出现，前端工程师不需要依赖于后端程序而直接运行，从而前后端分离起来。所以当开发一个新产品的时候服务只需要
一款支持vue3 的颜色选择器
qq_45768871的博客
01-29 5338
一款支持vue3 的颜色选择器 npm 地址 特点 简单易用，UI在原插件基础上优化增加了圆角和过渡动画 提供以 npm 的形式安装提供全局组件 在支持 html5 input[type=‘color’] 的浏览器实现了「更多颜色」的功能 安装 npm i colorpicker-v3 使用 在main中注册组件 在 main.js 文件中引入插件并注册 import { createApp } from 'vue' import App from './App.vue' import ColorP
关于 z-index，你可能一直存在误区
qq_45768871的博客
11-06 1531
关于 z-index，你可能一直存在误区 z-index 这个属性表面看上去很简单，但如果你想搞清楚其工作原理的话，其实是有不少值得探讨之处的。本文将从层叠上下文（stacking contexts）和一些实际案例出发，谈一谈 z-index 的内部工作原理。 CSS 为盒模型的布局提供了三种不同的定位方案[1] ： 正常文档流 浮动 定位 最后一种方案（特指绝对定位）将会把元素从正常文档流中完全移走，其最终的落脚点将取决于开发者。 通过设置 top，left，bottom 和 right 的值，你可以
HTML+CSS与HTML5+CSS3基础学习笔记
资源摘要信息:"html+css和html5+css3的学习笔记。" HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。CSS（Cascading Style Sheets，层叠样式表）用于描述HTML文档的表现形式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值