chore: seed chinese traditional (#42005)
Seeds the chinese traditional files manually so we can deploy to staging.
This commit is contained in:
Nicholas Carrigan (he/him)
committed by
GitHub
GitHub
parent
e46e80e08f
commit
3da4be21bb
@ -0,0 +1,115 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08823
|
||||
title: 給元素添加負外邊距
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cnpyGs3'
|
||||
forumTopicId: 16166
|
||||
dashedName: add-a-negative-margin-to-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
元素的 `margin（外邊距）` 用來控制元素 `border（邊框）` 與其周圍元素之間的距離大小。
|
||||
|
||||
如果你把元素的 `margin` 設置爲負值，元素會變得佔用更多空間。
|
||||
|
||||
# --instructions--
|
||||
|
||||
請將藍色框的 `margin` 設爲負值，跟紅色框的一樣。
|
||||
|
||||
將藍色框的 `margin` 設置爲 `-15px`，它會讓藍色框填滿整個黃色框。
|
||||
|
||||
# --hints--
|
||||
|
||||
class 爲 `blue-box` 的元素的 `margin` 應設置爲 `-15px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-top') === '-15px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: -15px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: -15px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
margin-top: -15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,190 @@
|
||||
---
|
||||
id: bad87fee1348bd9bedf08813
|
||||
title: 在元素周圍添加邊框
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MvnHZ'
|
||||
forumTopicId: 16630
|
||||
dashedName: add-borders-around-your-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
CSS 邊框具有 `style`、`color`、`width` 屬性。
|
||||
|
||||
假如我們要將一個 HTML 元素邊框設置爲 5px 的紅色實線邊框，我們可以這樣做：
|
||||
|
||||
```html
|
||||
<style>
|
||||
.thin-red-border {
|
||||
border-color: red;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
創建一個名爲 `thick-green-border` 的 class， 該 class 應在 HTML 元素周圍添加一個 10px 的綠色實線邊框。 將這個 class 應用於你的貓圖。
|
||||
|
||||
記得在一個元素上可以同時應用多個 `class`，使用空格來分隔不同 class 即可， 例如：
|
||||
|
||||
```html
|
||||
<img class="class1 class2">
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
`img` 元素的 class 應包含 `smaller-image`。
|
||||
|
||||
```js
|
||||
assert($('img').hasClass('smaller-image'));
|
||||
```
|
||||
|
||||
`img` 元素應包含 `thick-green-border` class。
|
||||
|
||||
```js
|
||||
assert($('img').hasClass('thick-green-border'));
|
||||
```
|
||||
|
||||
圖片邊框寬度應設置爲 `10px`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('img').hasClass('thick-green-border') &&
|
||||
parseInt($('img').css('border-top-width'), 10) >= 8 &&
|
||||
parseInt($('img').css('border-top-width'), 10) <= 12
|
||||
);
|
||||
```
|
||||
|
||||
圖片邊框樣式應爲 `solid` 實線。
|
||||
|
||||
```js
|
||||
assert($('img').css('border-right-style') === 'solid');
|
||||
```
|
||||
|
||||
`img` 元素的邊框顏色應爲綠色。
|
||||
|
||||
```js
|
||||
assert($('img').css('border-left-color') === 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-width: 10px;
|
||||
border-color: green;
|
||||
border-style: solid;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,136 @@
|
||||
---
|
||||
id: bad87fee1248bd9aedf08824
|
||||
title: 給元素的每一側添加不同的外邊距
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cg4RWh4'
|
||||
forumTopicId: 16633
|
||||
dashedName: add-different-margins-to-each-side-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
有時候，你會想給一個元素每個方向的 `margin` 都設置成一個特定的值。
|
||||
|
||||
CSS 允許你使用 `margin-top`、`margin-right`、`margin-bottom`、`margin-left` 屬性來設置四個不同方向的 `margin` 值。
|
||||
|
||||
# --instructions--
|
||||
|
||||
請將藍色框的頂部和左側 `margin` 屬性值設置爲 `40px`，將底部和右側的屬性值設置爲 `20px`。
|
||||
|
||||
# --hints--
|
||||
|
||||
class 爲 `blue-box` 的元素的上外邊距屬性值 `margin` 應爲 `40px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-top') === '40px');
|
||||
```
|
||||
|
||||
class 爲 `blue-box` 的元素的右外邊距屬性值 `margin` 應爲 `20px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-right') === '20px');
|
||||
```
|
||||
|
||||
class 爲 `blue-box` 的元素的下外邊距屬性值 `margin` 應爲 `20px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-bottom') === '20px');
|
||||
```
|
||||
|
||||
class 爲 `blue-box` 的元素的左外邊距屬性值 `margin` 應爲 `40px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-left') === '40px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
margin-top: 40px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
margin-top: 40px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
margin-top: 40px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,136 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08824
|
||||
title: 給元素的每一側添加不同的內邊距
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cB7mwUw'
|
||||
forumTopicId: 16634
|
||||
dashedName: add-different-padding-to-each-side-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
有時候，你會想給一個元素每個方向的 `padding` 都設置一個特定的值
|
||||
|
||||
CSS 允許你使用 `padding-top`、`padding-right`、`padding-bottom`、`padding-left` 屬性來設置四個不同方向的 `padding` 值。
|
||||
|
||||
# --instructions--
|
||||
|
||||
請將藍色框的頂部和左側 `padding` 屬性值設置爲 `40px`；將底部和右側的屬性值設置爲 `20px`。
|
||||
|
||||
# --hints--
|
||||
|
||||
class 爲 `blue-box` 的元素的上內邊距屬性值 `padding` 應爲 `40px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-top') === '40px');
|
||||
```
|
||||
|
||||
class 爲 `blue-box` 的元素的右內邊距屬性值 `padding` 應爲 `20px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-right') === '20px');
|
||||
```
|
||||
|
||||
class 爲 `blue-box` 的元素的下內邊距屬性值 `padding` 應爲 `20px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-bottom') === '20px');
|
||||
```
|
||||
|
||||
class 爲 `blue-box` 的元素的左內邊距屬性值 `padding` 應爲 `40px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-left') === '40px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding-top: 40px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 20px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding-top: 40px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 20px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding-top: 40px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 20px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,164 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08814
|
||||
title: 用 border-radius 添加圓角邊框
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cbZm2hg'
|
||||
forumTopicId: 16649
|
||||
dashedName: add-rounded-corners-with-border-radius
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
貓咪圖片的四個角看起來很尖銳， 我們可以使用 `border-radius` 屬性來讓它變得圓潤。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`border-radius` 的屬性值單位可以是 px（像素）。 請將貓咪圖片 `border-radius` 的屬性值設置爲 `10px`。
|
||||
|
||||
**注意：**這個挑戰有多個解決方法。 例如，添加 `border-radius` 屬性到 `.thick-green-border` 或 `.smaller-image` 都是可行的。
|
||||
|
||||
# --hints--
|
||||
|
||||
圖片元素應有 `thick-green-border` class。
|
||||
|
||||
```js
|
||||
assert($('img').hasClass('thick-green-border'));
|
||||
```
|
||||
|
||||
圖片的邊框半徑應爲 `10px`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('img').css('border-top-left-radius') === '10px' &&
|
||||
$('img').css('border-top-right-radius') === '10px' &&
|
||||
$('img').css('border-bottom-left-radius') === '10px' &&
|
||||
$('img').css('border-bottom-right-radius') === '10px'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,116 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08822
|
||||
title: 調整元素的外邊距
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJarHW'
|
||||
forumTopicId: 16654
|
||||
dashedName: adjust-the-margin-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
外邊距 `margin` 用來控制元素的邊框與其他元素之間的 `border` 距離。
|
||||
|
||||
在這裏，我們可以看到藍色框和紅色框都在黃色框裏。 請注意，紅色框的 `margin` 值要比藍色框的大，因此紅色框看起來比藍色框要小。
|
||||
|
||||
如果你增加藍色的 `margin` 值，它也會增加元素邊框到其他周圍元素的距離。
|
||||
|
||||
# --instructions--
|
||||
|
||||
請將藍色框的 `margin` 值設置成和紅色框的一樣。
|
||||
|
||||
# --hints--
|
||||
|
||||
class 爲 `blue-box` 的元素的 `margin` 值應爲 `20px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-top') === '20px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,118 @@
|
||||
---
|
||||
id: bad88fee1348bd9aedf08825
|
||||
title: 調整元素的內邊距
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cED8ZC2'
|
||||
forumTopicId: 301083
|
||||
dashedName: adjust-the-padding-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
我們暫時把要做的貓咪圖片 App 放在一邊，先來多瞭解一下如何給 HTML 添加樣式。
|
||||
|
||||
你可能已經注意到了，所有的 HTML 元素都是以矩形爲基礎。
|
||||
|
||||
每個 HTML 元素所佔有的矩形空間由這三個重要的屬性來控制：內邊距 `padding`、外邊距 `margin` 、邊框 `border`。
|
||||
|
||||
`padding` 用來控制着元素內容與 `border` 之間的空隙大小。
|
||||
|
||||
我們可以看到藍色框和紅色框是嵌套在黃色框裏的。 注意紅色框的 `padding` 比藍色框的更多。
|
||||
|
||||
如果你增加藍色框的 `padding` 值，其中的文本內容與邊框的距離就也會變大。
|
||||
|
||||
# --instructions--
|
||||
|
||||
將藍色的框的 `padding` 值設置成與紅色框 `padding` 值一樣。
|
||||
|
||||
# --hints--
|
||||
|
||||
`blue-box` 這一 class 應將元素的 `padding` 值設置爲 `20px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-top') === '20px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,272 @@
|
||||
---
|
||||
id: 5a9d7286424fe3d0e10cad13
|
||||
title: 給 CSS 變量設置備用值
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c6bDNfp'
|
||||
forumTopicId: 301084
|
||||
dashedName: attach-a-fallback-value-to-a-css-variable
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
使用變量來作爲 CSS 屬性值的時候，可以設置一個備用值來防止由於某些原因導致變量不生效的情況。
|
||||
|
||||
**注意：**備用值不是用於增強瀏覽器的兼容性，它也不適用於 IE 瀏覽器。 相反，它是用來讓瀏覽器在找不到你的變量時可以顯示一種顏色。
|
||||
|
||||
下面是操作方式：
|
||||
|
||||
```css
|
||||
background: var(--penguin-skin, black);
|
||||
```
|
||||
|
||||
如果你的變量沒有設置，這將會把背景設置爲 `black`。 提示：這對調試代碼也會很有幫助。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`.penguin-top` 和 `.penguin-bottom` 類的變量看起來似乎有點問題。 請爲 class 爲 `penguin-top` 和 `penguin-bottom` 的元素的 `background` 屬性設置一個 `black` 的備用色。
|
||||
|
||||
# --hints--
|
||||
|
||||
class 爲 `penguin-top` 的元素的 `background` 屬性值應有 `black` 作爲備用顏色。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
class 爲 `penguin-bottom` 的元素的 `background` 屬性值應有 `black` 作爲備用顏色。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.penguin {
|
||||
--penguin-skin: black;
|
||||
--penguin-belly: gray;
|
||||
--penguin-beak: yellow;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
|
||||
/* Change code below this line */
|
||||
background: var(--pengiun-skin);
|
||||
/* Change code above this line */
|
||||
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
|
||||
/* Change code below this line */
|
||||
background: var(--pengiun-skin);
|
||||
/* Change code above this line */
|
||||
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 0%;
|
||||
left: -5%;
|
||||
background: var(--penguin-skin, black);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
background: var(--penguin-skin, black);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left: 15%;
|
||||
background: white;
|
||||
width: 35%;
|
||||
height: 35%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #c6faf1;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.penguin-top {
|
||||
background: var(--pengiun-skin, black);
|
||||
}
|
||||
.penguin-bottom {
|
||||
background: var(--pengiun-skin, black);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@ -0,0 +1,254 @@
|
||||
---
|
||||
id: 5a9d72a1424fe3d0e10cad15
|
||||
title: 更改特定區域的變量
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cdRwbuW'
|
||||
forumTopicId: 301085
|
||||
dashedName: change-a-variable-for-a-specific-area
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
當你在 `:root` 裏創建變量時，這些變量的作用域是整個頁面。
|
||||
|
||||
如果在元素裏創建相同的變量，會重寫作用於整個頁面的變量的值。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在 `penguin` class 裏，請設置 `--penguin-belly` 的值爲 `white`。
|
||||
|
||||
# --hints--
|
||||
|
||||
應在 `penguin` class 裏重定義 `--penguin-belly` 的變量值，新的值應爲 `white`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/\.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
`penguin` class 不應該包含 `background-color` 屬性。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/^((?!background-color\s*?:\s*?)[\s\S])*$/g)
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--penguin-skin: gray;
|
||||
--penguin-belly: pink;
|
||||
--penguin-beak: orange;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--penguin-belly, #c6faf1);
|
||||
}
|
||||
|
||||
.penguin {
|
||||
/* Only change code below this line */
|
||||
|
||||
/* Only change code above this line */
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: var(--penguin-belly, pink);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: var(--penguin-belly, pink);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: var(--penguin-belly, pink);
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 0%;
|
||||
left: -5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left: 15%;
|
||||
background: white;
|
||||
width: 35%;
|
||||
height: 35%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.penguin {--penguin-belly: white;}
|
||||
</style>
|
||||
```
|
||||
@ -0,0 +1,122 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08803
|
||||
title: 更改文本的顏色
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cRkVmSm'
|
||||
forumTopicId: 16775
|
||||
dashedName: change-the-color-of-text
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
現在讓我們來修改文本的顏色。
|
||||
|
||||
我們通過修改 `h2` 元素的 `style` 屬性來改變文本顏色。
|
||||
|
||||
我們需要修改 `color` 屬性值。
|
||||
|
||||
以下是將 `h2` 元素設置爲藍色的方法：
|
||||
|
||||
```html
|
||||
<h2 style="color: blue;">CatPhotoApp</h2>
|
||||
```
|
||||
|
||||
請注意，需要在內聯 `style` 聲明末尾加上 `;`。
|
||||
|
||||
# --instructions--
|
||||
|
||||
修改 `h2` 的樣式，使它的文本顏色爲紅色。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h2` 元素應有一個 `style` 聲明。
|
||||
|
||||
```js
|
||||
assert($('h2').attr('style'));
|
||||
```
|
||||
|
||||
`h2` 元素的顏色應設置爲 `red`。
|
||||
|
||||
```js
|
||||
assert($('h2')[0].style.color === 'red');
|
||||
```
|
||||
|
||||
`style` 聲明應該以 `;` 結尾。
|
||||
|
||||
```js
|
||||
assert($('h2').attr('style') && $('h2').attr('style').endsWith(';'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2 style="color: red;">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,119 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08806
|
||||
title: 更改元素的字體大小
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3bvDc8'
|
||||
forumTopicId: 16777
|
||||
dashedName: change-the-font-size-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
字體大小由 `font-size` 屬性控制，如下所示：
|
||||
|
||||
```css
|
||||
h1 {
|
||||
font-size: 30px;
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
在包含 `red-text` 的類選擇器的 `<style>` 聲明區域的裏，創建一個 `p` 元素樣式規則，並設置其 `font-size` 爲 `16px`。
|
||||
|
||||
# --hints--
|
||||
|
||||
在 `style` 樣式聲明區域裏，`p` 元素的 `font-size` 的值應爲 `16px`。 請注意，瀏覽器和文本縮放應設置爲 100％。
|
||||
|
||||
```js
|
||||
assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,241 @@
|
||||
---
|
||||
id: 5a9d726c424fe3d0e10cad11
|
||||
title: 創建一個自定義的 CSS 變量
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cQd27Hr'
|
||||
forumTopicId: 301086
|
||||
dashedName: create-a-custom-css-variable
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
爲創建一個 CSS 變量，你只需要在變量名前添加兩個連字符號，併爲其賦值即可，例子如下：
|
||||
|
||||
```css
|
||||
--penguin-skin: gray;
|
||||
```
|
||||
|
||||
這樣就會創建一個 `--penguin-skin` 變量，它的值爲 `gray`。 現在，其他元素可通過該變量來使元素變成灰色。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在 `penguin` class 裏面，創建一個 `--penguin-skin` 變量，並將其值設置爲 `gray`。
|
||||
|
||||
# --hints--
|
||||
|
||||
應在 `penguin` class 裏聲明 `--penguin-skin` 變量，且賦值爲 `gray`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/\.penguin\s*\{[^{}]*?--penguin-skin\s*:\s*gr[ae]y\s*;[^{}]*?\}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.penguin {
|
||||
/* Only change code below this line */
|
||||
|
||||
/* Only change code above this line */
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
background: black;
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 0%;
|
||||
left: -5%;
|
||||
background: black;
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
background: black;
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: white;
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: white;
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: white;
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: orange;
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: orange;
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left: 15%;
|
||||
background: white;
|
||||
width: 35%;
|
||||
height: 35%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: orange;
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: orange;
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
body {
|
||||
background:#c6faf1;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.penguin {--penguin-skin: gray;}</style>
|
||||
```
|
||||
@ -0,0 +1,176 @@
|
||||
---
|
||||
id: bad87fed1348bd9aede07836
|
||||
title: 給 div 元素添加背景色
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cdRKMCk'
|
||||
forumTopicId: 18190
|
||||
dashedName: give-a-background-color-to-a-div-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`background-color` 屬性可以設置元素的背景顏色。
|
||||
|
||||
如果想將一個元素的背景顏色改爲 `green`，可以在 `style` 裏面這樣寫：
|
||||
|
||||
```css
|
||||
.green-background {
|
||||
background-color: green;
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
創建一個叫作 `silver-background` 的 class，並設置 `background-color` 爲 `silver`。 之後，將這個 class 添加到 `div` 元素上。
|
||||
|
||||
# --hints--
|
||||
|
||||
`div` 元素應有 `silver-background` class。
|
||||
|
||||
```js
|
||||
assert($('div').hasClass('silver-background'));
|
||||
```
|
||||
|
||||
`div` 元素背景顏色應設置爲銀色。
|
||||
|
||||
```js
|
||||
assert($('div').css('background-color') === 'rgb(192, 192, 192)');
|
||||
```
|
||||
|
||||
class 名 `silver-background` 應該定義在 `style` 元素內；`background-color` 的屬性值應爲 `silver`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.silver-background\s*{\s*background-color:\s*silver;\s*}/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.silver-background {
|
||||
background-color: silver;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,175 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08807
|
||||
title: 引入谷歌字體
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cM9MRsJ'
|
||||
forumTopicId: 18200
|
||||
dashedName: import-a-google-font
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
在我們的網站上，除了使用系統提供的默認字體以外，我們也可以使用自定義字體。 網絡上有很多字體庫。 在這個例子中，我們將使用 Google 字體庫。
|
||||
|
||||
[Google 字體庫](https://fonts.google.com/)是一個免費的 Web 字體庫，我們只需要在 CSS 裏設置字體的 URL 即可使用。
|
||||
|
||||
接下來，我們就要引入和使用 Google Fonts（注意：如果 Google 在你的地區被限制訪問，你可以選擇跳過這個挑戰）。
|
||||
|
||||
要引入 Google Font，你需要從 Google Fonts 上覆制字體的 URL，並粘貼到你的 HTML 裏面。 在這個挑戰中，我們需要引入 `Lobster` 字體。 因此，請複製以下代碼段，並粘貼到代碼編輯器頂部，即放到 `style` 標籤之前。
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
```
|
||||
|
||||
現在可以在 CSS 中使用 `Lobster` 字體，並像下面一樣使用 `Lobster` 作爲 FAMILY_NAME：
|
||||
|
||||
```css
|
||||
font-family: FAMILY_NAME, GENERIC_NAME;
|
||||
```
|
||||
|
||||
GENERIC_NAME 是可選的，它用來指明在其他字體不可用時的後備字體。 我們會在下一個挑戰中詳細說明。
|
||||
|
||||
字體名區分大小寫，並且如果字體名含有空格，則在聲明時需要用引號包起來。 例如，使用 `"Open Sans"` 字體需要添加引號，而 `Lobster` 則不需要。
|
||||
|
||||
# --instructions--
|
||||
|
||||
給你的網頁導入 `Lobster` 字體。 然後使用元素選擇器將 `h2` 元素的 `font-family` 設置爲 `Lobster`。
|
||||
|
||||
# --hints--
|
||||
|
||||
應引入 `Lobster` 字體。
|
||||
|
||||
```js
|
||||
assert(new RegExp('googleapis', 'gi').test(code));
|
||||
```
|
||||
|
||||
`h2` 元素應使用 `Lobster` 字體。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('h2')
|
||||
.css('font-family')
|
||||
.match(/lobster/i)
|
||||
);
|
||||
```
|
||||
|
||||
應使用元素選擇器（`h2`）來改變字體樣式。
|
||||
|
||||
```js
|
||||
assert(
|
||||
/\s*[^\.]h2\s*\{\s*font-family\s*:\s*('|"|)Lobster\1\s*(,\s*('|"|)[a-z -]+\3\s*)?(;\s*\}|\})/gi.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
`p` 元素應保持使用 `monospace` 字體。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('p')
|
||||
.css('font-family')
|
||||
.match(/monospace/i)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,70 @@
|
||||
---
|
||||
id: 5b7d72c338cd7e35b63f3e14
|
||||
title: 通過瀏覽器降級提高兼容性
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
forumTopicId: 301087
|
||||
dashedName: improve-compatibility-with-browser-fallbacks
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
使用 CSS 時可能會遇到瀏覽器兼容性問題。 提供瀏覽器降級方案來避免潛在的問題會顯得很重要。
|
||||
|
||||
當瀏覽器解析頁面的 CSS 時，會自動忽視不能識別或者不支持的屬性。 舉個例子，如果使用 CSS 變量來指定站點的背景色，IE 瀏覽器由於不支持 CSS 變量而會忽略背景色。 此時，瀏覽器會嘗試使用其它值。 但如果沒有找到其它值，則會使用默認值，也就是沒有背景色。
|
||||
|
||||
這意味着如果想提供瀏覽器降級方案，在聲明之前提供另一個更寬泛的值即可。 這樣老舊的瀏覽器會降級使用這個方案，新的瀏覽器會在後面的聲明裏覆蓋降級方案。
|
||||
|
||||
# --instructions--
|
||||
|
||||
我們使用了 CSS 變量來定義 `.red-box` 的背景色。 現在，我們通過在現有的聲明之前添加另一個 `background` 聲明，並將它的值設置爲 `red`，來提升瀏覽器的兼容性。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.red-box` 規則應在現有的 `background` 聲明之前有一個 `background` 的備用屬性，其值爲 `red`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code
|
||||
.replace(/\s/g, '')
|
||||
.match(
|
||||
/\.red-box{background:(red|#ff0000|#f00|rgb\(255,0,0\)|rgb\(100%,0%,0%\)|hsl\(0,100%,50%\));background:var\(--red-color\);height:200px;width:200px;}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--red-color: red;
|
||||
}
|
||||
.red-box {
|
||||
|
||||
background: var(--red-color);
|
||||
height: 200px;
|
||||
width:200px;
|
||||
}
|
||||
</style>
|
||||
<div class="red-box"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--red-color: red;
|
||||
}
|
||||
.red-box {
|
||||
background: red;
|
||||
background: var(--red-color);
|
||||
height: 200px;
|
||||
width:200px;
|
||||
}
|
||||
</style>
|
||||
<div class="red-box"></div>
|
||||
```
|
||||
@ -0,0 +1,244 @@
|
||||
---
|
||||
id: 5a9d7295424fe3d0e10cad14
|
||||
title: 繼承 CSS 變量
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cyLZZhZ'
|
||||
forumTopicId: 301088
|
||||
dashedName: inherit-css-variables
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
當創建一個變量時，變量會在創建變量的選擇器裏可用。 同時，在這個選擇器的後代選擇器裏也是可用的。 這是因爲 CSS 變量是可繼承的，和普通的屬性一樣。
|
||||
|
||||
CSS 變量經常會定義在 <dfn>:root</dfn> 元素內，這樣就可被所有選擇器繼承。
|
||||
|
||||
`:root` 是一個<dfn>僞類</dfn>選擇器，它是一個能夠匹配文檔根元素的選擇器，通常指的是 `html` 元素。 我們在 `:root` 裏創建變量在全局都可用，即在任何選擇器裏都生效。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在 `:root` 選擇器裏定義變量 `--penguin-belly` 並設置它的屬性值爲 `pink`。 此時，你會發現變量被繼承，所有使用該變量的子元素都會有粉色背景。
|
||||
|
||||
# --hints--
|
||||
|
||||
應在 `:root` 裏聲明 `--penguin-belly` 變量並賦值 `pink`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
/* Only change code below this line */
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--penguin-belly, #c6faf1);
|
||||
}
|
||||
|
||||
.penguin {
|
||||
--penguin-skin: gray;
|
||||
--penguin-beak: orange;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 0%;
|
||||
left: -5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left: 15%;
|
||||
background: white;
|
||||
width: 35%;
|
||||
height: 35%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>:root {--penguin-belly: pink;}</style>
|
||||
```
|
||||
@ -0,0 +1,111 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08746
|
||||
title: 從 body 元素繼承樣式
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c9bmdtR'
|
||||
forumTopicId: 18204
|
||||
dashedName: inherit-styles-from-the-body-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
我們已經證明每一個 HTML 頁面都含有 `body` 元素，我們也可以在 `body` 元素上使用 CSS 樣式。
|
||||
|
||||
設置 `body` 元素樣式的方法跟設置其他 HTML 元素樣式的方式一樣，並且其他元素也會繼承 `body` 中所設置的樣式。
|
||||
|
||||
# --instructions--
|
||||
|
||||
首先，創建一個內容文本爲 `Hello World` 的 `h1` 元素。
|
||||
|
||||
接着，在 `body` 的 CSS 規則裏面添加 `color: green;`，這會將頁面內所有字體的顏色都設置爲 `green`。
|
||||
|
||||
最後，在 `body` 的 CSS 規則裏面添加 `font-family: monospace;`，這會將 `body` 內所有元素的字體都設置爲 `monospace`。
|
||||
|
||||
# --hints--
|
||||
|
||||
應創建一個 `h1` 元素。
|
||||
|
||||
```js
|
||||
assert($('h1').length > 0);
|
||||
```
|
||||
|
||||
`h1` 元素的內容文本應爲 `Hello World`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('h1').length > 0 &&
|
||||
$('h1')
|
||||
.text()
|
||||
.match(/hello world/i)
|
||||
);
|
||||
```
|
||||
|
||||
確保 `h1` 元素具有結束標籤。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/h1>/g) &&
|
||||
code.match(/<h1/g) &&
|
||||
code.match(/<\/h1>/g).length === code.match(/<h1/g).length
|
||||
);
|
||||
```
|
||||
|
||||
`body` 元素的 `color` 屬性值應爲 `green`。
|
||||
|
||||
```js
|
||||
assert($('body').css('color') === 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
`body` 元素的 `font-family` 屬性值應爲 `monospace`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('body')
|
||||
.css('font-family')
|
||||
.match(/monospace/i)
|
||||
);
|
||||
```
|
||||
|
||||
`h1` 元素應該繼承 `body` 的 `monospace` 字體屬性。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('h1').length > 0 &&
|
||||
$('h1')
|
||||
.css('font-family')
|
||||
.match(/monospace/i)
|
||||
);
|
||||
```
|
||||
|
||||
`h1` 元素的字體顏色應繼承 `body` 元素所設置的綠色。
|
||||
|
||||
```js
|
||||
assert($('h1').length > 0 && $('h1').css('color') === 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
</style>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
|
||||
</style>
|
||||
<h1>Hello World!</h1>
|
||||
```
|
||||
@ -0,0 +1,159 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08815
|
||||
title: 用 border-radius 製作圓形圖片
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MvrcB'
|
||||
forumTopicId: 18229
|
||||
dashedName: make-circular-images-with-a-border-radius
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
除像素外，你也可以使用百分比來指定 `border-radius` 的值。
|
||||
|
||||
# --instructions--
|
||||
|
||||
將 `border-radius` 的屬性值設置爲 `50%`。
|
||||
|
||||
# --hints--
|
||||
|
||||
圖片的邊框圓角應設置爲 `50%`，這樣圖片就會是圓形的。
|
||||
|
||||
```js
|
||||
assert(parseInt($('img').css('border-top-left-radius')) > 48);
|
||||
```
|
||||
|
||||
`border-radius` 的值應爲 `50%`。
|
||||
|
||||
```js
|
||||
assert(code.match(/50%/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,114 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf07756
|
||||
title: Important 的優先級最高
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cm24rcp'
|
||||
forumTopicId: 18249
|
||||
dashedName: override-all-other-styles-by-using-important
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
耶！ 我們剛剛又證明了行內樣式會覆蓋 `style` 標籤裏面所有的 CSS 聲明。
|
||||
|
||||
不過， 還有一種方式可以覆蓋重新 CSS 樣式。 這是所有方法裏面最強大的一個。 在此之前，我們要考慮清楚，爲什麼我們要覆蓋 CSS 樣式。
|
||||
|
||||
很多時候，你會使用 CSS 庫， CSS 庫中的樣式會意外覆蓋你的 CSS 樣式。 如果想保證你的 CSS 樣式不受影響，你可以使用 `!important`。
|
||||
|
||||
讓我們回到 `pink-text` 類聲明。 `pink-text` 類的顏色樣式已被之後的 class 聲明、id 聲明以及行內樣式所覆蓋。
|
||||
|
||||
# --instructions--
|
||||
|
||||
給粉紅文本元素的顏色聲明添加關鍵詞 `!important`，以確保 `h1` 元素爲粉紅色。
|
||||
|
||||
如下所示：
|
||||
|
||||
```css
|
||||
color: red !important;
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
`h1` 元素應包含 `pink-text` class。
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
`h1` 元素應包含 `blue-text` class。
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
`h1` 元素應有 `id`， 值爲 `orange-text`。
|
||||
|
||||
```js
|
||||
assert($('h1').attr('id') === 'orange-text');
|
||||
```
|
||||
|
||||
`h1` 元素應有一個內聯樣式 `color: white`。
|
||||
|
||||
```js
|
||||
assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi));
|
||||
```
|
||||
|
||||
`pink-text` class 應有 `!important` 關鍵詞 ，以覆蓋其他聲明。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g)
|
||||
);
|
||||
```
|
||||
|
||||
`h1` 元素應爲粉紅色。
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(255, 192, 203)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
#orange-text {
|
||||
color: orange;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
#orange-text {
|
||||
color: orange;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink !important;
|
||||
}
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
|
||||
```
|
||||
@ -0,0 +1,123 @@
|
||||
---
|
||||
id: bad87fee1348bd8aedf06756
|
||||
title: ID 選擇器優先級高於 Class 選擇器
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cRkpDhB'
|
||||
forumTopicId: 18251
|
||||
dashedName: override-class-declarations-by-styling-id-attributes
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
我們剛剛證明了瀏覽器讀取 CSS 是由上到下的。 這就意味着，如果發生衝突，瀏覽器將會應用最後聲明的樣式。 注意，如果我們在 `h1` 元素的類中，將 `blue-text` 放置在 `pink-text` 之前，它仍然會檢查聲明順序，而不是使用順序！
|
||||
|
||||
但我們還沒有完成。 其實還有其他方法可以覆蓋 CSS 樣式。 你還記得 id 屬性嗎？
|
||||
|
||||
我們來通過給 `h1` 元素添加 id 屬性，覆蓋 `pink-text` 和 `blue-text` 類，使 `h1` 元素變成橘色。
|
||||
|
||||
# --instructions--
|
||||
|
||||
給 `h1` 元素添加 `id` 屬性，屬性值爲 `orange-text`。 設置方式如下：
|
||||
|
||||
```html
|
||||
<h1 id="orange-text">
|
||||
```
|
||||
|
||||
`h1` 元素需繼續保留 `blue-text` 和 `pink-text` 這兩個 class。
|
||||
|
||||
在 `style` 元素中創建名爲 `orange-text` 的 id 選擇器。 例子如下：
|
||||
|
||||
```css
|
||||
#brown-text {
|
||||
color: brown;
|
||||
}
|
||||
```
|
||||
|
||||
**注意：** 無論在 `pink-text` class 之前或者之後聲明，`id` 選擇器的優先級總是高於 class 選擇器。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h1` 元素的應有一個 class 爲 `pink-text`。
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
`h1` 元素應包含 `blue-text` class。
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
`h1` 元素的 id 應爲 `orange-text`。
|
||||
|
||||
```js
|
||||
assert($('h1').attr('id') === 'orange-text');
|
||||
```
|
||||
|
||||
應只有一個 `h1` 元素。
|
||||
|
||||
```js
|
||||
assert($('h1').length === 1);
|
||||
```
|
||||
|
||||
應存在名爲 `orange-text` 的 id 選擇器。
|
||||
|
||||
```js
|
||||
assert(code.match(/#orange-text\s*{/gi));
|
||||
```
|
||||
|
||||
不要在 `h1` 元素裏面使用 `style` 屬性。
|
||||
|
||||
```js
|
||||
assert(!code.match(/<h1.*style.*>/gi));
|
||||
```
|
||||
|
||||
`h1` 元素的字體顏色應爲橘色。
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(255, 165, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<h1 class="pink-text blue-text">Hello World!</h1>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
#orange-text {
|
||||
color: orange;
|
||||
}
|
||||
</style>
|
||||
<h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>
|
||||
```
|
||||
@ -0,0 +1,102 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf06756
|
||||
title: 內聯樣式的優先級高於 ID 選擇器
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cGJDRha'
|
||||
forumTopicId: 18252
|
||||
dashedName: override-class-declarations-with-inline-styles
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
我們剛剛證明了，id 選擇器無論在 `style` 標籤的任何位置聲明，都會覆蓋 class 聲明的樣式。
|
||||
|
||||
其實還有其他方法可以覆蓋 CSS 樣式。 你還記得行內樣式嗎？
|
||||
|
||||
# --instructions--
|
||||
|
||||
使用行內樣式嘗試讓 `h1` 的字體顏色變白。 記住，內聯樣式看起來是像這樣：
|
||||
|
||||
```html
|
||||
<h1 style="color: green;">
|
||||
```
|
||||
|
||||
`h1` 元素應繼續保留 `blue-text` 和 `pink-text` 這兩個 class。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h1` 元素應包含 `pink-text` class。
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
`h1` 元素應包含 `blue-text` class。
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
`h1` 的 id 屬性值應爲 `orange-text`。
|
||||
|
||||
```js
|
||||
assert($('h1').attr('id') === 'orange-text');
|
||||
```
|
||||
|
||||
`h1` 元素應含有行內樣式。
|
||||
|
||||
```js
|
||||
assert(document.querySelector('h1[style]'));
|
||||
```
|
||||
|
||||
`h1` 元素的字體顏色應該爲白色。
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(255, 255, 255)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
#orange-text {
|
||||
color: orange;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
#orange-text {
|
||||
color: orange;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
|
||||
```
|
||||
@ -0,0 +1,94 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf04756
|
||||
title: Class 選擇器的優先級高於繼承樣式
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cGJDQug'
|
||||
forumTopicId: 18253
|
||||
dashedName: override-styles-in-subsequent-css
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
我們的 `pink-text` class 覆蓋了 `body` 元素的 CSS 樣式！
|
||||
|
||||
我們剛剛證明了 class 會覆蓋 `body` 的 CSS 樣式。 那麼下一個問題是，要怎麼樣才能覆蓋 `pink-text` class 中所定義的樣式？
|
||||
|
||||
# --instructions--
|
||||
|
||||
創建一個 `blue-text` class，將元素的顏色設置爲藍色。 將它放在 `pink-text` class 下面。
|
||||
|
||||
創建一個字體顏色爲 `blue` 的 `blue-text` class，並確保它在 `pink-text` 下方聲明。
|
||||
|
||||
HTML 同時應用多個 class 屬性需以空格來間隔，例子如下:
|
||||
|
||||
```html
|
||||
class="class1 class2"
|
||||
```
|
||||
|
||||
**注意：**HTML 元素裏應用的 class 的先後順序無關緊要。
|
||||
|
||||
但是，在 `<style>` 標籤裏面聲明的 `class` 順序十分重要，之後的聲明會覆蓋之前的聲明。 第二個聲明的優先級始終高於第一個聲明。 由於 `.blue-text` 是在後面聲明的，所以它的樣式會覆蓋 `.pink-text` 裏的樣式。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h1` 元素應包含 `pink-text` class。
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
`h1` 元素應包含 `blue-text` class。
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
`blue-text` 和 `pink-text` 需同時應用於 `h1` 元素上。
|
||||
|
||||
```js
|
||||
assert($('.pink-text').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
`h1` 元素的顏色應爲藍色。
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
</style>
|
||||
<h1 class="pink-text">Hello World!</h1>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<h1 class="pink-text blue-text">Hello World!</h1>
|
||||
```
|
||||
@ -0,0 +1,73 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08756
|
||||
title: 樣式中的優先級
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cZ8wnHv'
|
||||
forumTopicId: 18258
|
||||
dashedName: prioritize-one-style-over-another
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
有時候，HTML 元素的樣式會跟其他樣式發生衝突。
|
||||
|
||||
就像 `h1` 元素不能同時設置綠色和粉色兩種顏色。
|
||||
|
||||
讓我們嘗試創建一個字體顏色爲粉色的 class，並應用於其中一個元素中。 猜一猜，它會 *覆蓋* `body` 元素的 `color: green;` CSS 規則嗎？
|
||||
|
||||
# --instructions--
|
||||
|
||||
創建一個能將元素的字體顏色改爲粉色的 class，並命名爲 `pink-text`。
|
||||
|
||||
給 `h1` 元素添加 `pink-text` class。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h1` 元素應含有 `pink-text` class。
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
`<style>` 標籤應含有一個可以改變 `color` 的 `pink-text` class。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g));
|
||||
```
|
||||
|
||||
`h1` 元素的字體顏色應爲粉色。
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(255, 192, 203)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
<h1>Hello World!</h1>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
</style>
|
||||
<h1 class="pink-text">Hello World!</h1>
|
||||
```
|
||||
@ -0,0 +1,132 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08807
|
||||
title: 設置元素的字體族名
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3bvpCg'
|
||||
forumTopicId: 18278
|
||||
dashedName: set-the-font-family-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
通過 `font-family` 屬性，我們可以設置元素裏的字體族名。
|
||||
|
||||
如果你想將 `h2` 元素的字體設置爲 `sans-serif`，可以這樣寫：
|
||||
|
||||
```css
|
||||
h2 {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
請將 `p` 元素的字體設置爲 `monospace`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`p` 元素應使用 `monospace` 作爲字體。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('p')
|
||||
.not('.red-text')
|
||||
.css('font-family')
|
||||
.match(/monospace/i)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,170 @@
|
||||
---
|
||||
id: bad87eee1348bd9aede07836
|
||||
title: 設置元素的 id
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cN6MEc2'
|
||||
forumTopicId: 18279
|
||||
dashedName: set-the-id-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
除了 class 屬性，每一個 HTML 元素都有一個 `id` 屬性。
|
||||
|
||||
使用 `id` 有幾個好處：你可以通過 `id` 選擇器來改變單個元素的樣式。在稍後的課程中，你還會了解到如何在 JavaScript 裏面用它來選擇和操作元素。
|
||||
|
||||
根據規範，`id` 屬性應是唯一的。 儘管瀏覽器並非必須執行這條規範，但這是廣泛認可的最佳實踐。 因此，請不要給多個元素設置相同的 `id`。
|
||||
|
||||
設置 `h2` 元素的 id 爲 `cat-photo-app` 的代碼如下：
|
||||
|
||||
```html
|
||||
<h2 id="cat-photo-app">
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
設置`form`元素的 id 爲`cat-photo-form`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`form` 元素的 id 應爲 `cat-photo-form`。
|
||||
|
||||
```js
|
||||
assert($('form').attr('id') === 'cat-photo-form');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.silver-background {
|
||||
background-color: silver;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.silver-background {
|
||||
background-color: silver;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,156 @@
|
||||
---
|
||||
id: bad87fee1348bd9acdf08812
|
||||
title: 調整圖片的大小
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cM9MmCP'
|
||||
forumTopicId: 18282
|
||||
dashedName: size-your-images
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
CSS 的 `width` 屬性可以控制元素的寬度。 和設置文本字號一樣，我們會以 `px`（像素）爲單位來設置圖片的寬度。
|
||||
|
||||
例如，如果你想創建一個叫 `larger-image` 的 CSS class，來控制 HTML 元素的寬度爲 500px，就可以這樣寫：
|
||||
|
||||
```html
|
||||
<style>
|
||||
.larger-image {
|
||||
width: 500px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
創建一個叫 `smaller-image` 的 CSS class，並用它來設置圖片寬度爲 100px。
|
||||
|
||||
# --hints--
|
||||
|
||||
`img` 元素應包含 `smaller-image` class。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$("img[src='https://bit.ly/fcc-relaxing-cat']").attr('class') ===
|
||||
'smaller-image'
|
||||
);
|
||||
```
|
||||
|
||||
圖片寬度應爲 100px。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('img').width() < 200 &&
|
||||
code.match(/\.smaller-image\s*{\s*width\s*:\s*100px\s*(;\s*}|})/i)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,172 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08808
|
||||
title: 字體如何優雅降級
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cpVKBfQ'
|
||||
forumTopicId: 18304
|
||||
dashedName: specify-how-fonts-should-degrade
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
所有瀏覽器都有幾種默認字體， 包括 `monospace`、`serif` 和 `sans-serif`。
|
||||
|
||||
在字體不可用的時候，你可以告訴瀏覽器通過“降級”去使用其他字體。
|
||||
|
||||
如果你想將一個元素的字體設置成 `Helvetica`，但當 `Helvetica` 不可用時，降級使用 `sans-serif` 字體，那麼可以這樣寫：
|
||||
|
||||
```css
|
||||
p {
|
||||
font-family: Helvetica, sans-serif;
|
||||
}
|
||||
```
|
||||
|
||||
通用字體名不區分大小寫。 同時，也不需要使用引號，因爲它們是 CSS 中的關鍵字。
|
||||
|
||||
# --instructions--
|
||||
|
||||
首先，添加 `monospace` 字體到 `h2` 元素裏，它現在擁有 `Lobster` 和 `monospace` 兩種字體。
|
||||
|
||||
在上一個挑戰裏，你已經通過 `link` 標籤從谷歌字體庫引入了 `Lobster` 字體。 現在讓我們使用之前學習的 HTML 註釋，將 `Lobster` 字體的引入註釋掉，這樣一來，這個引入的字體就會失效。 此時，你會發現 `h2` 元素降級到了 `monospace` 字體。
|
||||
|
||||
**Note:** 如果你的電腦裏已經安裝了 `Lobster` 字體，你就看不到這個降級過程，因爲瀏覽器會在你的電腦中找到該字體。
|
||||
|
||||
# --hints--
|
||||
|
||||
h2 元素的字體應設置爲 `Lobster`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('h2')
|
||||
.css('font-family')
|
||||
.match(/^"?lobster/i)
|
||||
);
|
||||
```
|
||||
|
||||
當 `Lobster` 字體失效時，h2 元素應該降級使用 `monospace` 字體。
|
||||
|
||||
```js
|
||||
assert(
|
||||
/\s*h2\s*\{\s*font-family\:\s*(\'|")?Lobster(\'|")?,\s*monospace\s*;\s*\}/gi.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
通過添加`<!--`，註釋掉 `Lobster` 字體的引入。
|
||||
|
||||
```js
|
||||
assert(new RegExp('<!--[^fc]', 'gi').test(code));
|
||||
```
|
||||
|
||||
確保註釋要以 `-->` 結束。
|
||||
|
||||
```js
|
||||
assert(new RegExp('[^fc]-->', 'gi').test(code));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!--<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">-->
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,133 @@
|
||||
---
|
||||
id: bad87fee1348bd9aefe08806
|
||||
title: 使用 class 選擇器設置多個元素的樣式
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cRkVbsQ'
|
||||
forumTopicId: 18311
|
||||
dashedName: style-multiple-elements-with-a-css-class
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
通過 CSS class 選擇器，多個 HTML 元素可以使用相同的 CSS 樣式規則。 你可以將 `red-text` class 添加到第一個 `p` 元素上。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h2` 元素應該是紅色的。
|
||||
|
||||
```js
|
||||
assert($('h2').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
`h2` 元素應含有 `red-text` class。
|
||||
|
||||
```js
|
||||
assert($('h2').hasClass('red-text'));
|
||||
```
|
||||
|
||||
第一個 `p` 元素應爲紅色。
|
||||
|
||||
```js
|
||||
assert($('p:eq(0)').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
第二和第三個 `p` 元素不應爲紅色。
|
||||
|
||||
```js
|
||||
assert(
|
||||
!($('p:eq(1)').css('color') === 'rgb(255, 0, 0)') &&
|
||||
!($('p:eq(2)').css('color') === 'rgb(255, 0, 0)')
|
||||
);
|
||||
```
|
||||
|
||||
第一個 `p` 元素應該包含 `red-text` class。
|
||||
|
||||
```js
|
||||
assert($('p:eq(0)').hasClass('red-text'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,70 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08736
|
||||
title: 給 HTML 的 body 元素添加樣式
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cB77PHW'
|
||||
forumTopicId: 18313
|
||||
dashedName: style-the-html-body-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
現在讓我們來討論一下 CSS 中的繼承。
|
||||
|
||||
每一個 HTML 頁面都有一個 `body` 元素。
|
||||
|
||||
# --instructions--
|
||||
|
||||
我們可以通過設置 `background-color` 的屬性值爲 黑色，來證明 `body` 元素的存在。
|
||||
|
||||
請將以下代碼添加到 `style` 標籤裏面：
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: black;
|
||||
}
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
`body` 元素的 `background-color` 應爲黑色。
|
||||
|
||||
```js
|
||||
assert($('body').css('background-color') === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
確保 CSS 規則格式書寫正確，左右大括號也應匹配。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i)
|
||||
);
|
||||
```
|
||||
|
||||
確保 CSS 規則以分號結尾。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
</style>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@ -0,0 +1,123 @@
|
||||
---
|
||||
id: bad82fee1322bd9aedf08721
|
||||
title: 理解絕對單位與相對單位
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cN66JSL'
|
||||
forumTopicId: 301089
|
||||
dashedName: understand-absolute-versus-relative-units
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
最近的幾個挑戰都是設置元素的內邊距和外邊距的 `px` 值，即像素。 像素是一個長度單位，它告訴瀏覽器應該如何調整元素的大小和位置。 其實除了 `px`，CSS 也有其他單位供我們使用。
|
||||
|
||||
單位長度的類型可以分成 2 種：相對和絕對。 絕對單位與長度的物理單位相關。 例如，`in` 和 `mm` 分別代表着英寸和毫米。 絕對長度單位會接近屏幕上的實際測量值，不過不同屏幕的分辨率會存在差異，這就可能會造成誤差。
|
||||
|
||||
相對單位長度，比如 `em` 和 `rem`，它們的實際值會依賴其他長度的值而決定。 比如 `em` 的大小基於元素字體的字體大小。 如果使用它來設置 `font-size` 值，它的值會跟隨父元素的 `font-size` 值來改變。
|
||||
|
||||
**Note:** 有些單位長度選項是相對視窗大小來改變值的， 這種設定符合響應式網頁設計的原則。
|
||||
|
||||
# --instructions--
|
||||
|
||||
給 `red-box` class 添加 `padding` 屬性，並設置其屬性值爲 `1.5em`。
|
||||
|
||||
# --hints--
|
||||
|
||||
class 爲 `red-box` 的元素應含有 `padding` 屬性。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('.red-box').css('padding-top') != '0px' &&
|
||||
$('.red-box').css('padding-right') != '0px' &&
|
||||
$('.red-box').css('padding-bottom') != '0px' &&
|
||||
$('.red-box').css('padding-left') != '0px'
|
||||
);
|
||||
```
|
||||
|
||||
class 爲 `red-box` 的元素的 `padding` 屬性值應爲 1.5em。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-box\s*?{[\s\S]*padding:\s*?1\.5em/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 20px 40px 20px 40px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: red;
|
||||
margin: 20px 40px 20px 40px;
|
||||
|
||||
}
|
||||
|
||||
.green-box {
|
||||
background-color: green;
|
||||
margin: 20px 40px 20px 40px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box green-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 20px 40px 20px 40px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: red;
|
||||
margin: 20px 40px 20px 40px;
|
||||
padding: 1.5em;
|
||||
}
|
||||
|
||||
.green-box {
|
||||
background-color: green;
|
||||
margin: 20px 40px 20px 40px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box green-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,142 @@
|
||||
---
|
||||
id: bad87fee1348bd9aecf08806
|
||||
title: 使用 class 選擇器設置單個元素的樣式
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MvDtV'
|
||||
forumTopicId: 18337
|
||||
dashedName: use-a-css-class-to-style-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
CSS 的 class 具有可重用性，可應用於各種 HTML 元素。
|
||||
|
||||
一個 CSS class 聲明示例如下所示：
|
||||
|
||||
```html
|
||||
<style>
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
可以看到，我們在 `<style>` 樣式聲明區域裏，創建了一個名爲 `blue-text` 的 `class` 選擇器。 你可以這樣將 class 應用於 HTML 元素：`<h2 class="blue-text">CatPhotoApp</h2>`。 注意在 CSS `style` 元素裏，class 名以一個句點開頭。 在 HTML 元素的 class 屬性中，class 名的開頭沒有句點。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在 `style` 樣式聲明裏，把 `h2` 元素選擇器改爲 `.red-text` class 選擇器，同時將顏色 `blue` 改爲 `red`。
|
||||
|
||||
給 `h2` 元素設置一個值爲 `red-text` 的 `class` 屬性。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h2` 元素應爲紅色。
|
||||
|
||||
```js
|
||||
assert($('h2').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
`h2` 元素應有一個 `red-text` class。
|
||||
|
||||
```js
|
||||
assert($('h2').hasClass('red-text'));
|
||||
```
|
||||
|
||||
樣式表應該聲明一個 `red-text` class，顏色爲 `red`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;\s*\}/g));
|
||||
```
|
||||
|
||||
不應在 `h2` 元素裏使用行內樣式 `style="color: red"`。
|
||||
|
||||
```js
|
||||
assert($('h2').attr('style') === undefined);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h2 {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,287 @@
|
||||
---
|
||||
id: 5a9d727a424fe3d0e10cad12
|
||||
title: 使用一個自定義的 CSS 變量
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cM989ck'
|
||||
forumTopicId: 301090
|
||||
dashedName: use-a-custom-css-variable
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
創建變量後，CSS 屬性可以通過調用變量名來使用它對應的值。
|
||||
|
||||
```css
|
||||
background: var(--penguin-skin);
|
||||
```
|
||||
|
||||
因爲引用了 `--penguin-skin` 變量的值，使用了這個樣式的元素背景顏色會是灰色。 請注意，除非變量名稱完全匹配，否則將不會應用樣式。
|
||||
|
||||
# --instructions--
|
||||
|
||||
將 `--penguin-skin` 的值應用到 class 爲 `penguin-top`、`penguin-bottom`、`right-hand`、`left-hand` 的 `background` 的屬性值。
|
||||
|
||||
# --hints--
|
||||
|
||||
將 `--penguin-skin` 的值應用到 `penguin-top` class 的 `background` 屬性。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
class 爲 `penguin-bottom` 的 `background` 屬性值應使用變量 `--penguin-skin` 的值。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.right-hand\s{/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
class 爲 `right-hand` 的 `background` 屬性值應使用變量 `--penguin-skin` 的值。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.right-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.left-hand\s{/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
class 爲 `left-hand` 的 `background` 屬性值應使用變量 `--penguin-skin` 的值。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.left-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.penguin {
|
||||
--penguin-skin: gray;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
|
||||
/* Change code below this line */
|
||||
background: black;
|
||||
/* Change code above this line */
|
||||
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
|
||||
/* Change code below this line */
|
||||
background: black;
|
||||
/* Change code above this line */
|
||||
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 0%;
|
||||
left: -5%;
|
||||
|
||||
/* Change code below this line */
|
||||
background: black;
|
||||
/* Change code above this line */
|
||||
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
|
||||
/* Change code below this line */
|
||||
background: black;
|
||||
/* Change code above this line */
|
||||
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: white;
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: white;
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: white;
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: orange;
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: orange;
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left: 15%;
|
||||
background: white;
|
||||
width: 35%;
|
||||
height: 35%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: orange;
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: orange;
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
body {
|
||||
background:#c6faf1;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.penguin-top {background: var(--penguin-skin);} .penguin-bottom {background: var(--penguin-skin);} .right-hand {background: var(--penguin-skin);} .left-hand {background: var(--penguin-skin);}</style>
|
||||
```
|
||||
@ -0,0 +1,281 @@
|
||||
---
|
||||
id: 5a9d72ad424fe3d0e10cad16
|
||||
title: 使用媒體查詢更改變量
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cWmL8UP'
|
||||
forumTopicId: 301091
|
||||
dashedName: use-a-media-query-to-change-a-variable
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
CSS 變量可以簡化媒體查詢的定義方式。
|
||||
|
||||
例如，當屏幕小於或大於媒體查詢所設置的值，只要我們更新變量的值，那麼使用了此變量的元素樣式就都會更改。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在 `media query`（媒體查詢）聲明的 `:root` 選擇器裏，重定義 `--penguin-size` 的值爲 `200px`。 同時，重新定義 `--penguin-skin` 的值爲 `black`， 然後通過縮放頁面來查看它們是否生效。
|
||||
|
||||
# --hints--
|
||||
|
||||
`:root` 中的 `--penguin-size` 值應爲 `200px`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-size\s*?:\s*?200px\s*?;[\s\S]*}[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
`:root` 中的 `--penguin-skin` 值應爲 `black`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-skin\s*?:\s*?black\s*?;[\s\S]*}[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--penguin-size: 300px;
|
||||
--penguin-skin: gray;
|
||||
--penguin-belly: white;
|
||||
--penguin-beak: orange;
|
||||
}
|
||||
|
||||
@media (max-width: 350px) {
|
||||
:root {
|
||||
/* Only change code below this line */
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
}
|
||||
|
||||
.penguin {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: var(--penguin-size, 300px);
|
||||
height: var(--penguin-size, 300px);
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 5%;
|
||||
left: 25%;
|
||||
background: var(--penguin-skin, black);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(130deg);
|
||||
z-index: -1;
|
||||
animation-duration: 3s;
|
||||
animation-name: wave;
|
||||
animation-iteration-count: infinite;
|
||||
transform-origin:0% 0%;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
@keyframes wave {
|
||||
10% {
|
||||
transform: rotate(110deg);
|
||||
}
|
||||
20% {
|
||||
transform: rotate(130deg);
|
||||
}
|
||||
30% {
|
||||
transform: rotate(110deg);
|
||||
}
|
||||
40% {
|
||||
transform: rotate(130deg);
|
||||
}
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left:-23%;
|
||||
background: white;
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
body {
|
||||
background:#c6faf1;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>@media (max-width: 350px) {:root {--penguin-size: 200px; --penguin-skin: black;}}</style>
|
||||
```
|
||||
@ -0,0 +1,128 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08719
|
||||
title: 使用縮寫的十六進制編碼
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cRkpKAm'
|
||||
forumTopicId: 18338
|
||||
dashedName: use-abbreviated-hex-code
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
許多人對超過 1600 萬種顏色感到不知所措， 並且很難記住十六進制編碼。 幸運的是，你可以使用縮寫形式。
|
||||
|
||||
例如，紅色的 `#FF0000` 十六進制編碼可以縮寫成 `#F00`。 在這種縮寫形式裏，三個數字分別代表着紅（R）、綠（G）、藍（B）三原色。
|
||||
|
||||
這樣，顏色的數量減少到了大約 4000 種。 且在瀏覽器裏 `#FF0000` 和 `#F00` 是完全相同的顏色。
|
||||
|
||||
# --instructions--
|
||||
|
||||
接下來，使用縮寫的十六進制編碼給元素設置正確的顏色。
|
||||
|
||||
<table class='table table-striped'><tbody><tr><th>顏色</th><th>十六進制編碼縮寫形式</th></tr><tr><td>藍綠色</td><td><code>#0FF</code></td></tr><tr><td>綠色</td><td><code>#0F0</code></td></tr><tr><td>紅色</td><td><code>#F00</code></td></tr><tr><td>紫紅色</td><td><code>#F0F</code></td></tr></tbody></table>
|
||||
|
||||
# --hints--
|
||||
|
||||
文本內容爲 `I am red!` 的 `h1` 元素的字體顏色 `color` 應該爲紅色。
|
||||
|
||||
```js
|
||||
assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
應使用紅色的 `hex code` 縮寫形式，不應使用 `#FF0000`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*?{\s*?color:\s*?#F00\s*?;\s*?}/gi));
|
||||
```
|
||||
|
||||
文本內容爲 `I am green!` 的 `h1` 元素的字體顏色 `color` 應該爲綠色。
|
||||
|
||||
```js
|
||||
assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
||||
```
|
||||
|
||||
應使用綠色的 `hex code` 縮寫形式，不應使用 `#00FF00`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi));
|
||||
```
|
||||
|
||||
文本內容爲 `I am cyan!` 的 `h1` 元素的字體顏色 `color` 應該爲藍綠色。
|
||||
|
||||
```js
|
||||
assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
|
||||
```
|
||||
|
||||
應使用藍綠色的 `hex code` 縮寫形式，不應使用 `#00FFFF`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi));
|
||||
```
|
||||
|
||||
文本內容爲 `I am fuchsia!` 的 `h1` 元素的字體顏色 `color` 應該爲紫紅色。
|
||||
|
||||
```js
|
||||
assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
|
||||
```
|
||||
|
||||
應使用紫紅色的 `hex code` 縮寫形式，不應使用 `#FF00FF`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: #000000;
|
||||
}
|
||||
.fuchsia-text {
|
||||
color: #000000;
|
||||
}
|
||||
.cyan-text {
|
||||
color: #000000;
|
||||
}
|
||||
.green-text {
|
||||
color: #000000;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1 class="red-text">I am red!</h1>
|
||||
|
||||
<h1 class="fuchsia-text">I am fuchsia!</h1>
|
||||
|
||||
<h1 class="cyan-text">I am cyan!</h1>
|
||||
|
||||
<h1 class="green-text">I am green!</h1>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: #F00;
|
||||
}
|
||||
.fuchsia-text {
|
||||
color: #F0F;
|
||||
}
|
||||
.cyan-text {
|
||||
color: #0FF;
|
||||
}
|
||||
.green-text {
|
||||
color: #0F0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1 class="red-text">I am red!</h1>
|
||||
|
||||
<h1 class="fuchsia-text">I am fuchsia!</h1>
|
||||
|
||||
<h1 class="cyan-text">I am cyan!</h1>
|
||||
|
||||
<h1 class="green-text">I am green!</h1>
|
||||
```
|
||||
@ -0,0 +1,197 @@
|
||||
---
|
||||
id: bad87dee1348bd9aede07836
|
||||
title: 使用 id 屬性來設定元素的樣式
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cakyZfL'
|
||||
forumTopicId: 18339
|
||||
dashedName: use-an-id-attribute-to-style-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
通過 `id` 屬性，你可以做一些很酷的事情。就像 class 一樣，你可以使用 CSS 來設置他們的樣式。
|
||||
|
||||
不過，`id` 不可以重複，它只能作用於一個元素上。 如果一個元素同時應用了 class 和 `id`，且兩者設置的樣式有衝突，會優先應用 `id` 中所設置的樣式。
|
||||
|
||||
選擇 `id` 爲 `cat-photo-element` 的元素，並設置它的背景顏色爲綠色。 可以在 `style` 標籤裏這樣寫：
|
||||
|
||||
```css
|
||||
#cat-photo-element {
|
||||
background-color: green;
|
||||
}
|
||||
```
|
||||
|
||||
注意在 `style` 標籤裏，聲明 class 的時候必須在名字前插入 `.` 符號。 同樣，在聲明 id 的時候，也必須在名字前插入 `#` 符號。
|
||||
|
||||
# --instructions--
|
||||
|
||||
請將 `id` 爲 `cat-photo-form` 的表單的背景顏色設置爲綠色。
|
||||
|
||||
# --hints--
|
||||
|
||||
`form` 元素的 id 應爲 `cat-photo-form`。
|
||||
|
||||
```js
|
||||
assert($('form').attr('id') === 'cat-photo-form');
|
||||
```
|
||||
|
||||
`form` 元素應含有 `background-color` 屬性，顏色爲綠色。
|
||||
|
||||
```js
|
||||
assert($('#cat-photo-form').css('background-color') === 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
確保 `form` 元素的 `id` 設置正確。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<form.*cat-photo-form.*>/gi) &&
|
||||
code.match(/<form.*cat-photo-form.*>/gi).length > 0
|
||||
);
|
||||
```
|
||||
|
||||
不要在 `form` 元素上添加其他 `class` 屬性或者 `style` 行內樣式。
|
||||
|
||||
```js
|
||||
assert(!code.match(/<form.*style.*>/gi) && !code.match(/<form.*class.*>/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.silver-background {
|
||||
background-color: silver;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.silver-background {
|
||||
background-color: silver;
|
||||
}
|
||||
|
||||
#cat-photo-form {
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,210 @@
|
||||
---
|
||||
id: 58c383d33e2e3259241f3076
|
||||
title: 使用屬性選擇器來設置元素的樣式
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cnpymfJ'
|
||||
forumTopicId: 301092
|
||||
dashedName: use-attribute-selectors-to-style-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
我們已經通過設置元素的 `id` 和 `class` 來顯示想要的樣式。 這就是 ID 選擇器和 Class 選擇器。 另外，也還有其他的 CSS 選擇器可以讓我們給特定的元素設置樣式。
|
||||
|
||||
讓我們再次通過貓咪圖片項目來練習 CSS 選擇器。
|
||||
|
||||
在這個挑戰裏，我們需要使用 `[attr=value]` 屬性選擇器來修改 CatPhotoApp 中複選框的樣式。 這個選擇器使用特定的屬性值來匹配和設置元素樣式。 例如，下面的代碼會改變所有 `type` 爲 `radio` 的元素的外邊距。
|
||||
|
||||
```css
|
||||
[type='radio'] {
|
||||
margin: 20px 0px 20px 0px;
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
請使用 `type` 屬性選擇器，設置複選框的上外邊距爲 10px，下外邊距爲 15px。
|
||||
|
||||
# --hints--
|
||||
|
||||
應使用 `type` 屬性選擇器來匹配複選框。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/<style>[\s\S]*?\[\s*?type\s*?=\s*?("|')checkbox\1\s*?\]\s*?{[\s\S]*?}[\s\S]*?<\/style>/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
複選框的上外邊距應爲 10px。
|
||||
|
||||
```js
|
||||
assert(
|
||||
(function () {
|
||||
var count = 0;
|
||||
$("[type='checkbox']").each(function () {
|
||||
if ($(this).css('marginTop') === '10px') {
|
||||
count++;
|
||||
}
|
||||
});
|
||||
return count === 3;
|
||||
})()
|
||||
);
|
||||
```
|
||||
|
||||
複選框的下外邊距應爲 15px。
|
||||
|
||||
```js
|
||||
assert(
|
||||
(function () {
|
||||
var count = 0;
|
||||
$("[type='checkbox']").each(function () {
|
||||
if ($(this).css('marginBottom') === '15px') {
|
||||
count++;
|
||||
}
|
||||
});
|
||||
return count === 3;
|
||||
})()
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.silver-background {
|
||||
background-color: silver;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.silver-background {
|
||||
background-color: silver;
|
||||
}
|
||||
[type='checkbox'] {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,143 @@
|
||||
---
|
||||
id: bad87fee1348bd9afdf08726
|
||||
title: 使用順時針標記指定元素的外邊距
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cnpybAd'
|
||||
forumTopicId: 18345
|
||||
dashedName: use-clockwise-notation-to-specify-the-margin-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
讓我們再試一次，不過這一次輪到 `margin` 了。
|
||||
|
||||
同樣，每個方向的外邊距值可以在一行裏面彙總聲明，而無需分別通過 `margin-top`、`margin-right`、`margin-bottom`、`margin-left` 分別聲明，比如：
|
||||
|
||||
```css
|
||||
margin: 10px 20px 10px 20px;
|
||||
```
|
||||
|
||||
這四個值按順時針排序：上、右、下、左，並且設置的效果等同於分別聲明每一個方向的外邊距值。
|
||||
|
||||
# --instructions--
|
||||
|
||||
按照順時針順序，將 class 爲 `blue-box` 的元素的上外邊距以及左外邊距設置爲 `40px`，右外邊距和下外邊距設置爲 `20px`。
|
||||
|
||||
# --hints--
|
||||
|
||||
class 爲 `blue-box` 的元素的上外邊距 `margin` 應爲 `40px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-top') === '40px');
|
||||
```
|
||||
|
||||
class 爲 `blue-box` 的元素的右外邊距 `margin` 應爲 `20px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-right') === '20px');
|
||||
```
|
||||
|
||||
class 爲 `blue-box` 的元素的下外邊距 `margin` 應爲 `20px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-bottom') === '20px');
|
||||
```
|
||||
|
||||
class 爲 `blue-box` 的元素的左外邊距 `margin` 應爲 `40px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-left') === '40px');
|
||||
```
|
||||
|
||||
應沿順時針方向設置 `blue-box` 的外邊距。
|
||||
|
||||
```js
|
||||
assert(
|
||||
/\.blue-box\s*{[\s\S]*margin[\s]*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/.test(
|
||||
__helpers.removeCssComments($('style').text())
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 20px 40px 20px 40px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
margin: 20px 40px 20px 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 20px 40px 20px 40px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
margin: 20px 40px 20px 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
margin: 40px 20px 20px 40px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,141 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08826
|
||||
title: 使用順時針標記指定元素的內邊距
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cB7mBS9'
|
||||
forumTopicId: 18346
|
||||
dashedName: use-clockwise-notation-to-specify-the-padding-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
如果不想每次都要分別聲明 `padding-top`、`padding-right`、`padding-bottom`、`padding-left` 屬性，可以把它們彙總在一行裏面一併聲明，像是這樣：
|
||||
|
||||
```css
|
||||
padding: 10px 20px 10px 20px;
|
||||
```
|
||||
|
||||
這四個值按順時針排序：上、右、下、左，並且設置的效果等同於分別聲明每一個方向的內邊距。
|
||||
|
||||
# --instructions--
|
||||
|
||||
按照順時針順序，把 `.blue-box` class 的上內邊距以及左內邊距 `padding` 設置爲 `40px`，右內邊距和下內邊距則設置爲`20px`。
|
||||
|
||||
# --hints--
|
||||
|
||||
class 爲 `blue-box` 的元素的上內邊距 `padding` 應爲 `40px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-top') === '40px');
|
||||
```
|
||||
|
||||
class 爲 `blue-box` 的元素的右內邊距 `padding` 應爲 `20px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-right') === '20px');
|
||||
```
|
||||
|
||||
class 爲 `blue-box` 的元素的下內邊距 `padding` 應爲 `20px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-bottom') === '20px');
|
||||
```
|
||||
|
||||
class 爲 `blue-box` 的元素的左內邊距 `padding` 應爲 `40px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-left') === '40px');
|
||||
```
|
||||
|
||||
應該按照順時針排序，彙總聲明的方式來設置 `blue-box` 的內邊距。
|
||||
|
||||
```js
|
||||
assert(
|
||||
/\.blue-box\s*{[\s\S]*padding[\s]*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/.test(
|
||||
__helpers.removeCssComments($('style').text())
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 20px 40px 20px 40px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px 40px 20px 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 20px 40px 20px 40px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px 40px 20px 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 40px 20px 20px 40px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,158 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08805
|
||||
title: 使用元素選擇器來設置元素的樣式
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cJKMBT2'
|
||||
forumTopicId: 18349
|
||||
dashedName: use-css-selectors-to-style-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
在 CSS 中，頁面樣式的屬性有幾百個，你可以用來改變元素在頁面上的外觀。
|
||||
|
||||
當你輸入 `<h2 style="color: red;">CatPhotoApp</h2>`，就可以用行內 CSS 設置 `h2` 元素的樣式。
|
||||
|
||||
這是指定元素樣式的一種方法，但有一個更好的方法來應用 CSS。
|
||||
|
||||
在代碼的頂部，創建一個 `style` 聲明區域，如下方所示：
|
||||
|
||||
```html
|
||||
<style>
|
||||
</style>
|
||||
```
|
||||
|
||||
在樣式聲明區域內，可以爲所有 `h2` 元素創建一個 <dfn>CSS selector</dfn>。 如果想讓所有 `h2` 元素在變成紅色，可以添加下方的樣式規則：
|
||||
|
||||
```html
|
||||
<style>
|
||||
h2 {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
請注意，每個元素的樣式規則都應該有開始和結束大括號（`{` 和 `}`）。 還需要確保元素的樣式定義在開始和結束樣式標籤之間。 你需要確保所有樣式規則位於花括號之間，並且每條樣式規則都以分號結束。
|
||||
|
||||
# --instructions--
|
||||
|
||||
請刪除 `h2` 元素的行內樣式，然後創建 `style` 樣式聲明區域， 最後添加 CSS 樣式規則使所有 `h2` 元素變爲藍色。
|
||||
|
||||
# --hints--
|
||||
|
||||
應刪除 `h2` 元素的 `style` 樣式。
|
||||
|
||||
```js
|
||||
assert(!$('h2').attr('style'));
|
||||
```
|
||||
|
||||
應創建一個 `style` 樣式聲明區域。
|
||||
|
||||
```js
|
||||
assert($('style') && $('style').length >= 1);
|
||||
```
|
||||
|
||||
`h2` 元素顏色應爲藍色。
|
||||
|
||||
```js
|
||||
assert($('h2').css('color') === 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
確保 `h2` 選擇器的內容被花括號所包圍，樣式規則應以分號結束。
|
||||
|
||||
```js
|
||||
assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g));
|
||||
```
|
||||
|
||||
`style` 標籤應符合語法，且應有一個結束標籤。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/style>/g) &&
|
||||
code.match(/<\/style>/g).length ===
|
||||
(
|
||||
code.match(
|
||||
/<style((\s)*((type|media|scoped|title|disabled)="[^"]*")?(\s)*)*>/g
|
||||
) || []
|
||||
).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2 style="color: red;">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h2 {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,257 @@
|
||||
---
|
||||
id: 5a9d725e424fe3d0e10cad10
|
||||
title: 使用 CSS 變量一次更改多個元素
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c6bDECm'
|
||||
forumTopicId: 301093
|
||||
dashedName: use-css-variables-to-change-several-elements-at-once
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
<dfn>CSS 變量</dfn>可以實現僅需要更新一個值，就可以將更改應用到多個 CSS 樣式屬性的強大方法。
|
||||
|
||||
按照下面指示的來做，我們只需要改變三個值，多個樣式將會同時被修改。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在 `penguin` class 裏，將 `black` 改爲 `gray`；`gray` 改爲 `white`；`yellow` 改爲 `orange`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`penguin` class 聲明中的 `--penguin-skin` 變量值應爲 `gray`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
`penguin` class 聲明中的 `--penguin-belly` 變量值應爲 `white`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
`penguin` class 聲明中的 `--penguin-beak` 變量值應爲 `orange`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/.penguin\s*?{[\s\S]*--penguin-beak\s*?:\s*?orange\s*?;[\s\S]*}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.penguin {
|
||||
|
||||
/* Only change code below this line */
|
||||
--penguin-skin: black;
|
||||
--penguin-belly: gray;
|
||||
--penguin-beak: yellow;
|
||||
/* Only change code above this line */
|
||||
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 0%;
|
||||
left: -5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left: 15%;
|
||||
background: white;
|
||||
width: 35%;
|
||||
height: 35%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
body {
|
||||
background:#c6faf1;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.penguin {--penguin-skin: gray; --penguin-belly: white; --penguin-beak: orange;}</style>
|
||||
```
|
||||
@ -0,0 +1,66 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08726
|
||||
title: 使用十六進制編碼獲得指定顏色
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c8W9mHM'
|
||||
forumTopicId: 18350
|
||||
dashedName: use-hex-code-for-specific-colors
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
你知道在 CSS 裏面還有其他方式來代表顏色嗎？ 其中一個方法叫十六進制編碼，簡稱 hex。
|
||||
|
||||
日常生活中，我們使用的計數方法一般是 <dfn>decimals</dfn>，或十進制，即使用數字 0 到 9 來表示。 而 <dfn>Hexadecimals</dfn>（或 <dfn>hex</dfn>）基於 16 位數字， 它包括 16 種不同字符。 像十進制一樣，0-9 的符號代表 0 到 9 的值。 然後，A、B、C、D、E、F 代表 10 至 15 的值。 總的來說，0 到 F 在十六進制裏代表數字，總共有 16 個值。 你可以在這裏訪問更多[關於十六進制的信息](https://en.wikipedia.org/wiki/Hexadecimal)。
|
||||
|
||||
在 CSS 裏面，我們可以使用 6 個十六進制的數字來代表顏色，每兩個數字控制一種顏色，分別是紅（R）、綠（G）、藍（B）。 例如，`#000000` 代表黑色，同時也是最小的值。 你可以在 [RGB color system here](https://en.wikipedia.org/wiki/RGB_color_model) 找到更多的相關信息。
|
||||
|
||||
```css
|
||||
body {
|
||||
color: #000000;
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
將 `body` 元素的背景顏色由 `black` 改爲它對應的十六進制編碼 `#000000`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`body` 元素的背景顏色應爲黑色。
|
||||
|
||||
```js
|
||||
assert($('body').css('background-color') === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
應使用 `hex code` 來替換 `black`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/body\s*{(([\s\S]*;\s*?)|\s*?)background.*\s*:\s*?#000(000)?((\s*})|(;[\s\S]*?}))/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #000000;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@ -0,0 +1,132 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08721
|
||||
title: 使用十六進制編碼混合顏色
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cK89PhP'
|
||||
forumTopicId: 18359
|
||||
dashedName: use-hex-code-to-mix-colors
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
回顧一下，十六進制編碼使用 6 個十六進制字符來表示顏色，兩個字符爲一組，分別代表紅（R）、綠（G）、藍（B）。
|
||||
|
||||
通過三原色（紅、綠、藍），我們可以創建 1600 萬種不同顏色。
|
||||
|
||||
例如，橘色是純紅色混合一些綠色而成，其中沒有藍色。 在十六進制編碼裏面，它可以寫成 `#FFA500`。
|
||||
|
||||
`0` 是十六進制裏面最小的數字，表示沒有顏色。
|
||||
|
||||
`F` 是十六進制裏面最大的數字，有最高的亮度。
|
||||
|
||||
# --instructions--
|
||||
|
||||
把 `style` 標籤裏面的顏色值用正確的十六進制編碼替換。
|
||||
|
||||
<table class='table table-striped'><tbody><tr><th>顏色</th><th>十六進制編碼</th></tr><tr><td>道奇藍</td><td><code>#1E90FF</code></td></tr><tr><td>綠色</td><td><code>#00FF00</code></td></tr><tr><td>橙色</td><td><code>#FFA500</code></td></tr><tr><td>紅色</td><td><code>#FF0000</code></td></tr></tbody></table>
|
||||
|
||||
# --hints--
|
||||
|
||||
文本內容爲 `I am red!` 的 `h1` 元素的 `color` 值應該爲紅色。
|
||||
|
||||
```js
|
||||
assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
應使用 `hex code` 替換 `red`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*?{\s*?color:\s*?(#FF0000|#F00)\s*?;\s*?}/gi));
|
||||
```
|
||||
|
||||
文本內容爲 `I am green!` 的 `h1` 元素的 `color` 值應該爲綠色。
|
||||
|
||||
```js
|
||||
assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
||||
```
|
||||
|
||||
應使用 `hex code` 替換 `green` 關鍵詞。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green-text\s*?{\s*?color:\s*?(#00FF00|#0F0)\s*?;\s*?}/gi));
|
||||
```
|
||||
|
||||
文本內容爲 `I am dodger blue!` 的 `h1` 元素的 `color` 值應該爲道奇藍色。
|
||||
|
||||
```js
|
||||
assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)');
|
||||
```
|
||||
|
||||
應使用 `hex code` 替換 `dodgerblue`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.dodger-blue-text\s*?{\s*?color:\s*?#1E90FF\s*?;\s*?}/gi));
|
||||
```
|
||||
|
||||
文本內容爲 `I am orange!` 的 `h1` 元素的 `color` 值應該爲橘色。
|
||||
|
||||
```js
|
||||
assert($('.orange-text').css('color') === 'rgb(255, 165, 0)');
|
||||
```
|
||||
|
||||
應使用 `hex code` 替換 `orange`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.orange-text\s*?{\s*?color:\s*?#FFA500\s*?;\s*?}/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: black;
|
||||
}
|
||||
.green-text {
|
||||
color: black;
|
||||
}
|
||||
.dodger-blue-text {
|
||||
color: black;
|
||||
}
|
||||
.orange-text {
|
||||
color: black;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1 class="red-text">I am red!</h1>
|
||||
|
||||
<h1 class="green-text">I am green!</h1>
|
||||
|
||||
<h1 class="dodger-blue-text">I am dodger blue!</h1>
|
||||
|
||||
<h1 class="orange-text">I am orange!</h1>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: #FF0000;
|
||||
}
|
||||
.green-text {
|
||||
color: #00FF00;
|
||||
}
|
||||
.dodger-blue-text {
|
||||
color: #1E90FF;
|
||||
}
|
||||
.orange-text {
|
||||
color: #FFA500;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1 class="red-text">I am red!</h1>
|
||||
|
||||
<h1 class="green-text">I am green!</h1>
|
||||
|
||||
<h1 class="dodger-blue-text">I am dodger blue!</h1>
|
||||
|
||||
<h1 class="orange-text">I am orange!</h1>
|
||||
```
|
||||
@ -0,0 +1,140 @@
|
||||
---
|
||||
id: bad82fee1348bd9aedf08721
|
||||
title: 使用 RGB 混合顏色
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cm24JU6'
|
||||
forumTopicId: 18368
|
||||
dashedName: use-rgb-to-mix-colors
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
就像使用十六進制編碼一樣，你可以通過不同值的組合，來混合得到不同的 RGB 顏色。
|
||||
|
||||
# --instructions--
|
||||
|
||||
將 `style` 標籤裏面中的十六進制編碼替換爲正確的 RGB 值。
|
||||
|
||||
<table class='table table-striped'><tbody><tr><th>顏色</th><th>RGB</th></tr><tr><td>藍色</td><td><code>rgb(0, 0, 255)</code></td></tr><tr><td>紅色</td><td><code>rgb(255, 0, 0)</code></td></tr><tr><td>淡紫色</td><td><code>rgb(218, 112, 214)</code></td></tr><tr><td>赭黃色</td><td><code>rgb(160, 82, 45)</code></td></tr></tbody></table>
|
||||
|
||||
# --hints--
|
||||
|
||||
文本內容爲 `I am red!` 的 `h1` 元素的 `color` 值應爲紅色。
|
||||
|
||||
```js
|
||||
assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
紅色應使用 `rgb` 值來表示。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.red-text\s*?{\s*?color:\s*?rgb\(\s*?255\s*?,\s*?0\s*?,\s*?0\s*?\)\s*?;\s*?}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
文本內容爲 `I am orchid!` 的 `h1` 元素的 `color` 應爲淡紫色。
|
||||
|
||||
```js
|
||||
assert($('.orchid-text').css('color') === 'rgb(218, 112, 214)');
|
||||
```
|
||||
|
||||
淡紫色應使用 `rgb` 值來表示。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.orchid-text\s*?{\s*?color:\s*?rgb\(\s*?218\s*?,\s*?112\s*?,\s*?214\s*?\)\s*?;\s*?}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
文本內容爲 `I am blue!` 的 `h1` 元素的 `color` 應爲藍色。
|
||||
|
||||
```js
|
||||
assert($('.blue-text').css('color') === 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
藍色應使用 `rgb` 值來表示。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.blue-text\s*?{\s*?color:\s*?rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\)\s*?;\s*?}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
文本內容爲 `I am sienna!` 的 `h1` 元素的 `color` 應爲赭黃色。
|
||||
|
||||
```js
|
||||
assert($('.sienna-text').css('color') === 'rgb(160, 82, 45)');
|
||||
```
|
||||
|
||||
赭黃色應使用 `rgb` 值來表示。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.sienna-text\s*?{\s*?color:\s*?rgb\(\s*?160\s*?,\s*?82\s*?,\s*?45\s*?\)\s*?;\s*?}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: #000000;
|
||||
}
|
||||
.orchid-text {
|
||||
color: #000000;
|
||||
}
|
||||
.sienna-text {
|
||||
color: #000000;
|
||||
}
|
||||
.blue-text {
|
||||
color: #000000;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1 class="red-text">I am red!</h1>
|
||||
|
||||
<h1 class="orchid-text">I am orchid!</h1>
|
||||
|
||||
<h1 class="sienna-text">I am sienna!</h1>
|
||||
|
||||
<h1 class="blue-text">I am blue!</h1>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: rgb(255, 0, 0);
|
||||
}
|
||||
.orchid-text {
|
||||
color: rgb(218, 112, 214);
|
||||
}
|
||||
.sienna-text {
|
||||
color: rgb(160, 82, 45);
|
||||
}
|
||||
.blue-text {
|
||||
color:rgb(0, 0, 255);
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1 class="red-text">I am red!</h1>
|
||||
|
||||
<h1 class="orchid-text">I am orchid!</h1>
|
||||
|
||||
<h1 class="sienna-text">I am sienna!</h1>
|
||||
|
||||
<h1 class="blue-text">I am blue!</h1>
|
||||
```
|
||||
@ -0,0 +1,76 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08718
|
||||
title: 使用 RGB 值爲元素上色
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cRkp2fr'
|
||||
forumTopicId: 18369
|
||||
dashedName: use-rgb-values-to-color-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`RGB` 值是在 CSS 中表示顏色的另一種方法。
|
||||
|
||||
黑色的 `RGB` 值：
|
||||
|
||||
```css
|
||||
rgb(0, 0, 0)
|
||||
```
|
||||
|
||||
白色的 `RGB` 值：
|
||||
|
||||
```css
|
||||
rgb(255, 255, 255)
|
||||
```
|
||||
|
||||
RGB 值與我們之前學到的十六進制編碼不同。`RGB` 值不需要用到 6 位十六進制數字，而只需要指定每種顏色的亮度大小，數值範圍從 0 到 255。
|
||||
|
||||
如果我們稍微計算一下，就不難發現這兩種表示方式本質上是等價的。在十六進制編碼中，我們用兩個十六進制數表示一個顏色；這樣，每種顏色都有 16 \* 16（即 256）種可能。 所以，`RGB` 從零開始計算，與十六進制代碼的值的數量完全相同。
|
||||
|
||||
下面是通過使用 RGB 值設置背景顏色爲橘色的例子：`body`。
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(255, 165, 0);
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
請用 RGB 值 `rgb(0, 0, 0)` 替換 `body` 元素背景顏色的十六進制編碼。
|
||||
|
||||
# --hints--
|
||||
|
||||
`body` 元素的背景顏色應該是黑色。
|
||||
|
||||
```js
|
||||
assert($('body').css('background-color') === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
您應該使用 `rgb` 給您的 `body` 元素黑色背景。
|
||||
|
||||
```js
|
||||
assert(code.match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #F00;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
Reference in New Issue
Block a user