CSS Basic syntax

CSS Common selector
1, the page, all the CSS code, need to write to the <style></style> tag. The Type property of the style label should be selected Text/css
2. CSS annotations
The CSS modifies all the labels on the page and must be selected with the help of a selector.
Selector, you can write many pairs of CSS properties, wrapped with {}:
Between each property name and the attribute value: delimited, multiple-to-attribute, must be used;
3, "CSS common selector"
① Tag Selector
Syntax: HTML tag name {}
Role: You can select all HTML tags that have the same name as the selector in the page.
② class Selector
Syntax:. Class Name {}
Call: Use class= "class name" to invoke selector on a label that needs to invoke a selector style
Priority: > Tag Selector
③id Selector
notation: #ID名 {}
Call: A tag that needs to call a style, starting with a id= "ID name"
Priority: ID Selector >class Selector
Note: The same ID cannot appear on a page
"The difference between the class selector and the ID selector"
Different wording: class selector. Declaration, ID Selector # declaration;
Different priority: ID selector >class Selector
Different scopes: The class selector can be called multiple times, and the ID selector is used only once.
"Naming conventions for selectors"
Can only have letters, numbers, underscores, minus the composition;
The beginning cannot be a number. It can't be just a minus sign.
In general, naming requires semantics, using English words and numbers.
④ Universal Selector
notation: *{}
Function: You can select all the HTML tags in the page.
Priority: Lowest!!!
⑤ and set Selector
notation: selector 1, selector 2,......, selector n{}
Effective rules: Multiple selectors take the set, as long as the label satisfies any one of the selectors, the style can take effect.
⑥ intersection Selector
Wording: Selector 1 selector 2 ... Selector n{} All selectors are next to each other, no separation
Effective rule: Multiple selectors intersect, you must meet the requirements of all selectors in order to take effect
⑦ descendant Selector
Wording: Selector 1 selector 2 ... Selector n{} selectors space-delimited
Effective rule: As long as satisfied, the latter selector is the descendant of the previous selector, can be effective. (descendants include descendants, grandchildren, great-grandchild ...) ）
Popular speaking: As long as the latter a selector, in the previous selector can be.
⑧ descendant Selector
notation: selector 1> selector 2>......> selector n{} selector with > delimited
Effective rule: must be satisfied, the latter selector is a direct descendant of the previous selector, in order to take effect. (No labels can be spaced in the middle)
If you need two class names, separate them with a space
import method and Priority
1, "Priority of the weight problem"
The first principle that CSS takes effect is "near priority"! That is, which selector acts on the innermost label, the selector takes effect;
When the selector is acting on the same layer, it can be calculated according to the priority weight:
ID selector *100 > class selector *10 > tag Selector * *
Note: The set selector is equivalent to multiple selectors being disassembled, so the precedence of the set selector cannot be accumulated.
When the selector acts on the same layer and the priority weights are equal. Then, write in the last selector to take effect.
2. "Three ways of Introducing CSS"
① Inline style sheet: directly in the HTML tag, using style= "" to refer to;
<div style= "height:100px;" ></div>
Advantages: Flexible use, highest priority weight?
Disadvantage: does not conform to the "Content and performance separation" requirements, not conducive to style reuse;
② internal style sheet: in the Features: A certain degree of implementation of the HTML and CSS separation, but the separation is not thorough enough, there is no way to multi-page common style.
③ external style sheet: writes CSS separately to the CSS file and is associated with the HTML file.
Advantages: Completely realize the separation of HTML and CSS, in line with the specifications of the web, in favor of multi-page reuse unified style;
[Two ways to import CSS files]
A, in the <link rel= "stylesheet" type= "Text/css"
href= "Css/02-css.css"/>
b, in the <style> tab, use @import to import:
@import url ("Css/02-css.css");
[The difference between the two ways of importing]
①link belongs to the standard HTML tag, while @import is not a standard label;
②link can be compatible with all low-version browsers, while @import is only available after CSS2;
③link is a bridge that links two files, while @import is the equivalent of copying CSS files to an HTML file;
④link will be in the process of loading HTML files, side link CSS file;
@import will import the CSS file after all the HTML files have been loaded;
In summary, we use link links to load CSS files.
CSS Common Text properties
1. Color representation in CSS
① A word that uses color directly: red, green, blue
The ② uses the hexadecimal number of the color to denote: #ff0000 #f00
Six-digit, 22-grouping, respectively, indicating the ratio of red, green and blue;
③rgb (0~255,0~255,0~255); Three digits, respectively, representing the ratio of red, green and blue
Rgba (); The fourth digit, which indicates transparency.
2, "CSS Common text Properties"
A, font, font size class:
①font-weight: Font weight. bold-Bold, normal-Normal, lighter-fine body
You can also use a 100-900 value, 400 means that normal,700 represents bold
②font-style: Font style. italic-tilt, normal-normal
③font-size: Font size. Can write PX units, can also write%
200% = twice times the default size of the browser (16px) =32px
④font-family: Font family (font family).
---can write the font name directly or write the system column name.
---commonly used font series: serif-liner body sans-serif-non-liner body;
---font-family can receive multiple values, separated by commas. The first one is preferred, and if there is no font, use it backwards. Typically, the last value puts the font family name;
eg:font-family: "Blackbody", "Microsoft Jas Black", Sans-serif;
⑤font abbreviated form:
The---order must be:
---font-weight font-style font-size/line-height font-family
---between different attributes, separated by a space;
---font-size/line-height must be a group, used/separated;
---font-family between multiple fonts, separated by commas
---eg:font:bold italic 32px/50px "Microsoft Jas Black", serif;
3. Font Color
①color: Font color can make words, 16, RGB, etc.
②opacity: Transparency, selectable value 0-1
[The difference between opacity and RGBA]
---RGBA itself can be set to color, and opacity must match other color attributes to use;
---Rgba is just a transparent color for the current element setting;
---and opacity, it makes all the text, background, and child elements in the current element transparent;
4. Line spacing, alignment, other classes
①line-height: Row height. Can write PX units, can write numbers directly (indicating a number of times the default line spacing), can write% (indicates the percentage of default leading)
Row high Important: Make single-line text centered vertically in Div
Set the height of the line higher than the div so that the single line of text is centered vertically.
②text-align: Sets the horizontal alignment of row-level elements within a range left/center/right
③letter-spacing: Character spacing, distance between words and words
④text-decoration: Text retouching;
underline-underline, overline-underline, line-through-strikethrough, none
⑤overflow: Sets how the text is displayed beyond the region.
---overflow:hidden; Text hiding beyond the area is not displayed;
---overflow:scroll; Horizontal vertical scroll bar, no matter how much text is displayed
---overflow:auto; Automatic. Text displays more scroll bars, less text, and does not display scroll bars.
---can use overflow-x and overflow-y to modify scroll bars in two directions individually
OVERFLOW-Y: scroll; Overflow-x: Hidden;
⑥text-overflow: Set the display mode of extra text at the end of line;
---clip-extra text cut out ellipsis-extra text ellipsis display
---display ellipsis, need to cooperate with white-space:nowrap;
---"Focus" set the end of the line display ellipsis (three lines of code, indispensable)
Overflow:hidden;
White-space:nowrap;
Text-overflow:ellipsis;
⑦white-space:nowrap; Set the end of the Chinese line, keep the line displayed
⑧text-indent: First line indent.
⑨-WEBKIT-TEXT-STROKE:0.5PX Blue; Text strokes.
-webkit-indicates that only the WebKit kernel browser is in effect, common with chrome, safari
⑩text-shadow: Text Shadow, there are four attribute values, space-delimited;
---horizontal shadow distance, positive number means shadow right shift, negative shift left;
---The vertical shadow distance, a positive number indicates that the shadow moves down and the negative number moves up;
----shadow blur distance, 0 means the shadow is not blurred;
---The color of the shadow;
---eg:text-shadow:20px-10px 2px blue;

"CSS Common background Properties"
1, Background-color: Background color
2, Background-image: Background map. Use the URL ("") to select the background picture. Background and background colors are both present, and backgrounds are overlaid with the back color.
3. Background-repeat: The repeating mode of the background map.
no-repeat-uneven, repeat-tile, repeat-x-x-axis tiling, repeat-y-y-axis tiling
4, Background-size: The size of the background map
[Specify width height]
---width height designation, can write PX, can also write% (percentage of parent container width high)
---when writing two attributes, respectively, the width, height;
When writing an attribute, the width is expressed, and the height will be equal to the zoom;
[Other property values]
----contain: The picture is scaled until it is scaled to 100% on the larger side of the wide or high school. (may lead to shorter side <100%, picture cannot cover all areas)
---Cover: The picture is scaled until it is scaled to 100% on the smaller side of the wide or high school. (may result in larger side >100%, picture out of range display not complete)
5, Background-position: Background image offset
---specified location: left/center/right top/center/bottom
When only one value is written, the other is centered by default.
---specified coordinates: Two properties: vertical displacement of horizontal displacement
The value of the ① coordinate, which can be PX units or percentages
② when writing px units:
Horizontal: Positive right shift negative shift left, vertical direction: Positive shift negative move up;
(left negative right positive upper negative positive)
③ When writing% percentages:
Generally only a positive number. Indicates that the width of the image is removed, and the remaining white space is distributed proportionally. eg:background-position:30%; The width of the picture is removed horizontally and the remaining area is 3:7 points.
6, List-style: Modify the list of small black spots of the style;
None remove small black spots;
7, URL (): You can use the URL to import a small picture, as the identification symbol of the list
List-style:none;
8, float: floating, you can achieve the block-level elements, displayed in a row.
[pseudo class selector]
1, the wording: pseudo-class selector, after the selector, with: separated, immediately pseudo-class state;
Eg:. a:link
2, the Pseudo-class status of hyperlinks:
: Link-No access status: visited-access status
: hover-Mouse Pointing state: Active-Activates selected state (mouse point is not loose)
Note: When multiple pseudo-class states of hyperlinks exist at the same time, they must follow the order of link-visited-hover-active, otherwise the partial selectors will not take effect;
3, the Pseudo-class state of input:
: Hover:focus-Get focus Status: Active
Note that when multiple states of input exist simultaneously, they must be in the order above;
4, other tags, basic only: hover event
"margin margin:"
1. Write only one value: indicates that the outer margin around is the specified value;
2, write two values: The first number is the upper and lower margin the second number is left and right margin;
3, write three values: the upper, right, and next three directions, left default equals to the right;
4, write four values: the upper, right, bottom, left four clockwise direction;
5, margin:0 Auto; Set block-level elements to center horizontally in the parent container!!!
"Padding internal margin:"
Set up in exactly the same way as margin;
Note: Setting the padding will cause the div area to be big!!! Use must pay attention to the actual width of the DIV is how much!!!!!
Border
1. Set border requires three properties: Width style color
In principle, three attributes are indispensable, the order can be arbitrarily modified;
2, you can use top, right, bottom, left to set four sides respectively

Box Model
1, when the parent box wraps the child box, adds the Margin-top to the child box, the child box and the parent box's top line cannot separate, but causes two boxes to come down simultaneously.
"Solution"
---1, add a little padding-top to the parent box, not recommended, it will cause the parent box structure redundant 1px padding
---2, add 1px to the parent box border-top, the same will lead to 1px of extra space, not recommended to use;
---3, to the parent box or the child box to add floating, may be due to float, to a certain extent affect the layout of the page;
---4, add overflow attribute to parent box, recommend use;
2. [Border-radius fillet]
--1, Border-radius can accept 8 attributes, respectively, said:
X-axis (lower-left upper-right lower-left corner), y-axis (upper-left, upper-right, lower-left corner)
eg:border-radius:10px 20px 30px 40px/10px 20px 30px 40px
--2, abbreviated form
Only the X-axis is written, and the y-axis defaults to the x-axis;
Four corner is not complete, the default diagonal is equal;
Write only one value, default 8 number is equal;
eg:border-radius:50px 20px;
=border-radius:50px 20px/50px 20px;
=border-radius:50px 20px 50px 20px/50px 20px 50px 20px
---3, when the fillet radian >= square side length half, will be displayed as a circle;
3. [Border-image picture Frame]
---1, border-image: A total of 10 attribute values can be placed:
Path to ① Picture: URL ()
② the slice width of the picture: 4 values, representing the top, right, bottom, and left four edges respectively.
With 4 tangent cuts, you can divide the picture into 9 Gongge. 9 Gongge Four Corners corresponding to four corners of the border (no stretching is done), 9 Gongge four edges corresponding to four borders (will be stretched/tiled/duplicated according to Settings)
Note: You must not bring PX units when writing.
③ width of the border: 4 values, representing the width of the top, right, bottom, and left 4 borders respectively;
Note: When writing, the PX unit must be used with/separated from the width of the slice;
④ border:: Stretch (stretched) round (overlay) repeat (repeat)
[The difference between repeat and round]
Round: The four edges are properly stretched and compressed to ensure that four edges can repeat integers;
Repeat: will keep the length of each side of the proportion of the same, may result in four corners, can not display a full edge;
---2, the property value of the notation: Border-image:①②/③px④;
---3, border-image in the WebKit kernel browser, must be prefixed with-webkit-;
"Outline perimeter line"
Displays the border outside, and does not occupy space, and may overwrite the surrounding content.
4. [Box-shadow: Box Shadow]
1/6 attribute values, separated by a space:
①x axis Shadow Distance (required): can be negative, positive-right shift negative-left shift;
②y axis Shadow Distance (required): can be negative, positive-lower negative-move up;
③ shadow Blur radius (optional): Only positive, default is 0, the larger the value, the more blurred the shadow;
④ Shadow expansion radius (optional): Can be negative, default is 0. The value increases, the shadow expands, and the shadow is reduced;
⑤ shadow Color (optional): default is black;
⑥ inside and Outside Shadows (optional): The default is an outer shadow. Inset as inner shadow;
Second, floating
1, the standard flow in the block-level box, the width will automatically extend to 100%;
and the floating block-level box, the width does not extend automatically, but by the content of the open;
2. When a box floats, other boxes that are not floated in the standard flow will occupy the original position of the floating box as if the floating box does not exist. (floating box, will cover above the box)
However, the text content in the non-floating box will be affected by the width of the floating box. (The contents of the non-floating box will not be covered by the floating box)
3, because of the reason of the second article.
You can add the clear property to the affected box to remove the effect of the floating box on itself.
Clear Optional value: left-clear left floating effect, right-clear right floating effect;
both-at the same time clear left and right floating effect, often selected;
4, the parent box does not specify a height. If the child box does not float, the height of the parent box can be opened by the quilt box.
If all the child boxes in the parent box are floating, the parent box height becomes 0;
[Resolve all sub-box floating, parent box height collapse problem]
① to the parent box is also added floating;
② Add overflow property to parent box;
③ at the end of the parent box, add an empty div with a height of 0. Add Clear:both to the Div, and remove the floating effect from the property.
5. [Box Model classification]
---1, standard box (box): We set the width and height, only contains the Content section, and then add padding or border, will cause the box to become larger;
---2, ie box (weird box): We set the width and height, including Content+padding+border, and then add padding or border, will compress the content area, but the total size of the box is unchanged;
[Manually set box type]
Box-sizing:border-box; Weird box;
Box-sizing:content-box; Standard box; default effect.

CSS New properties
First, display properties
You can set the state in which the element is displayed, with optional values:
None: hidden elements;
Block: Displayed as a blocks-level element;
Inline: Displayed as a row-level element;
Inline-block: Displayed as an inline block-level element. itself will be a row-level element, but it has all the attributes of the block-level element. such as width, height, margin, padding, etc...
[Common Inline-block-level labels]
<input/> <textarea></textarea> <td></td>
[How to hide an element]
1, width or height is set to 0px; with Overflow:hidden; Property
2, Display:none; Display Display:block;
3, opacity:0; Set to full transparency. But the space of the elements will occupy;
4, Visibility:hidden; Hides the element, but the space in which the element resides is still occupied. The effect is very similar to that of opacity:0;
Show visibility hidden elements, visibility:visible;

second, "CSS3 new attribute prefix"
1,-webkit-: Chrome/safari browser;
2,-moz-: Firefox browser;
3,-ms-: IE browser;
4.-o-: Opera Open Gate Browser
"CSS Length units"
1, px: indicates pixels. The length is fixed, representing a few pixels of the resolution;
2,%: Indicates the percentage relative to the default value;
3, EM: Length and the size of the element hook. The font size that represents several times.
4. REM: Hooks the font size of the root element. That is, with the [em vs. REM difference]
EM is a font-size hook to the current element itself, and if the current element is not set, the nearest ancestor element font size is searched up until the font size is followed;
REM is independent of the current element font size and is directly linked to the root element font size.
third, "CSS3 Background Properties"
1. Background-clip: Sets the crop display area of the background or back color.
>>> Border-box starting from the edge of the border;
>>> Padding-box starting from the inner edge of the border;
>>> Content-box starting from the text content area;
>>> if the background or background color of the display area is not displayed, it will be cut off.
2, Background-origin: Set the background map from where to start positioning.
>>> Border-box: The upper left corner of the background image starts from the outer edge of the border;
>>> Padding-box: The upper left corner of the background image starts from the inner edge of the border;
>>> Contentbox: The upper left corner of the background image starts from the text content area;
3, Background-origin will not change the size of the display area of the background map, just decide where the upper left corner of the background map starts to locate;
Background-clip is only responsible for cutting out the display area, but does not care where the background map is located;
4. Background-attachment: The attachment mode of the background map;
>>> Scroll: Background graph follows area scrolling. Default effect;
>>> fixed: The background map fills the entire area, and the background map is fixed and does not scroll with the scroll bar;
5. Background abbreviation form: abbreviation order
Background:background-color background-image background-repeat background-atachment background-position;

Transition: Transition attribute, accepts four attribute values
① set that CSS property to participate in the transition; You can specify All/none directly
② How long the transition is completed. usually. 3s. 5s
③ the style effect of the transition. usually choose ease;
The ④ transition is delayed a few seconds before starting. Can omit not to write;
The Transition property can define multiple transitions at the same time, separated by commas.
Eg:transition:width. 5s Ease,height 1.5s ease;

Iv. [Transform defining transformation Properties]
1. Commonly used transformation functions:
>>> translate (10px,10px) translation, the second one does not write by default is 0
General >>> Scale (1.1) (1.1 = multiple) zoom, second not write, default equals first
>>> rotate (90deg) rotation, the default around the z-axis can be used Rotatex (), etc.
>>> skew (20deg,30deg) twisted, horizontal, vertical distortion of how many degrees;
2, transform can implement a variety of transformations at the same time, separated by a space
Eg:transform:skew (20DEG) scale (1.3) translate (100px);
3. Transform-origin: Defines the starting point of the transformation, often used for rotational transformations.
Optional value: Left/center/right bottom/center/top
You can also specify the x and Y coordinate points directly, the first number is the x axis;
Example: Transform:rotate (90DEG);
Transform-origin:right Bottom;
means: Rotate 90 degrees around the lower right corner.

positioning
[relative positioning position](positioning is only used to adjust the upper and lower relationships)
1, use position:relative; set element as relative positioning element;
2, using top, right, bottom, left to adjust the position of the element;
When left and right exist simultaneously, the left takes effect; when top and bottom are present simultaneously, top is in effect;
3. Positioning mechanism
① relative positioning does not release the meta-positioning is relative to its original location. When the top property is not specified, the position of the element does not change;
② the position of the relative pigment in the original document stream. Does not affect the location of other document flow elements;
4. Z-axis overlap of positioning elements:
① positioning elements, the default z-axis is higher than the normal document flow element;
② the same as the positioning element, "later on the habitat." (cover the front of the back)
③ can manually adjust the upper and lower z-axis order of positioning elements using Z-index;
Z-index default is 0, and can only be used for positioning elements;
"Absolute positioning"
1. Use Position:absolute; Set element as absolute position;
2, positioning mechanism:
① is positioned relative to the ancestor element of the first non-static location. (relative to the first one that has been positioned)
(i.e., positioning with respect to ancestral elements using relative, absolute, fixed positioning)
② If all ancestor elements are not positioned, they are positioned relative to the upper left corner of the browser;
③ uses absolute elements, which are completely removed from the document stream. The original space will be released.
"Fixed positioning"
1, the use of position:fixed, set fixed positioning;
Fixed positioning, is a special absolute positioning!! Only ancestral elements cannot be locked using positioning;
2, customization mechanism: Always relative to the top left corner of the browser to locate, and does not scroll with the scroll bar scrolling;
"Z-index Properties"
1, function: According to the value set by the Z-index property, determines the stacking order of the element in the z-axis direction;
2. Requirements for use:
①z-index can only adjust the stacking order for positioned elements.
Relative, Absolute, fixed
The Z-index attribute of the ② element, to consider the constraints of the parent container Z-index
-----If the parent container has the Z-index property set, all the elements of the child container will not be freed from the parent container hierarchy constraint. (That is, the parent container is set to Z-index, the child container can only be the value of the parent container.) Set the Z-index for the sub-container and only adjust the cascade order of the sub-containers within the parent container hierarchy.
-----If the parent container is not set Z-index, or is set to Z-index:auto, the child container adjustment z-index will not be constrained by the parent container hierarchy.
3. Z-index:auto; and z-index:0; similarities and differences:
①z-index:auto; is the default value, with z-index:0; in the same plane;
②z-index:0 constraint child elements must be in the same plane as the parent container;
Z-index:auto does not constrain the hierarchy of child elements;
[Clip Properties]
1. Function: Clip property is used to crop the picture label and display the specified area of the picture.
2. Use requirement: Clip property, only for absolute or fixed picture label
3, clip property, accept a rect () function, the function passed four values, respectively, the position of the top, right, bottom, and left four tangent lines
Note: Unlike other properties, the distance between the top and bottom two values of the four values in a rect is taken from the top, and the distance from the left and right two values is taken from the left.

Second, the use of negative margins
[1. Implement block-level elements to center horizontally in the parent container]
① setting sub-containers as anchor elements
②left:50%; MARGIN-LEFT:-WIDTH/2; (Vertical center)
top:50%; MARGIN-TOP:-HEIGHT/2 (Horizontal center)
2. "Use negative margins to increase the width of the element"
① the width of the child container, not specified, only the height is specified, or the height is open by the content;
②margin:0 -50px; can make both left and right sides, are outside the parent container 50px;
3. Application of the second effect of negative margin to solve the gap between multiple Li in a div

CSS Basic syntax