The third edition of CSS3 tips covers HTML5 Study Notes 6 ~ Chapter 8, css3html5

The third edition of CSS3 tips covers HTML5 Study Notes 6 ~ Chapter 8, css3html5
Part 2 ---- chapter 6th of CSS practical technology, specifying the alternative font for Text Formatting: font-family: Arial, Helvetica, sans-serif; when the visitor does not install the first font, the browser continues searching in the list until the backup font is found. If the font name contains multiple words, you must enclose them with double quotation marks font-family: "Times New Roman", Times, serif; sans-serif font looks clean and concise, so it is often used for titles. Sans-serif fonts include Arial, Helvetica, and Verdana. Note: Your aesthetic is a good guide. Monospaced fonts monospaced (equal width) fonts are often used to display computer code. Other fonts include Arial Black, Arial Narrow, and Impact. Note: there is only one form of Arial Black and Impact fonts without italics, when using these fonts, you must set font-weight and font-style to normal. Otherwise, the browser will try to figure out what the text should look like. There are many Web font commands. It is very simple to add the CSS part of the Web font later. You only need two commands:
1. The @ font-face command informs the browser of the font name and where to download it. 2. @ font-family defines the Web font, the Font Squirrel, which is the same as the installed Font, provides an easy-to-use online tool to generate the desired Font format:

@font-face{
     font-family:"League Gothic";
     src:url('fonts/League_Gothic-webfont.ttf');
}

Three methods for setting the text size with CSS: keyword, percentage, and emCSS provide seven types of keyword: xx-small (9px), x-small (10px), and small (13px), medium, large (18px), x-large (24px), xx-large (32px), when the browser baseline font size has not been adjusted, the keyword is basically equal to the font size in the brackets. Format words and letters in italic bold font-style: italic; italic font-style: normal; non-italic font-style: oblique; italic font-weight: bole; bold font-weight: normal; non-Bold capital text-transform: uppercase; capital text-transform: lowercase; lowercase text-transform: capitalize; uppercase text-tr Ansform: none; small uppercase/lowercase font-variant: small-caps; uppercase letters, but the size is the same as that of lowercase letters. text-decoration --> underline, overline, line-through, blink, none letter spacing, and word spacing letter-spacing: letter spacing, positive increase, negative number reduction word-spacing: word spacing, positive number increase, negative number reduction text shadow text-shadow --> horizontal offset (left or right from the text), vertical offset (from the top or bottom of the text), shadow blur, shadow color text-shadow:-4px 4px 3px #999; the first-4px indicates that the shadow is placed at 4px on the left side of the text (positive number indicates that the shadow is placed on the right side), and the second 4px indicates that the shadow is placed at 4px below the text (negative value indicates the top ), the third 3px defines the shadow blur. 0px is completely non-blurred, resulting in a clear shadow. The larger the value, the larger the modulus. Paste. The fourth value indicates that the color can define multiple shadows. Use commas (,) to separate text-shadow:-4px 4px 3px #999, 1px-1px 2px #888; format the line-height of a paragraph, which can be expressed by pixel, em, and percentage. You can also use numbers to indicate the height of the row spacing by percentage. The percentage is not inherited, the calculated value is inherited. If the webpage font size is set to 10px and the row height is 150%, all labels inherit the 15 PX Row Height instead of 150%. If you change the font size, the text will be messy. Using numbers will make all tags use the same basic proportion. Align text-align --> left, right, justify, center first line indent and remove margin text-indent (text indent), margin (margin) text-indent can also use percentage, however, it is not based on the font size, but on the width of the element containing the paragraph. Margin controls the distance between paragraphs. You can also use percentages. However, unlike text-indent, You Can format the first letter of a paragraph or the first line using the pseudo element: first-letter (first letter) and: first-line (first line), technically speaking, these are not CSS attributes, but a selector that determines which part of a CSS attribute is used for a paragraph. For details about the list style list type, see Chapter 11-15 of the eighth learning notes in HTML5 and CSS3 basic tutorial, chapter 1 (1) disc (solid dot) (2) circle (hollow circle) (3) square (solid square) (4) decimal (number 1, 2 ,...) (5) decimal-leading-zero (numbers 01, 02, 03... There are leading 0, compared with HTML5 and CSS3 basic tutorial version 8 learning notes 11-15 chapter added) (6) upper-alhpa (uppercase letters A, B ,...) (7) lower-alpha (lowercase letters a, B ,...) (8) upper-roman (uppercase roman numerals I, II, III ...) (9) lower-roman (lowercase roman numerals I, ii, iii ...) You can use list-style-type control. Assign the project symbol and project serial number the position where the list-style-position Control item symbol is used. It can be displayed outside the text (list-style-position: outside;) or in the text (list-style-position: inside ;) you can use the padding-left attribute to adjust the distance between the project symbol and its text. When using this attribute, you must create a style that is applied to the <li> label, this method is only effective when list-style-position is set to outside. Free icons and project symbols on the Network are: www.cssjuice.com/38-free-icon-checkpoints/

.testClass {
     list-style-image: url (image / bullet.gif); / * No need to include the path with quotes * /
}

Chapter 2: margin, padding, and border for browsers, any tag is a box model containing something. For details, see Chapter 11-15 of the eighth edition of HTML5 and CSS3 basic tutorials, chapter 2 padding refers to the space between the content and the border line. border refers to the straight line background-color around the box to fill the internal space of the border, the margin includes the padding area, which refers to the interval between one tag and another. When padding uses percentage, the browser calculates the amount of space based on the width of the peripheral element. Margin conflict when the bottom margin of an element hits the top margin of another element, the browser will apply a larger value between them instead of adding the two values. For example, the bottom margin of an unordered list is 20px, and the top margin of a section connected to the list is 30px. the browser uses 30px to separate the paragraphs, instead of 50px rows, block-level boxes, and other display settings, the browser cannot set top/bottom margin and top/bottom padding to use the display attribute to change the element box display: inline; enables block-level elements to display: block in the row; enables display of block-level elements in the row to have several options. Most of the options do not work in all browsers, the inline-block value effectively adds borders to the current browser. border uses three attributes for control: color (color), width (width), and style (style) to set borders in all directions, you can also set a single up border separately. You can also use border-top, border-bottom, border-right, and border-left to set a single up attribute separately. For example: border-top-color, border-top-width, and border-top-style have similar attributes and can also set single attributes in multiple directions, for example, border-color: green yellow red blue. The other two attributes have similar usage to set the background color.

.testClass{
    background-color:rgb(109,218,63);
}

Create a rounded corner using the border-radius attribute CSS3 allows you to design a rounded corner for any element. Make sure that the element has a background color or border. Otherwise, no rounded corner border-radius is visible: 0 30px 10px 5px; top left corner of the first value, top right corner of the second value, bottom right corner of the third value, and border-radius in the lower left corner of the fourth value can also accept one value, two values, three values, the accepted value is used as the radius, and the circle is drawn at the corresponding angle of the element. You can also create an elliptical angle: border-radius: 20px/40px. The first one is the radius from the center of the trajectory to the left or right, the second is the distance from the trajectory center point to the top or bottom. You can also mix the rounded corner and the elliptical corner. You can also set it separately: border-top-left-redius: 10px. Note: IE8 and earlier do not support the border-radius attribute. The Safari3.2 and Android Browser2.1 of iOS must provide the vendor prefix-webkit- Supplier prefix1.-webkit-: For Chrome, Safari, and other WebKit-based browsers 2.-moz-: for Mozilla Firefox3,-o-: For Opera4,-ms -: for IE to add shadow box-shadow any modern browser supports, including IE9, only the shadow drawn is smaller than other browsers, IE8 and earlier versions will completely ignore box-shadow: -4px 6px 8px #999; the first value indicates the horizontal offset. The positive value shadow shifts to the right, the negative value shadow shifts to the left, and the second value indicates the vertical offset. The positive value shadow is below and the negative value is above, the third is the shadow radius, which determines the Blur and width of the Shadow. The value 0 is not blurred at all. The larger the value, the blurrier and wider it is. The fourth is the color value, and the grba value looks better. Box-shadow includes two optional values: inset keyword and shadow size (spead ). Inset tells the browser to draw the shadow in the box. You can also add a shadow size as 4th values (between the shadow radius and the shadow color). You can set multiple shadows in the same way as text-shadow, the method is similar to text-shadow to determine the height and width. The percent value is based on the peripheral elements of the style. The box-sizing attribute provides the following three options to adjust the box-sizing attribute: 1. content-box is a method in which the browser defines the screen width and height of an element. This is the default action. You do not need to define any value for content-box. 2. padding-box tells the browser that when width or height is set in a style, it should contain padding as part of this value. For example, assume that the left/right padding of an element is 20px and the width is 100px. In fact, the width of the content area is only 60px3, and the border-box value contains the padding thickness and border thickness. Note: IE8 and later versions Support box-sizing. IE7 does not support overflow attribute control to control overflow visible. Generally, browsers use scroll to add a scroll bar. auto will be added whether or not they need it, just like scroll, however, hidden will only appear as needed, hiding any excess content height and width to maximize and minimize max-height, max-width, min-width, the minimum width is min-height, and the minimum height is surrounded by floating elements. The float attribute can be used to move the element to the left or right. The content below the element is moved to enclose the floating element. Three options: left, right, nonebackground-color, and border cannot float like other webpage elements. Suppose that an element is appended to the right, and the content below the sidebar should usually be moved up to enclose it. However, if the background or border is set for the content, the background or border will appear below the floating sidebar. You can add the overflow: Den den rule to the background or border below the floating element. The clear attribute indicates that the elements do not enclose floating items. Accept the following options: left, the style will fall below the left floating element, but the drop will surround the right floating object, the style will fall below the right floating element, however, it will still enclose the left floating element both, the style will fall below the floating style none, and close the clear, so that the project will enclose the Left and Right floating ELEMENT Chapter 8th, adding the background image background-image attribute to a webpage is essential to make the website look beautiful. The following three formats are available:

.testClass{
    background-image:url(image/example.gif);
    background-image:url("image/example.gif");
    background-image:url('image/example.gif');
}

You can use relative paths. relative paths are relative to those of the style sheet, instead of using the background-repeat attribute to specify how the image is tiled relative to the path control of the HTML page to be set. 1. repeat is the default setting. The background image is tiled from left to right and from top to bottom, until the entire space is filled. 2. no-repeat only displays the image once. 3. repeat-x repeats a certain image horizontally along the x axis. 4. repeat-y repeats a certain image vertically along the y axis. locate the background image's background-position attribute, you can use multiple methods to precisely control the image position. You can set it in three different ways, keyword, exact value, percentage keyword left, fight, center control horizontal top, center, bottom control vertical exact value you can use pixel or em value to locate the background image. Use two values: one value to specify the distance between the left side of the image and the left side of the container, and the other to specify the distance between the top side of the image and the top side of the style (the first to control the horizontal direction and the second to control the vertical direction) tip is required when the percentage value is expressed as a percentage. If you can use a keyword or an exact value to achieve the effect, we recommend that you do not use the same percentage to provide two values: one value indicates the horizontal orientation, A vertical positioning. The percentage value is the percentage of formatted elements and can be mixed with the exact value. The background-position: 5px 50%; Fixed image background-attachment attributes have two options: scroll and fixedbackground-origin and background-clip attributes. Background-originAttribute to adjust the image start point. There are three options: 1. border-box: place the image in the upper left corner of border. 2. padding-box: place the image in the upper left corner of the padding area. 3. content-box: place the image in the upper left corner of the content area, the background image is covered with the entire area of an element, including the back of the border and padding areas. Background-clipTo define the image display position. The following options are available: 1. Use border-box to display the image behind the content area, include the background image in the border area. 2. All background images in the padding-box area can only be displayed in the padding area and content area of the element. 3. content-box restricts that background images are only displayed in the content area. Zoom in the background image. CSS3 can also adjust the size of the background image, background-size attribute. You can set this size using values or keywords: 1. Set the image size with a height value and a width value.

.testClass {
     background-size: 100px 200px;
     background-size: 100px auto;
     background-size: 100% 100%; / * Use percentage values to make the image scale fully to the background * /
}

2. the keyword contain forces the image to adjust its size to keep its aspect ratio background-size: contain3. The keyword cover forces the image width or height to be adjusted, to adapt to the width or height of the element, background-size is the only way to modify the background image size. IE8 does not support background shortcuts and can use newer CSS background attributes. However, IE8 does not support some new attributes. If you use one background setting, other valid attributes become invalid, currently, no browser can process both the background-position and background-size values in a declaration. Therefore, it is best to create a declaration using a normal and acceptable shortcut attribute, add a new attribute Declaration for CSS3 after the quick declaration. Free Image websiteWww.morguefile.com, www. sxc. hu, http://openphoto.net, http://search.creativecommons.org, www.flickr.com/creativecommons?http://picasaweb.google.com Project symbol or navigation bar coloring iconSome Random Dude provides a free set of icons: www.somerandomdude.com/work/sanscons/ Interesting tile PatternColourLovers.com website (www.colourlovers.com/patterns), Pattern4u website (www. kollermedia. at/pattern4u), Squidfingers website (http://squidfingers.com/patterns) Pattern GeneratorBgPatterns website (http://bgpatterns.com), StripeGenerator2.0 website (www.stripegenerator.com), PatternCooler website (www.patterncooler.com) use multiple background images

.testClass{
    background-image:url(scrollTop.jpg),
                     url(scrollBottom.jpg),
                     url(scrollMiddle.jpg);
}

You can put a row, but the format is best because the background is usually tiled. Therefore, you need to include a background-repeat attribute:

.testClass{
    background-repeat:no-repeat,
                      no-repeat,
                      repeat-y;
}

Values are all one-to-one, but it is too troublesome and confusing. Therefore, use the shortcut method:

.testClass{
    background:url(scrollTop.jpg) center top no-repeat,
               url(scrollBottom.jpg) center bottom no-repeat,
               url(scrollMiddle.jpg) center top repeat-y;
}

In IE8, the following pseudo classes can be used: before AND: after to implement the above functions. The following keywords are used for gradient background linear gradient:

.testClass {
     background-image: linear-gradient (left, black, white); / * Start with black on the left of the element, and end with white on the right of the element * /
     background-image: linear-gradient (top left, black, white); / * From the top left corner of the element to the bottom right corner of the element, black starts to end white.
}

You can also use the degree value: 0 ~ 360

Usage:

.testClass{
    background-image:linear-gradient(45deg,rgb(0,0,0),rgb(204,204,204));
}

You can add multiple colors to the gradient color:

.testClass{
    background-image:linear-gradient(45deg,black,white,black);
    background-image:linear-gradient(left,#900,#FC0 10%,#FC0 90%,#900);
}

10% applies to the second color, telling the browser that the color needs to reach the position where the element width is 10%. Similarly, 90% tells the browser that the color must remain orange until the element width is 90% and then change. Note: Many browsers need to provide a vendor prefix to use the new CSS attributes. IE9 and earlier versions do not support gradient. You can use not only percentages, but also pixel and em, however, pixel is more useful here for more flexible percentage repetition linear gradient. Define a gradient with the specified color station, and then repeat the pattern to tile it to the background.

.testClass{
    background-image:repeating-linear-gradient(bottom left,#900 20px,#FC0 30px,#900 40px);
}

Effect:

Great .... The simplest syntax for radial gradient:

.testClass {
     background-image: radial-gradient (red, blue); / * creates an ellipse that fits the height and width of the color, with the center of the gradient at the center of the element * /
}

You can also create a circular gradient by adding the keyword "circle:

.testClass{
    background-image:radial-gradient(circle,red,blue);
}

Generally, the browser draws the center of the radial gradient from the center of the element. However, you can use the same keywords and values as the background-position attribute to locate the gradient center.

.testClass {
     background-image: radial-gradient (20% 40%, circle, red, blue); / * Start from 20% to the left of the element and 40% above the element * /
}

To specify the gradient size, you can use one of the following four keywords: 1. closest-side tells the browser that the gradient extends from the center point to the side closest to the center point.

.testClass{
    background-image:radial-gradient(20% 40%,circle closest-side,red,blue);
}

2. closest-corner is used to measure the gradient width, which refers to the distance from its center point to the nearest element angle.

.testClass{
    background-image:radial-gradient(20% 40%,circle closest-corner,red,blue);
}

3. farthest-side is used to measure the circle radius, that is, the distance from its center to the farthest side of the element

.testClass{
    background-image:radial-gradient(20% 40%,circle farthest-side,red,blue);
}

4. farthest-corner is used to measure the circle radius, that is, the distance from the center of the circle to the farthest angle of the element.

.testClass{
    background-image:radial-gradient(20% 40%,circle farthest-corner,red,blue);
}

Same as linear gradient, color stations can be used, and suppliers must repeat radial gradient prefixes.

.testClass{
    background-image:repeating-radial-gradient(circle,red 20px,orange 30px,yellow 40px,red 50px);
}

Note: to create a natural gradient, the ending color should be the same as the starting color. Easily create a gradient with Colorzilla use the CSS gradient generator (www.colorzilla.com/gradient-editor/) to help easily create most types of gradient (except repeated gradient)