CSS knowledge summary (1)

1.Get to know CSS

　1. What is CSS?

　CSS (Cascading Style Sheet)

　 It is a markup language used to control the style of web pages and allows the separation of style information from web content.

Since CSS properties or rules have not yet become part of the W3C standard and are browser private properties, different browsers may require different prefixes.

prefix	Browser
-webkit	chrome and safari
-moz	firefox
-ms	IE
-o	opera

　2. What can CSS do?

　Using CSS can effectively layout the page.

　Using CSS styles can accurately describe page fonts, colors, backgrounds and other effects, while modifying and controlling them becomes faster.

　CSS can control all web page styles on the site using a CSS file. As long as the corresponding code in this CSS file is modified, all pages of the entire site will change accordingly.

　CSS can support a variety of devices, such as mobile phones, PDAs, printers, TVs, game consoles, etc.

　 *Purpose: Separate performance from structure to facilitate later maintenance.

　

　3.CSS syntax structure

　 CSS syntax consists of three parts: selector, property and value

　selector {property:value;}

　Attributes are the style attributes you want to set. Each attribute has a value. The attributes and values ​​are separated by colons ":"

　Each selector can have multiple attribute values, separated by semicolons ";"

　For example:

<span style="color: #800000;"><style type="text/css">
    body </span>{<span style="color: #ff0000;">background-color</span>:<span style="color: #0000ff;">#ccc</span>;}<span style="color: #800000;">
</style></span>

　4. How to introduce CSS?

　There are 3 ways to apply CSS to web pages (inline style sheets, internal style sheets, external style sheets)

　a. Inline style sheet (located inside the html element)

　 Inline style refers to writing CSS style encoding directly in the style attribute in the HTML tag,

　 *Note: Inline styles do not require a selector.

　For example:

<span style="color: #0000ff;"><</span><span style="color: #800000;">body </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="background-color:#ccc;"</span><span style="color: #0000ff;">></span>

　b. Internal style sheet (located inside the tag)

　　The internal style is a separate part of the page, located in the tag by the