CSS3 series two (media support, text and font related styles, box related styles)_html/css_WEB-ITnose

CSS3 media support

In css3, we can choose a page layout in the style to accurately adapt to different devices without changing the content, thereby improving User experience

You can use the meta tag in the page to specify the window width of how many pixels the browser will use when processing this page. The specification method is as follows

<meta name="viewport" content="width=600px" />

CSS can determine the devices that the style is applicable to by setting media, such as screen, tv, print, speech, handheld, all, etc.

<style media="all"><link media="print" href="xxx.css">

CSS3 can be based on more Set the visual properties, such as height, width, aspect ratio, resolution, device size, etc.

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

Specifically, the usage of Media Queries is as follows:

The values ​​that can be specified in Media Queries are the same as the The device type represented by the value is as follows:

The description of the specific device characteristics in Media Queries is as follows:

Use the and keyword to specify the style to be used when the value of a certain feature of a certain device type meets a certain condition

Use multiple statement to apply the same style to different device types and device characteristics

You can add the not keyword or the only keyword in the expression. The not keyword means that the following expression Perform the negation operation

The role of the only keyword is to allow browsers that do not support Media Queries but can read Media Type devices to hide the expression style

Add shadow to text

Wrap text automatically

For Western text, the browser will add half-width spaces or hyphens Automatically wrap lines in places without sudden line breaks in the middle of words. When Chinese text contains punctuation marks, it is always impossible for the browser to place the punctuation mark at the beginning of a line of text.

You can use the word-break attribute in css3 to determine the processing method of automatic line wrapping

Let long words and URL addresses wrap automatically

        div {            word-wrap:break-word;        }

Using server-side fonts

Webfonts is a very early CSS technology that allows the page to render specific fonts by downloading font files.

When using the @font-face attribute to display local fonts on the client, you need to modify the URL attribute value of the font file path to an attribute value in the form of local(), and add the following Write the font used in brackets

Declare the format of the font file in the format attribute value (when using the TrueType file format, set the format attribute value to truetype, when using the OpenType format, set the format attribute value to opentype . The file extension of TrueType is ttf, and the file extension of OpenType format is otf. When using server-side fonts in IE, you can only use Microsoft's own Embedded OpenType font file, the file extension is eot)

In the @font-face attribute, the attribute values ​​that can be specified are as follows:

Here we talk about the use of the font-size-adjust attribute. In fact, the method of use is very simple, but you need to use an aspect value (proportion value) that comes with each font

Quoting a browser method for calculating aspect values ​​introduced in "The Authoritative Guide to HTML5 and CSS3"

CSS3 box-related styles

1. The width and height attributes can only be used on block type elements and have no effect on inline type elements.

2. By default, the table element attribute is of block type, so it cannot It is in the same line as other text, but if the table element is modified to the inline-table type, the table can be in the same line as other text

3. When specifying the element as run-in or compact type, If there is a block type element after the element, the run-in type element will be included inside the block type element, and the compact type element will be placed to the left of the block type element

4. css3 All table-related elements and their types are as follows

The support of each browser for various box types

Exceed the part to display ellipses

        div {            white-space:nowrap;/*使得盒右端的内容不能换行显示，这样一来盒中的内容就在水平方向上溢出了*/            overflow:hidden;/*超出div元素部分的文字将会被隐藏起来*/            text-overflow:ellipsis;/*在div元素的末尾出现一个省略号*/        }

Box-related attributes box-shadow, box-sizing

box-shadow The usage method is exactly the same as text-shadow.

box-sizing: You can specify whether the width and height values ​​specified with the width attribute and height attribute respectively include the padding area inside the element, and the width and height of the border

The purpose of using the box-sizing attribute is to control the total width of the element. If this attribute is not used, the content-box attribute value is used by default in the style, which only specifies the width of the content. However, the total width of the element is not specified. In some cases, using the border-box attribute value will make the page layout more convenient

Title

Paragraph

Some other important details in CSS3

1) You may think that there is no big difference between the alpha channel and opacity of setting the color value. In fact, you need to use the alpha channel for both the background color and the text color at the same time. To achieve the effect of using opacity

2) If the color value is specified as transparent, the color of the background, text or border will be set to be completely transparent, which is equivalent to using an alpha channel with a value of 0 (in In css3, transparent values ​​can be specified in all attributes that specify color values)

3) Everyone knows that the outline attribute is used in css2 to draw an outline around the element. The specific usage method is as follows

By default, for elements with borders, using the outline attribute will draw an outline close to the outside of the border. What if we want the outline to deviate outward by a few pixels? The newly added outline-offset attribute in CSS3 has this effect. It is very simple to use. Just specify an integer value with pixel units for it. If it is specified as a positive integer, it will be offset outwards. If it is specified as a negative integer, then Offset inward

4) The resize development of css3 allows users to modify the size of elements by dragging and dropping (mainly used in any container element using the overflow attribute)

can be resized The values ​​specified by attributes are divided into the following types:

5) In CSS3, you can use the initial attribute value to cancel the style specification of the element, but in individual cases, use the initial attribute for the element The display result after the value is not equal to the result after directly deleting the style setting of the element (because after adding the style setting of the initial attribute value, the font size and font thickness of the element are set using the font size and font thickness attributes in CSS. A certain default value, regardless of what styles the browser adds to the element)