CSS classic application skills

xiaoxiao2021-03-23  199

1.CSS Font Shop When you use CSS to define fonts, you may do this: font-size: 1em; line-height: 1.5em; font-weight: bold; font-style: italic; font-variant: Small-Caps Font-Family: Verdana, Serif; in fact you can abide these properties: font: 1em / 1.5em Bold Italic Small-Caps Verdana, Serif now, but you have to pay attention: Use this shorthand, you are at least Specify Font-Size and Font-Family properties, other properties (such as font-weight, font-style, font-varient), if not specified will automatically use the default value. 2. Simultaneously use two class Class usually specify a class for the property, but this does not mean you can only specify one, in fact, how much can you specify, for example:

... This paragraph will simultaneously apply the rules set in both CLASS at the same time. If there is any rule overlap in the two, then the latter one will achieve the actual priority application. 3. The default value of Border Border (Border) When writing a border, you usually specify color, width, and style (any order). For example: Border: 3px solid # 000 (3 pixels wide black solid line border), in fact, the only value that needs to be specified in this example is just a style. If you specify the style as a solid line (SOLID), the rest of the value will use the default value: the default width is medium (equivalent to 3 to 4 pixels); the default color is the text color in the border. If this is the effect you want, you can do not specify in CSS. 4. Important will be ignored by IE in CSS, usually the final specified rule will get priority. However, in addition to the browser other than IE, any later marked statement will gain absolute priority, such as: margin-top: 3.5em! Important; margin-top: 2em All browsers other than IE The top boundary is 3.5EM, and IE is 2em, sometimes it is useful, especially when using the relative boundary value (like this example), you can display a subtle difference of IE and other browsers. (Many people may also pay attention to the CSS son selector is also ignored by IE) 5. Image replacement skills use standard HTML instead of pictures to display text is usually more sensible, in addition to speeding download and better availability . But if you are determined to use the font that may have no fonts in the machine, you can only choose the image.

For example, you want to use the "Buy Widget" title at the top of each page, but you also hope that this can be found in the search engine. For the beautiful view, you have used a rare font, then you have to use pictures to display

Buy widgets This is ok, but there is evidence that the search engine pays more attention to the real text (because There are already too many websites to use the ALT text to act as a keyword), so we have to use another method:

Buy widgets , what about your beautiful font? The following CSS can help: h1 {background: URL (widget-image.gif) No-repeat;} h1 span {position: absolute; left: -2000px;} Now you have used a beautiful picture and very good Hidden Real Text - The text is positioned at the left side of the screen - 2000 pixels by the CSS. 6. Another Choice of CSS Box Model HACK CSS Box Model HACK is used to resolve the IE6 browser display problem, IE6.0's version will contain the border value of an element to be included within the width (not Add on the width value). For example, you may use the following CSS to specify a size of a container: #Box {width: 100px; border: 5px; padding: 20px;} then apply in HTML:
... < / DIV> The total width of the box is 150 pixels in almost all browsers (100 pixel width two 5 pixels two 20 pixels filled), only 100 pixels in the browser in the previous version of IE6 (The frame value and the fill value are included in the width value), and the box model has been in order to solve this problem, but it will also bring trouble. The simpler approach is as follows: CSS: #box {width: 150px;} # box div {border: 5px; padding: 20px;} HTML:
... < / DIV> This will be 150 pixels in the total width of the box in any browser. 7. Cut the block element to assume your website to use the fixed width layout, all the contents are placed in the center of the screen, you can use the following CSS: #content {width: 700px; margin: 0 auto;} You can put HTML's body BODY Inside any item is placed in
, the item will automatically obtain equal left and right boundary values ​​to ensure that the center is displayed. However, this still has problems in the browser in IE6, will not be in place, so you must modify the following: body {text-align: center;} # content {text-align: left; width: 700px; margin: 0 Auto;} The settings for Body will result in the main content of the main content, but even all the words are also in, this is probably not the effect you want, and for this. #Content's DIV also specifies a value: Text-align: Left8. Using CSS to achieve vertical homogeneous, the table is a small dish, just specify the cell to be Vertical-Align: Middle, but this is in the CSS layout.

转载请注明原文地址:https://www.9cbs.com/read-130424.html

New Post(0)

CopyRight © 2020 All Rights Reserved
Processed: 0.093, SQL: 9