1.css stylesheet, respectively:
Inline Style Sheets
<! DOCTYPE HTML> <HTML lang = " EN " > <head> <Meta charset = " UTF-. 8 " > <Meta name = " the viewport " Content = " width = Device-width, Initial-Scale = 1.0 " > < HTTP-equiv = Meta " X--the UA-Compatible " Content = " IE = Edge " > <title> the Document </ title> <style> // this is the inline style sheet <style> </ style> there can be written css style </ style> </ head> <body> <div style = "This is the style sheets"> </ div> </ body> </ HTML>
External style sheet
<link rel = "stylesheet" type = "text / css" href = " path" />
external style sheet is a newly created special css file to go through the path links
2.css selectors
{Selector properties: Property Value; properties: Property Value;}
Example:
div {width: 200px; height: 100px; background: Red;}
Each CSS style consists of two parts, i.e. selectors and declaration that it is divided into attributes and attribute values
attribute must be placed in braces, attributes and attribute values are connected by a colon.
Each statement ends with a semicolon.
When a plurality of attribute values of attributes, attribute values and attribute values are separated by a space.
In the course of writing style, space, line feed does not affect the properties of the display.
3.css selectors
Element selectors can also be called Type Selector:
Example:
<div> <header> <NAV> <footer> <Figure> ...
Tsuhaifu
Example:
* (Select all numbers)
id selectors:
Example:
<div id = "This is the id is written in the tag selector inside"> </ div> (id = "
inside can easily write such a / b / s / xdv / sv / write and the like but must in double quotes which can
")
class selectors:
Example:
<Div class = "this is a class selector with the id selector is the same must be written in double quotes"> </ div>
Group Selector:
Example:
div, .hehe, p, #top {background: red;} at the same time a plurality of selectors is provided with a selected pattern and separated by a comma symbol selector
Descendant selectors:
Example:
#nav ul li {background:red;}
To select a narrow space between the partition selectors and selector element
Pseudo class selectors:
Example:
a: link {properties:;} initialization state
a: visited {properties:;} state is clicked
a: hover {properties:;} state when the mouse over time
a: active {properties:;} when pressed state when the mouse
Pseudo-class selectors only to a particular label used with href attribute and only under special conditions will have effect
4. Select precedence
Selectors priorities, that option symbol of the heavy processing preference when selecting from conflict for the same element or same group of elements. Right inline style weight 1,000 weight selectors id weight 0,100 weight selectors class weight of 0010 pseudo-class option breaks weight of 0010 elements option character has a weight of 0001 weight inheritance pattern has a weight of 0000 offspring option breaks weight: for future generations right in the selector and
The attributes of the text
Text size and units
Text size (to set the font size is usually page font 12px or 14px) font - size: 12px; units (typically in pixels) PX pixel pt point em times from 3PT = 4px em is according to their font size to determine how much the pixel element the default size is 16px 1em = 16px
Text property
-style font: Normal / Italic [the text italic] font -weight: Normal ( 100 - 500 ) / Bold ( 600 - 900 ) [set to bold text] font - Family: "Text 1", "Text 2 "; [text type] text -align: left / Center / right / the justify [text horizontal alignment] vertical -align: Top / Middle / bottom [vertical alignment] line - height: digital PX; [text disposed in a row in height] provided shorthand text font: bold italic text size high / OK "Font";
Color of the text
Color attribute hexadecimal value # f00 # fa0000 red color modes: color mode light R & lt B G the FF 00 00
Of course, this may also be used in addition to a number of words corresponding to the
Text-decoration
TEXT- Decoration text decoration none: no modification underline: underline overline: Add a dash Line - through: strikethrough text -indent first line indent
6. Background settings
Background color background - Color: # F00; background image background - Image: URL (image path); background image tile properties background - REPEAT: REPEAT default tile REPEAT - X tile horizontally REPEAT - Y Tile Vertically NO - REPEAT uneven Shop background position background - position: a value (level) value of 2 (vertical) left / Center / right / Numerical top / center / bottom / numerical value can be set negative background abbreviations: background: color image tile whether the path location; small extended common image format JPG (lossy image visually indistinguishable mass but to reduce the image size of the image using a non-null hug); PNG (lossy image quality, but can not be seen visually reduced size image using an empty picture format hug) GIF (image are easily visually serious common detrimental to FIG movable do)
7. Floating properties
float : none default does not float left left Floating right floating right
8. A list of the relevant unique Zodiac li
style--List type [Symbol Set List] Disc (closed circles) / Circle (open circles) / square (solid squares) / none (symbol listing removed); List -style- Image: URL (the path); [custom image symbol list] list the -style-position: outside (default outside) / inside (inside); [symbol defined location] list the -style: none; remove lists symbol