chore(i8n,curriculum): processed translations (#41548)
Co-authored-by: Crowdin Bot <support+bot@crowdin.com>
This commit is contained in:
camperbot
GitHub
@ -11,17 +11,19 @@ dashedName: animate-elements-continually-using-an-infinite-animation-count
|
||||
|
||||
之前的关卡里介绍了一些动画属性以及 `@keyframes` 规则的用法。 还有一个常用的动画属性是 `animation-iteration-count`，这个属性允许你控制动画循环的次数。 下面是一个例子：
|
||||
|
||||
`animation-iteration-count: 3;`
|
||||
```css
|
||||
animation-iteration-count: 3;
|
||||
```
|
||||
|
||||
在这种情况下，动画将在运行 3 次后停止，但可以通过设置该值为 `infinite` 来继续运行动画。
|
||||
在这里动画会在运行 3 次后停止，如果想让动画一直运行，可以把值设置成 `infinite`。
|
||||
|
||||
# --instructions--
|
||||
|
||||
把 `animation-iteration-count` 属性值改成 `infinite`，以使右边的球持续跳跃。
|
||||
把 `animation-iteration-count` 属性改成 `infinite`，使右边的球一直跳跃。
|
||||
|
||||
# --hints--
|
||||
|
||||
`animation-iteration-count` 属性应有一个值 `infinite`。
|
||||
`animation-iteration-count` 属性的值应为 `infinite`。
|
||||
|
||||
```js
|
||||
assert($('#ball').css('animation-iteration-count') == 'infinite');
|
||||
|
||||
@ -11,21 +11,25 @@ dashedName: create-a-gradual-css-linear-gradient
|
||||
|
||||
HTML 元素的背景色并不局限于单色。 CSS 还为我们提供了颜色渐变。 可通过 `background` 里的 `linear-gradient()` 实现线性渐变， 以下是它的语法：
|
||||
|
||||
`background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);`
|
||||
```css
|
||||
background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);
|
||||
```
|
||||
|
||||
第一个参数用来表明颜色渐变的初始方向。 它的值是一个角度，比如 `90deg` 代表水平渐变（从左到右），再比如 `45deg` 代表对角线方向的渐变（从左下到右上）。 后续的参数指定了渐变颜色的顺序。
|
||||
第一个参数指定了颜色过渡的方向——它的值是角度，`90deg` 表示垂直渐变（从左到右），`45deg` 表示沿对角线渐变（从左下方到右上方）。 其他参数指定了渐变颜色的顺序：
|
||||
|
||||
例如：
|
||||
|
||||
`background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));`
|
||||
```css
|
||||
background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
使用 `linear-gradient()` 将 `div` 的 `background` 设置为渐变色，渐变的起始角度为 35 度，颜色从 `#CCFFFF` 过渡到 `#FFCCCC`。
|
||||
使用 `linear-gradient()` 给 `div` 元素添加 `background` 渐变色，渐变角度为 35 度，从 `#CCFFFF` 过渡到 `#FFCCCC`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`div` 元素应有一个指定方向和颜色的 `linear-gradient` 来设置 `background`。
|
||||
`div` 元素应有一个指定方向和颜色的 `linear-gradient` `background`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -15,17 +15,19 @@ dashedName: learn-how-bezier-curves-work
|
||||
|
||||
`cubic-bezier` 函数包含了 1 * 1 网格里的4个点：`p0`、`p1`、`p2`、`p3`。 其中 `p0` 和 `p3` 是固定值，代表曲线的起始点和结束点，坐标值依次为 (0, 0) 和 (1, 1)。 你只需设置另外两点的 x 值和 y 值，设置的这两点确定了曲线的形状从而确定了动画的速度曲线。 在 CSS 里面通过 `(x1, y1, x2, y2)` 来确定 `p1` 和 `p2`。 以下就是 CSS 贝塞尔曲线的例子：
|
||||
|
||||
`animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);`
|
||||
```css
|
||||
animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
|
||||
```
|
||||
|
||||
在上面的例子里，两个点的 x 和 y 值相等（x1 = 0.25 = y1 和 x2 = 0.75 = y2），如果你还记得初中几何，结果是从原点到点 (1, 1) 的一条直线。 动画速度呈线性，效果和 `linear` 一致。 换言之，元素会匀速运动。
|
||||
在上面的例子里，两个点的 x 和 y 值相等（x1 = 0.25 = y1 和 x2 = 0.75 = y2）。如果你还记得几何课的知识，结果是从原点到点 (1, 1) 的一条直线。 元素在动画中的速度呈线性，效果和使用 `linear` 关键词的效果一致。 换言之，元素匀速运动。
|
||||
|
||||
# --instructions--
|
||||
|
||||
对于 id 为 `ball1` 的元素，请把 `animation-timing-function` 属性值从 `linear` 变成等价的 `cubic-bezier` 函数值。 也就是使用上面例子给的值。
|
||||
对于 id 为 `ball1` 的元素，把 `animation-timing-function` 属性的值从 `linear` 改为等价的 `cubic-bezier` 函数值。 也就是说使用上面例子给的值。
|
||||
|
||||
# --hints--
|
||||
|
||||
对于 id 为 `ball1` 的元素，请把 `animation-timing-function` 属性值从 linear 变成等价的 `cubic-bezier` 函数值。也就是使用上面例子给的值。
|
||||
id 为 `ball1` 的元素的 `animation-timing-function` 属性值应该为和 linear 预定值等价的 `cubic-bezier` 函数值。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -34,7 +36,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
id 为 `ball2` 的元素的 `animation-timing-function` 属性值应该保持不变。
|
||||
id 为 `ball2` 的元素的 `animation-timing-function` 属性值不应改变。
|
||||
|
||||
```js
|
||||
const ball2Animation = __helpers.removeWhiteSpace(
|
||||
|
||||
@ -15,17 +15,19 @@ dashedName: make-motion-more-natural-using-a-bezier-curve
|
||||
|
||||
下面的例子模拟了杂耍球运动：
|
||||
|
||||
`cubic-bezier(0.3, 0.4, 0.5, 1.6);`
|
||||
```css
|
||||
cubic-bezier(0.3, 0.4, 0.5, 1.6);
|
||||
```
|
||||
|
||||
注意 y2 的值是大于 1 的。 虽然贝塞尔曲线是在 1 * 1 的坐标系统内 x 值只能取 0 到 1，但是 y 值是可以大于 1 的。 这样我们才能模拟杂耍球运动。
|
||||
注意 y2 的值是大于 1 的。 虽然贝塞尔曲线是在 1*1 的坐标系统内，x 值只能在 0 到 1，但是 y 值是可以大于 1 的。 这样才能模拟杂耍球运动。
|
||||
|
||||
# --instructions--
|
||||
|
||||
把 id 为 `green` 的元素的 `animation-timing-function` 值改成 `cubic-bezier` 函数，函数的参数 x1、y1、x2、y2 值依次为 0.311、0.441、0.444、1.649。
|
||||
把 id 为 `green` 的元素的 `animation-timing-function` 值改成 `cubic-bezier` 函数，函数的参数 x1，y1，x2，y2 值依次为 0.311、0.441、0.444、1.649。
|
||||
|
||||
# --hints--
|
||||
|
||||
id 为 `green` 的元素的 `animation-timing-function` 属性值应为 `cubic-bezier` 函数，函数的参数 x1、y1、x2、y2 的值依次为 0.311、0.441、0.444、1.649。
|
||||
id 为 `green` 的元素的 `animation-timing-function` 值应为 `cubic-bezier` 函数，函数的参数 x1，y1，x2，y2 值应为指定值。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -13,15 +13,17 @@ dashedName: modify-fill-mode-of-an-animation
|
||||
|
||||
为此，我们可以通过把 `animation-fill-mode` 设置成 `forwards` 来实现。 `animation-fill-mode` 指定了在动画结束时元素的样式： 你可以这样设置：
|
||||
|
||||
`animation-fill-mode: forwards;`
|
||||
```css
|
||||
animation-fill-mode: forwards;
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
修改 `button:hover` 的 `animation-fill-mode` 属性值为 `forwards`，使按钮悬停时保持高亮。
|
||||
设置 `button:hover` 的 `animation-fill-mode` 属性为 `forwards`，使用户把鼠标悬停在按钮上时，按钮保持高亮。
|
||||
|
||||
# --hints--
|
||||
|
||||
`button:hover` 应该有一个值为 `forwards` 的 `animation-fill-mode` 的属性。
|
||||
`button:hover` 应有一个值为 `forwards` 的 `animation-fill-mode` 属性。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -13,17 +13,19 @@ dashedName: use-a-bezier-curve-to-move-a-graphic
|
||||
|
||||
通俗的讲，将一条直线放在范围只有 1 的坐标轴中，并从中间拿 `p1` 和 `p2` 两个点来拉扯（X 轴的取值区间是 \[0, 1]，Y 轴任意），最后形成的曲线就是动画的贝塞尔速度曲线。 下面是贝塞尔曲线模仿 ease-out 预定义值的例子：
|
||||
|
||||
`animation-timing-function: cubic-bezier(0, 0, 0.58, 1);`
|
||||
```css
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
|
||||
```
|
||||
|
||||
记住所有的 `cubic-bezier` 函数都是从坐标为 (0, 0) 的 `p0` 开始，在坐标为 (1, 1) 的 `p3` 结束。 在这个例子里，曲线在 y 轴（从 0 开始，运动到 `p1` 的 0，然后运动到 `p2` 的 1）上移动的比在 x 轴（从 0 开始，运动到 `p1` 的 0，到 `p2` 的 0.58）上移动的快。 结果是，在这一段动画内元素运动的快。 到曲线的结尾，x 和 y 之间的关系反过来了，y 值保持为1，没有变化，x 值从 0.58 变为 1，元素运动的慢。
|
||||
记住所有的 `cubic-bezier` 函数都是从坐标为 (0, 0) 的 `p0` 开始，在坐标为 (1, 1) 的 `p3` 结束。 在这个例子里，曲线在 y 轴（从 0 开始，运动到 `p1` 的 0，然后运动到 `p2` 的 1）上移动得比在 x 轴（从 0 开始，运动到 `p1` 的 0，到 `p2` 的 0.58）上移动得快。 结果是，在这一段动画内元素运动得快。 到曲线的结尾，x 和 y 之间的关系反过来了，y 值保持为 1，没有变化，x 值从 0.58 变为 1，元素运动得慢。
|
||||
|
||||
# --instructions--
|
||||
|
||||
为了能直观地感受贝塞尔曲线所设置的运动效果，请把 id 为 `red` 的元素的 `animation-timing-function` 属性值改为 `cubic-bezier` 函数，其中 x1、y1、x2、y2 值分别为 0、0、0.58、1。 这会使两个元素运动过程类似。
|
||||
为了看贝塞尔曲线的运动效果，把 id 为 `red` 的元素的 `animation-timing-function` 属性改为 `cubic-bezier` 函数，其中 x1，y1，x2，y2 值分别为 0、0、0.58、1。 这会使两个元素运动过程类似。
|
||||
|
||||
# --hints--
|
||||
|
||||
id 为 `red` 的元素的 `animation-timing-function` 属性值应使用 `cubic-bezier` 函数，其中 x1、y1、x2、y2 值分别为 0、0、0.58、1。
|
||||
id 为 `red` 的元素的 `animation-timing-function` 属性应为 `cubic-bezier` 函数，其中 x1、y1、x2、y2 值分别为 0、0、0.58、1。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -31,13 +33,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
id 为 `red` 的元素不应有 `animation-timing-function` 属性值 `linear`。
|
||||
id 为 `red` 的元素不应有值为 `linear` 的 `animation-timing-function` 属性。
|
||||
|
||||
```js
|
||||
assert($('#red').css('animation-timing-function') !== 'linear');
|
||||
```
|
||||
|
||||
id 为 `blue` 的元素的 `animation-timing-function` 属性不应改变。
|
||||
id 为 `blue` 的元素的 `animation-timing-function` 属性值不应该改变。
|
||||
|
||||
```js
|
||||
const blueBallAnimation = __helpers.removeWhiteSpace(
|
||||
|
||||
@ -17,47 +17,49 @@ dashedName: use-a-css-linear-gradient-to-create-a-striped-element
|
||||
|
||||
下面的代码可以帮助理解成对的起止渐变颜色值是如何过渡的。
|
||||
|
||||
`0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px`
|
||||
```css
|
||||
0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px
|
||||
```
|
||||
|
||||
如果有两个相邻色标的颜色值相同，那么过渡看起来就不会很明显。 由于是在两个相同的颜色间过渡，那么中间的过渡色也会是相同颜色，接着就是这个颜色直接过渡到下一个颜色，最终产生的效果就是条纹。
|
||||
如果每对起止渐变颜色值的颜色都是相同的，由于是在两个相同的颜色间过渡，那么中间的过渡色也为同色，接着就是同色的过渡色和下一个起止颜色，最终产生的效果就是条纹。
|
||||
|
||||
# --instructions--
|
||||
|
||||
修改 `repeating-linear-gradient()` 函数使其为渐变角度为 `45deg` 的条纹，第一个渐变颜色为 `yellow`, 第二个渐变颜色为 `black`。
|
||||
使用 `repeating-linear-gradient()` 函数创建一个渐变角度为 `45deg` 的条纹，然后设置第一对渐变颜色为 `yellow`，第二对渐变颜色为 `black`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`repeating-linear-gradient()` 的渐变角度应该为 45deg。
|
||||
`repeating-linear-gradient()` 的渐变角度应为 45deg。
|
||||
|
||||
```js
|
||||
assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi));
|
||||
```
|
||||
|
||||
`repeating-linear-gradient()` 的渐变角度不应为 90deg。
|
||||
`repeating-linear-gradient()` 的渐变角度应该不再是 90deg。
|
||||
|
||||
```js
|
||||
assert(!code.match(/90deg/gi));
|
||||
```
|
||||
|
||||
0px 处的渐变颜色应该为 `yellow`。
|
||||
0px 处的渐变颜色应该是 `yellow`。
|
||||
|
||||
```js
|
||||
assert(code.match(/yellow\s+?0(px)?/gi));
|
||||
```
|
||||
|
||||
40px 处的第一个渐变颜色应该为 `yellow`。
|
||||
40px 处的一个渐变颜色应该是 `yellow`。
|
||||
|
||||
```js
|
||||
assert(code.match(/yellow\s+?40px/gi));
|
||||
```
|
||||
|
||||
40px 处的第二个渐变颜色应该为 `black`。
|
||||
40px 处的第二个渐变颜色应该是 `black`。
|
||||
|
||||
```js
|
||||
assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi));
|
||||
```
|
||||
|
||||
80px 处最后一个渐变颜色应该为 `black`。
|
||||
80px 处的最后一个渐变颜色应该是 `black`。
|
||||
|
||||
```js
|
||||
assert(code.match(/black\s+?80px/gi));
|
||||
|
||||
@ -29,11 +29,13 @@ CSS 边框具有 `style`、`color`、`width` 属性。
|
||||
|
||||
记得在一个元素上可以同时应用多个 `class`，使用空格来分隔不同 class 即可， 例如：
|
||||
|
||||
`<img class="class1 class2">`
|
||||
```html
|
||||
<img class="class1 class2">
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
`img` 元素应包含 `smaller-image` class。
|
||||
`img` 元素的 class 应包含 `smaller-image`。
|
||||
|
||||
```js
|
||||
assert($('img').hasClass('smaller-image'));
|
||||
|
||||
@ -17,7 +17,9 @@ dashedName: change-the-color-of-text
|
||||
|
||||
以下是将 `h2` 元素设置为蓝色的方法：
|
||||
|
||||
`<h2 style="color: blue;">CatPhotoApp</h2>`
|
||||
```html
|
||||
<h2 style="color: blue;">CatPhotoApp</h2>
|
||||
```
|
||||
|
||||
请注意，需要在内联 `style` 声明末尾加上 `;`。
|
||||
|
||||
|
||||
@ -17,10 +17,15 @@ dashedName: import-a-google-font
|
||||
|
||||
要引入 Google Font，你需要从 Google Fonts 上复制字体的 URL，并粘贴到你的 HTML 里面。 在这个挑战中，我们需要引入 `Lobster` 字体。 因此，请复制以下代码段，并粘贴到代码编辑器顶部，即放到 `style` 标签之前。
|
||||
|
||||
`<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">`
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
```
|
||||
|
||||
现在你可以通过将下面例子中的 FAMILY_NAMEFAMILY_NAME 替换为 `Lobster`，来使用 `Lobster` 字体：
|
||||
`font-family: FAMILY_NAME, GENERIC_NAME;`。
|
||||
现在可以在 CSS 中使用 `Lobster` 字体，并像下面一样使用 `Lobster` 作为 FAMILY_NAME：
|
||||
|
||||
```css
|
||||
font-family: FAMILY_NAME, GENERIC_NAME;
|
||||
```
|
||||
|
||||
GENERIC_NAME 是可选的，它用来指明在其他字体不可用时的后备字体。 我们会在下一个挑战中详细说明。
|
||||
|
||||
@ -28,7 +33,7 @@ GENERIC_NAME 是可选的，它用来指明在其他字体不可用时的后备
|
||||
|
||||
# --instructions--
|
||||
|
||||
给你的网页导入 `Lobster` 字体。 引入 Lobster 字体，然后使用元素选择器将 `h2` 元素的 `font-family` 设置为 `Lobster`。
|
||||
给你的网页导入 `Lobster` 字体。 然后使用元素选择器将 `h2` 元素的 `font-family` 设置为 `Lobster`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -23,17 +23,19 @@ dashedName: override-all-other-styles-by-using-important
|
||||
|
||||
如下所示：
|
||||
|
||||
`color: red !important;`
|
||||
```css
|
||||
color: red !important;
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
`h1` 元素的应有一个 class 为 `pink-text`。
|
||||
`h1` 元素应包含 `pink-text` class。
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
`h1` 元素应该包含 `color: white` 的行内样式声明。
|
||||
`h1` 元素应包含 `blue-text` class。
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
@ -51,7 +53,7 @@ assert($('h1').attr('id') === 'orange-text');
|
||||
assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi));
|
||||
```
|
||||
|
||||
`pink-text` 类应有 `!important` 关键词 ，以覆盖其他声明。
|
||||
`pink-text` class 应有 `!important` 关键词 ，以覆盖其他声明。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -19,9 +19,11 @@ dashedName: override-class-declarations-by-styling-id-attributes
|
||||
|
||||
给 `h1` 元素添加 `id` 属性，属性值为 `orange-text`。 设置方式如下：
|
||||
|
||||
`<h1 id="orange-text">`
|
||||
```html
|
||||
<h1 id="orange-text">
|
||||
```
|
||||
|
||||
`h1` 元素应继续保留 `blue-text` 和 `pink-text` 这两个 class。
|
||||
`h1` 元素需继续保留 `blue-text` 和 `pink-text` 这两个 class。
|
||||
|
||||
在 `style` 元素中创建名为 `orange-text` 的 id 选择器。 例子如下：
|
||||
|
||||
@ -35,7 +37,7 @@ dashedName: override-class-declarations-by-styling-id-attributes
|
||||
|
||||
# --hints--
|
||||
|
||||
`h1` 元素应包含 `pink-text` class。
|
||||
`h1` 元素的应有一个 class 为 `pink-text`。
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
@ -47,7 +49,7 @@ assert($('h1').hasClass('pink-text'));
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
`h1` 的 id 属性值应为 `orange-text`。
|
||||
`h1` 元素的 id 应为 `orange-text`。
|
||||
|
||||
```js
|
||||
assert($('h1').attr('id') === 'orange-text');
|
||||
|
||||
@ -17,9 +17,11 @@ dashedName: override-class-declarations-with-inline-styles
|
||||
|
||||
使用行内样式尝试让 `h1` 的字体颜色变白。 像这样使用：
|
||||
|
||||
`<h1 style="color: green;">`
|
||||
```html
|
||||
<h1 style="color: green;">
|
||||
```
|
||||
|
||||
`h1` 元素需继续保留 `blue-text` 和 `pink-text` 这两个 class。
|
||||
`h1` 元素应继续保留 `blue-text` 和 `pink-text` 这两个 class。
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -35,7 +37,7 @@ assert($('h1').hasClass('pink-text'));
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
`h1` 元素的 id 应为 `orange-text`。
|
||||
`h1` 的 id 属性值应为 `orange-text`。
|
||||
|
||||
```js
|
||||
assert($('h1').attr('id') === 'orange-text');
|
||||
|
||||
@ -21,7 +21,9 @@ dashedName: override-styles-in-subsequent-css
|
||||
|
||||
HTML 同时应用多个 class 属性需以空格来间隔，例子如下:
|
||||
|
||||
`class="class1 class2"`
|
||||
```html
|
||||
class="class1 class2"
|
||||
```
|
||||
|
||||
**注意：**HTML 元素里应用的 class 的先后顺序无关紧要。
|
||||
|
||||
|
||||
@ -17,11 +17,13 @@ dashedName: set-the-id-of-an-element
|
||||
|
||||
设置 `h2` 元素的 id 为 `cat-photo-app` 的代码如下：
|
||||
|
||||
`<h2 id="cat-photo-app">`
|
||||
```html
|
||||
<h2 id="cat-photo-app">
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
请将 `form` 元素的 id 设置为 `cat-photo-form`。
|
||||
设置`form`元素的 id 为`cat-photo-form`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -13,7 +13,9 @@ dashedName: use-clockwise-notation-to-specify-the-margin-of-an-element
|
||||
|
||||
同样，每个方向的外边距值可以在一行里面汇总声明，而无需分别通过 `margin-top`、`margin-right`、`margin-bottom`、`margin-left` 分别声明，比如：
|
||||
|
||||
`margin: 10px 20px 10px 20px;`
|
||||
```css
|
||||
margin: 10px 20px 10px 20px;
|
||||
```
|
||||
|
||||
这四个值按顺时针排序：上、右、下、左，并且设置的效果等同于分别声明每一个方向的外边距值。
|
||||
|
||||
|
||||
@ -11,7 +11,9 @@ dashedName: use-clockwise-notation-to-specify-the-padding-of-an-element
|
||||
|
||||
如果不想每次都要分别声明 `padding-top`、`padding-right`、`padding-bottom`、`padding-left` 属性，可以把它们汇总在一行里面一并声明，像是这样：
|
||||
|
||||
`padding: 10px 20px 10px 20px;`
|
||||
```css
|
||||
padding: 10px 20px 10px 20px;
|
||||
```
|
||||
|
||||
这四个值按顺时针排序：上、右、下、左，并且设置的效果等同于分别声明每一个方向的内边距。
|
||||
|
||||
|
||||
@ -13,11 +13,15 @@ dashedName: use-rgb-values-to-color-elements
|
||||
|
||||
黑色的 `RGB` 值：
|
||||
|
||||
`rgb(0, 0, 0)`
|
||||
```css
|
||||
rgb(0, 0, 0)
|
||||
```
|
||||
|
||||
白色的 `RGB` 值：
|
||||
|
||||
`rgb(255, 255, 255)`
|
||||
```css
|
||||
rgb(255, 255, 255)
|
||||
```
|
||||
|
||||
RGB 值与我们之前学到的十六进制编码不同。`RGB` 值不需要用到 6 位十六进制数字，而只需要指定每种颜色的亮度大小，数值范围从 0 到 255。
|
||||
|
||||
|
||||
@ -13,7 +13,9 @@ dashedName: add-a-submit-button-to-a-form
|
||||
|
||||
例如：
|
||||
|
||||
`<button type="submit">this button submits the form</button>`
|
||||
```html
|
||||
<button type="submit">this button submits the form</button>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -13,7 +13,9 @@ dashedName: add-images-to-your-website
|
||||
|
||||
例如：
|
||||
|
||||
`<img src="https://www.freecatphotoapp.com/your-image.jpg">`
|
||||
```html
|
||||
<img src="https://www.freecatphotoapp.com/your-image.jpg">
|
||||
```
|
||||
|
||||
注意：`img` 元素是没有结束标签的。
|
||||
|
||||
@ -25,7 +27,9 @@ dashedName: add-images-to-your-website
|
||||
|
||||
让我们给上面例子的 `img` 添加 `alt` 属性。
|
||||
|
||||
`<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="A business cat wearing a necktie.">`
|
||||
```html
|
||||
<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="A business cat wearing a necktie.">
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
@ -33,9 +37,7 @@ dashedName: add-images-to-your-website
|
||||
|
||||
在 `main` 元素里，给 `p` 元素前面插入一个 `img` 元素。
|
||||
|
||||
然后将 `src` 的属性值设置为这个 url：
|
||||
|
||||
`https://bit.ly/fcc-relaxing-cat`
|
||||
现在设置 `src` 属性，以便它指向网址 `https://bit.ly/fcc-relaxing-cat`
|
||||
|
||||
最后，不要忘记给 `img` 加上 `alt` 属性。
|
||||
|
||||
|
||||
@ -13,7 +13,9 @@ dashedName: add-placeholder-text-to-a-text-field
|
||||
|
||||
你可以像这样创建一个占位符：
|
||||
|
||||
`<input type="text" placeholder="this is placeholder text">`
|
||||
```html
|
||||
<input type="text" placeholder="this is placeholder text">
|
||||
```
|
||||
|
||||
**注意：**别忘了 `input` 元素是 "自闭和标签"，即不需要结束标签。
|
||||
|
||||
|
||||
@ -13,7 +13,9 @@ dashedName: check-radio-buttons-and-checkboxes-by-default
|
||||
|
||||
在一个 input 元素里面添加 `checked` 这个词，即可实现。 例如:
|
||||
|
||||
`<input type="radio" name="test-name" checked>`
|
||||
```html
|
||||
<input type="radio" name="test-name" checked>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -21,11 +21,13 @@ dashedName: create-a-set-of-checkboxes
|
||||
|
||||
下面是一个复选框的例子：
|
||||
|
||||
`<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>`
|
||||
```html
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
请给表单添加三个复选框， 每个复选框都被嵌套进 `label` 元素中， 并且它们的 `name` 属性均为 `personality`。
|
||||
请给表单添加三个复选框， 每个复选框都被嵌套进 `label` 元素中。 并且它们的 `name` 属性均为 `personality`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -15,7 +15,9 @@ dashedName: create-a-text-field
|
||||
|
||||
你可以像这样创建一个文本输入框：
|
||||
|
||||
`<input type="text">`
|
||||
```html
|
||||
<input type="text">
|
||||
```
|
||||
|
||||
注意 `input` 输入框是没有结束标签的。
|
||||
|
||||
|
||||
@ -13,7 +13,9 @@ dashedName: inform-with-the-paragraph-element
|
||||
|
||||
你可以像这样创建一个段落：
|
||||
|
||||
`<p>I'm a p tag!</p>`
|
||||
```html
|
||||
<p>I'm a p tag!</p>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -13,13 +13,15 @@ dashedName: link-to-external-pages-with-anchor-elements
|
||||
|
||||
`a` 需要一个 `href` 属性指向跳转的目的地。 同时，它还应有内容。 例如：
|
||||
|
||||
`<a href="https://freecodecamp.org">this links to freecodecamp.org</a>`
|
||||
```html
|
||||
<a href="https://freecodecamp.org">this links to freecodecamp.org</a>
|
||||
```
|
||||
|
||||
浏览器将显示文本 `this links to freecodecamp.org`，这是一个可点击的链接。 你可以通过这个链接访问 `https://www.freecodecamp.org`。
|
||||
|
||||
# --instructions--
|
||||
|
||||
创建一个内容文本为 “cat photos” 的 `a` 元素，并将其 `href` 属性值设置为 `https://freecatphotoapp.com`。
|
||||
创建一个内容文本为 “cat photos” 的 `a` 元素，链接指向 `https://freecatphotoapp.com`。
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -29,7 +31,7 @@ dashedName: link-to-external-pages-with-anchor-elements
|
||||
assert(/cat photos/gi.test($('a').text()));
|
||||
```
|
||||
|
||||
你的 `a` 元素应链接到 `https://freecatphotoapp.com`。
|
||||
你的 `a` 元素应链接到 `https://freecatphotoapp.com`
|
||||
|
||||
```js
|
||||
assert(/^https?:\/\/freecatphotoapp\.com\/?$/i.test($('a').attr('href')));
|
||||
|
||||
@ -19,27 +19,35 @@ dashedName: nest-an-anchor-element-within-a-paragraph
|
||||
|
||||
让我们来拆解一下这个例子。 通常，文本是被包裹在 `p` 元素内：
|
||||
|
||||
`<p> Here's a ... for you to follow. </p>`
|
||||
```html
|
||||
<p> Here's a ... for you to follow. </p>
|
||||
```
|
||||
|
||||
接下来是*锚点*元素 `<a>`（它需要结束标签 `</a>`）：
|
||||
|
||||
`<a> ... </a>`
|
||||
```html
|
||||
<a> ... </a>
|
||||
```
|
||||
|
||||
`target` 锚点元素的一个属性，它用来指定链接的打开方式。 属性值 `_blank` 表示链接会在新标签页打开。 `href` 是锚点元素的另一个属性，它用来指定链接的 URL：
|
||||
`target` 是锚点元素的一个属性，它用来指定链接的打开方式。 属性值 `_blank` 表示链接会在新标签页打开。 `href` 是锚点元素的另一个属性，它用来指定链接的 URL：
|
||||
|
||||
`<a href="http://freecodecamp.org"> ... </a>`
|
||||
```html
|
||||
<a href="http://freecodecamp.org"> ... </a>
|
||||
```
|
||||
|
||||
`a` 元素内的文本 `link to freecodecamp.org` 叫作<dfn>锚文本</dfn>，会显示为一个可以点击的链接：
|
||||
|
||||
`<a href=" ... ">link to freecodecamp.org</a>`
|
||||
```html
|
||||
<a href=" ... ">link to freecodecamp.org</a>
|
||||
```
|
||||
|
||||
此示例的最终输出结果是这样：
|
||||
|
||||
你可以访问 [link to freecodecamp.org](http://freecodecamp.org)。
|
||||
Here's a [link to freecodecamp.org](http://freecodecamp.org) for you to follow.
|
||||
|
||||
# --instructions--
|
||||
|
||||
创建一个新的段落 `p` 元素来包裹 `a` 元素。 新段落标签的内容为 `View more cat photos`，其中 `cat photos` 是一个链接，其余的是纯文本。
|
||||
创建一个新的段落 `p` 元素来包裹 `a` 元素。 新段落应有文本 `View more cat photos`，其中 `cat photos` 是一个链接，其余是纯文本。
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -59,7 +67,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`a` 元素应该有锚文本 `cat photos`。
|
||||
`a` 元素应有锚文本 `cat photos`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -69,13 +77,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
应该创建一个新的 `p` 元素。 HTML 代码中应该总共有至少 3 个 `p` 标签。
|
||||
应该创建一个新的 `p` 元素。 页面中应至少包含 3 个 `p` 标签。
|
||||
|
||||
```js
|
||||
assert($('p') && $('p').length > 2);
|
||||
```
|
||||
|
||||
`a` 元素应该被嵌套在新的 `p` 元素中。
|
||||
`a` 应嵌套在新创建的 `p` 元素内。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -94,7 +102,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`a` 元素<em>不</em>应该有文本 `View more`。
|
||||
`a` 元素 <em>不</em> 应有文本 `View more`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -104,7 +112,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
每个 `p` 元素都应该有一个结束标签。
|
||||
确保每个 `p` 元素有结束标签。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -114,7 +122,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
每个 `a` 元素都应该有一个结束标签。
|
||||
确保每个 `a` 元素有结束标签。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -19,11 +19,15 @@ dashedName: say-hello-to-html-elements
|
||||
|
||||
开始标签像这样：
|
||||
|
||||
`<h1>`
|
||||
```html
|
||||
<h1>
|
||||
```
|
||||
|
||||
结束标签像这样：
|
||||
|
||||
`</h1>`
|
||||
```html
|
||||
</h1>
|
||||
```
|
||||
|
||||
开始标签和结束标签的唯一区别就是结束标签多了一个斜杠。
|
||||
|
||||
@ -35,7 +39,7 @@ dashedName: say-hello-to-html-elements
|
||||
|
||||
# --hints--
|
||||
|
||||
`h1` 元素应有文本 `Hello World`。
|
||||
`h1` 元素的内容文本应为 `Hello World`。
|
||||
|
||||
```js
|
||||
assert.isTrue(/hello(\s)+world/gi.test($('h1').text()));
|
||||
|
||||
@ -13,7 +13,9 @@ dashedName: turn-an-image-into-a-link
|
||||
|
||||
如果我们要把图片嵌套进 `a` 元素， 可以这样写：
|
||||
|
||||
`<a href="#"><img src="https://bit.ly/fcc-running-cats" alt="Three kittens running towards the camera."></a>`
|
||||
```html
|
||||
<a href="#"><img src="https://bit.ly/fcc-running-cats" alt="Three kittens running towards the camera."></a>
|
||||
```
|
||||
|
||||
如果把 `a` 的 `href` 属性值设置为 `#`，创建的是一个死链接（不跳转到其他画面）。
|
||||
|
||||
@ -37,7 +39,7 @@ assert($('a').children('img').length > 0);
|
||||
assert(new RegExp('#').test($('a').children('img').parent().attr('href')));
|
||||
```
|
||||
|
||||
每个 `a` 元素都应有结束标签。
|
||||
每个 `a` 元素都应该有一个结束标签。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -15,11 +15,15 @@ dashedName: create-a-media-query
|
||||
|
||||
下面是一个媒体查询的例子，当设备宽度小于或等于 100px 时返回内容：
|
||||
|
||||
`@media (max-width: 100px) { /* CSS Rules */ }`
|
||||
```css
|
||||
@media (max-width: 100px) { /* CSS Rules */ }
|
||||
```
|
||||
|
||||
以下定义的媒体查询，是当设备高度大于或等于 350px 时返回内容：
|
||||
|
||||
`@media (min-height: 350px) { /* CSS Rules */ }`
|
||||
```css
|
||||
@media (min-height: 350px) { /* CSS Rules */ }
|
||||
```
|
||||
|
||||
注意，只有当媒体类型与所使用的设备的类型匹配时，媒体查询中定义的 CSS 才生效。
|
||||
|
||||
|
||||
@ -17,7 +17,9 @@ dashedName: make-typography-responsive
|
||||
|
||||
下面这个例子是设置 `body` 标签的宽度为视窗宽度的 30%。
|
||||
|
||||
`body { width: 30vw; }`
|
||||
```css
|
||||
body { width: 30vw; }
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -9,13 +9,15 @@ dashedName: add-a-text-alternative-to-images-for-visually-impaired-accessibility
|
||||
|
||||
# --description--
|
||||
|
||||
Probablemente hayas visto un atributo `alt` en una etiqueta `img` en otros desafíos. El atributo`alt` describe el contenido de la imagen y proporciona un texto alternativo. Un atributo `alt` ayuda en los casos en que la imagen no se carga o un usuario no pueda verla. Los motores de búsqueda también lo utilizan para comprender que contiene una imagen e incluirla en los resultados de búsqueda. Aquí hay un ejemplo:
|
||||
Probablemente hayas visto un atributo `alt` en una etiqueta `img` en otros desafíos. El atributo`alt` describe el contenido de la imagen y proporciona un texto alternativo. Un atributo `alt` ayuda en los casos en que la imagen no se carga o un usuario no pueda verla. Los motores de búsqueda también lo utilizan para comprender qué contiene una imagen para incluirla en los resultados de búsqueda. Aquí hay un ejemplo:
|
||||
|
||||
`<img src="importantLogo.jpeg" alt="Company logo">`
|
||||
```html
|
||||
<img src="importantLogo.jpeg" alt="Company logo">
|
||||
```
|
||||
|
||||
Las personas con dificultades visuales dependen de lectores de pantalla para convertir el contenido web a una interfaz de audio. Por esta razón, no podrán recibir la información si solo se les presenta de manera visual. En el caso de las imágenes, los lectores de pantalla pueden acceder el atributo `alt` y leer su contenido para proporcionar información clave.
|
||||
|
||||
Un buen texto `alt` le brinda al lector una breve descripción de la imagen. Siempre deberías incluir el atributo `alt` en tus imágenes. Además, según la especificación de HTML5, esto ahora se considera obligatorio.
|
||||
Un buen texto `alt` le brinda al lector una breve descripción de la imagen. Siempre deberías incluir el atributo `alt` en tus imágenes. De acuerdo con las especificaciones de HTML5, esto ahora se considera obligatorio.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -13,7 +13,9 @@ En el último desafío, aprendiste que es obligatorio incluir un atributo `alt`
|
||||
|
||||
Cuando una imagen ya se explica con el contenido de texto o no agrega significado a una página, `img` todavía necesita un atributo `alt`, pero se puede establecer en una cadena vacía. Aquí hay un ejemplo:
|
||||
|
||||
`<img src="visualDecoration.jpeg" alt="">`
|
||||
```html
|
||||
<img src="visualDecoration.jpeg" alt="">
|
||||
```
|
||||
|
||||
Las imágenes de fondo generalmente también caen bajo la etiqueta "decorativa". Sin embargo, normalmente se aplican con reglas CSS y, por lo tanto, no forman parte del proceso de lectores de pantalla del lenguaje de marcado.
|
||||
|
||||
@ -21,7 +23,7 @@ Las imágenes de fondo generalmente también caen bajo la etiqueta "decorativa".
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat ha programado una página esqueleto para la parte del blog de su sitio web. Está planeando agregar una ruptura visual entre sus dos artículos con una imagen decorativa de una espada samurái. Agrega un atributo `alt` a la etiqueta `img` y establezca una cadena vacía. (Ten en cuenta que la imagen `src` no enlace a un archivo real - no te preocupes de que no hay espadas que aparece en la pantalla.)
|
||||
Camper Cat ha programado una página esqueleto para la parte del blog de su sitio web. Está planeando agregar una ruptura visual entre sus dos artículos con una imagen decorativa de una espada samurái. Agrega un atributo `alt` a la etiqueta `img` y establécela a una cadena vacía. (Ten en cuenta que la imagen `src` no enlaza a un archivo real, no te preocupes que no se muestren espadas en la pantalla.)
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -15,11 +15,13 @@ HTML5 permite que este atributo se use en cualquier elemento, pero es particular
|
||||
|
||||
Aquí hay un ejemplo:
|
||||
|
||||
`<button accesskey="b">Important Button</button>`
|
||||
```html
|
||||
<button accesskey="b">Important Button</button>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
El Gato Campero quiere que los enlaces alrededor de los dos títulos de artículos de blog tengan atajos de teclado para que los usuarios de su sitio puedan navegar rápidamente a la historia completa. Agrega un atributo `accesskey` a ambos enlaces y establece el primero en `g` (para Garfield) y el segundo en `c` (para Chuck Norris).
|
||||
Camper Cat quiere que los enlaces alrededor de los dos títulos de artículos de blog tengan atajos de teclado para que los usuarios de su sitio puedan navegar rápidamente a la historia completa. Agrega un atributo `accesskey` a ambos enlaces y establece el primero en `g` (para Garfield) y el segundo en `c` (para Chuck Norris).
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -13,15 +13,17 @@ Continuando con el tema de fechas, HTML5 también introdujo el elemento `time` j
|
||||
|
||||
Aquí hay un ejemplo:
|
||||
|
||||
`<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>`
|
||||
```html
|
||||
<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
¡Ya tenemos los resultados de la encuesta de Mortal Kombat de Camper Cat! Envuelva una etiqueta `time` alrededor del texto `Thursday, September 15<sup>th<sup>` y agregue un atributo `datetime` establecido en `2016-09-15`.
|
||||
¡Ya tenemos los resultados de la encuesta de Mortal Kombat de Camper Cat! Envuelve una etiqueta `time` alrededor del texto `Thursday, September 15<sup>th<sup>` y agrega un atributo `datetime` establecido en `2016-09-15`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu código debe tener un elemento `p` que incluya el texto `Thank you to everyone for responding to Master Camper Cat's survey.` e incluye un elemento `time`.
|
||||
Tu código debe tener un elemento `p` que incluya el texto `Thank you to everyone for responding to Master Camper Cat's survey.` e incluya un elemento `time`.
|
||||
|
||||
```js
|
||||
assert(timeElement.length);
|
||||
|
||||
@ -13,13 +13,15 @@ El atributo HTML `tabindex` tiene tres funciones distintas relacionadas con el f
|
||||
|
||||
Ciertos elementos, como los vínculos y los controles de formulario, reciben automáticamente el foco del teclado cuando un usuario pestañas a través de una página. Está en el mismo orden en que los elementos vienen en la fuente del lenguaje de marcado de HTML. Esta misma funcionalidad se puede dar a otros elementos, como `div`, `span` y `p`, colocando un atributo `tabindex="0"`. Aquí hay un ejemplo:
|
||||
|
||||
`<div tabindex="0">I need keyboard focus!</div>`
|
||||
```html
|
||||
<div tabindex="0">I need keyboard focus!</div>
|
||||
```
|
||||
|
||||
**Nota:** Un valor negativo de `tabindex` (normalmente -1) indica que un elemento es enfocable, pero no es accesible por el teclado. Este método generalmente se usa para enfocar el contenido mediante programación (como cuando se activa un `div` utilizando para una ventana emergente), y esta más allá del alcance de estos desafíos.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat creó una nueva encuesta para recopilar información sobre sus usuarios. Él sabe que los campos de entrada obtienen automáticamente el enfoque del teclado, pero quiere asegurarse de que los usuarios de su teclado hagan una pausa en las instrucciones mientras tabulan los elementos. Agrega un atributo `tabindex` a la etiqueta `p` y establezca su valor en `0`. Extra - el uso de `tabindex` también permite que la pseudo-clase CSS `:focus` funcione en la etiqueta `p`.
|
||||
Camper Cat creó una nueva encuesta para recopilar información sobre sus usuarios. Él sabe que los campos de entrada obtienen automáticamente el enfoque del teclado, pero quiere asegurarse de que los usuarios de su teclado hagan una pausa en las instrucciones mientras tabulan los elementos. Agrega un atributo `tabindex` a la etiqueta `p` y establece su valor en `0`. Extra: el uso de `tabindex` también permite que la pseudo-clase CSS `:focus` funcione en la etiqueta `p`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -17,9 +17,13 @@ Es importante tener en cuenta que cuando el orden de tabulación se establece de
|
||||
|
||||
Aquí hay un ejemplo:
|
||||
|
||||
`<div tabindex="1">I get keyboard focus, and I get it first!</div>`
|
||||
```html
|
||||
<div tabindex="1">I get keyboard focus, and I get it first!</div>
|
||||
```
|
||||
|
||||
`<div tabindex="2">I get keyboard focus, and I get it second!</div>`
|
||||
```html
|
||||
<div tabindex="2">I get keyboard focus, and I get it second!</div>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -11,7 +11,9 @@ dashedName: animate-elements-continually-using-an-infinite-animation-count
|
||||
|
||||
En los desafíos anteriores, vimos cómo utilizar algunas de las propiedades de la animación y la regla `@keyframes`. Otra propiedad de animación es la `animation-iteration-count` la cual te permite controlar cuántas veces te gustaría hacer un bucle a través de la animación. Por ejemplo:
|
||||
|
||||
`animation-iteration-count: 3;`
|
||||
```css
|
||||
animation-iteration-count: 3;
|
||||
```
|
||||
|
||||
En este caso, la animación se detendrá después de ejecutarse 3 veces, pero es posible hacer que la animación se ejecute continuamente estableciendo ese valor en `infinite`.
|
||||
|
||||
|
||||
@ -11,17 +11,21 @@ dashedName: create-a-gradual-css-linear-gradient
|
||||
|
||||
La aplicación de un color en elementos HTML no se limita a un tono plano. CSS proporciona la capacidad de usar transiciones de color, también conocidas como degradados, en los elementos. Esto se accede a través de la función `linear-gradient()` de la propiedad `background`. Aquí está la sintaxis general:
|
||||
|
||||
`background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);`
|
||||
```css
|
||||
background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);
|
||||
```
|
||||
|
||||
El primer argumento especifica la dirección desde la que comienza la transición de color - se puede establecer como un grado, donde `90deg` hace un gradiente horizontal (de izquierda a derecha) y `45deg` hace un gradiente diagonal (de abajo a izquierda hacia arriba a la derecha). Los siguientes argumentos especifican el orden de los colores utilizados en el degradado.
|
||||
El primer argumento especifica la dirección desde la que comienza la transición de color, se puede establecer como un grado, donde `90deg` hace un gradiente horizontal (de izquierda a derecha) y `45deg` hace un gradiente diagonal (de abajo a izquierda hacia arriba a la derecha). Los siguientes argumentos especifican el orden de los colores utilizados en el degradado.
|
||||
|
||||
Ejemplo:
|
||||
|
||||
`background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));`
|
||||
```css
|
||||
background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Utiliza un `linear-gradient()` para el `div` del elemento `background` y configúralo desde una dirección de 35 grados para cambiar el color de `#CCFFFF` a `#FFCCCC`.
|
||||
Utiliza un `linear-gradient()` para el `background` del elemento `div` y configúralo desde una dirección de 35 grados para cambiar el color de `#CCFFFF` a `#FFCCCC`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -15,17 +15,19 @@ En las animaciones CSS, las curvas Bezier se utilizan con la función `cubic-bez
|
||||
|
||||
La función `cubic-bezier` consta de cuatro puntos principales que se encuentran en esta cuadrícula de 1 por 1: `p0`, `p1`, `p2` y `p3`. `p0` y `p3` están configurados para ti: son los puntos inicial y final que siempre se encuentran respectivamente en el origen (0, 0) y (1, 1). Establece los valores x e y para los otros dos puntos, y donde los coloca en la cuadrícula determina la forma de la curva para la animación que debe seguir. Esto se hace en CSS declarando los valores x e y de los puntos "anchor" `p1` y `p2` de la siguiente forma:`(x1, y1, x2, y2)`. Juntando todo, aquí hay un ejemplo de una curva de Bezier en codigo CSS:
|
||||
|
||||
`animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);`
|
||||
```css
|
||||
animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
|
||||
```
|
||||
|
||||
En el ejemplo anterior, los valores x e y son equivalentes para cada punto (x1 = 0.25 = y1 y x2 = 0.75 = y2), que si recuerdas la clase de geometría, da como resultado una línea que se extiende desde el origen hasta el punto (1, 1). Esta animación es un cambio lineal de un elemento durante la duración de una animación, y es lo mismo que usar la palabra clave `linear`. En otras palabras, cambia a una velocidad constante.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Para el elemento con el id de `ball1`, cambia el valor de la propiedad `animation-timing-function` de `linear` a su valor equivalente de la función `cubic-bezier`. Utiliza los valores de puntos dados en el ejemplo anterior.
|
||||
Para el elemento con el id de `ball1`, cambia el valor de la propiedad `animation-timing-function` de `linear` a su valor de función `cubic-bezier` equivalente. Utiliza los valores de puntos dados en el ejemplo anterior.
|
||||
|
||||
# --hints--
|
||||
|
||||
El valor de la propiedad `animation-timing-function` para el elemento con el id `ball1` debe ser el equivalente lineal `cubic-bezier` función.
|
||||
El valor de la propiedad `animation-timing-function` para el elemento con el id `ball1` debe ser la función lineal `cubic-bezier` equivalente.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -34,7 +36,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
El valor de la propiedad `animation-timing-function` para el elemento con el id `ball2` no debería cambiar.
|
||||
El valor de la propiedad `animation-timing-function` para el elemento con el id `ball2` no debe cambiar.
|
||||
|
||||
```js
|
||||
const ball2Animation = __helpers.removeWhiteSpace(
|
||||
|
||||
@ -15,7 +15,9 @@ La función `animation-timing-function` se realiza automáticamente en cada foto
|
||||
|
||||
La siguiente curva cúbica de Bezier simula el movimiento de rebotes:
|
||||
|
||||
`cubic-bezier(0.3, 0.4, 0.5, 1.6);`
|
||||
```css
|
||||
cubic-bezier(0.3, 0.4, 0.5, 1.6);
|
||||
```
|
||||
|
||||
Observa que el valor de y2 es mayor que 1. Aunque la curva cúbica de Bezier se mapea en un sistema de coordenadas 1 por 1, y solo puede aceptar valores x de 0 a 1, el valor y se puede establecer en números mayores que uno. Esto da como resultado un movimiento de rebote que es ideal para simular la pelota rebotando.
|
||||
|
||||
|
||||
@ -13,11 +13,13 @@ Eso es genial, pero aún no funciona bien. Observa como la animación se restabl
|
||||
|
||||
Esto se puede hacer estableciendo la propiedad `animation-fill-mode` en `forwards`. El `animation-fill-mode` especifica el estilo aplicado a un elemento cuando la animación ha finalizado. Puedes configurarlo así:
|
||||
|
||||
`animation-fill-mode: forwards;`
|
||||
```css
|
||||
animation-fill-mode: forwards;
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Establece la propiedad `animation-fill-mode` de `button:hover` en `forwards` para que botón permanezca resaltado cuando un usuario pase sobre el.
|
||||
Establece la propiedad `animation-fill-mode` de `button:hover` en `forwards` para que el botón permanezca resaltado cuando un usuario pase sobre el.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -13,7 +13,9 @@ Un desafío anterior discutió la palabra clave `ease-out` que describe un cambi
|
||||
|
||||
En general, el cambio de los puntos de anclaje `p1` y `p2` impulsa la creación de diferentes curvas Bezier, que controlan como la animación progresa a través del tiempo. Aquí hay un ejemplo de una curva de Bezier que usa valores para imitar el estilo de facilidad:
|
||||
|
||||
`animation-timing-function: cubic-bezier(0, 0, 0.58, 1);`
|
||||
```css
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
|
||||
```
|
||||
|
||||
Recuerda que todas las funciones `cubic-bezier` comienzan con `p0` en (0, 0) y terminan con `p3` en (1, 1). En este ejemplo, la curva se mueve más rápido a través del eje Y (comienza en 0, va a `p1` y valor de 0, luego va a `p2` y valor de 1) que se mueve a través del eje X (0 para iniciar, luego 0 para `p1`, hasta 0.58 para `p2`. Como resultado, el cambio en el elemento animado progresa más rápido que el tiempo de la animación para ese segmento. Hacia el final de la curva, la relación entre el cambio en los valores X e Y se invierte: el valor y se mueve de 1 a 1 (sin cambios), y los valores X se mueven de 0.58 a 1, lo que hace que los cambios de animación progresen más lentamente en comparación con la duración de la animación.
|
||||
|
||||
|
||||
@ -17,7 +17,9 @@ En el ejemplo demostrado en el editor de código, el degradado comienza con el c
|
||||
|
||||
Para este ejemplo, ayuda a pensar en las paradas de color como pares donde cada dos colores se mezclan juntos.
|
||||
|
||||
`0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px`
|
||||
```css
|
||||
0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px
|
||||
```
|
||||
|
||||
Si cada dos valores de parada de color son del mismo color, la mezcla no es visible porque está entre el mismo color, seguido de una dura transición hacia el siguiente color, así que terminas con rayas.
|
||||
|
||||
|
||||
@ -29,7 +29,9 @@ Crea una clase llamada `thick-green-border` (borde grueso verde). Esta clase deb
|
||||
|
||||
Recuerda que puedes aplicar múltiples clases a un elemento usando su atributo `class`, separando cada nombre de clase con un espacio. Por ejemplo:
|
||||
|
||||
`<img class="class1 class2">`
|
||||
```html
|
||||
<img class="class1 class2">
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -17,7 +17,9 @@ La propiedad que es responsable del color del texto de un elemento es la propied
|
||||
|
||||
Aquí te mostramos como establecerías el color de tu elemento `h2` para que sea azul:
|
||||
|
||||
`<h2 style="color: blue;">CatPhotoApp</h2>`
|
||||
```html
|
||||
<h2 style="color: blue;">CatPhotoApp</h2>
|
||||
```
|
||||
|
||||
Ten en cuenta que es una buena práctica terminar las declaraciones de inline `style` usando punto y coma (`;`).
|
||||
|
||||
|
||||
@ -17,7 +17,9 @@ Entonces, importemos y apliquemos una fuente de Google (ten en cuenta que si Goo
|
||||
|
||||
Para importar una fuente de Google, puedes copiar la URL de la fuente desde la librería de Google Fonts y luego pegarla en tu código HTML. Para este desafío, importaremos la fuente `Lobster`. Para ello, copia el siguiente fragmento de código y pégalo en la parte superior de tu editor de código (antes de abrir el elemento `style`):
|
||||
|
||||
`<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">`
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
```
|
||||
|
||||
Ahora puedes usar la fuente `Lobster` en tu CSS usando `Lobster` como FAMILY_NAME como en el siguiente ejemplo:
|
||||
|
||||
|
||||
@ -23,7 +23,9 @@ Añade la palabra clave `!important` a la declaración de color de pink-text par
|
||||
|
||||
Aquí te mostramos un ejemplo de cómo hacerlo:
|
||||
|
||||
`color: red !important;`
|
||||
```css
|
||||
color: red !important;
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -59,7 +61,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Tu elemento `h1` debe ser rosado.
|
||||
Tu elemento `h1` debe ser de color rosado ("pink").
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(255, 192, 203)');
|
||||
|
||||
@ -19,7 +19,9 @@ Sobrescribamos tus clases `pink-text` y `blue-text`, y haz que el `h1` sea naran
|
||||
|
||||
Dale al elemento `h1` el atributo `id` de `orange-text`. Recuerda, los estilos id se ven así:
|
||||
|
||||
`<h1 id="orange-text">`
|
||||
```html
|
||||
<h1 id="orange-text">
|
||||
```
|
||||
|
||||
Deja las clases `blue-text` y `pink-text` en tu elemento `h1`.
|
||||
|
||||
|
||||
@ -17,7 +17,9 @@ Pero existen otras formas de sobreescribir código CSS. ¿Recuerdas los "inline
|
||||
|
||||
Usa un inline style para hacer que nuestro elemento `h1` sea de color blanco. Recuerda que los inline styles se ven así:
|
||||
|
||||
`<h1 style="color: green;">`
|
||||
```html
|
||||
<h1 style="color: green;">
|
||||
```
|
||||
|
||||
Deja las clases `blue-text` y `pink-text` en tu elemento `h1`.
|
||||
|
||||
|
||||
@ -21,7 +21,9 @@ Aplica la clase `blue-text` a tu elemento `h1` además de tu clase `pink-text`,
|
||||
|
||||
Para aplicar múltiples atributos de clase a un elemento HTML debes dejar un espacio entre ellos, como se muestra a continuación:
|
||||
|
||||
`class="class1 class2"`
|
||||
```html
|
||||
class="class1 class2"
|
||||
```
|
||||
|
||||
**Nota:** No importa el orden en que las clases estén enlistadas dentro del elemento HTML.
|
||||
|
||||
|
||||
@ -17,7 +17,9 @@ Los atributos `id` deben ser únicos. Los navegadores no verifican esta regla, p
|
||||
|
||||
A continuación te mostramos un ejemplo de cómo asignar a tu elemento `h2` el id `cat-photo-app`:
|
||||
|
||||
`<h2 id="cat-photo-app">`
|
||||
```html
|
||||
<h2 id="cat-photo-app">
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
@ -25,7 +27,7 @@ Asigna a tu elemento `form` el id `cat-photo-form`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu elemento `form` debe contener el id `cat-photo-form`.
|
||||
Tu elemento `form` debe tener el id `cat-photo-form`.
|
||||
|
||||
```js
|
||||
assert($('form').attr('id') === 'cat-photo-form');
|
||||
|
||||
@ -13,7 +13,9 @@ Intentemos de nuevo, pero esta vez con `margin`.
|
||||
|
||||
En lugar de especificar las propiedades `margin-top`, `margin-right`, `margin-bottom`, y `margin-left` individualmente, puedes especificarlas todas en una sola línea, como se muestra a continuación:
|
||||
|
||||
`margin: 10px 20px 10px 20px;`
|
||||
```css
|
||||
margin: 10px 20px 10px 20px;
|
||||
```
|
||||
|
||||
Estos cuatro valores se leen en el sentido de las agujas del reloj: arriba, derecha, abajo, izquierda, (top, right, bottom, left) y producirán exactamente el mismo resultado que usar las instrucciones específicas de margen.
|
||||
|
||||
|
||||
@ -11,7 +11,9 @@ dashedName: use-clockwise-notation-to-specify-the-padding-of-an-element
|
||||
|
||||
En lugar de especificar las propiedades `padding-top`, `padding-right`, `padding-bottom`, y `padding-left` individualmente, puedes especificarlas todas en una sola línea, como se muestra a continuación:
|
||||
|
||||
`padding: 10px 20px 10px 20px;`
|
||||
```css
|
||||
padding: 10px 20px 10px 20px;
|
||||
```
|
||||
|
||||
Estos cuatro valores se leen en el sentido de las agujas del reloj: arriba, derecha, abajo, izquierda, (top, right, bottom, left) y producirán exactamente el mismo resultado que usar las instrucciones específicas de padding.
|
||||
|
||||
|
||||
@ -13,11 +13,15 @@ Otra forma de representar colores en CSS es utilizar valores `RGB`.
|
||||
|
||||
El valor `RGB` del color negro se ve así:
|
||||
|
||||
`rgb(0, 0, 0)`
|
||||
```css
|
||||
rgb(0, 0, 0)
|
||||
```
|
||||
|
||||
El valor `RGB` del color blanco se ve así:
|
||||
|
||||
`rgb(255, 255, 255)`
|
||||
```css
|
||||
rgb(255, 255, 255)
|
||||
```
|
||||
|
||||
En lugar de usar seis dígitos hexadecimales, como hacemos con el código hexadecimal, en `RGB` se especifica el brillo de cada color con un número que va de 0 a 255.
|
||||
|
||||
|
||||
@ -13,7 +13,9 @@ Agreguemos un botón `submit` a tu formulario. Al hacer clic en este botón se e
|
||||
|
||||
Aquí hay un ejemplo de botón de envío:
|
||||
|
||||
`<button type="submit">this button submits the form</button>`
|
||||
```html
|
||||
<button type="submit">this button submits the form</button>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -13,7 +13,9 @@ Puedes agregar imágenes a tu sitio web utilizando el elemento `img`, y apuntar
|
||||
|
||||
Un ejemplo de esto sería:
|
||||
|
||||
`<img src="https://www.freecatphotoapp.com/your-image.jpg">`
|
||||
```html
|
||||
<img src="https://www.freecatphotoapp.com/your-image.jpg">
|
||||
```
|
||||
|
||||
Ten en cuenta que los elementos `img` se cierran automáticamente.
|
||||
|
||||
@ -25,7 +27,9 @@ Idealmente, el atributo `alt` no debe contener caracteres especiales a menos que
|
||||
|
||||
Agreguemos un atributo `alt` a nuestro ejemplo `img` anterior:
|
||||
|
||||
`<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="A business cat wearing a necktie.">`
|
||||
```html
|
||||
<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="A business cat wearing a necktie.">
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
@ -33,9 +37,7 @@ Intentemos agregar una imagen a nuestro sitio web:
|
||||
|
||||
Dentro del elemento `main`, inserta un elemento `img` antes de los elementos `p` existentes.
|
||||
|
||||
Ahora establece el atributo `src` para que apunte a esta url:
|
||||
|
||||
`https://bit.ly/fcc-relaxing-cat`
|
||||
Ahora establece el atributo `src` para que apunte a la url `https://bit.ly/fcc-relaxing-cat`
|
||||
|
||||
Finalmente, no olvides darle a tu elemento `img` un atributo `alt` con texto descriptivo.
|
||||
|
||||
|
||||
@ -13,7 +13,9 @@ Puedes hacer que una casilla de verificación o botón de radio se marque por de
|
||||
|
||||
Para hacer esto, simplemente agrega la palabra `checked` al interior de un elemento de entrada. Por ejemplo:
|
||||
|
||||
`<input type="radio" name="test-name" checked>`
|
||||
```html
|
||||
<input type="radio" name="test-name" checked>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -21,7 +21,9 @@ Se considera buena práctica definir explícitamente la relación entre un `inpu
|
||||
|
||||
A continuación te presentamos un ejemplo de una casilla de verificación:
|
||||
|
||||
`<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>`
|
||||
```html
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -15,7 +15,9 @@ Los elementos de entrada `input` son una forma conveniente de obtener informaci
|
||||
|
||||
Puedes crear una entrada de texto de esta manera:
|
||||
|
||||
`<input type="text">`
|
||||
```html
|
||||
<input type="text">
|
||||
```
|
||||
|
||||
Ten en cuenta que los elementos `input` se cierran automáticamente.
|
||||
|
||||
|
||||
@ -13,13 +13,15 @@ Los elementos `p` son el elemento preferido para el texto de los párrafos en lo
|
||||
|
||||
Puedes crear un elemento párrafo de esta manera:
|
||||
|
||||
`<p>I'm a p tag!</p>`
|
||||
```html
|
||||
<p>I'm a p tag!</p>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Crea un elemento `p` debajo de tu elemento `h2` y dale como texto `Hello Paragraph`.
|
||||
|
||||
**Note:** Por convención, todas las etiquetas HTML son escritas en minúsculas, por ejemplo `<p></p>` y no `<P></P>`.
|
||||
**Nota:** Por convención, todas las etiquetas HTML son escritas en minúsculas, por ejemplo `<p></p>` y no `<P></P>`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -13,7 +13,9 @@ Puedes usar los elementos `a` (*anchor*) para enlazar a contenido fuera de tu p
|
||||
|
||||
Los elementos `a` requieren un atributo `href` con la dirección web de destino. También necesitan un texto anchor. Por ejemplo:
|
||||
|
||||
`<a href="https://freecodecamp.org">this links to freecodecamp.org</a>`
|
||||
```html
|
||||
<a href="https://freecodecamp.org">this links to freecodecamp.org</a>
|
||||
```
|
||||
|
||||
Entonces tu navegador mostrará el texto `this links to freecodecamp.org` como un enlace que puedes hacer clic. Y ese enlace te llevará a la dirección web `https://www.freecodecamp.org`.
|
||||
|
||||
|
||||
@ -19,19 +19,27 @@ Puedes anidar enlaces dentro de otros elementos de texto.
|
||||
|
||||
Desglosemos el ejemplo. El texto normal está envuelto en el elemento `p`:
|
||||
|
||||
`<p> Here's a ... for you to follow. </p>`
|
||||
```html
|
||||
<p> Here's a ... for you to follow. </p>
|
||||
```
|
||||
|
||||
A continuación está el elemento *anchor* `<a>` (que requiere una etiqueta de cierre `</a>`):
|
||||
|
||||
`<a> ... </a>`
|
||||
```html
|
||||
<a> ... </a>
|
||||
```
|
||||
|
||||
`target` es un atributo de etiqueta anchor que especifica dónde abrir el enlace. El valor `_blank` especifica abrir el enlace en una nueva pestaña. El `href` es un atributo de etiqueta anchor que contiene la dirección URL del enlace:
|
||||
|
||||
`<a href="http://freecodecamp.org"> ... </a>`
|
||||
```html
|
||||
<a href="http://freecodecamp.org"> ... </a>
|
||||
```
|
||||
|
||||
El texto, `link to freecodecamp.org`, dentro de un elemento `a` se llama <dfn>anchor text</dfn>, y mostrará el enlace para hacer clic:
|
||||
|
||||
`<a href=" ... ">link to freecodecamp.org</a>`
|
||||
```html
|
||||
<a href=" ... ">link to freecodecamp.org</a>
|
||||
```
|
||||
|
||||
El resultado final del ejemplo se verá así:
|
||||
|
||||
@ -75,7 +83,7 @@ Debes crear un nuevo elemento `p`. Debe haber al menos 3 etiquetas `p` en tu có
|
||||
assert($('p') && $('p').length > 2);
|
||||
```
|
||||
|
||||
El elemento `a` debe estar anidado dentro del nuevo elemento `p`.
|
||||
Tu elemento `a` debe ser anidado dentro de tu nuevo elemento `p`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -94,7 +102,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
El elemento `a` <em>no</em> debe tener el texto `View more`.
|
||||
Tu elemento `a` <em>no</em> debe tener el texto `View more`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -114,7 +122,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Cada uno de los elementos `a` debe tener una etiqueta de cierre.
|
||||
Cada uno de tus elementos `a` debe tener una etiqueta de cierre.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -19,11 +19,15 @@ La mayoría de elementos HTML tienen una etiqueta de apertura y una etiqueta de
|
||||
|
||||
Las etiquetas de apertura se ven así:
|
||||
|
||||
`<h1>`
|
||||
```html
|
||||
<h1>
|
||||
```
|
||||
|
||||
Las etiquetas de cierre se ven así:
|
||||
|
||||
`</h1>`
|
||||
```html
|
||||
</h1>
|
||||
```
|
||||
|
||||
La única diferencia entre las etiquetas de apertura y cierre es la barra frontal después del corchete de ángulo abierto.
|
||||
|
||||
|
||||
@ -13,7 +13,9 @@ Puedes convertir elementos en enlaces, anidándolos dentro de un elemento `a`.
|
||||
|
||||
Anida tu imagen dentro de un elemento `a`. A continuación, te presentamos un ejemplo:
|
||||
|
||||
`<a href="#"><img src="https://bit.ly/fcc-running-cats" alt="Three kittens running towards the camera."></a>`
|
||||
```html
|
||||
<a href="#"><img src="https://bit.ly/fcc-running-cats" alt="Three kittens running towards the camera."></a>
|
||||
```
|
||||
|
||||
Recuerda usar `#` como propiedad `href` de tu elemento `a` para convertirlo en un enlace muerto.
|
||||
|
||||
|
||||
@ -15,11 +15,15 @@ Las consultas de medios se basan en un tipo de medio, y si ese tipo de medio coi
|
||||
|
||||
Este es un ejemplo de una consultas de medios que devuelve el contenido cuando el ancho del dispositivo es menor o igual a 100px:
|
||||
|
||||
`@media (max-width: 100px) { /* CSS Rules */ }`
|
||||
```css
|
||||
@media (max-width: 100px) { /* CSS Rules */ }
|
||||
```
|
||||
|
||||
y la siguiente consultas de medios devuelve el contenido cuando la altura del dispositivo es mayor o igual a 350px:
|
||||
|
||||
`@media (min-height: 350px) { /* CSS Rules */ }`
|
||||
```css
|
||||
@media (min-height: 350px) { /* CSS Rules */ }
|
||||
```
|
||||
|
||||
Recuerda, el CSS dentro de las consultas de medios se aplica sólo si el tipo de medio coincide con el del dispositivo que se está usando.
|
||||
|
||||
|
||||
@ -17,7 +17,9 @@ Las cuatro diferentes unidades de viewport son:
|
||||
|
||||
Aquí hay un ejemplo que establece una etiqueta `body` al 30% del ancho del viewport.
|
||||
|
||||
`body { width: 30vw; }`
|
||||
```css
|
||||
body { width: 30vw; }
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
Reference in New Issue
Block a user