CSS3 Basics -1 Css Overview, style sheet usage, syntax specification

I. Overview of CSS

CSS Overview

-CSS Role

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/7D/C6/wKiom1bvmryBEoSoAAC-lkRG4Lg151.png "title=" Web.png "alt=" Wkiom1bvmrybeosoaac-lkrg4lg151.png "/>

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/7D/C6/wKiom1bvmtrzZAgBAAGA3AFpBBA674.png "title=" Web.png "alt=" Wkiom1bvmtrzzagbaaga3afpbba674.png "/>

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M00/7D/C6/wKiom1bvmv-wwz4BAADtsI6BAzY932.png "title=" Web.png "alt=" Wkiom1bvmv-wwz4baadtsi6bazy932.png "/>

CSS Concepts

-CSS (cascading style Sheets): Cascading style sheets, also called Cascading style sheets, short style sheets

-style definitions for elements in an HTML document

-Enables separation of content from performance

-Improve code reusability and maintainability

The relationship between CSS and HTML

-HTML to construct the structure of the Web page

-CSS style for building HTML elements

-HTML is the content of the page, CSS is the performance of the page

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M01/7D/C6/wKiom1bvmx3RO_AaAADdoQULyd4563.png "title=" Web.png "alt=" Wkiom1bvmx3ro_aaaaddoqulyd4563.png "/>

The use principle of HTML attributes and CSS styles

-We recommend using CSS styles instead of HTML attributes as much as possible

-If the attribute is unique to HTML, the HTML attribute is used

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M00/7D/C6/wKiom1bvmzaDC50yAADqa1KbXl0456.png "title=" Web.png "alt=" Wkiom1bvmzadc50yaadqa1kbxl0456.png "/>

Second, the use of CSS style sheet

How to use CSS style sheets

-Inline mode

-style definition in a single HTML element

-Internal style sheet

-style defined in the header element of an HTML page

-External style sheet

-Define styles in an external CSS file (. css file)

-Referenced style sheet file by HTML page

Inline using CSS

-style definitions in the standard properties of HTML elements in the style

-CSS syntax

-just one or more attribute/value pairs separated by semicolons as the value of the style property of the element

-Between the attributes and the value of the attribute: Connect

-Multiple pairs of attributes used;

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/7D/C2/wKioL1bvm-bhk-8GAACEPTlQ0qY241.png "title=" Web.png "alt=" Wkiol1bvm-bhk-8gaaceptlq0qy241.png "/>

Internal style sheet

-The style sheet rule is within the <style> element in the document header element

-Add <style> elements within document

-Add a style rule to the <style> element

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/7D/C6/wKiom1bvm8Sx4DCoAACysU78H_g242.png "title=" Web.png "alt=" Wkiom1bvm8sx4dcoaacysu78h_g242.png "/>

-Add a style rule to the <style> element

-Multiple style rules can be defined

-Each style rule has two parts: selector and style declaration

-Selectors: Decide which elements use these rules

-style declaration: A pair of curly braces that contains one or more property/value pairs

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M00/7D/C2/wKioL1bvnIbzcMOBAAC29MuVoD0443.png "title=" Web.png "alt=" Wkiol1bvnibzcmobaac29muvod0443.png "/>

External style sheet

-First step: Create a separate style sheet file to hold style rules

-a plain text file with a file suffix of. css

-only style rules can be included in this file

-style rules are made up of selectors and style declarations

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/7D/C2/wKioL1bvnJ-ShgHyAAB1TTJcYsA508.png "title=" Web.png "alt=" Wkiol1bvnj-shghyaab1ttjcysa508.png "/>

-Step Two: Use the external style sheet file that is required for the <link> element link on the page where you want to use the style sheet file

-Add <link> elements within the

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/7D/C2/wKioL1bvnN2TN05wAAC4q7EtAO8463.png "title=" Web.png "alt=" Wkiol1bvnn2tn05waac4q7etao8463.png "/>

Third, CSS syntax specification

Summary of CSS Syntax specification

-Inline style: composed of style declarations

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M02/7D/C6/wKiom1bvnISgX55nAABaWv0RJ_c845.png "title=" Web.png "alt=" Wkiom1bvnisgx55naabawv0rj_c845.png "/>

-style sheet (internal style sheet or external style sheet)

-consists of multiple style rules

-Each style rule has two parts: selector and style declaration

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M00/7D/C2/wKioL1bvnP-hwQ55AADKdYK5L0Q097.png "title=" Web.png "alt=" Wkiol1bvnp-hwq55aadkdyk5l0q097.png "/>

CSS Style sheet Features

-Inheritance

-most CSS style rules can be inherited

-Stacking Sex

-Multiple styles can be defined

-When not in conflict, styles in multiple style sheets can be stacked as one

-Priority level

-styles are applied according to the precedence of different style rules when the style definition conflicts

Precedence of CSS Styles

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/7D/C2/wKioL1bvnTvwP42hAADl17PlFmU650.png "title=" Web.png "alt=" Wkiol1bvntvwp42haadl17plfmu650.png "/>

!important rules

-!important can adjust the precedence of style rules

-Add!important after the style rule, separated by a space

-Selector {property: Property value!important;}

-Use with caution

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/7D/C2/wKioL1bvnVTTibZfAACjqYQ2gLI240.png "title=" Web.png "alt=" Wkiol1bvnvttibzfaacjqyq2gli240.png "/>

Summary: This chapter mainly introduces the CSS overview, style sheet usage, syntax specification.

This article from the "Technical Exchange" blog, declined reprint!

CSS3 Basics -1 Css Overview, style sheet usage, syntax specification