CSS3 Series II (Media support, text-to-font-related styles, box-related styles)

CSS3 Media Support

In CSS3, we can improve the user experience by allowing us to choose the layout of a page in a style without changing the content to precisely adapt to different devices.

You can use the META tag to specify how many pixels of window width The browser will handle on this page, specifying the method as shown below

<name= "Viewport"  content= "width=600px"/>

CSS can set media to determine which device the style applies to, such as screen, TV, print, speech, handheld, all, and so on.

<media= "All"><link media= "print" href= "Xxx.css" > 

CSS3 can be set based on more visual properties, such as height, width, aspect ratio, resolution, device size, and so on.

<media= "screen and (min-width:600px) and (max-width:900px)">

Specifically, the use of Media queries is as follows:

The value that you can specify in media queries and the device type that the value represents is as follows:

The description of the specific device features in media queries is as follows:

Use the AND keyword to specify the style that is used when a value of an attribute of a device type satisfies a condition

Use multiple statements to apply the same style to different device types and device features

You can add the NOT keyword or the only keyword in an expression, and the NOT keyword indicates that a reverse action is taken on the following expression

The only keyword is for browsers that do not support media Queries but can read media type to hide the style of the expression

Add a shadow to text

Let text wrap

For Western text, the browser will automatically wrap around half-width spaces or hyphens without suddenly wrapping the word. When the Chinese language contains punctuation, it is always impossible for the browser to make punctuation at the beginning of a line of text.

You can use the Word-break property in CSS3 to determine how the line wrap is handled

To wrap long words with URL addresses

        {            word-wrap:break-word;        }

Using server-side fonts

Webfonts is a very early CSS technique that allows pages to render specific fonts by downloading font files.

When you use the @font-face property to display client-side fonts, you need to modify the URL property value of the font file path to the property value in local () and write the used font in parentheses following the local

Declares the format of the font file in the value of the Format property (the Format property value is set to TrueType when using the TrueType file format, and the Format property value is set to OpenType when using OpenType format.) TrueType file extension ttf,opentype format file extension OTF when using server-side fonts in IE, use only Microsoft-brought embedded OpenType font files with the file name extension EOT)

In the @font-face property, the property values that you can specify are as follows:

Here is the use of the Font-size-adjust property, in fact, the use of the method is very simple, but need to use each font comes with a aspect value (scale value)

A browser is used to calculate the aspect value as described in the authoritative guide for HTML5 and CSS3

CSS3 box-related styles

1. The width and Height properties can only be used on elements of block type, and the elements of inline types do not work

2, by default, the Table element property block type, so cannot be in the same row as other text, but if you modify the table element to inline-table type, you can make the table and other text in the same row

3, when the element is specified as a run-in or compact type, if the element is followed by a block type element, the element of the run-in type will be contained inside the element of the block type, and the compact type element will be placed to the left of the block type element

4. All table-related elements in CSS3 and their respective types are as follows

Support for various box types in each browser

Out of section to display ellipses

        {            white-space:nowrap; /* the contents of the right end of the box cannot be wrapped, so the contents of the box overflow in the horizontal direction. */             Overflow:hidden; /* text that goes beyond the div element will be hidden. */             text-overflow:ellipsis; /* an ellipsis appears at the end of the DIV element */        }

Box-related properties Box-shadow, box-sizing

The Box-shadow method is identical to Text-shadow.

Box-sizing: You can specify whether the width and height values that are specified with the Width property, respectively, contain the padding area inside the element, and the width and height of the border

The purpose of using the Box-sizing property is to control the total width of the element, and if the property is not used, the default is to use the Content-box property value in the style, which only specifies the width of the content, but does not specify the total width of the element. In some cases, using the Border-box attribute value will make the page layout more convenient

Title

Paragraph

Some of the other important details of CSS3

1) It may be considered that the alpha channel and opacity of the color values are not particularly significant, in fact, the use of the alpha channel for both the background color and the text color to achieve the effect of using opacity

2) If the color value is specified as transparent, the color of the background, text, or border is set to fully transparent, equivalent to using an alpha channel with a value of 0 (in CSS3 you can specify the transparent value in all properties that specify a color value)

3) It is known that CSS2 uses the outline attribute to draw a contour line around an element, as shown in the following method

By default, for an element with a border, using the Outline property will draw a contour line against the perimeter of the border, and if we want the contour line to deviate a few pixels outward, the CSS3 new Outline-offset attribute will do the same, it is very simple to use, is to assign it an integer value with a pixel unit, and if it is specified as a positive integer, offset outward if it is specified as a negative integer, inward offset

4) CSS3 's resize development allows users to modify the dimensions of an element by dragging and dropping it (primarily for use in any container element that uses the overflow property)

The values that can be specified for the Resize property are categorized as follows

5) in CSS3, you can use the initial property value to cancel the style designation of an element, but in some cases the result of using the initial property value for an element is not equal to the result of the direct deletion of the style setting of the element (since the style setting for the initial property value is appended, The font size and font weight of the elements are used by default values in CSS for font size and font weight properties, regardless of what style the browser appends to the element.

CSS3 Series II (Media support, text-to-font-related styles, box-related styles)