Home > Developer > Web Develop
Read Catalogue
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 to use CSSBefore 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><HTML><Head> <MetaCharSet= "Utf-8"></Head><Body><H1Align= "Center"> <FontColor= "Pink"size= "5">Days of sand and autumn thinking</Font></H1><PAlign= "Center"> <FontColor= "Pink"size= "5">The 50-chord, one-chord-one-pillar-si-hua year.</Font></P><PAlign= "Center"> <FontColor= "Pink"size= "5">Butterfly Dream Fan Butterfly, hope Emperor hath the cuckoo.</Font></P><PAlign= "Center"> <FontColor= "Pink"size= "5">The Pearl of the Sea Moon has tears, Lantian day warm jade smoke.</Font></P><PAlign= "Center"> <FontColor= "Pink"size= "5">This feeling can be recalled, but at that time has been disconsolate.</Font></P></Body></HTML>HTML Demo
The disadvantage of doing so is
#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 is no effect of # #, code coupling is high: HTML semantics and styles are coupled to the # #, Poor extensibility: When a certain type of style needs to be modified, We need to find all the settings for this style label to be modified
So CSS came into being and solved the above three problems well
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8"> <style>h1,p{Color:Pink;font-size:24px;text-align:Center; } </style></Head><Body><H1>Days of sand and autumn thinking</H1><P>The 50-chord, one-chord-one-pillar-si-hua year.</P><P>Butterfly Dream Fan Butterfly, hope Emperor hath the cuckoo.</P><P>The Pearl of the Sea Moon has tears, Lantian day warm jade smoke.</P><P>This feeling can be recalled, but at that time has been disconsolate.</P></Body></HTML>using CSS to implementThird, how to use CSS
1. How to use CSS CSS syntax
CSS syntax can be divided into two parts: #1, selector # #, declaration of declarations by attributes and values, multiple declarations separated by semicolons, as
2, how to use CSS CSS of the four ways to introduce
#1, inline <p style= "Color:red;font-size:50px;text-align:center" >egon is a very amazing person </p> #2, embedded#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">egon 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.detailed demonstrations in four different ways3. CSS Annotations
/* Contents of the comment in the middle */What is the front-end base-css?
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
