CSS Webpage Design tips

Source: Internet
Author: User
1. CSS font attribute shorthand rules generally use CSS to set the font attributes as follows: font-weight: bold; font-style: italic; font-varient: Small-caps; font-size: 1em; line-Height: 1.5em; font-family: verdana, sans-serif; but they can also be written to one row: Font: bold italic small-caps 1em/1.5em verdana, sans-serif; really good! Only one note: this shorthand method takes effect only when both the font-size and font-family attributes are specified. Also, if you do not set font-weight, font-style, and font-varient, they will use the default value, which should be noted. 2. When two classes are used at the same time, only one class can be set for one element, but this does not mean that two classes cannot be used. In fact, you can: <P class = "text side">... </P> two classes of the P element are given at the same time, with an empty lattice in the middle. In this way, all the attributes of the text and side classes will be added to the P element. If the attributes of the two classes conflict, the subsequent settings take effect, that is, the attributes of the classes placed in the CSS file take effect. Supplement: for an ID, you cannot write <p id = "text side">... </P> You cannot write this statement. 3. the default value of CSS border can usually set the border color, width and style, such as: Border: 3px solid #000. The border is displayed as 3 pixels wide, black, and solid. However, you only need to specify the style here. If only the style is specified, the default value is used for other attributes. Generally, the default width of border is medium, which is generally 3 to 4 pixels. The default color is the text color. If this value is correct, you don't need to set that much. 4. CSS is used to print documents. Many websites have a version for printing, but it is not necessary because CSS can be used to set the printing style. That is to say, you can specify two CSS files for the page, one for screen display and the other for printing: <link type = "text/CSS" rel = "stylesheet" href = "stylesheet.css" Media = "screen"/> <link type = "text/CSS" rel = "stylesheet" href = "printstyle.css" Media = "print"/> 1st rows are displayed, the first row is printed. Pay attention to the media attributes. But what should I write in printed CSS? You can set it by designing common CSS. At the same time of design, you can set this CSS to display CSS to check its effect. Maybe you will use the "display: none" command to turn off some decorative images and then turn off some navigation buttons. For more information, see "Print differences. 5. We generally recommend that you use standard HTML to display text instead of images. This is fast and readable. However, if you want to use some special fonts, you can only use images. For example, if you want to use the entire selling icon, you can use this image: Code Many Web pages have navigation menus. when you enter a page, the corresponding menu items should be dimmed while other pages will be highlighted. To achieve this effect, you need to write Program You can also design each page by CSS. First, use the CSS class in the navigation code: <ul> <li> <a href = "#" class = "home"> Home </a> </LI> <li> <a href = "#" class = "About"> about us </a> </LI> <li> <a href = "#" class = "Contact"> Contact Us </a> </LI> </ul> specify an ID for the body of each page, the same name as the top class. For example, <body id = "Contact">. Then design CSS as follows: # home. home, # About. about, # About. about {commands for highlighted navigation go here} here, when the ID is set to home ,. home will work, that is, the navigation bar of the class set as home will display a special effect. This is also true for other pages.
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.