Css BASICS (1): css Basics

Css BASICS (1): css Basics

Css Reference Manual: css.doyoe.com

 

In css3, different browsers may require different prefixes, indicating that the css attribute or rule has not yet become part of W3C standards and is a private attribute of the browser, although the latest versions of browsers do not require prefixes, it is necessary to better forward compatible prefixes.

-Webkit indicates chrome and safari private attributes

-Moz indicates the private property of the firefox browser.

-Ms indicates private properties of IE browser

-O represents the private attribute of operabrowser

 

Css syntax structure

Css syntax consists of three parts: selector, attribute, and value

Selector {Property: Value ;}

↓

Character Attribute Value

 

Three css introduction Methods

1. Embedded Style
2. Internal Style Sheets
3. External Style Sheets

Priority of three import methods (proximity principle)

Embedded style> internal style sheet> external style sheet

 

Css code comments
Start with/* and end */

 

Wildcard character

* Indicates all objects. The wildcard character indicates that you can use a fuzzy method to select objects and specify styles.

*{ margin:0; padding:0;}

Element Selector

The so-called element selector refers to an existing tag name in the webpage as the name selector.

body{ background:#fff;}h1{ color:#000;}p{ color:#ccc;}

Group Selector

In addition to specifying styles for a single tag, you can also define the same style for a group of tags.

Use commas to separate the delimiters. To use the same style on the page, you only need to write the style once.

h1,h2,h3,p{  font-size:12px;  font-family:arial;    }

Link Selector

1. Include the selector (e f) to select all F elements contained by the Eelement.

2. The sub-selector (E> F) selects all the sub-elements F as the Eelement.

3. the adjacent selector (E + F) selects the F element next to the Eelement.

4. sibling selector (E ~ F) select all e-sibling elements F

<Div> <a> the background color is # E61061 </a> <span> <a> the background color is #67B374 </a> </span> </div> <p> the background color. yes # 0000FF </p> <p> the background color is #808080 </p> <p> the background color is #808080 </p> <style type = "text/css"> div> a {background: # E61061;} span a {background: #67B374;} p ~ P {background: #808080;} div + p {background: # 0000FF ;}</style>