IES: CSS-deck 15

Question 1

when a hyperlink is displayed as a block:

Answer 1

its entire content box is clickable

Question 2

cursor

Answer 2

• CSS property
• Can specify the type to display when hovering over a selected element
• keywords:
  1. “auto”
  2. “default”
  3. “pointer”
  4. “crosshair”
  5. “move”
  6 “text”
  7. “wait”
  8. “progress”
  9. “n-resize”
  10. “ne-resize”
  11. “e-resize”
  12. “se-resize”
  13. “s-resize”
  14. “sw-resize”
  15. “w-resize”
  16. “nw-resize”

Question 3

cursor:”auto”;

Answer 3

• cursor keyword/value
• default value
• Allows the browser to determine which cursor to display

Question 4

cursor: “default”;

Answer 4

• cursor keyword/value
• explicitly forces browser to use the OS’s default cursor

Question 5

cursor: “pointer”;

Answer 5

• cursor keyword/value
• the cursor is a pointer (hand, pointing finger extended)
• indicates a link

Question 6

cursor: “crosshair”;

Answer 6

• cursor keyword/value
• the cursor renders as a targeting crosshair
• when the cursor turns to a crosshair, it displays that “precise cursors” have been enabled
• (some users prefer this setting when they’re working in very fine detail.)

Question 7

cursor: “move”;

Answer 7

• cursor keyword/value
• cursor renders as a 4-way arrow (pointing north south, east, and west)
• cursor indicates something is to be moved

Question 8

cursor: “text”;

Answer 8

• cursor keyword/value
• cursor renders typically as a blinking vertical line
• a computer screen indicator showing the current position for entering or editing text
• its position determines where text will be inserted or modified

Question 9

cursor: “wait”;

Answer 9

• cursor keyword/value
• cursor renders generally displayed by an hourglass or a watch, by itself
• this style cursor indicates that the program is busy, and the user can’t interact with the interface until the current task has completed

Question 10

cursor: “progress”;

Answer 10

• cursor keyword/value
• the cursor renders generally as a slightly smaller arrow cursor coupled with and to the left of a slightly smaller hourglass
• this style cursor indicates that the program is busy often with multiple tasks
• the program is busy in the background, but the user can still interact with the interface and proceed without delay

Question 11

cursor: “help”;

Answer 11

• cursor keyword/value
• cursor renders typically as a slightly smaller arrow cursor coupled with and to the left of a question mark about the same size as the arrow
• this cursor indicates that help or help information is available where it is hovering

Question 12

cursor: “…-resize”;

Answer 12

• cursor keyword/value
• cursor renders typically as a bi-directional arrow (single line with arrows on either end pointing in opposite directions): horizontal, vertical, or diagonal
• indicates some edge(s) is(are) to be moved
• Ex. the se-resize cursor is used when the movement starts from the south-east corner of the box (movement potentially changes the position of the south edge as well as the east edge at the same time).

Question 13

cursor: (image);

Answer 13

• cursor value: url(path);
• multiple images may be specified in a comma-separated list
• multiple images list should always end a regular cursor keyword as its alternate

Question 14

:focus

Answer 14

• pseudo-class
• used to apply styling to the element with current focus in a document
• focus: the state of an interactive component when it is selected by the user (typically by a mouse click or tab key press) and is ready to be activated.
• this is used to apply styling to the element with current focus in the document (in recognition of the user selection).
• styling is removed when the focus shifts
• especially useful with lengthy forms to identify progress
• only relates to that which can receive keyboard input or be somehow activated

Question 15

“rollover” effect

Answer 15

• typically, rollover will highlight the selected element by changing it to become more prominent
• it can change its content color, background color, etc.
• For slower connections,The rollover style may simply use a portion of the previous focus style

Question 16

:hover

Answer 16

• this pseudo-class relates to almost any element
• the :focus pseudo-class only relates to elements that can receive input

Question 17

Rollover effect can be used with almost any element to create:

Answer 17

With almost any element, can be used to create push buttons for:
* links
* scripting
* form submission

Question 18

visibility vs. presence

Answer 18

• visibility: hidden;
  (element is hidden, present)
• visibility: visible;
  (element is revealed, present)
• display: none;
  (element is removed)

Question 19

border-radius

Answer 19

• rounds the corners of boxes
• acts a shorthand property- specifies four values:
  1. border-top-left
  2. border-top-right
  3. border-bottom-right
  4. border-bottom-left

Question 20

radius size

Answer 20

• specifies the radius size as a distance from the corner point in both horizontal and vertical directions
• Individual corners may be rounded by specifying a radius size to one of these instead:
  1. border-top-left
  2. border-top-right
  3. border-bottom-right
  4. border-bottom-left
• zero value: no radius produced
• individual corners may also be curved by specifying two values:
  1. the first value specifies the horizontal x radius
  2. the second value specifies the vertical y radius
• (circles can be created by setting the border-radius to exactly half the size of a square content box)