Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

World Wide Pond Devlpmnt/Design > IES: CSS-deck 14 > Flashcards

IES: CSS-deck 14 Flashcards

1
Q

border-collapse: collapse- how different, collapsed borders should appear (visibility eval)

A

visibility eval: border-style value -“hidden” takes precedence

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

border-collapse: collapse- how different, collapsed borders should appear (width eval)

A
  • the greater width of two visible borders takes precedence
  • Ex. two borders to collapse: one is 5 px wide, the other is 10 px wide. The 10 px border takes precedence.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

border-collapse: collapse- how different, collapsed borders should appear (style eval)

A
  • Style eval: two visible borders of equal width - the border style of greater value takes precedence
  • (border styles set in descending value order)
    1. double
    2. solid
    3. dashed
    4. dotted
    5. ridge
    6. outset
    7. groove
    8. inset
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

border-collapse: collapse- how different, collapsed borders should appear (color eval)

A
  • color eval: two visible borders of equal width and identical style- the border color of greater value takes precedence
  • (value is determined in the descending status order)
    1. cell
    2. row
    3. row group
    4. column
    5. column group
    6. table
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

display

A
  • Can accept a range of values to specify that a selected element should be treated as a table component
  • (values in this range emulate the default behavior of HTML tags a browser automatically applies to table components)
  • (CSS display value, HTML tag equivalent)
    1. table, <table>
    2. table-row, <tr>
    3. table-header-group, <thead>
    4. table-row-group, <tbody>
    5. Table-footer-group, <tfoot>
    6. table-column, <col>
    7. table-column-group, <colgroup>
    8. table-cell, <th> or <td>
    9. table-caption, <caption>
  • (these values can be used to specify table features to an XML doc -browser will display as if an HTML table)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

marker

A
  • indicates the beginning of an item in a list
  • typically a bullet in an <ul> unordered list
  • typically an incrementing number in an ordered list <ol>
  • (browser conducts an item count in each case, but it is usually only used with an ordered list)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

list-style-type

A
  • list? property
  • Can specify an alternative type of marker for any list
  • Keywords:
    1. disc
    2. circle
    3. square
  • (both number and alphabetical markers display incrementing item count)
  • (number marker types)
    1. lower-roman
    2. upper-roman
    3. decimal
    4. decimal-leading-zero
  • (alphabetical marker types)
    1. lower-latin
    2. upper-latin
    3. lower-greek
    4. armenian
    5. georgian
  • Miscellaneous
    1. none
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

list-style-image

A
  • an image may be specified as a marker by stating its path in the parentheses of the url value
  • Ex. {list-style-image: url(tick.png) disc;}
  • (the disc, according to this example, is specified as the alternative marker if and when the designated image is not available)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

marker typical formatting

A
  1. browser creates block-level content box for the entire list
  2. creates inline content boxes for each list item
  3. automatic left margin insets list item content boxes
  4. Marker appears on the right edge of this margin area but outside the list item content boxes
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

list-style-position

A
  • keywords:
    1. “inside”
    2. “outside”
  • (determines where markers should appear relative to the list item content boxes)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

CSS shorthand: markers

A
  • rather than separate styles for the list-style-type, list- style-image, and list-style-position
  • specify a value for each as a space-separated list to the list - style property
  • (the values may appear in any order)
  • (where any value is omitted, the default value will be assumed)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

nested lists: list-style

A
  • keywords/values:
    1. “inherit”
    2. “none”
  • “inherit”: specifies the nested list(s) should adopt the list-style of the containing element
  • “none”: suppresses the nested list(s) from adopting the list-style of the containing element
  • (lists of either type may be nested with their marker position and type specified independently)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

A navigation bar

A
  1. a list of hyperlinks
  2. particular CSS style rules applied to an HTML list
  3. markers are removed (the list-style-type is specified as “none”)
  4. browsers defaults margins and paddings are removed
  5. list hyperlinks styled with display: block;
  6. text-decoration: none; - removes default underlines
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Hyperlinks can indicate status by:

A
  1. adding a class for styling - to indicate the current location on the website
  2. adding a :hover pseudo-class after the selector
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

vertical nav bars: typically

A
  • specify a fixed width value for the list
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

horizontal nav bars:

A
  • can float the list items
  • can hide the overflow to maintain visibility of the bar
17
Q

pseudo-classes

A
  • used to indicate the state of a hyperlink
    1. a:link (default)
    2. a:visited
    3. a:hover
    4. a:active
18
Q

dropdown box:

A
  • a content box that is hidden
  • when the user places the cursor over an active element, the content box becomes unhidden
  • at this point, the box appears to offer further information, a larger image (when cursor is over a thumbnail), or a list of clickable options
  • creation:
    1. active element styled with position: relative;
    2. drop-down box positioned directly beneath the active element with position; absolute;
    3. Dropdown box should have z-index value specified to place it above any existing page content
    4. include a universal box-sizing: border-box;
19
Q

box-sizing: border-box;

A
  • a universal rule
  • allows padding and border to be included within the total width and height of the active element and of the drop-down box
  • The default value is “content-box” (the content area is the width and height that are applied)
  • if the element is specified as 100px x 100px, the content box is 100px by 100px (With the padding and border, the element will be wider and higher than 100px)
20
Q

dropdown content transparency:

A
  • to specify a background value for the drop-down content is important
  • by default, the drop-down is transparent: the background value prevents the underlying, visible content to interfere with the drop-down content

World Wide Pond Devlpmnt/Design (48 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions