The Book of CSS3 study notes

One. Browser prefix

e{    -moz-name:value;      /* Firefox */    -ms-name:value;       /* IE */    -o-name:value;        /* Opera */    -webkit-name:value;   /* WebKit */    Name:value;           /* adapt to future standard way */}

Two. Media Enquiry 1.3 Ways to use media queries

1. Head section

   <link href= "Css.css" rel= "stylesheet" media= "mediatype and (expr)"/>

2. First line of CSS file

   @import url ("CSS.CSS") mediatype and (expr);

3. Style rule interior

   @media mediatype and (expr) {/    * styles */}

Value of 2.mediaType

Only all (meaningless, not plus), screen and print are widely supported by browser vendors, and the optional values are:

• Braille: Braille

• Embossed: Braille Printing

• Handheld: Handheld device, not very useful

• Projection: Projection Equipment

• Speech: Speech

• TTY: A device that displays a wide range of fonts, such as a telex typewriter

• TV: Television

So count the first three widely supported, a total of 10 optional values

Value of 3.expr

The most commonly used are min-[device-]width and max-[device-]width, for example:

@media screen and (min-width:800px) {/    * apply this style when the browser window width >=800px */}/*  * General cutoff value: * 480px below ~ Mobile Browser * 800px above ~ table Face browser * 480px to 800px ~ Browser on tablet */

In addition to other properties such as orientation direction, device-aspect-radio aspect ratio, device-pixel-radio like silverhalide, and more, see front-end observation: Media type and media query

4. Constructing Complex expressions

Complex expressions can be constructed with and and only

• (EXPR1) and (EXPR2): With

• Only (expr): Used to hide style sheets for devices that do not support media query but support media type, see Blog Park: Media queries details

• MediaType1 (), MediaType2 (): Or

5. Support

[ie9+] supports the CSS3 standard, but for non-standard properties, such as DEVICE-PIXEL-RATIO,IE11 are only partially supported, more support differences see can I use

Three. Using Network fonts

The safest way to introduce fonts:

@font-face {    font-family: "Font";    Src:url ("Font.eot");    Src:local (""),/   * Note that the quotation marks wrap a space, or it can be another single character */          URL ("Font.woff") format ("Woff"),          url ("Font.ttf") format (" TrueType "),          url (" Font.svg#font ") format (" SVG ");}

There are similar ways to see fontspring

With the easy-to-use @font-face generator , you can go to font format and generate CSS code, see Fontsquirrel

Four. Text effect 1. Stereo effect

Mainly implemented with the Text-shadow property, [ie10+] support, the syntax is as follows:

Text-shadow:xoffset yoffset Blur-radius color;

Specific code:

. shadow1 {    Text-shadow:         0-2px 3px #fff,        0-4px 3px #aaa,        0-6px 6px #666,        0-8px 9px #000;}. Shadow2 {    color: #fff;    Text-shadow:         0 2px rgba (0, 0, 0, 0.4),        0 4px rgba (0, 0, 0, 0.4),        0 6px rgba (0, 0, 0, 0.4),        0 8px 0 Rgba ( 0, 0, 0, 0.4);}. shadow3 {    background-color: #565656;    Color: #333;    text-shadow:0 1px 0 #777, 0-1px 0 #000;}

Example:

Shadow1: Breeze Shadow2: Breeze shadow3: Breeze

P.S. Super Large font stereo effect is better, small shadow effect can not see clearly

2. Control text Overflow

Text-overflow:clip/ellipsis ~ truncation/ellipsis (...) ), for example:

p {/    * to display ellipses on one line, the following 3 attributes are integral */    text-overflow:ellipsis;    White-space:nowrap;    Overflow:hidden;}

Support: [ie8+] Support

3. Control Long Word Wrap

Word-wrap:normal/break-word ~ Do not wrap, will top broken container/wrap

Support: [ie6+] All support, of course, only valid for English words, Chinese is invalid

Five. Border Style

1. Border-radius:[ie9+] Support

2. Border-image: The effect is very attractive, [ie11+] support, although can be reluctantly supported by the JQ plugin, but the effect is very reluctant, more information please see Zhang Xin Xu Blog: CSS3 border-image detailed, application and jquery plug-ins

3. Box-shadow:[ie9+] Support, for specific usage see W3SCHOOL:CSS3 Box-shadow properties

Six. Transparency

1. opacity:0.0–1.0; [ie9+] Support, IE8 partial support

2. Color:rgba (R, G, B, a); [ie9+] Support

Seven. Gradients

Linear gradient/radial gradient, [ie10+] support, for specific usage see Css-tricks

Eight. Transformations, transitions, animations

There are several very similar attributes, the differences are as follows:

• Transform: Transform. 2d/3d transform, pan, rotate, tilt, zoom

• Translate: panning. Sub-properties of the transform

• Transition: Transition. Triggered by events, such as hover, active, and so on

• Animation: Animation. Define keyframes, and then apply animations with animation

These things can be used to achieve common cool effects, such as:

1. Transitions allow simple animations to be smooth, such as when the link text "floats" to the right, the div width slowly increases to the specified value, etc.

2. 3D transform can display the back, such as mouse access, the image rollover effect

3. Transform can achieve the ribbon effect, such as the common upper right diagonal Fork me on githup, the implementation please see the blog Park: Add "Fork me on Github" Ribbon to your blog

Nine. Flex layout

There is a very powerful complete tutorial: front-end development blog: CSS3 Elastic box Model Flexbox full version tutorial

10. Online Resources

• Can I use:[ie8+] and other browsers for CSS/HTML5 attribute support

• MODERNIZR: Detection of the browser to HTML5 and CSS3 features support JS Library, elegant downgrade is the choice

• Code Generation Tools:

  • Css3please: Auto-populate browser prefixes and test CSS3 effects online

  • CSS Gradient Generator: Quickly create gradients

• Free fonts: Fontsquirrel: Lots of English fonts that can be downloaded for free

• CSS3 Tutorials/Documentation: CSS3 Info, Foreign forum, article updated slowly, seems to be a bit of a decline

• CSS3 new technology: MDN, source free login Download

Resources

• The Book of CSS3

• Some of the seniors ' posts

The Book of CSS3 study notes