HTML5 and CSS3 authoritative guide. pdf9

21st. Media Queries Related styles

The module allows you to add media query expressions to specify the media type, depending on the type of media selected (display, portable device, TV)

Use method @media device type and (device attribute) {style code}

Most device attributes have a specified value that accepts a prefix of Min/max, representing a logic greater than or equal to or less than equals

Use the AND keyword to specify the style used when certain attributes of a device type meet a condition, and the following represents the style used when the device window is less than 640px

@media screen and (max-width:639px) {style code}

You can also specify more than one statement

@media handheld and (min-width:360px), screen and (min-width:480px) {style code}

The keyword can also be either not or only,not to denote the addition of ... Apply styles to other devices than

@media not handheld and (color) {style code}

@media all and (not color)

The keyword only function is for devices that do not support media queries but can read media Type (@media screen), the only read will automatically ignore the following style (invalid), and for media queries-enabled devices, Only equivalent to non-existent (normal set style)

The other important styles and attributes of CSS3 in the 22nd chapter

Color-related styles

Set alpha channel for RGB color

Background-color:rgba (255,0,0,0.5);

The difference between the alpha channel and the Opacity property: The alpha channel can set the transparency of a single element, and the Opacity property can only specify the transparency of the entire element

Specifies that the color value is transparent, which is equivalent to using an alpha channel with a value of 0

Background-color:transparent;

User interface related styles

A outline attribute is defined in CSS2 to draw a contour line around the element, highlighting the purpose of the element

Input#male{outline:thin Solid Red}

CSS3 New Out-offset Properties

outline-offset:2px

Positive number expands the outer contour of the pixel, and negative numbers reduce the pixels

Resize Property

You can specify the following values: None the user cannot modify the element size both can modify the width of the element horizontal can modify the height of the element vertical the height of the element can be modified, but the width of the element cannot be modified Inherit inherit the Resize property value of the parent element

Cancels the style of the element (becomes the default)--initial property value

P{color:blue;font-family: the song Body;}

P#text01{color:-moz-initial;color:initial;}

Note that this default is the default style for CSS, and the default style of the browser is invalidated.