Css overview, css style table classification, selector classification, css basic style, css style table

Source: Internet
Author: User

Css overview, css style table classification, selector classification, css basic style, css style table
1.Style SheetAdvantages of Cascading Style Sheet css:

  • Separation of content and performance
  • Unified web page performance, easy to modify
  • Rich styles to make the webpage layout more flexible
  • Reduces Web Page code, increases web page browsing speed, and saves network bandwidth
  • The use of CSS independent from web pages helps websites to be indexed by search engines
  • Embedded ID> external ID> embedded class> external class> embedded tag> external tag
1.1 Introduction MethodFour Types
  • Style = "" intra-row style sheet
  • <Style> internal style sheet
  • <Link rel = "stylesheet" href = ""/> external style sheets (most used)
  • <Style> @ import "" </style> import method. Try not to use it !!!
1.2 Import mode priorityLine> internal> external> Import 1.3 What is the difference between link type and pilot type:
  • <Link/> the tag belongs to XHTML and @ import belongs to CSS2.1;
  • Use the <link/> link to first load the CSS file to the webpage, and then compile and display the file;
  • Use the CSS file imported by @ import to display the HTML structure on the client and then load the CSS file into the webpage;
  • @ Import is unique to CSS2.1 and is invalid for browsers that are not compatible with CSS2.1;
2. Selector2.1 which selector and its priority ID selector # An HTML document can have only one id class selector with the same name. you can have multiple element p wildcards * 2.2 selector priority ID> CLASS> element> * 3. Basic styles (commonly used in text, images, and lists)
Background
1. background-color background color (hexadecimal rgb rgba English name)
2. background-image background image
3. background-size background size (pixels and percentages)
    4.background-repeat  (repeat-x  repeat-y  no-repeat)
5. background-position (specified by the direction value, percentage, and exact pixel value)
6. Does the background-attachment scroll with the browser? The image with it will be fixed relative to the browser (bg-position and bg-attachment should not be used together)
7. The background compound attribute can be defined in this attribute ,【General writing sequence: color, image, repetition, fixation, and location]

 

Color

 

Font

Chinese font-family Common List http://www.cnblogs.com/jihua/p/cnfont.html

FontComposite attributes

General sequence: font style, whether it is a small font, font width, font size, font size

 

 Text attributes

Color, text-align, line-height, letter-spacing, vertical-align, text-indent, text-decoration;

----- [Vertical-align -----> 1. Commonly Used in text box input, 2. Combined with {display: table-cell;} can be used to vertically center an image]

----- [Valign -----> only applies to cells in the table. For example, <td valign = 'top' height = '100px '> this is cell </td>]

----- [Align -----> applicable to

<Table>, for example: <table border = "1" width = "300" align = "center">... </table>;

, for example, <span> text is displayed relative to the top of the image </span>;

;]

<------ Study notes. If any error occurs, thank you for your correction! ------->

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.