[Study Notes: CSS practice manual] 2. Create a style and style sheet

1. style profiling
A style consists of two parts: the Selector and the Declaration Block declarative Block ). The selector may be a large title, text, or a photo. The Declaration block turns the text blue and adds borders to paragraphs. For example:

Help

1234	p {    color: red;    font-size: 12px;}

 

• Selector: one or more elements for style setting
• Declaration Block: contains the formatting option to be applied by the selector. Starts with the left arc ({), ends with the right arc (}), and contains a declaration in the middle
• Declaration: Declares the formatting instruction contained in a block. It consists of an attribute and a value and ends with a semicolon.
• Property: A formatting option. A Property consists of one word or multiple words connected by a hyphen, indicating a specific style, such as font-size or color.
• Value: the specific Value of an attribute, including color, length, URL, and keyword. If there is a space in the value, it must be enclosed by quotation marks.
• CSS writing format: We recommend that you follow the example above to facilitate reading and modification. The declaration in the Declaration block is recommended to be written in the order recommended by Mozilla.

2. Understand Style Sheets
You can place styles inside or outside a webpage file or use them together.
Benefits of external style sheets: Independent files can be cached by the browser to make the web page open faster; style sets are easier to modify; change one, and other web pages that use this style are also modified simultaneously.

3. Internal Style Sheets
In the HTML <style> label, the <style> label is generally placed in the You can also use the style attribute of HTML to define the style in the tag. This style is called the intra-row style.

4. External Style Sheets
The file generally uses .css as the extension. A sample table of a web page can be divided into multiple files, such as a public Sample Table global.css and a single sample table form.css.
External style sheets only contain CSS declarations (attributes and values), but do not contain <style> because <style> is an HTML Tag.
You can use the <link> label or <style> label to introduce an external style table in HTML. <Link> the label format is as follows:

Help

1	<link rel="stylesheet"type="text/css" href="css/global.css" />

Specifically, rel is the link type, type is the data type (text file, including CSS), and href is the location of the CSS file, that is, the URL.
Use the <style> label to use the CSS import command internally. The format is as follows:

Help

123	<style type="text/css">@import url(css/global.css);</style>

In an external style sheet, you can also use the import command to introduce other external style sheet files.
The style of the internal style sheet is generally placed behind the referenced external style sheet.

5. Check CSS
W3C released an online detection and testing tool: http://jigsaw.w3.org/cssvalidaor/, firefox's javascriptconsole also has a prompt, and the HTML Validator plug-in can also be used for testing.

6. Clear the cache
The browser caches webpage images and external style sheet files. If the style does not work when writing an external style sheet, the browser may cache the corresponding files. The cleanup method is as follows:
Remove the cache from the browser settings, or press Ctrl + mouse to Reload or press the shortcut key (Ctrl + F5 under IE, firefox is Ctrl + Shift + R ).