feat: add set 2 of questions for Backgrounds and borders quiz (#60259)

This commit is contained in:
Roberto Iacono 2025-05-30 17:40:03 +02:00 committed by GitHub
parent 4bf9754ee1
commit ad00f733f7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -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 doesnt 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);`