Introduction to CSS

A What is CSS

CSS full name cascading style Sheet cascading style sheet , which is dedicated to adding styles to HTML tags.

style refers to the appearance of HTML tags, such as line, width, color, etc.

cascading is one of the three main features of CSS, which we'll cover in the next section

table means that we can collect styles uniformly and write them in a place or a CSS file.

Second, why use CSS

Before we had CSS, we wanted to modify the style of the HTML tag by defining the style attributes for each HTML tag individually, as follows

　　

<! DOCTYPE html>"Utf-8"&GT;&LT;/HEAD&GT;&LT;BODY&GT;&LT;H1 align="Center"> <font color="Pink"Size="5"> Days of sand and autumn think </font>"Center"> <font color="Pink"Size="5"> 50 strings, one string, one pillar of the year. </font></p><p align="Center"> <font color="Pink"Size="5"> Butterfly Dream fan butterfly, Wang hath to the cuckoo. </font></p><p align="Center"> <font color="Pink"Size="5"> Pearl of the Moon has tears, Lantian day warm jade smoke. </font></p><p align="Center"> <font color="Pink"Size="5"> This situation can be recalled, but at that time has been disconsolate. </font></p></body>View Code
# 1, Memory difficulties: you need to remember all the style related properties of each tag, if the label does not have a style-related properties, then the setting has no effect # 2. High code coupling: HTML semantics and styles are coupled together # 3, poor extensibility: When a certain type of style needs to be modified, we need to find all the settings of the style tag to modify
So CSS came into being and solved the above three problems well
<! DOCTYPE html>"utf-8">    < Style>        h1,p {            color:pink;            Font-size:24px;            Text-align:center;        }     </style>
View CodeThree how to use CSS
1. How to use CSS CSS syntax
CSS syntax can be divided into two parts: # 1. Selector # 2. Declaration declaration consists of attributes and values, and multiple declarations are separated by semicolons, as
2, how to use CSS CSS of the four ways to introduce
#1. Inline Type<p style="Color:red;font-size:50px;text-align:center">sean is a very amazing person </p>#2. Embeddedp {color:red; Font-size:50px; Text-Align:center}</style>#3, the external style sheet import typeImport "Css/mystyle.css"; *///* Form two: */        @ImportUrl"Css/mystyle.css"); </style>#4, the external style sheet link (use this way in enterprise development)"stylesheet"href="Css/mystyle.css">
#1. Inline TypeInline is the CSS style that is set in the label's Style property. This approach does not reflect the advantages of CSS, is not recommended to use. <p style="Color:red;font-size:50px;text-align:center">sean is a very amazing person </p>#2. EmbeddedEmbedded is the CSS style set in the page The label pair. The format is as follows:<! DOCTYPE html>"Utf-8"> <style>p {color:red; Font-size:50px; Text-Align:center}</style>#Create a new external style sheet, and then use the imported and linked-in introductionFirst, in the same directory as the HTML file with a CSS folder, the folder under the new external style sheet MYSTYLE.CSS, the contents of P {color:red; Font-size:50px; Text-Align:center}#3. Import Type<! DOCTYPE html>"Utf-8"> <style>/* Form one: *//*@Import "Css/mystyle.css"; *///* Form two: */        @ImportUrl"Css/mystyle.css"); </style>#4, the link (recommended use)<! DOCTYPE html>"Utf-8"> <link rel="stylesheet"href="Css/mystyle.css">#the difference between the import and the linked type:1. <link/>The label is XHTML, @import is unique to CSS2.1, and is not valid for browsers that are incompatible with CSS2.1 .2, import the disadvantage: The import will be loaded in the entire Web page after loading the CSS file, so this leads to a problem, if the page is larger then appear before the page without style, flashing a bit, then appear the style of the page. This is inherent in the import of a flaw, the user experience is poor. 3, the advantages of linking: When using the link with the import type is that it will be loaded before the main page file loading CSS files, so the display of the page from the beginning is a style of effect, it does not appear as imported as the first page without style, and then display the style of the Web page, which is linked to the advantages. #!! Watch your point!!! 1. Style tag must be placed inside head, type="Text/css"CSS that represents the text type2, the Type property can actually not write, the default is Type="Text/css"3, the style must be set according to a fixed format, key:value; The last attribute can be omitted, but we can simply remember that we cannot omit it.
View Code
Introduction to CSS