Home > Web Front-end > CSS Tutorial > Detailed explanation of the differences between CSS basic style sheet classification and selector classification

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

高洛峰
Release: 2017-03-16 11:17:24
Original
1640 people have browsed it

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背景
Copy after login
    1.background-color  背景色  (16进制数  rgb  rgba  英文名)
Copy after login
    2.background-image 背景图
Copy after login
    3.background-size 背景大小 (像素、百分比)
Copy after login
    4.background-repeat  (repeat-x  repeat-y  no-repeat)
Copy after login
    5.background-position  (通过方向值来指定,通过百分比指定,通过确切的像素值指定)
Copy after login
    6.background-attachment  是否随着浏览器滚动,使用它图片会相对浏览器固定住(bg-position和bg-attachment不要一起使用)
Copy after login
    7.background复合属性  可以把之前的属性定义在这一个里面,【一般书写顺序:颜色、图片、是否重复、是否固定、位置】
Copy after login

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

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

    Define text to use a certain font

  6. Commonly used list of Chinese font-family //m.sbmmt.com/ 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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template