Mobile Web interface style-css3

Mobile Web interface style-css3

Css3

Css2.1 has been released for seven years. Over the past seven years, the development of the Internet has dramatically changed. Css2.1 is sometimes difficult to meet the needs of Web applications that rapidly improve performance and improve user experience. The emergence of the css3 standard is to enhance the function of css2.1, reduce the number of image use times and solve the special effect on HTML pages.

As HTML5 gradually becomes the hottest topic in the IT field, css3 gradually becomes popular. At present, many browsers have begun to support some css3 features, especially those based on the WebKit kernel. On mobile platforms such as Android and iOS, Apple and Google are promoting the rapid development of HTML5 and their web browsers, css3 can be well supported and applied in mobile Web browsers.

As a technology for serving as page layout and page decoration on HTML pages, css3 can more effectively control the page layout, Font, color, background, or other animation effects.

Currently, css3 is one of the main technologies used in mobile Web development. It plays an important role in interface modification. Because mobile Web browsers support css3, the compatibility between different browsers is very small. However, some compatibility work is still required for some CSS features of mobile Web browsers.

Currently, css3 is most suitable for mobile Web development with the following features:

-Enhanced Selector

-Shadow

-Powerful background settings

-Rounded border

The following sections will focus on how to use these css3 features to implement a mobile Web interface.

Selector

Selector is an important part of css3. By using the selector of css3, you can improve the efficiency of developers. This section describes the basic usage of attribute selectors and pseudo-class selectors.

Attribute Selector

In css3, we can use the attribute names of HTML elements to selectively define CSS styles. In fact, attribute selector has been introduced as early as in css2, and its main function isFor HTML with the specified attribute
Element settings Style. For example, you can set the style by specifying the ID attribute of the DIV element.

Attribute selectors are divided into four matching mode selectors:

-Fully matched attribute Selector

-Contains the matching selector.

-First character matching Selector

-Tail character matching Selector

1. Exact match attribute Selector

The meaning is to completely match the string. When the ID attribute value of the DIV element is test, this style is used to select any element with the ID value of test using the exact match selector. The following code sets the property to a red font by specifying the id value:

<Div id = "article"> test the fully-matching property selector </div>

<Style type = "text/CSS">

[ID = article] {

Color: red;

}

</Style>

2. Include the matching Selector

The contained match has a wider range than the exact match. This style is used as long as the attribute in the element contains a specified string.

The syntax is [attribute * = value]. Attribute refers to the attribute name, value refers to the attribute value, and matches with the "* =" symbol.

For example, the following three DIV elements match the selection of the matching selector, and set the font in the DIV element to the red font:

<Div id = "article"> test the fully-matching property selector </div>

<Div id = "subarticle"> test the fully-matching property selector </div>

<Div id = "Article1"> test the fully-matching property selector </div>

<Style type = "text/CSS">

[ID * = article] {

Color: red;

}

</Style>

3. First character matching Selector

The first character matching is the first character that matches the attribute value. The element uses this style as long as the start character matches the matching.

The syntax is [attribute ^ = value]. Attribute refers to the attribute name, value refers to the attribute value, and the first character is matched with the "^ =" symbol.

For example, after the following three DIV elements match the selector with the first character, only the elements with the ID of article and Article1 are set to the red font.

<Div id = "article"> test the fully-matching property selector </div>

<Div id = "subarticle"> test the fully-matching property selector </div>

<Div id = "Article1"> test the fully-matching property selector </div>

<Style type = "text/CSS">

[ID ^ = article] {

Color: red;

}

</Style>

4. Tail character matching Selector

The matching principle is the same as that of the first character. The end character only matches the end string. The element uses this style as long as the end string matches the match.

The syntax is [attribute $ = value]. Attribute refers to the attribute name, value refers to the attribute value, and the last character is matched with the "$ =" symbol.

For example, when the following three DIV elements use the tail character matching selector, only the element with ID subarticle is set to a red font.

<Div id = "article"> test the fully-matching property selector </div>

<Div id = "subarticle"> test the fully-matching property selector </div>

<Div id = "Article1"> test the fully-matching property selector </div>

<Style type = "text/CSS">

[ID $ = article] {

Color: red;

}

</Style>

Pseudo-class selector

In css3 selectors, there are many pseudo-class selectors. Then in the css2.1 era, the pseudo-class selector already exists, for example, the four State selectors of a hyperlink: A: Link, A: visited, A: hover, A: active.

Css3 adds a lot of selectors, including:

-First-line pseudo-element Selector

-First-letter pseudo-element Selector

-Root Selector

-Not Selector

-Empty Selector

-Target Selector

These pseudo-class selectors are newly added to css3, which can be supported by Web browsers on Android and iOS platforms. Now we will introduce you to this part of selector.

1. Before

The before pseudo-class Element selector inserts content before an element is selected and is generally used to clear the floating.

Currently, before selectors support IE8 +, Firefox, chrome, Safari, opera, and Android browsers.
Browser and iOS safari.

Before selector Syntax:

Element Tag: Before {

Content: "inserted content"

}

For example, insert "text" before the P element ":

P. Before {

Content: "text"

}

2. After

The principle of the After pseudo-class Element selector is the same as that of the before pseudo-class Element selector, but the after operation inserts content after an element is selected.

Currently, before selectors support IE8 +, Firefox, chrome, Safari, opera, and Android browsers.
Browser and iOS safari.

The syntax of the After selector is:

Element Tag: After {

Content: "inserted content"

}

3. First-child

Specifies the style of the first element in the element list. Syntax:

Li: First-child {

Color: red;

}

4. Last-child

The same type as the first-Child selector. Last-Child specifies the style of the last element in the element list. Syntax:

Li: Last-child {

Color: red;

}

5. Nth-child and Nth-last-child

Nth-child and Nth-last-child can specify the style of an element or the style of an element starting from the last number. For example:

// Specify 2nd Li Elements

Li: Nth-child (2 ){}

// Specify the last 2nd Li Elements

Li: Nth-last-child {}

// Specify an even number of Li Elements

Li: Nth-child (even ){}

// Specify an odd number of Li Elements

Li: Nth-child (ODD ){}

In this section, we only introduce some common CSS selectors. In fact, there are more than one type of selectors. The rest of the selectors are not described in detail. Interested readers can read related information about css3.

 

 

This article is excerpted by Tang Jun from HTML5 mobile Web Development Guide

Book details: http://blog.csdn.net/broadview2006/article/details/7609750