The third edition of CSS3 tips covers HTML5 study notes 9 ~ Chapter 12, css3html5

The third edition of CSS3 tips covers HTML5 study notes 9 ~ Chapter 12, css3html5
Chapter 2: Restrict Access To decorative website navigation. In terms of privacy, the browser has begun to restrict the CSS attributes that can be applied to the pseudo class: visited. This includes defining styles such as color, background-color, and border-color for accessed links (unless you have defined the colors, background colors, and border colors for the normal status of those links) for the <a> label, you can set styles for all different access states, but to make the styles valid, you must specify links in a specific order: link, visited, hover, activeCSS3 button generator: http: // css3button. example of netCSS3 buttons: Success. Method 1 to remove spaces: Put the last </li> and the next <li> in the same line. However, the code is not written in this way.

<ul>   <li><a href="#">one</a></li><li>   <a href="#">two</a></li><li>   <a href="#">three</a></li></ul>

Effect:

Remove spaces Method 2: add the right margin with a negative value to the project list. However, different text lengths make this value different and you need to experiment with it.

    <style type="text/css">        li {            display: inline-block;            border: 1px solid #999;            margin-right: -9px;        }    </style>

Effect:

Use floating 1 for horizontal navigation bar, floating list item 2, add display: block3 for Link, define style for Link 4, add a width 5, and add overflow in <ul> label style: hidden's help in creating a navigation bar turns a normal list into an extraordinary navigation element: CSS Sprites ), you can use an image to create different button states. 1. Use the image editing software to create images with different button versions. 2. Measure the distance from the top of the entire image to the top of each image. 3. create a CSS style 4. Create: hover style defines a style for a special link type using the attribute selector a [href ^ = 'HTTP: // '] Chapter 10th. The transform, transition, and animation attributes of CSS transform (deformation) CSS3 introduces several attributes that can be transformed for web page elements, such as rotating, scaling, moving, or twisting (diagonal switching) IE9 along its horizontal or vertical direction, safari, Chrome, Firefox, and Opera Support 2D transformations. IE8 and earlier are not supported. transform must use the vendor prefix transform function: 1. rotate (rotate)

. TestClass {transform: rotate (20deg);/* provides a 0 ~ Degrees of 360, clockwise rotation of positive values, negative values counterclockwise */}

2. scale)

. TestClass {transform: scale (2);/* accept a single parameter: Zoom In or out, 0 ~ The number between 1 is reduced, the number greater than 1 is enlarged, and the negative number will reverse the element to scale */transform: scale (x, y);/* accept two parameters: the first one indicates horizontal scaling, and the second one indicates Vertical Scaling * // * single-direction Scaling: */transform: scaleX (num);/* zooming along the X axis */transform: scaleY (num);/* scale along the Y axis */}

3. The translate function of the translate (translation) transform function only moves an element from its existing position to the left, right, and up or down to a certain distance. The translate function has two values: the first specifies the horizontal distance (positive to right, negative to left), the second specifies the vertical distance (positive to downward, negative to upward) can also be used in a single direction: translateX horizontal direction, pixel, em, and percentage values 4 and skew can be used in the vertical direction of translateY)

. TestClass {transform: skew (45deg, 0);/* the first one is skewed along the X axis (a positive number is skewed to the left <from the top of the element along the clockwise direction>, and a negative number is shifted to the right ), * // * the second one is skewed along the Y axis (positive numbers go down to the right <clockwise from the right side of the element> and negative numbers go down to the left). This is not enough understanding and cannot be understood */}

Multiple Functions are shared:

.testClass{    transform:skew(45deg,0deg) scale(.5) translate(400px,500px) rotate(90deg);}

The application sequence of these functions is the order in which the browser applies these effects. 5. The origin is generally a transformation point relative to the center of the element, but CSS3 allows the transform-origin attribute to be used to change this point, like the background-position attribute, you can provide the keyword, the absolute value of pixel, and the relative value of em and percentage. transform-origin: left top; transform-origin: 0 0; transform-origin: 0% 0%; transform-origin: right bottom ==> transform-origin: 100% 100% first horizontal, Second vertical 3D deformation, CSS3 also provides a more complex transformation type: the 3D transform transition is actually within a certain period of time, the animation display process for converting a set of CSS attributes to another set of attributes. To make the transition take effect, you need to do the following:
1. Two styles: one start, one end, and two transition attributes. Newly Added CSS3 to make animation a secret. Usually applied to the style at the beginning. 3. Trigger browsers cannot simulate all CSS attributes in the form of animations, but there are still many options. For details, see www.w3.org/tr/css3-transitions/?animatable-properties=transition.

.navButton{     background-color:orange;     transition-property:background-color;     transition-duration:1s;}.navButton:hover{     background-color:blue;}

Transition-property is used to define the attributes to be displayed in an animation. One or more attributes can be specified, or the all keyword can be used. Transition-duration is used to define how long the animation ends. The unit of transition-duration can be seconds or milliseconds :. 5 s, transition-duration: Ms you can also define the time limit for each attribute to be animated:

.testClass{    transition-property:color,background-color,border-color;    transition-duration:.5s,.75s,2s;}

Time and attribute are one-to-one correspondence. Note: The supplier prefix must be provided, and the IE supplier prefix is not required. IE9 and earlier are not supported, IE10 supports the prefix version to control the animation speed for the transition scheduled transition-timing-function attribute. It does not control the animation duration, but the speed during the animation. You can use keywords: linear, internal, internal-in, external-out, and external-in-out. The browser uses the internal method by default. You can also use the cubic-bezr value. Bezr curve.

.testClass{     transition-timing-function:cubic-bezier(.20,.96,.74,.07);}

You can use the online tool to create and test different timing functions. Mathew Lein's Ceasar tool is one of them: http://matthewlein.com/ceaser/time extension to start transitionuse transition-delay.pdf to stop starting an animation. Vendor Prefix:

.testClass{    -webkit-transition-delay: .5s;    -moz-transition-delay: .5s;    -o-transition-delay: .5s;    -ms-transition-delay: .5s;    transition-delay: .5s;}

When you use the CSS drop-down menu, If you accidentally move the mouse away from the menu, the drop-down menu will soon disappear. You can use the following method:
Add: transition-delay: 5S in the initial style; Add: transition-delay: 0 in the: hover style; this is just unreasonable Note: When js modifies the CSS attribute, the transition will also be started.The transition shortcut uses the transition attribute. You only need to list attributes, delay time, and timing functions, and separate them with spaces.

.testClass{    transition:all 1s ease-in .4s;}

You can also separate multiple definitions by commas:

.testClass{    transition:color 1s,background-color .5s 1s;}

You must provide the supplier prefix "animation" to create an animation. 1. Define an animation, including creating a key frame, that is, listing the CSS attributes of the animation to be created. 2. Apply the animation to the element, key frames can be defined for any number of elements.

@keyframes animationName{    from{        /*  list   CSS   properties   here   */    }    to{        /*   list   CSS    properties   here   */    }}

@ Keyframes is not a CSS attribute. It should be called an at rule. Other CSS at rules also include @ import. @ media can also define multiple key frames using multiple percentages:

@keyframes backgroundGlow{    from{        backgorund-color:yellow;    }    50%{        background-color:blue;    }    to{        background-color:red;    }}

The above indicates that the blue background will appear when the animation reaches 50%. You can use 0% instead of the from keyword, and 100% instead of the to keyword. You can also set this as follows:

@keyframes glow{    from{        backgorund-color:yellow;    }    25%,75%{        background-color:blue;    }    to{        background-color:red;    }}

It indicates that the animation is between 25%-75%, and the blue background must be displayed continuously:

@keyframes glow{    from{        backgorund-color:yellow;    }    20%,60%{        background-color:blue;    }    40%,80%{        background-color:orange;    }    to{        background-color:red;    }}

It indicates that blue is displayed in 20%, orange is displayed in 40%, blue is displayed in 60%, orange is displayed in 80%, and CSS3 animation is skipped. A major disadvantage is that a specific vendor prefix is required:

@-webkit-keyframes fadeIn{    from{        opacity:0;    }    to{        opacity:1;    }}@-moz-keyframes fadeIn{    from{        opacity:0;    }    to{        opacity:1;    }}@-o-keyframes fadeIn{    from{        opacity:0;    }    to{        opacity:1;    }}@keyframes fadeIn{    from{        opacity:0;    }    to{        opacity:1;    }}

Note: IE is not required, and IE9 and earlier versions are not supported. IE10 supports the application of animation without a supplier prefix, which can be used to add animations to any style of the element or to apply animations to pseudo-classes, js changes will also start the animation. 1. Use the @ keyframes rule to create a fade-in animation:

@keyframes fadeIn{    from{    opacity: 0;    }    to{    opacity: 1;    }}

2. Apply the animation to the <div> label style:

. Announcement {animation-name: fadeIn;/* set the animation name, */animation-duration: 1 s created earlier;/* set the animation time from start to end */}

You can also add non-animation attributes to the style in the animation-name, and the animation-duration also requires the supplier prefix to the animation to regularly use the animation-duration timing. You can define multiple attributes like transition, as long as they are separated by commas. Use the animation-timing-function to control the entire animation or a specific key frame. You can use the Cubic bezr curve or keywords, the keywords are the same as those of the transition-timing-function (linear, semi, semi-in, semi-out, and semi-in-out). Multiple key frames are defined, you can also apply different functions between key frames:

@keyframes growAndGlow{    from{        background-color: yellow;        animation-timing-function: cubic-bezier(1, .3, 1, .115);    }    50%{        transform:scale(1.5);        background-color:blue;        animation-timing-function: linear;    }    to{        transform:scale(3);        background-color: red;    }}

You can also use the delayed start function: animation-delay can set the wait time, which is the same as the transition-delay attribute. You can use animation-iteration-count to set the number of times the animation is run. Infinite can be used for unlimited times. In order to enable an animation to run ahead of an odd number of times and run in reverse direction for an even number of times, the animation-direction attribute and the keyword alternate can be used. To restore an animation to its initial state after running, you can use an even number of iterations and set animation-direction to alternate. You can use animation-fill-mode: forwards; the animation is fixed at the end of the animation to prevent the web browser from suddenly changing the element back to the initial State at the end of the animation using the animation shortcut.

.fade{    animation-name: fadeOut;    animation-duration: 2s;    animation-timing-function: ease-in-out;    animation-iteration-count: 2;    animation-direction: alternate;    animation-delay: 5s;    animation-fill-mode: forwards;}

Rewrite:

.fade{    animation : fadeOut 2s ease-in-out 2 alternate 5s forwards;}

Only names and durations are required. Others are optional. You only need to use commas to separate multiple animations.

.fade{    animation : fadeOut 2s ease-in-out 2 alternate 5s forwards，                glow 5s;}

The actual application must also specify the vendor Prefix:

.fade{    -webkit-animation : fadeOut 2s ease-in-out 2 alternate 5s forwards，                        glow 5s;    -moz-animation : fadeOut 2s ease-in-out 2 alternate 5s forwards，                     glow 5s;    -o-animation : fadeOut 2s ease-in-out 2 alternate 5s forwards，                   glow 5s;    animation : fadeOut 2s ease-in-out 2 alternate 5s forwards，                glow 5s;}

Pause the animation to use the animation-play-state attribute. Only two keywords are accepted: running and paused. to pause, you only need to do this: animation-play-state: paused;, when CSS is used, there is only one way to apply it, that is, pseudo classes. In Chapter 11th, table and form formatting uses text-align and vertical-align to adjust vertical align and horizontal align to accept four values: left, right, center, and justify, can inherit vertical-align accept: top, baseline, middle, bottom four values, not inherit, top: Push the content to the top of the table unit; middle: center the content; bottom: push the bottom edge of the content to the bottom of the cell. baseline is similar to top, but it cannot be seen that baseline is useful. When you set a border in the <table> label, the border is added only to the table and not to the cell. When you set a border for the cell, A gap is left between cells to control the space between table cells. CSS provides the border-spacing attribute to control the gaps between table cells. Even if the gap is eliminated, the border of the table cell is changed to a double border. Use the border-collapse attribute to accept two values: reset ate (default display mode), collapse (eliminate unit interval and border). Note: If you set border-collapse to collapse, border-spacing will not work with rounded corners. Using border-radius, you can add rounded corners to table cells (rather than the table itself. You can also apply the box-shadow attribute to tables and table units. You can use the nth-of-type selector to add different styles to the odd and even rows of the table. Note: The browser usually displays the border and background color of the blank table unit. To hide it, you can use empty-cells: hide:

table{     empty-cells:hide;}

However, if border-collapse is set to collapse, the browser ignores the empty-cells attribute and displays the blank cell border and background color to define the style HTML form elements 1 and fieldset for the form, <fieldset> tags are used to set related form issues 2. legend. The <legend> tag is after the HTML code of the <fieldset> tag, it provides a label 3, text fields (text field) 4, buttons (button) for a group of fields, form button: Submit, reset or other actions 5, drop-down menus (drop-down menu), <select> 6, checkbox (check box) and radio button (single choice button) Part 3-CSS page layout chapter 12th, CSS layout Description: webpage layout Type 1. fixed width. For details, see www.alistapart.com, www.espn.go.com, and www. nytimes. com2, stream layout, see http://maps.google.c Om3. The Responsive Web Desin (RWD) HTML5 partition element <article> label is used to form a self-contained structure, such as a blog article. <Header> tags are used to provide titles, navigation targets, and other introductory materials for webpages or webpage partitions. <footer> tags are used to include the copyright statement, website founder's name, webpage release date, and so on. CSS layout method most web pages adopt the float attribute of CSS for layout strategy 1. Starting with content 2. Mobile First (Mobile devices are preferred) 3. First Design Sketch Yahoo offers a free stencel Kit (http://developer.yahoo.com/ypatterns/wireframes ), you can use it in Illustrator, Visio, OmniGraffle, and other graphic processing software to create Web sketch 4. Find box 5. Adapt to page stream 6. Remember the use of background images 7. Small in the puzzle part 8: Use of Element Design layers 9, margin, and padding