Where can I find beautiful pages? -CSS, beautiful page? -CSS

Source: Internet
Author: User

Where can I find beautiful pages? -CSS, beautiful page? -CSS

Where does a beautiful page come from?CSSClever style Configuration!

CSSFeatures: separation of webpage content and styles

  1. Select the content marked by the selector in Html to display the content according to the style in CSS.
  2. How to Apply CSS styles to webpage content
    1. Intra-row style
    1. Embedded Style
    1. Introduction Method: html file box css files are successfully separated
      1. Link: when the client browses Your webpage, it first loads the external CSS file into the webpage and then compiles and displays it. In this case, the displayed webpage is the same as we expected.
      1. Import: when the client browses the webpage, it first presents the html structure and then loads the external CSS file into the webpage. Of course, the final effect is the same as that of the former, however, when the network speed is slow, an html webpage with no CSS uniform layout is displayed first.
        1. Comparison of advantages and disadvantages: Import styles can avoid too many pages pointing to a css file. When there are not many pages using the same CSS file on the website, these two methods have almost no difference in effect, however, when the number of pages of a website reaches a certain level (such as Sina portal), the speed may decrease because multiple pages call the same CSS file, however, websites with pages that can reach this level will also have the best hard disks for capital use, so there is no need to worry about these factors.
  1. Basic CSS Selector
    1. Tag Selector
      1. <H1>
    1. CATEGORY Selector
      1. Class
    1. ID Selector
      1. ID
    1. Selector priority: ID selector> class selector> HTML Tag Selector

 

  1. Compound Selector
    1. Intersection Selector
    2. Union Selector
    3. Descendant Selector

 

  1. Box Model
    1. Margin: margin
    2. Border: Border
    3. Padding: padding
      1. There are four attributes: left, right, bottom, and top.
      2. When setting four attribute values:

 

 

  1. Box Positioning
    1. Static: Default Layout mode (the box is laid out according to the standard stream including floating mode)
    1. Relative: relative positioning, so that the box is offset from the specified distance in the original standard position. Other boxes still treat it as standard streams
    1. Absolute: absolute positioning. The position of the box is offset based on its contained box. The positioning of other boxes is as if the box does not exist.
    2. Fixed: Positioning Based on browser windows

CSSThere are still many things we need to learn, which need to be further explored in the future.


I am working on a webpage. How can I use CSS to view the page? CSS should be introduced from the outside.

We recommend that you first make the webpage and then make it as needed. It takes a lot of time to design and implement it. I just want to change it.
External import adds a <link rel = "stylesheet" href = "xx/xx.css" type = "text/css" to the Then, in the css file, you can reference html elements such as a, div, and img in the source file, or. xxx (class) or # xx (element id) to define the style. We recommend that you use tools such as dreamweaver and read some css books.

The compatibility between css and browsers has always been a headache. How can we make webpages beautiful, no matter in which browser ??

Different browsers have different problems!
In practice, we need to gradually sum up the result. For example, we have set float and then set margin-left: 10px. In this way, in IE6, double distance is sometimes generated and 20 PX is generated. There are many layers that cannot adapt to the height under FF. You need to add an overflow or add clear: both to the parent layer ......
You must do this yourself and practice it before you can really understand it and remember it.

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.