CSS3: Selectors, fonts, and color styles

1. Private prefixes and their usage

Browser vendors use so-called private prefixes to test "experimental" CSS features when the CSS3 module standard has not yet been approved by the company or the features proposed by the standard have not yet been fully implemented by the browser. Look at the code that implements the fillet in CSS3:

. round{

-khtml-border-radius:10px; /* Konqueror */

-rim-border-radius:10px; /* RIM */

-ms-border-radius:10px; /* Microsoft */

-o-border-radius:10px; /* Opera */

-moz-border-radius:10px; /* Mozilla (e.g. Firefox) */

-webkit-border-radius:10px; /* Webkit (such as Safari and Chrome) */

border-radius:10px; */*

}

In real-world development, you can use a JavaScript scheme that automatically appends prefixes to CSS files, url: Http://leaverou.github.com/prefixfree.

You can also specify only the browser you want, for example, if time and budget are tight, you may decide not to provide private prefix support for any browser that has less than 3% usage on your site. You can view this site: http://caniuse.com, to see how well the current browser supports specific CSS3 and HTML5 features. You can also view: http://gs.statcounter.com View usage statistics for the most recent global browser.

2.CSS3 multi-column layout and text wrapping

　　1. Multi-Column Layout

There was a time when it was necessary to display a whole piece of text in multiple fields, and before CSS3 appeared, you had to split the content into different tags and set the styles separately. Using CSS3 allows us to distribute some or more pieces of content to a multi-column grid. The following code:

<div id= "main" role= "main" >

<p>lloremipsimloremipsum dolor sit Amet,consectetur

Any text//

</p>

<p>lloremipsimloremipsum dolor sit Amet,consectetur

Any text//

</p>

</div>

The specific CSS styles are as follows:

(1) can be set by the width of the field (the field width is unchanged, the number of fields will be automatically adjusted according to the browser)

#main {

Column-width:12em;

}

(2) By setting the number of columns (the number of columns is unchanged, the field width is automatically adjusted according to the viewport)

#main {

Column-count:4;

}

(3) You can also increase the field gap and split lines to make the multi-column layout more effective

#main {

Column-gap:2em;

Column-rule:thin dotted #999;

Column-width:12em;

}

To see the standard for CSS3 multi-column layout modules, visit: Http://www.w3.org/TR/css3-multicol.

For now, remember that you need to use a private prefix for multi-column layout declarations to ensure the most compatible browsers.

　　2. Word Wrapping

Resolving content that is too long beyond the browser viewport without wrapping, resulting in a transverse roller.

Word-wrap:break-word;

3.CSS3 's new selector and its usage

1.CSS Property Selector

img[alt]{

border:3px dashed #e15f5f;

}

This selector matches any image label in the page label that contains the ALT attribute. You can also narrow the matching range by setting the property value. As shown in the following code:

img[alt= "Atwi_oscar"]{

border:3px dashed #el5f5f;

}

2.CSS3 substring Matching Property selector

(1) The property selector for "match start". The syntax is as follows:

Element[attribute^= "Value"]

In actual use, if I want to select a picture with all the Alt attribute values in the site starting with film, the corresponding code is as follows:

Img[alt^= "Film"]{

border:3px dashed #el5f5f;

}

(2) The property selector "match contains content". The syntax is as follows:

Element[attribute*= "Value"]

In practice, if I want to select a picture with a film string in all the Alt attribute values in the site, the corresponding code is as follows:

Img[alt*= "Film"]{

border:3px dashed #el5f5f;

}

(3) "Match end" property selector. The syntax is as follows:

Element[attribute$= "Value"]

In actual use, if I want to select all the Alt attribute values in the site to film the end of the picture, the corresponding code is as follows:

Img[alt$= "Film"]{

border:3px dashed #el5f5f;

}

3.CSS3 Structure Pseudo-class

(1): Last-child Selector

CSS2.1 already has a selector for the first item in the list: Li:first-child

CSS3 also adds a selector to match the last item: Li:last-child

Combining these two selectors, when styling the LI tag, you do not need to add additional class names to the code.

(2) Nth-child Selector

* Use integers, such as: Nth-child (2)-This will select the second option in the list;

* Use numeric expressions

A>:nth-child (3n+1)-This will start with the first element and then select one for each of the three elements.

B>:nth-child (3n-2)-This will start from the bottom 2nd and select one for each of the three elements.

C>:nth-last-child (-n+3)-This will start from the bottom 3rd element and select all the elements behind it.

* Use odd, such as: Nth-child (odd)-This will select all the odd elements in the LI tag

* Use even numbers, such as: Nth-child (even)-this will select all the even elements in the LI tag

* Use types to select elements such as: Nth-of-type (n) and Nth-last-of-type (n). The following code
<ul>
<li class= "Internal" ><a href= "#" >Why?</a></li>
<li><a href= "#" >Synopsis</a></li>
<li class= "Internal" ><a href= "#" >Stills/Photos</a></li>
<li class= "Internal" ><a href= "#" >Videos/clips</a></li>
<li class= "Internal" ><a href= "#" >Quotes</a></li>
<li class= "Internal" ><a href= "#" >Quiz</a></li>
</ul>

Note that the second list item above does not have a internal class. Look at this rule:

Nav ul Li.internal:nth-of-type (n+2) a{

Color: #fe0208;

}

The above code tells the browser: "Starting with the second matching element, select each list item with a class name of internal."

Note: The CSS3 is counted starting from 1.

(3). Negation (: not) selector

Nav ul Li:not (. Internal) a{

Color: #fe0208;

}

Represents a list item that has no internal class selected.

Complete list of UI element State pseudo-classes (http://www.w3.org/TR/selectors/#UIstates)

4. Modification of pseudo-elements

Pseudo-elements already exist in the CSS2. The CSS3 standard has made some minor corrections to its syntax. For a few examples, P:fist-line will select the first line of the <p> tag, and P:first-letter will select the first letter. CSS3 requires the use of two colons for pseudo-elements to distinguish them from pseudo-classes. So the example should be changed to p::first-letter. But note that Internet Explorer8 and earlier versions of IE do not recognize the syntax of two colons, they only recognize one colon.

:: First-line pseudo-element is a very handy feature that automatically changes depending on the viewport.

4. Customizing Web page Fonts

[Email protected]

Download @font-face on the Font squirrel:http://www.fontsquirrel.com/tools/webfont-generator website (these fonts include Bebas Neue, Bitstream Vera sans and collaborate Thin), then unzip. Put it in a dedicated Fonts folder, the folder and CSS folder peer, the code is used as follows:

@font-face{

font-family: ' Bebasneueregular ';

Src:url ('.. /fonts/bebasneue-webfont.eot ');

Src:url ('.. /fonts/bebasneue-webfont.eot #iefix ');

Format (' Embedded-opentype ').

URL ('.. /fonts/bebasneue-webfont.woff ') format (' Woff '),

URL ('.. /fonts/bebasneue-webfont.ttf ') format (' TrueType '),

URL ('.. /fonts/bebasneue-webfont.svg#bebasneueregular ')

Format (' SVG ');

Font-weight:normal;

Font-style:normal;

}

You can then set the correct font and weight for the relevant style. For example, I want to modify the font of the navigation link text to Bebas Neue. The code is as follows:

Nav ul Li a{

font-family: ' Bebasneueregular ';

}

After you replace a font, you generally need to modify the font size. Use formula: Target element Size ÷ context element size = percent dimension

However, when you use @font-face to set a Web site font, it sometimes causes the font to blur, causing the font weight to be the reason. Most browsers apply standard Font-weight (typically 700) for heading elements. Therefore, the solution to this scenario is to always set the Font-weight property for the caption element that has the @font-face font applied. (for example, show Font-weight set to 400).

5. New CSS3 color format and transparency

CSS3 allows us to declare colors using new methods such as RGB or HSL. In addition, we can add a transparent channel (RGBA and Hsla) behind the two methods.

1. defined in CSS as a hexadecimal value #fe0208:

Nav ul li:nth-child (odd) a{

Color: #fe0208;

}

In CSS3, this value can be described by using an RGB value:

Nav ul li:nth-child (odd) a{

Color:rgb (254,2,8);

}

2.HSL Color

In addition to RGB,CSS3, you can use the HSL (hue, saturation, luminance) mode to declare colors.

The HSL mode is based on a 360º hue ring, such as HSL (315,100%,60%). The first number represents the hue, the 60º is yellow, the 120º is green, the 180º is cyan, the 240º is blue, the 300º is magenta, and the 360º is red. The following two values represent saturation and brightness, respectively, and a value of percent that is used to change the underlying hue. If you want a richer color, the second value is used as a percentage of the higher point. The last control brightness can vary between 0% of All Blacks and 100% of all white.

3. Provide alternate color values for IE6, IE7, IE8

Nav ul li:nth-child (odd) a{

Color: #fe0208;

COLOR:HSL (359,99%,50%);

}

4. Transparent Channel

HSL and RGB support transparent channels. CSS3 also allows you to set the transparency of an element through the opacity declaration. The value of this transparency is also a decimal between 0 and 1. However, the transparency set in this way will have an effect on the entire element (the element's content will be transparent). Conversely, using Hsla or RGBA allows only certain parts of the element to be transparent. This way, an element can have a hsla transparency effect, but the inner text is still opaque.

Use the following syntax:

Background-color:hsla (0,0%,100%,0.8);

CSS3: Selectors, fonts, and color styles