H5 Way of--CSS Basic grammar

First, CSS common selector

"Naming rules for selectors"
* 1, can only have alphanumeric underline composition, cannot have any other characters
* 2, cannot start with a number

"Universal Selector"
* 1, wording:*{}
* 2. Select all the tabs in the page
* 3, Priority: lower than all selectors

* {            background-color: Gray;        }

"Tag Selector"

* 1, notation:HTML tag name {style attribute: style attribute value; ...}
* 2, Function: Select all the corresponding labels on the page

Li {            color:red;        }

"Class selector"

* 1, the wording:. Select its name {}
* Call: Use class= "selector name" to invoke the corresponding selector on the label that needs to change the style
* 2, Function: Modify the label of all call selectors
* 3, priority is higher than the tag Selector

. Li {            color: blue;        }

"ID Picker"

* 1, the wording:#选择器名称
* Call: Use id= "selector name" to invoke the corresponding selector on the label that needs to change the style
* 2, Note: ID is unique, the same page, can only open an ID.
* 3, Priority: ID is greater than class selector

#li {             color: yellow;         }

Descendant Selector

* 1, wording: selector 1 selector 2 Selector 3 ... {}
* For example: Div. li{} to be satisfied, the div inside the class= "li" element, class= "Li" element can be div
* Descendants and Descendants

Div. UL {             color: green;         }

Descendant Selector

* 1, wording: selector 1> selector 2> Selector 3 ... {}
* For example: div>ul{}, UL must be a direct descendant of the Div, after the Sun's choice

Div>ul {             color: green;         }

The intersection selector

* 1, wording: selector 1 Selector 2 ... {}
* For example: the. li#li{} element must have both class= "Li" and id= "Li" to take effect

. Li#li {              color: red;          }

"Set selector"

* 1, the wording: selector 1, selector 2, ... {}
* For example:. Li, #li {} element can take effect as long as it has class= "Li" or id= "Li"

. Li, #li {               color: brown;           }

Pseudo class Selector

* 1, wording: selector Name: Pseudo-class State {}
* Common Pseudo-class state: Link is not in Access state, visited is visited
* Hover the state when the mouse is pointing, active activates the selected state (that is, the mouse point is not released), when focus is focused (input is used)
* 2, hyperlink multiple pseudo-class coexistence of the Order: link (visited)-hover-active

 a:visited  { color :  green ; } a:link  { color :  black ; } a:hover  { color : 
   
     red ; }
     a:active  {
     color : 
    
      yellow ; }
      Input:focus  {
      color : 
      orange ; }
    
   

"Selector priority" (learn)
* 1, near priority, the most inner selector is always preferable to the outer layer,
* For example Div ul li >div #ul, Li in the UL inner layer, so Li tag Selector, can overwrite the outer ID selector
* 2, when acting on the same level, ID > class > tag Selector
* For example: div #li > Div. li >div Li as long as the last selector is used on Li, then whichever
* How many layer selectors are nested, there is no near or far relationship.
* 3, as used for the same layer, and the last layer selector for the same selector
* For example: Div ul. Li >div. Li Range selected for more precise, higher priority
* 4, when the priority is exactly the same, the selector written in the back will overwrite the previous selector

Ii. three ways to apply CSS

"1, inline style sheet"
① CSS style and HTML code completely mixed together, does not conform to the content and performance separation norms, not conducive to post-maintenance
② has the highest priority, but it is not recommended

"2, internal style sheet"
① a certain degree of separation of CSS styles from HTML code, but not completely enough to implement style reuse.
② priority lower than inline style sheet

<style type= "Text/css" ></style>

"3, external style sheet"

① implements a complete separation of CSS and HTML code. Convenient style reuse and post-maintenance, in line with the specifications
② priority lower than internal style sheet
③ Follow-up development, recommend the use of this method

<link rel= "stylesheet" type= "Text/css" href= ". /css/02_css.css "/

Rel: Declares the relationship of the linked document to the current document, required
Type: Types of documents to be connected, optional
HREF: The address of the connected document, required

"4, extended reading" Another way to import an external style sheet

<style> @import url ("Global.css"); </style>

The difference from link

①link can be connected to various forms of file, import only imports CSS
②link tags are standard HTML tags, and import is not
③link is connected in a way that is equivalent to a bridge in HTML and CSS files, and import uses imported methods
The code for the CSS file is imported into the HTML document when the document is loaded
④link links the CSS file while the page is loading, and import imports the CSS file when the document is fully loaded
In conclusion, the use of link

Third, CSS common text properties

"color units"
1, direct write color in English name: Red, Green, Blue
2, hexadecimal notation: #ffffff # FFF respectively corresponds to the proportion of red and green blue; (most commonly)
3, RGB notation: rgb (0~255,0~255,0~255)
RGBA (0~255,0~255,0~255,0~1) fourth digits for transparency, 0 full transparent, 1 opaque

"Common text properties"
1, font, size :
font-weight : Font weight, optional attribute value: Bold Bold Lighter 100~900 value (400 normal, bold)
font-size : Font size **px **% (percentage of browser default font size, most default 16px)
font-family : Font family, set the font.
>>> Multiple font styles are used, delimited, browser parsing, parsing from left to right, selecting available fonts
>>> using specific font names in front of you, and the last one using the font race name
(Common font family name: Liner body Serif non-liner body sans-serif (common) and other wide body monospace)
>>> For example: Font-family:arial, "Microsoft Jas Black", Sans-serif;
font-style : Font style, normal, italic italic
* Font-variant:small-caps; convert letters to Small caps font

(learn) font abbreviations: font-style font-variant font-weight font-size/line-height font-family

>>> Usage Precautions :

① order must be in strict accordance with the above order
② Multiple styles withspace-delimited, and font-size/line-height must be used as a pair, with/separated
③font-size and font-family must specify, the other default if not specified
>>> Example: font:italic bold 75%/1.8 ' Microsoft Yahei ', Sans-serif;
Italic bold font/line height font family (Microsoft Ya-Black, non-liner font family)
2. Font Color：
Color: Font Color
Opacity: The number between transparency, 0~1. Controls and child controls are transparent, andwhen you adjust with RGBA, only the control is transparent，
SubSpace transparency does not change.
3. Line spacing, alignment, etc.：
Line-height: Row height ① pixels unit 48px② A multiple of normal line height without px ③ percent with ②
>>>A typical application that adjusts the way text is centered vertically in space: The line-height of the height= space of the control
Text-align: Horizontal alignment of text in block-level elements left center right
letter-spacing: Character spacing, spacing between words pixel unit 5px
Text-decoration: Text decoration underline underline strikethrough Line-through underline overline

Overflow: Controls how text is displayed out of range (Auto Auto scroll always show scroll bars hidden out of range text Hide overflow-x,overflow-y set horizontal vertical direction respectively)
Text-overflow: Sets the way text is displayed out of range text-overflow:ellipsis; ellipsis shows clip cut off
>>> "Focus" lets the extra text in each line display an ellipsis, step as follows:
①white-space:nowrap, if it is Chinese, you need to set the line at the end of the line
②text-overflow:ellipsis; Set extra text ellipsis display
③overflow:hidden; setting controls out of range hiding

Text-shadow: Text shadow four attribute values:
① horizontal shadow distance required, the greater the value, the shadow right shift
② vertical Shadow distance required, the greater the value, the shadow moves down
③ shadow blur distance selectable, the larger the value, the more blurred the shadow, the default is 0, not blurred
④ shadow color optional, default to Black

Text-indent: First line indent, adjustable indent size with pixel values available
White-space:nowrap; Chinese line at the end of the continuous display
Word-break: Set the line at the end of English lines, the browser by default in the space line, when a word length out of range, will continue to display,break-all allow word wrap
* text-stroke:-webkit-text-stroke:0.2px #ffffff; stroke color, thickness

Third, CSS common background properties:

"CSS Common background Properties"
background(abbreviated form)
Background-color: Background color,
Background-image: Background map, Background-image:url (image relative address); Background map overrides background color
background-repeat: Background image repeating mode, no-repeat uneven, repeat tile, repeat-x horizontal tile, repeat-y vertical tile
background-size: The size of the background map.
"Specify width, height"
>>> width: The first attribute value is width, the second property value is height,
Can: ① direct write pixel ② write percentage (percentage of parent container height)
>>> When there is only one property value, the default is width, height, etc. than scaling
when there are two attribute values, the display is stretched/compressed according to the specified width height
"Other property values"
>>>containThe picture is scaled to one side of the width or height equal to the height of the parent container, and the other side is scaled by the size of the picture.
(May spare parts area)
>>>cover: Picture equal to zoom, so that the background map completely covers the background area (may cause some areas of the background map can not be displayed)
background-position: Position coordinates, offset
>>> Specify location: Left/center/right top/center/bottom, when writing only one, the other default is centered
>>> Fill in coordinates: Vertical position of horizontal position (pixels or percent),
① When writing only one, the default is horizontal, vertically centered
② when working with pixels: the distance from the upper-left corner of the picture moving in all directions
Horizontal: Positive right shift negative left (left negative right)
Vertical direction: Positive Move down, negative number up (negative positive)
③ When you use percentages, you can only be integers. The remaining blank part after the picture is removed is 1
for example background-position:50%; the remaining area 3:7, i.e. left 3 right 7, after the picture is removed horizontally
* Background-origin: Sets how the background map is positioned. Border-box starting from the outer edge of the border, Padding-box from the border
* Inner edge Start, Content-box, starting from content
* Background-origin does not change the size of the background map display area, only the upper left corner of the positioning position
* Background-clip: Crop background and back color display area. Border-box is displayed from the edge of the border,
* Padding-box from the inner edge of the border, Content-box, start from the text content, not
* The background color in the display area will be cropped and not displayed.
* Background-clip does not change the positioning position, just by trimming the display part of the area.
List-style:none to remove points from an unordered list

4. CSS Box model

"Margin abbreviation form"

* 1, write a value: the upper and lower left and right four directions are specified values

* 2, write two values: The first number represents a margin, the second number represents a horizontal margin

* 3, write three values: Top, right, bottom, left default equals right
* 4, write four values: Top, right, bottom, left four directions
* 5, margin:0 auto; block-level box, centered horizontally in parent container (very common)
"Padding inner border"
* 1, the padding is the inner margin, will make the entire visible area of the box model become larger, the use should pay attention to the box model
* The size of the actual display interval
* 2, other use of the same margin

"Border Border"

* 1, three attribute values: width, style, color, in principle no less, order arbitrary
* 2, can be modified by top, right, bottom, left respectively four directions

"Border-radius fillet"
* 1, you can accept 8 attribute values: X-axis (upper-left upper-right lower-left bottom)/y axis (upper right upper right lower left)
* For example: border-radius:50px 50px 50px 50px/50px 50px 50px 50px
* 2, write only x axis, Y axis default equals x axis. Writes only the upper-left corner, and defaults to the lower-right corner. Write only the upper right corner, default is equal to the lower left corner
* For example: border-radius:50px 0px;
* =border-radius:50px 0px 50px 0px;
* =border-radius:50px 0px 50 px 0px/50px 0px 50px 0px
* 3, write only one number, the default of 8 values are equal.

"Box-shadow Box Shadow"
* Six attribute values, space split:
* X-axis Shadow Distance: (required) can be negative, positive--right shift, negative--left shift
* Y-axis shadow Distance: (required) can be negative, positive--Move down, negative--Move up
* Shadow Blur Radius: (optional) can only be positive, default is 0, the larger the number the more blurred
* Shadow expansion Radius: (optional) can be negative, default is 0, the value increases, the shadow expands
* Shadow color: (optional) default to Black
* Inside and Outside Shadows: (optional) selectable values: inset (inner shadow), default outset (outer shadow)
"Border-image picture Border"
* 10 Properties:
*① picture path: URL ()
*② Picture Slice width: 4 values, respectively, represents the upper right lower left four tangents, after cutting, the picture will be divided into nine Gongge, Four Corners respectively
* Four corners of the corresponding border (no stretching), four sides of each side of the border
* Cannot take pixel units px
*③ width of picture border: 4 values, respectively, on top right lower left, can be omitted, default to slice width
* Must be with pixel units
*④ Border Background Repeat mode: three attribute values stretch (extrude), round (paved), repeat (tiled)
"The difference between a paved and a peaceful shop"
* 1, full: The width of the four edges are properly stretched or compressed, to ensure that the exact display
* Tiling: Will keep the width of the original four edges, tiled, may cause the corner can not display a complete icon
* 2, attribute value writing: Border-image:①②/③px④;
* The third part can be omitted, default equals two
* The second part can only write 1, 2, 3, the way of judging with margin

H5 Way of--CSS Basic grammar