Detailed explanation of the differences between CSS basic style sheet classification and selector classification

1 . Style Sheet Cascading Style Sheet

css advantages:

• Separation of content and performance

• ## The performance of the web page is unified and easy to modify

• Rich The style makes the web page layout more flexible

• ## Reduce the amount of web page code, increase the browsing speed of the web page, and save network bandwidth

• Using CSS that is independent of the web page will help the web page be included in the search

  index

## Embed ID> External ID>Embedded
• class

  >External class>Embedded label>External label

# 1.1 Introduction method

Four types

## Inline style sheet

• import method, try not to use it! ! !

• 1.2 Introduction methodPriority

Inline>Internal>External>Import 1.3

The difference between link type and import type:

The tag belongs to XHTML, @import belongs to CSS2.1;

• ## Use the CSS of link The file is first loaded into the web page, and then compiled and displayed;

• Use the CSS file imported by @import, the client displays the HTML structure, and then loads the CSS file into In the web page;

• @import is unique to CSS2.1 and is invalid for browsers that are not compatible with CSS2.1;

• 2.

  Selector

2.1 Which selectors and their priorities

# ID Selector

#A

html document can only have one ID

Class selection Container . Can have multiple ## elements p

##Wildcard *

2.2 Priority of selector

## ID > CLASS > Element > *

3 . Basic styles (commonly used for text, pictures, lists)

background背景

    1.background-color  背景色  （16进制数  rgb  rgba  英文名）

    2.background-image 背景图

    3.background-size 背景大小 （像素、百分比）

    4.background-repeat  （repeat-x  repeat-y  no-repeat）

    5.background-position  (通过方向值来指定，通过百分比指定，通过确切的像素值指定)

    6.background-attachment  是否随着浏览器滚动，使用它图片会相对浏览器固定住（bg-position和bg-attachment不要一起使用）

    7.background复合属性  可以把之前的属性定义在这一个里面，【一般书写顺序：颜色、图片、是否重复、是否固定、位置】

colorColor

1. color Specifies the color of the text

2. ##opacity Sets the transparency of the element, 1 opaque 0 complete Transparent

##font font

1. ##font- style

   specifies the font style of the text (normal, italic)

2. font-variant

   specifies whether the text For small uppercase letters (works for English)

3. font-weight

   specifies the weight of the text ( has only two styles ) bold bold

font-size specifies the text font size
5. font-family

   Define text to use a certain font

Commonly used list of Chinese font-family http://www.php.cn/ xiazai/sucai/ziti

## font

Composite attribute General sequence: Font style, whether it is small caps, font thickness, font size, font

text text attribute

color, text-align, line-height

,

letter-spacing, vertical-align, text-indent,text-decoration ;##-----[vertical-align----->1. Commonly used for text box input, 2. Combined with {display：table-cell;} can be used to center the image vertically】

-----[valign----->Only applicable to table Cell, for examplethis is cell 】

##----- 【align-----> Applicable to

---

, for example:

---

right" width

="200" size="20" color="pink"/> ；

##　　　　

, for example: ·· ···· ；##　　　　, for example: The text is displayed relative to the top of the picture ; ##

The above is the detailed content of Detailed explanation of the differences between CSS basic style sheet classification and selector classification. For more information, please follow other related articles on the PHP Chinese website!