CSS tags in a detailed

CSS3 Overview

Since 2010, HTML5 and CSS3 have been the two most popular topics in Internet technology. From the perspective of the front-end technology can be divided into three stages of the development of the Internet: The first stage is web1.0 content-based network, the front-end mainstream technology is HTML and CSS, the second stage is web2.0 AJAX applications, popular technology is javascrip/dom/asynchronous data requests. The third stage is the forthcoming HTML5+CSS3 era, which complements each other and brings the Internet into a new era.

What is CSS

Very simply, CSS stands for "casading style Sheets", which is a stylesheet, a markup language that overrides and adds styles to a Web site. The CSS that is used now is basically developed on the basis of the CSS2 introduced in 1998. 10 years ago, when the internet began to become popular, it was possible to use style sheets to visually unify the editing of Web pages, but in 10 years the CSS basically did not change much, until 2010 finally launched a new version---CSS3. CSS3 only indicates that the next generation of css,3 is just the version number, and CSS3 has added some new features to the css2.1 version. To put it simply, CSS3 has a lot of effects that were previously needed to use images and scripts, just a few lines of code to get it done. such as rounded corners, picture borders, Text shadows and Box shadows. CSS3 not only simplifies the design process for front-end development workers, but also speeds up page loading.

Some new features of CSS3

• Fillet effect
• Graphical boundaries
• Block Shadows and text shadows
• Use RGBA for transparent effects
• Gradient effect
• Using @Font-face to implement custom fonts
• Multi-background map
• Warp processing of text or images (rotate, scale, tilt, move)
• Multi-column Layouts
• Media Enquiry

Browser support

• CSS3 Browser Support Status

• Firefox 3.05+ ... Partial support

• Google Chrome 4+ ... Better support

• Internet Explorer ie9+ Section Support

• Opera ... Partial support

• Safari (3.2.1+ windows ... Better support).

CSS Selector

CSS selectors are incredibly powerful tools: they allow us to specify specific HTML elements in the tag without having to use the extra class, ID, or javascripts. And most of them are not new additions to the CSS3, but are not widely used as they should be. If you are trying to achieve a clean, lightweight label and a better separation of structure and performance, the advanced selector is very useful. They can reduce the number of classes and IDs in the tag and make it easier for designers to maintain style sheets.

Property Selector

• [att= "value"] matches an element that is equal to a specific value
• [att^= "value"] Match property contains an element that begins with a specific value
• [att$= "value"] Match property contains an element that ends with a specific value
• [att*= "value"] Match property contains an element with a specific value

Pseudo class Selector

Pseudo-Class selector is a well-defined selector in CSS, and it is not possible to name the commonly used pseudo-class selectors that are used on a element, such as: A:link,a:visited,a:hover,a:active.

Pseudo element

The pseudo-element selector is not a selector for a true element, but a selector for a defined pseudo-element in the CSS, with four types of first-line,first-letter,before,after in the CSS, such as the following: p:first-line{ Color:red;},p:after{content: "Content"}

Effect:

Structural pseudo-Class selectors

The common feature of struct-line pseudo-class selectors introduced in CSS3 is to allow developers to specify element styles based on the structure in the document tree.

: Root:not:empty:trget

: Nth-child (N): Nth-last-child (N)

: Only-child

: First-child:last-child

5.nth-child (n) and Nth-last-child (n)

The first type: simple numerical sequence notation (1)

: Nth-child (number): matches the first number element directly. The parameter number must be an integer greater than 0. For example:

Li:nth-child (3) {background:orange;}/* Set the background of the 3rd Li to Orange */

: Nth-last-child (n) The same idea as the last selector, but matches the element from behind

1. Root
: Root pseudo-class selects the roots element of the page. Nine to ten, the root node is the : Root {}

2. Not
: Do not want to use styles for a struct element, but want to exclude the sub-structure elements below the structure element. For example:
Body *:not (H1) {}
3.empty
: Empty is selected when the element content is empty. For example:
: Empty {}
<table>
<tr><td>a</td><td>b</td></tr>
<tr><td>c</td><td></td></tr>
</table>

4.target
: Target targets are changed when jumping to the target
Example:: Target H3{color:pink}

5.nth-child (n) and Nth-last-child (n)
The first type: simple numerical sequence notation
: Nth-child (number): matches the first number element directly. The parameter number must be an integer greater than 0. For example:
Li:nth-child (3) {background:orange;}/* Set the background of the 3rd Li to Orange */
: Nth-last-child (n) The same idea as the last selector, but matches the element from behind

Second type: multiple notation (2)

: Nth-child (AN): matches all elements in multiples of a. Where the letter N in the parameter an is not the default, it is a multiple notation, such as 3n, 5n.

Example:

Li:nth-child (3n) {background:orange;} /* Set the background of Li with the 3rd, 6th, 9th 、...、 All multiples of 3 to orange */

Third: Multiple group matching (3)

Li:nth-child (3n+1) {background:orange;} /* Match 1th, 4th, 7th 、...、 1th li*/for each of the 3 groups

Fourth type: Parity match

: Nth-child (Odd) and: Nth-child (even) match the elements with the odd and even numbers respectively. The odd (odd) is the same as the (2n+1) result; even (even) (2n) results.

Fifth Type Nth-of-tyoe ()

In order to resolve the presence of other labels at the same level, the desired element could not be found.

The 6.last-child is used to select the last child node under the parent element. For example: Li {border-bottom:1px solid #ccc;} li:last-child {border-bottom:none;}

7.first-child usage is the same as last-child for selecting the first subsection under a parent element

CSS3 Gradient Effect

Background:-webkit-gradient (linear, 0 0, 0 100%, from (red), to (blue))

Type of gradient? (linear)
x Y coordinate of the beginning of the gradient (0 0– or Left-top)
x Y coordinate of the end of the gradient (0 100% or Left-bottom)
The color of the beginning? (from (red))
The color of the event? (to (blue))

Background:-webkit-linear-gradient (top, red, blue);

Please note that we put the gradient type--linear--in the attribute prefix.
Where does the gradient start? (top– we can also make the number of fees, like -45deg)
The color of the beginning? (red)
The color of the event? (blue)

Simple text shading:

CSS tags in a detailed