Common CSS Styles

1: Understanding CSS
1.1:css Introduction, CSS full name is cascading style sheet, cascading style sheets
1.2:css, mainly used to define the HTML content in the browser display style, such as text size, color, font bold, etc.
one of the benefits of using CSS styles is by defining a style , you can have a font with a uniform font, font size or color for different page locations, and
1.3:css code syntax
CSS styles consist of selectors and declarations, and declarations are made up of properties and values
H1 {color:red;font-size:14px;}
Selector Property Value {property and value composition declaration}
Selector: Indicates the element
declaration in the Web page to which the style rule applies: In the curly braces "{}" is the declaration, the attribute and the value are separated by the English colon ":". When there are multiple declarations, the English semicolon ":" separates the
CSS Comment code
2:CSS Basic Knowledge (Nearest principle)
2.1: Inline CSS style, directly written in existing HTML tags
2.2: Embedded CSS style, written in the current file
2.3: External CSS styles, written in a separate file, using link to introduce
CSS style filenames to name the meaningful English alphabet
rel= "stylesheet" type= "Text/css" is a fixed notation, be sure to write to L Cannot modify the
Syntax format (<link href= "" rel= "stylesheet" type= "Text/css" >)
<link> label position in the ink tag is generally written in the 2.4: priority
Inline > Embedded > External

3 : CSS Selector
3.1: What is a selector
Each CSS style declaration or definition consists of two parts (selector (style))
3.2: Tag Selector
3.3: Class Selector
The use of class selectors in the actual development process
Class selector name (CSS style code;)
3.4:id Selector
Set id= "ID name" for the label instead of class= "class name";
The ID selector is preceded by the # sign, not the English dot (.);
3.5: Differences between class and ID selectors
Same point: can be applied to any element
Different points: (1) The ID selector can only use one in the document, unlike the class selector, in an HTML document, the ID selector can only use one, and only once, and the class selector may use multiple
(2) You can use the class selector word list method to set multiple styles for an element at the same time, we can set multiple styles for an element at the same time, but can only be implemented with the method of the class selector, the ID selector is not possible, the ID word list cannot be used
The ID selector takes precedence over the class selector
3.6: Sub-selector
There is also a more useful selector sub-selector, which is greater than the symbol, which is used to select the first generation element of the specified label element
3.7: include (descendant) selector
Contains a selector, which is a space that selects the next generation element under the specified tag element, such as the code in the right-hand code editor.
3.8: Universal Selector (Learn it)
*{color:red;}

*{margin:0;padding:0}// Remove Page Style
3.9: Pseudo-Class selection (usually used on the linked label)
Pseudo-Class selector: The way a:link normal connections
A:hover: The style of mouse put up
A:active: Style When you select a link
a:visited: A sample of the links that have been visited

4Common Properties 
4.1: Color
The Color property defines the colors of the text
Color:green;
Color: #ff6600;
Color: #f60;
Color:rgb (255,255,255);
Color:rgba (255,255,255,1);
4.2: Font Properties
Font-size: Font Size
Font-famliy: Defining fonts
Font-weight: Font Bold
4.3: Background properties
Background color: background-color;
Background image: Background-image;
Background repetition: background-repeat;
Background position: background-position;
Shorthand method:
4.4: Text Properties
Text-align: Horizontal arrangement
Line-height: Text line height
(1):% line height based on font size
(2): value to set fixed value
Text-indent: First Line Indent
Letter-spacing: Character Spacing
Property value: Normal default, length set a specific value, you can set a negative number, inherit inherit
4.5: Border Properties
4.5.1: Border Style border-style;
(1): Unified style (abbreviated style) Border-style;
(2): Define the border style of a direction individually
Border-bottom-style: Bottom Border Style
Border-top-style: Top Border Style
Border-left-style: Left Border style
Border-right-style: Right Border style
(3): Property values for border style styles
None: No Border
Solid: Straight Border
Dashed: Dashed border
Dotted: dot-shaped border
Double: two-line border
Groove: Spit Groove Border
Ridge: Ridge-shaped border
Inset inset border
Outset outset border
Inherit inheritance
Attribute values based on Border-color
4.5.2: Border color border-color;
(1): Unified style (abbreviated style)
Border-color;
(2): Individual style
Border-top-color: Top Border color
Border-bottom-color: Bottom Border color
Border-left-color: Left Border color
Border-right-color: Right Border color
(3): attribute value
Color worthy name: Red,yellow;
Rgb:rgb (255,255,0,0.1)
Hex: #ff0, #ffff00;
(4): Four Ways to attribute values
One value: Border-color: (Top, bottom, left, right)
Two values: Border-color: (Top, bottom) (left, right)
Three values: Border-color: (top) (bottom, left) (right)
Four values: Border-color: (top) (bottom) (left) (right)

5 Element Classification--block-level elements

In HTML <div>, <p>,

A{display:block;}

Block-level element features:

Each block-level element begins with a new row, and the subsequent element also starts another line. (True overbearing, one block-level element exclusive row)

The height, width, row height, and top and bottom margins of an element can be set.

The element width is not set, and is 100% of the parent container (and the width of the parent element), unless a width is set.

Element classification--inline elements

In HTML,,<span>, <a>, <label>, <strong>, and <em> are typical inline elements (inline elements). Of course, block elements can also be set to inline elements through code display:inline.

Inline element Features:

And the other elements are on one line;

The height, width and top and bottom margins of the element are not set;

The width of the element is the width of the text or Picture it contains, and it cannot be changed.

Element classification-inline block elements

Inline block elements (Inline-block) are features that have inline elements, block elements, and code display:inline-block that are set to inline block elements. (css2.1 New),, <input> tag is this inline block tag.

Inline-block element Features: and other elements are on one line;

The height, width, row height, and top and bottom margins of an element can be set

6 CSS Summary of Use

The horizontal centering approach:

(1) when the element is set as a block-level element, the use of Text-align:center does not work, then there are two cases: fixed-width block elements and variable-width block elements.

Fixed-width block element: The width of the block element is constant

Elements that satisfy a fixed width and block of two conditions can be centered by setting the left and right margin value to "auto".

<body>

<div> I am the fixed width block element, haha, I want to center the horizontal display. </div>

</body>

CSS Code:

<div>tttttt<div>

<style>

div{

border:1pxsolid red;/* in order to display the center effect, the Div is clearly set with a border * /

width:200px;/* Fixed Width * /

margin:20pxauto;/* Margin-left with Margin-right set to Auto */

}

</style>

(2) The horizontal center of the variable width:

by setting float to the parent element (float can be defined as left and right floating after several elements appear in the peer.) You can sometimes use this method to implement a display in the same line), and then set position:relative and left:50% for the parent element, and the child elements set position:relative and left:-50% to achieve horizontal centering .

Common CSS Styles