CSS Knowledge points

1: Inline style <p style= "color:red" ></p>
2: Internal style <style type= "text/css></style>
3: External style <link href= "New.css" rel= "stylesheet" type= "Text/css" >

Priority level
The inner style of the top of the row style, the external style exists at the same time, who is in the back who first, because, the back style overrides the front style

!importan "The Descendants (weights)" id "intersection selector" class and set selector who's behind who's in charge? Elements >
Weighted value
id:100;
Class:10;
Tag element: 1; Using TD plus BORDER,TR sometimes goes wrong.

When the table is added border

Basic selector:
1:id Selector
2:class class Selector
3: element Tag Selector h1-h6,p,span,a,img,div,dl,ol,ul,input

Composite selector:
4: Intersection selector P.A1
5: #a of the set selector, #b
6: Descendant selector p. A1

Relationship Selector
7: Descendant selector p>.a1
7:a1 the first brother behind. A1+.a2
8:a1 behind all the brothers. A1~.a2

Property Selector
[attribute] is used to select the element with the specified attribute. A[href] {color:red;} A[href][title] {color:red;}
[Attribute=value] is used to select an element with the specified attributes and values.
[Attribute~=value] is used to select the element in the attribute value that contains the specified vocabulary.
[Attribute|=value] is used to select an element with an attribute value that begins with the specified value, which must be the entire word.
[Attribute^=value] matches the property value to specify each element at the beginning of the value.
[Attribute$=value] matches the property value to specify each element at the end of the value.
[Attribute*=value] matches each element of the property value that contains the specified value.

Pseudo class
A:link Select all the not visited links
A:visited Select all visited links
A:active Select Active link
A:hover Select mouse over link
: The element style is added when the focus gets focused.
: First-child adds a style to the first child element of an element.

P:nth-child (2) Select each P-element is the second child of its parent [that is, the first child below the P element]
P:first-child Select each <p> element that belongs to the first child element of its parent element
P:last-child Select each P-element to be the last child of its parent.

Do not use Nth-child () as far as possible with Nth-of-type ();

* Universal Selector
: Not (selector): Not (p) Select each element that is not a P element
P:first-of-type Select each P element is the first P element of its parent
P:last-of-type Select each P element is the last P element of its parent
P:nth-of-type (2) Select each P element is the second P element of its parent

Pseudo element
:: First-letter Add a special style to the first letter of the text "Comment:" first-line "pseudo-element can only be used for block-level elements. 】
:: First-line adds a special style to the first line of text. "Note:" First-line "pseudo-elements can only be used for block-level elements. 】
:: Before add content before the element.
:: After to add content after the element.

Font
font-width:1px;
Font-style:italic;
Font-family: "Microsoft Jas Black";
Simplified: font:1px Italic "Microsoft Jas Black";

Text
min/max-width:100px/10%;
min/max-height:100px/10%;
line-height:50px/50%;
Text-align:left/center/right;
text-indent:10px/-10px;
Text-decoration:overline/line-through/underline/none;
Vertical-altin:top/middle/bottom;
Text-shdow:x y 2px (blur) color;

Color
color:red/#ff0000/#f00/rgb (255,0,0);

List
List-style-type:circle/square/upper-roman/lower-roman/none;
List-style-image:url ("");
List-style-position:inside/outside;

Link
a:link {color: #000000;}/* not visited link */
a:visited {color: #00FF00;}/* Visited link */
a:hover {color: #FF00FF;}/* Move mouse over link */
a:active {color: #0000FF;}//Mouse click */

When set to several link state styles, there are also order rules:
A:hover must be behind A:link and a:visited.
A:active must be behind a:hover.

Mouse shape
Cursor:pointer/wait/help/text

Box model
Margin/padding: Upper right Down left
Margin/padding: Up or down
Margin/padding: Up or down
Margin/padding: Up or down
Border/outline (on the periphery of the border)
border/outline-width:1px;
border/outline-style:solid/dotted (dotted line)/dashed (dashed);
border/outline-color:red/#f00/rgb (255,0,0);
Simplified border/outline:1px dotted red;

Background
background-color:red (color)/#省略f00/rgb (255,0,0);
Background-image:url (");
Background-repeat:no-repeat/repeat-x/repeat-y;
Background-position:left Top/center Center (can write a center but not with middle)/10% 10%/10px 10px;
Simplified background:red url (') no-repeat 10px 10px;
Background-attchment (fixed, attached): Fixed/scroll;
background-size:200px Auto;

Block-level, row-level elements
Display:none (do not occupy space when hiding)/inline (line up)/block (can be set wide height)/inline-block (line up, can be set wide height) \
Visibility:hidden (space occupied when hiding)/visible;
opacity:0.4;
Filter:alpha (OPACITY=40); /* for IE8 and earlier versions */

Floating
Float:left/right
Clear:left/right/both;

Positioning properties
position:relative/absolute/fixed;
left/right/top/botttom:10px;
Z-INDEX:-10/10;
Overflow/overlfow-x/overflow-y:hidden (hide overflow text)/visible (default state)/scroll has scroll bars)/auto ()
Scroll bar appears if text overflows

@media screen and|not|only (media feature) {
Css-code;
}
Modify the background presentation (Background-color) If the document width is less than 300 pixels:
@media screen and (max-width:300px) {
Body {
Background-color:lightblue;
}
}

Responsive design
img{If the Width property is set to 100%, the picture will implement the responsive function according to the upper and lower range:
width:100%;
Height:auto
};
img{if the Max-width property is set to 100%, the picture will never be larger than its original size:
max-width:100%;
Height:auto;
}
The background picture can respond to resizing or zooming.
Here are three different methods:
1. If the Background-size property is set to "contain", the background picture will be proportionally adapted to the content area. Picture keeps its proportions constant:
2. If the Background-size property is set to "100% 100%", the background image will be extended to cover the entire area:
3. If the Background-size property is set to "cover", the background image will be extended to be large enough to allow the background image to completely cover the background area. Note that this property maintains the proportions of the picture so that some parts of the background image cannot be displayed in the background positioning area.

CSS Knowledge points