1. The introduction of an external style sheet format:
<link rel=”stylesheet” type=”text/css” href=”../css/style1.css”>
2. Stylesheet first line should specify the encoding type:
@charset “utf-8”;
3.css syntax:
① a plurality of element attributes separated by semicolons, commas separated by a plurality of elements;
② element attribute value is generally not quoted, but when the value is the number of words, it is necessary to increase the value quoted;
③ Note: / * `` * / (shortcut key is ctr +?);
④ Priority: Inline style> internal style> External style; but important priority is to force the action;!
4.css selector: inline style priority> id selector priority> class selector priority> element selector priority
① common selector:
② attribute selectors:
⑴ selected having the style attribute and value input element:
⑵ selecting a value attribute and attribute value is equal to VIP INPUT element:
⑶ selected range value attribute property values are a plurality , and wherein a value equal to the vip the input element:
⑷ selecting a lang attribute and attribute value begins en and with a '-' separated p elements:
And selecting a value attribute ⑸ beginning vip attribute value input elements:
⑹ selecting a value attribute and ending vip attribute value input elements:
⑺ selecting a value attribute and attribute value vip comprising input elements:
③ Relationship selector:
⑴ descendant selectors (selectors included):
⑵ child element selector: Compared with the descendant selector, as an element of an element can only select sub-elements, narrow the choices.
⑶ adjacent selectors: selecting ** close element after element.
⑷ sibling selector: All siblings after the element of choice **.
④ pseudo-element selectors:
⑴E: first-letter / e :: first-letter: setting the first character of the pattern elements e.
⑵E: first-line / e :: first-line: a first inline style elements e.
⑶E: before / e :: before: Inserts before each element e. And content property to be used together.
⑷E: after / e :: after: Inserts after each element e. And content property to be used together.
⑸E: selection / e :: selection: color when the object is selected settings.
⑤ pseudo class selector:
E: first-child: selecting a first child of the parent element e.
: Root: select the root element of the document.
E: last-child: the last child element e.
E: only-child: only one child element e.
E: only-of - type: only one type of child elements.
E: nth-child (n): parent element matching n th element of e.
E: nth-last-child (n): the reciprocal of the parent element matching n th element of e.
E: first-of - type: Match the same type of the first sibling sibling e.
E: last-of - type: match the last sibling sibling with type e.
E: nth-of-type (n): the n-type matching with the sibling siblings e.
E: nth-last-of-type (n): penultimate match with the n-type sibling siblings e.
E: empty: no matching element or any child elements.
⑥UI pseudo class selector:
E: active: add style (when clicked) to be activated elements.
E: hover: when hovered over the elements, adding elements to the style.
E: link: if the link has not been accessed add style.
E: visited: add style to a link has been visited.
⑦ other selectors:
E: focus: add style to the element has the keyboard focus.
E: lang (en): to add style lang attribute with the specified elements.
#E: target: Select the anchor element is currently active.
: Not (E): Each element selection element other than e.
Input: checked: select each selected input element.
Input: disabled: Select each input element is disabled.
Input: enabled: select each input element is enabled.
5.css3 said color ways:
⑴ color name, Hex, RGB mode;
⑵RGBA manner: Added alpha parameter from 0.0 (fully transparent) to between 1.0 (fully opaque);
⑶HSL manner: represent the hue, saturation, brightness.
H tone: red value interval represents 0-360,0 or 360, 120 for green, and blue represents 240;
Saturation S: value of 0.0% -100.0%;
Brightness L: value of 0.0% -100.0%;
⑷HSLA manner: Added alpha parameter from 0.0 (fully transparent) to between 1.0 (fully opaque);
6.css3 text and fonts:
Size-①Font : size.
⑴ usually px, percentages, em set size;
⑵xx-small, x-small, small, medium, large, x-large, xx-large set of different sizes, the default value Medium;
⑶smaller set to be smaller than the size of the parent element;
⑷larger set to be larger than the size of the parent element;
The Variant-②Font : Specifies whether to display text in small caps font.
⑴Normal default browser will display a standard font;
⑵Small-caps browser displays a small caps font;
Style-③Font : style.
⑴Normal default value to display a standard font;
⑵Italic display a italic style;
⑶Oblique display a italic style;
Weight-④Font : thickness.
⑴Normal defaults;
⑵Bold bold;
⑶Bolder bold thicker, lighter finer font;
⑷100-900: from coarse to fine is defined in the font. 400 is equivalent to the normal, 700 is equivalent to bold;
Family-⑤Font : font family (Arial, italics, boldface) .
⑥Font : set all font attributes in a statement.
⑴ at least specify the font size and font size series family;
⑵ default order may be set: font-style / font-variant / font-weight / font-size / font-family;
@ Font-face ⑦ : embedded fonts.
With the word net: https://www.webfont.com/vipcsslist/index
7.css3 text attributes :
①Color : Color .
Align = left-②Text : text horizontal alignment.
⑴Left default value, right, both ends of the center, justify alignment;
⑵ new start is equivalent to left, end equivalent right;
Height-③Line : row height.
Normal, numbers, percentages, px, em;
Indent-④Text : first-line indent.
Common units of pixels, percentages, EM;
Decoration-⑤Text : Adding modifications.
⑴None defaults;
⑵Underline underlined;
⑶Overline plus dash;
⑷Line-through added through line text;
⑸Blink plus flashing text;
Spacing-⑥Letter / Word-spacing : character spacing.
The Transform-⑦Text : case.
⑴None defaults;
⑵Uppercase converted to uppercase;
⑶Lowercase to lowercase;
⑷Capitalize conversion titlecase;
⑧Text-shadow to add shadows.
