HTML5 jumpstart Study Notes 2: CSS selectors and style Properties

Module agenda (module list)

Selectors

Combinators

Color Properties

Text Properties

Box Properties

 

1. selectors

Type selectors

. Class selectors

# ID selecors

[Attribute] selectors

Eg:

[Data-author = Psmith] {color: red;} [data-author $ = 'Smith '] {color: red;}/* The data-author attribute ends with Smith */

: Pseudo-class and: pseudo-element selectors

Eg:

/*: I don't quite understand the difference with:. I also hope someone can give me some advice */P: first-line {color: red;} p: hover {color: red ;} li: Nth-child (2n + 3) {color: red;}/* 3rd, 5, 7... red. Note that it starts from 1, not from 0 */

The universal Selector

 

2. combinators

Descendant Combinator (descendant selector) eg: # div1 Div {color: red ;}

Child> Combinator (sub-Selector) eg: # div> P {color: red ;}

Note: The difference between the descendant selector and the Child selector: The child element and the child element are child elements only.

General ~ Sibling (sibling selector) eg: ul ~ Div {color: red ;}

Adjacent + sibling (adjacent selector) eg: Li + Li {color: red;}/* this way, you can select all Li under ul if you cannot locate ul */

 

3. color properties

Color

Named color eg: P {color: goldenred ;}

Hex (#) eg: P {color: # 0000ff ;}

RGB ()/rgba () eg: P {color: RGB (0,255, 0);} p {color: rgba (0,255, 0, 0.5 );} /* A is transparency */

HSL ()/HSLA eg: P {color: HSL (90% %,);}/* H: hue, tone, S: Saturation saturation L: Lum brightness */

Opacity

 

4. basic text Properties

Text-Decoration: overline | underline | Line-through

Text-transform: None | lowercase | uppercase | capitalize

Text-shadow (I. e., 2px 2px gray)

/* The value of the text-shadow attribute can have multiple */table {text-Shadow:-4px-4px 4px red; 0 0 10px blue; font-size: 24pt ;}

The effect is as follows:

Font Properties

Font-style: normal | italic (italic) | oblique

Font-varant: normal | small-caps

Font-weight: normal | bold | bolder | light | lighter | #

Font-size: {length}

Line-Height: {length}

Font-family: {font}

Font shorthand Property)

@ Font-FACE: defines a font to be used elsewhere in your CSS

Eg:

/*CSS snippet*/@font-face{    font-family:"niftyfont";    src:url("/type/nifty_n.woff") format(woff)}.nifty{    font-family:niftyfont}

 

5. Border, margin and padding

Eg: # lorem {border: 2px solid black ;}

Sizing

Width

Height

Min/MAX perfixes

Box-sizing (content-box | border-box) specifies whether the box size is calculated by content or by border.

Visibility

Display (Inline | block | inline-block | none | ...)

Visibility (visible | hidden)

The difference between display: none and visibility: hidden: when visibility is set to "hidden", although the element is hidden, it still occupies its original location.

White-space (normal | pre | nowarp | pre-wrap | pre-line)

Overflow (visible | hidden | scroll | auto)

Box-shadow and border-radius

Box-shadow (I. e., 10px, 10px, 5px #888888)

Border-radius (I. e., 5px)

Gradients (gradient)

/*linear gradient*/background-image:linear-gradient(to right,black 0%,white 100%)/*radial gradient*/background-image:radial-gradient(circle at 50% 50%,black 0%,white 100%)