Use CSS abbreviations

I. Make full use of CSS abbreviations
/* Pay attention to the top, right, bottom, and left writing order */
1. margin (4 sides ):
1px 2px 3px 4px (top, right, bottom, left)
1px 2px 3px (Omitted left equals right)
1px 2px (Omitted top or bottom)
1px (the four sides are the same)
2. simplify all:
*/Body {margin: 0} ------------ indicates that the margin of all elements in the webpage is 0
# Menu {margin: 0} ------------ indicates that the margin of all elements in the menu box is 0
3. border-specific style:
Border: 1px solid # ffffff;
Border-width: 0 1px 2px 3px;
4. Abbreviations of words:
Font-style: italic; italic format
Font-variant: Small-caps/normal; variant style: Small uppercase letters/normal
Font-weight: bold;
Font-size: 12px;
Line-Height: 1.2em (120%)/1.5em (150% );
Font-family: arrial, sans-serif, verdana;
Abbreviation:
Font: italic small-caps bold 12px/1.5em arrial, sans-serif;
Note: font-size and line-height cannot be written separately when combined with slashes.
5. For background images:
Background: # fff url(log.gif) No-repeat fixed top left;
6. List:
List-style-type: Square/NONE;
List-style-position: inside;
List-style-image: url(filename.gif );
Abbreviation:
List-style: None inside url(filename.gif)
2. Use four methods to introduce CSS styles
1. Link
<LINK rel = "stylesheet" type = "text/CSS" href?”a.css ">
Rel relationship
Type data types, with multiple types
Href path
Some browsers support candidate styles. Keyword: Alternate:
<LINK rel = "stylesheet" type = "text/CSS" href?”a.css ">
<LINK rel = "alternate stylesheet" type = "text/CSS" href?” B .css ">
<LINK rel = "alternate stylesheet" type = "text/CSS" href?”c.css ">
2. Internal style block
<Style>
<! -
H1 {color: red ;}
->
</Style>
3. @ import
@ Import url+a.css}
Note: This command must be placed in the <style> container and before all styles
It is recommended to put it in an HTML comment, <! --> The browser does not display the content in the comment, and the CSS Code such as import works normally.
4. inline Style
<P style = "color: red;">
Selector is a basic concept of CSS. The basic rules are as follows:
1. Rule structure:
H1 {color: red ;}
Selector {attribute: value ;}
This type is an element selector, which can basically include all HTML elements.
Attribute values can contain multiple elements, such as border: 1px solid red;
Common syntax
1) group:
Selector and description can be grouped:
H1, H2, H3 {color: red; Background: # FFF;}, the selector is separated by ",", and the attribute is separated ";"
2) class selector, that is, the declaration of the application through class = "stylename"
Definition:
. Stylename {color: red ;}
Note:
You can use multiple types of options in HTML, such as class = "Cn1 cn2 cn3 ″
3) ID selector, that is, the style corresponding to the ID attribute
Definition:
# A {color: red;}-> This definition uses the id = "A" element
2. This part is our common CSS syntax. Let's talk about our uncommon selector syntax.
1) Parent-Child structure, which corresponds to the document structure
For example, P span {border: 1px solid red;} corresponds to the <li> label below <p>, which is useful and can be accurately located.
Some special applications (supported by IE7 ):
(1) P> span {}, match all spans under all P
(2) P + span {}: match the first span tag that appears after the P element. The two must have the same parent tag.
2) attribute selector: (Note: The attribute selector IE7 is supported. The following versions are not supported. other browsers are supported)
Syntax: IMG [alt] {border: 1px solid ;}
Indicates the IMG tag with the expected alt attribute. Of course, multiple attributes can be matched, for example, IMG [alt] [title] {}; indicates the IMG tag that both attributes have, it can also correspond to specific values, for example, IMG [Alt = "photography"] {};
The advanced application in the property selector. Special match:
(1) IMG [class ~ = "B"], ~ =: Corresponds to a value in the attribute, that is, to
(2) [class ^ = "A"], starting with
(3) [class $ = "A"], ended with
(4) [class * = "A"], containing
(5) [class | = "A"], equal to or starting with
3) pseudo classes and pseudo elements
In daily use, there are several pseudo classes of the <A> label: Link: hover: active: visited
And: First-child: First: Before: Left: Right: Lang: Focus: fist-line, etc.
Note: Dynamic pseudo classes can be applied to any element, for example, input: Focus {Background: red;} the background turns red when the input tag gets the focus.
The preceding syntax can be used in combination to achieve accurate positioning, simple indirect style.