IES: CSS-deck 19 Flashcards
1
Q
<:nth-child()>:
A
- > specifies individual flex items to align vertically within their line
- > each flex container inner child element is then referenced by specifying its index number in the parentheses
- > specify your preferred value to
align-self - Ex.
<div class="flex-container">
<div>One</div>
...
...
...
<div>Five</div>
</div>
(CSS stylesheet)
~~~
div.flex-container { …
align-items: center;}
div.flex-container > div:nth-child(2) {align-self:
flex-end;}
div.flex-container > div:nth-child(3) {align-self:
flex-start;}
~~~
(adjusts the second(2) and third(3) container items’ alignments)
2
Q
align-self:
A
- specifies alignment in block direction of selected flexbox/grid container item
- overrides alignment specified by
align-items
3
Q
“grid”:
A
-
displayvalue - This layout scheme is 2-dimensional (places “grid items” in columns and rows)(as opposed to the flexbox scheme which is 1-dimensional)
- specifies element to be “grid container”
- Block-level : fills the page width
- All direct child elements within automatically become grid items
- all modern browsers support grid since:
1. Chrome 57.0
2. Edge 16.0.
3. Firefox 52.0.
4. Safari 10
5. Opera 44
4
Q
“inline-grid”:
A
-
displayvalue - Specifies an element to be a “grid container”
- This layout scheme is 2-dimensional (places “grid items” in columns and rows)(as opposed to the flexbox scheme which is 1-dimensional)
- Does not fill the page width
- All direct child elements within automatically become grid items
- all modern browsers support grid since:
1. Chrome 57.0
2. Edge 16.0.
3. Firefox 52.0.
4. Safari 10
5. Opera 44
5
Q
grid-template-columns:
A
- specifies the number of grid columns
- specifies as a space-separated list of width values
- Ex.
grid-template-columns: 20% 60% 20%;
6
Q
grid-template-rows:
A
- specifies the number of grid rows
- Specifies as a space-separated list of height values
- Ex.
grid-template-rows: 20% 40% 40%; - When a value is not listed, subsequent rows will only use the first row template values
7
Q
“auto” (grid container):
A
- grid-template-… keyword/value
- Specifies any column width or row height
- Ex. (to create four columns of equal size and two rows of equal size): ```
{
grid-template-columns: auto auto auto auto;
grid-template-rows: auto auto:
}
~~~
8
Q
“repeat()”:
A
- CSS function
- grid(-…) value
- Specifies large number of columns or rows as repeating fragment fr units
- accepts two arguments: specifies repetition number and grid track fragments number
- Ex. (to create five rows of equal size)
grid-template-rows: repeat (5, 2fr);
9
Q
column lines; row lines:
A
- (grid containers)
- Leading edge lines between the columns and rows
10
Q
line numbers
A
- (not always column lines or row lines: some run outside of the columns or rows)
- Can be used to place grid items at a specific position in a grid container
-
grid-columnandgrid-rowcan specify horizontal and vertical positioning using single line numbers - Two “/”-separated values can specify start and end line numbers (Ex.
~~~
.item1 {
grid-column: 1/3;
}
~~~
(spans the first two columns of a grid))
11
Q
“span”
A
-
grid-columnandgrid-rowkeyword/value - use to avoid specifying end lines when items should span more than one column or row
- (Ex.
~~~
.item1 {
grid-column: 1/span 2;
}
~~~
(uses column number & span size rather than line numbers but achieves same result: “item1” spans the first two columns of a grid))
12
Q
CSS media queries
A
- discovers capabilities of viewing device to apply appropriate style rules
- syntax:
@media *media-type* and (*media-feature*) {*style-rules*} - (checks for multiple media features adding further: “
... and (*media-feature*) ...” syntax parts)
1. > Specified media feature detected on specified media type
2. > media query reports as true
3. > style rules applied - Ex.
~~~
@media screen and (max-width:600px) {
body {background: Blue;}
}
~~~ - (Note: no spaces around “ : “ in media-feature specification)
- (applies a Blue background color only on devices whose display area is 600px wide or less)
13
Q
media-type
A
- (CSS media query syntax:
@media *media-type* and (*media-feature*) {*style-rules*}) - CSS media query: keywords/value class
- media-type keyword/values:
1. “all” detect all media types
2. “print” detect printers
3. “screen” detect PC desktop, tablet, and phone screens
4. “speech” detect screenreaders
14
Q
media-feature
A
- (CSS media query syntax:
@media *media-type* and (*media-feature*) {*style-rules*}) - CSS media query: keyword/value class
- media-feature keyword/values:
1. “min-width” minimum width of the display area, such as the width of the browser window
2. “max-width” maximum width of the display area, such as the width of the browser window
3. “orientation” orientation of the viewport, as either landscape mode or portrait mode
15
Q
CSS media queries (navigation)
A
- Media queries allow appropriate navigation to be provided for large and small devices
- Typically, horizontal Nav bars provided for wide displays
- Typically, vertical nav bars more suitable for smaller displays
- Vertical nav bars specify a fixed width
- Horizontal nav bars specify to float [or flex] list items & hide the overflow (to maintain bar visibility)
- Ex.
~~~
@media screen and (max-width:600px) {
ul {overflow: hidden; width: 100%;}
li a {float: left;}
}
~~~ - (automates the switch of navigation type)
