mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-06-19 21:09:51 +08:00
feat: add set 2 of questions for Backgrounds and borders quiz (#60259)
This commit is contained in:
parent
4bf9754ee1
commit
ad00f733f7
@ -485,3 +485,445 @@ body {
|
||||
}
|
||||
```
|
||||
|
||||
## --quiz--
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What kind of values can the `line-height` property accept?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Only pixel values
|
||||
|
||||
---
|
||||
|
||||
Only keyword values like `inherit`
|
||||
|
||||
---
|
||||
|
||||
Only em units
|
||||
|
||||
#### --answer--
|
||||
|
||||
Numbers, percentages, and length units
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Which of the following is not a valid value for `line-height`?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
`normal`
|
||||
|
||||
---
|
||||
|
||||
`150%`
|
||||
|
||||
---
|
||||
|
||||
`2em`
|
||||
|
||||
#### --answer--
|
||||
|
||||
`bold`
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What does `list-style-type` control?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
The position of a list marker
|
||||
|
||||
---
|
||||
|
||||
The spacing of list items
|
||||
|
||||
---
|
||||
|
||||
The alignment of list items
|
||||
|
||||
#### --answer--
|
||||
|
||||
The marker symbol used in a list
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Which value is not valid for `list-style-type`?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
`circle`
|
||||
|
||||
---
|
||||
|
||||
`disc`
|
||||
|
||||
---
|
||||
|
||||
`square`
|
||||
|
||||
#### --answer--
|
||||
|
||||
`hexagon`
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What are the two acceptable values for `list-style-position`?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
`top` and `bottom`
|
||||
|
||||
---
|
||||
|
||||
`inline` and `block`
|
||||
|
||||
---
|
||||
|
||||
`left` and `right`
|
||||
|
||||
#### --answer--
|
||||
|
||||
`inside` and `outside`
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Which CSS property adds spacing outside each list item to improve readability?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
`padding`
|
||||
|
||||
---
|
||||
|
||||
`line-height`
|
||||
|
||||
---
|
||||
|
||||
`text-indent`
|
||||
|
||||
#### --answer--
|
||||
|
||||
`margin`
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What does the `:link` pseudo-class target?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
All hyperlinks
|
||||
|
||||
---
|
||||
|
||||
Hovered links
|
||||
|
||||
---
|
||||
|
||||
Already visited links
|
||||
|
||||
#### --answer--
|
||||
|
||||
Unvisited links
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What pseudo-class styles a link when the user has already clicked on it?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
`:hover`
|
||||
|
||||
---
|
||||
|
||||
`:link`
|
||||
|
||||
---
|
||||
|
||||
`:focus`
|
||||
|
||||
#### --answer--
|
||||
|
||||
`:visited`
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Which pseudo-class styles an element when it gains input focus?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
`:hover`
|
||||
|
||||
---
|
||||
|
||||
`:visited`
|
||||
|
||||
---
|
||||
|
||||
`:target`
|
||||
|
||||
#### --answer--
|
||||
|
||||
`:focus`
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
When does the `:active` pseudo-class apply?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
When the link is first loaded
|
||||
|
||||
---
|
||||
|
||||
When the user is not interacting
|
||||
|
||||
---
|
||||
|
||||
When the browser finishes rendering
|
||||
|
||||
#### --answer--
|
||||
|
||||
When a user clicks or taps the element
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Which pseudo-class is used for hover effects?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
`:link`
|
||||
|
||||
---
|
||||
|
||||
`:click`
|
||||
|
||||
---
|
||||
|
||||
`:active`
|
||||
|
||||
#### --answer--
|
||||
|
||||
`:hover`
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What does `background-size: cover` do?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Repeats the image in all directions
|
||||
|
||||
---
|
||||
|
||||
Crops the image
|
||||
|
||||
---
|
||||
|
||||
Fixes the image in one position
|
||||
|
||||
#### --answer--
|
||||
|
||||
Scales the image to fill the element while preserving aspect ratio
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Which value of `background-repeat` will repeat the background image both horizontally and vertically?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
`no-repeat`
|
||||
|
||||
---
|
||||
|
||||
`repeat-x`
|
||||
|
||||
---
|
||||
|
||||
`space`
|
||||
|
||||
#### --answer--
|
||||
|
||||
`repeat`
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Which property sets where the background image is placed?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
`background-location`
|
||||
|
||||
---
|
||||
|
||||
`background-origin`
|
||||
|
||||
---
|
||||
|
||||
`background-place`
|
||||
|
||||
#### --answer--
|
||||
|
||||
`background-position`
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What value of `background-attachment` keeps the image fixed when scrolling?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
`scroll`
|
||||
|
||||
---
|
||||
|
||||
`static`
|
||||
|
||||
---
|
||||
|
||||
`sticky`
|
||||
|
||||
#### --answer--
|
||||
|
||||
`fixed`
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Which of the following correctly sets a background image that doesn’t repeat and is centered?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
`background: no-repeat-center img("img.png");`
|
||||
|
||||
---
|
||||
|
||||
`background: image url("img.png") center;`
|
||||
|
||||
---
|
||||
|
||||
`background-position: center no-repeat url("img.png");`
|
||||
|
||||
#### --answer--
|
||||
|
||||
`background: center no-repeat url("img.png");`
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Which property is used to set the top, right, bottom, and left borders in a single declaration?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
`border-style`
|
||||
|
||||
---
|
||||
|
||||
`border-radius`
|
||||
|
||||
---
|
||||
|
||||
`outline`
|
||||
|
||||
#### --answer--
|
||||
|
||||
`border`
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
What effect does setting `border-radius: 10px;` have on an element?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
It changes the border's opacity
|
||||
|
||||
---
|
||||
|
||||
It creates a 10-pixel border
|
||||
|
||||
---
|
||||
|
||||
It adds a 10px shadow
|
||||
|
||||
#### --answer--
|
||||
|
||||
It rounds the corners of the element
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Which of the following CSS rules correctly creates a linear gradient from red to yellow?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
`background: gradient-linear(red to yellow);`
|
||||
|
||||
---
|
||||
|
||||
`background: linear(red, yellow);`
|
||||
|
||||
---
|
||||
|
||||
`background-color: gradient(red, yellow);`
|
||||
|
||||
#### --answer--
|
||||
|
||||
`background: linear-gradient(red, yellow);`
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Which of the following CSS declarations correctly applies a radial gradient from white in the center to blue at the edges?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
`background: linear-gradient(white to blue);`
|
||||
|
||||
---
|
||||
|
||||
`background: gradient-radial(white to blue);`
|
||||
|
||||
---
|
||||
|
||||
`background: radial-gradient(blue, white);`
|
||||
|
||||
#### --answer--
|
||||
|
||||
`background: radial-gradient(white, blue);`
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user