Home > Developer > Web Develop
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.
1.2 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>View Code1.2.1 Disadvantages:
#1, Memory difficulties: you need to remember all the style-related properties of each tag, and if the label does not have a style-related property, then the setting is not effective
#2, code coupling is high: HTML semantics are coupled with styles
#3, poor extensibility: When a certain type of style needs to be modified, we need to find all the settings that have the style label modified
1.3 How to use CSS syntax for CSS1.3.1 using CSSCSS syntax can be divided into two parts:
#1, Selector
#2, Declaration
Declarations are made up of attributes and values, and multiple declarations are separated by semicolons, such as
1.3.2 How to use CSS CSS four ways to introduce1) in-line
<style= "color:red;font-size:50px; text-align:center"> is the one. </p>
2) Embedded
<Head> <MetaCharSet= "UTF-8"> <title>Title</title> <style>P{Color:Red;font-size:20px; } </style></Head>
3) Import of external style sheets
4) <head>
<Meta charset="UTF-8">
<title>title</title>
<style>
@import "File.css";
</Style>
</Head>
4) links to external style sheets (how enterprise development is used)
<Head> <MetaCharSet= "UTF-8"> <title>Title</title> <Linkrel= "stylesheet"href= "File.css"></Head>1.3.3 Explanation
#1, in-line
Inline 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.
<style= "Color:red;font-size:50px;text-align:center"> Egon is a very remarkable person </p>
#2, embedded
Embedded is a set of CSS styles that are written in the <style></style> tag pairs within the page
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8"> <style>P{Color:Red;font-size:50px;text-align:Center} </style></Head>
<body><p>egon is a very amazing person </p> </body>#新建外部样式表, and then use the imported and linked-in introduction
First, in the same directory as the HTML file with a CSS folder, the folder under the new external style sheet mystyle.css, the content is
p { color:red; font-size:50px; Text-align:center}#3, Import-
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8"> <style> /*form one:*/ /*@import "Css/mystyle.css";*/ /*form two:*/@import url ("Css/mystyle.css"); </style></Head><Body><P>Egon is a very remarkable man.</P></Body></HTML>#4, linked (recommended)
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8"> <Linkrel= "stylesheet"href= "Css/mystyle.css"></Head><Body><P>Egon is a very remarkable man.</P> </Body></HTML># The difference between an import and a link :
1, <link/> label is XHTML, @import belong to CSS2.1 unique, for incompatible CSS2.1 browser is invalid
2, the disadvantages of the import type:
The import will load the entire Web page after loading the CSS file, so this leads to a problem, if the page is larger then appear in the first page without style, flashing a bit, then appear the page style. This is inherent in the import of a flaw, the user experience is poor.
3, the advantages of link-type:
The use of the link is different from the import is that it will be loaded in the Web page file body before 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 page, which is linked to the advantages.
#！！！ Watch your point!!!
1, style tags must be placed in the head, type= "Text/css" for the text type of CSS
2, the type attribute can actually not write, the default is Type= "Text/css"
3, set the style must follow the fixed format to set, Key:value;
The last attribute can be omitted, but we can simply unify and remember
You can omit it.
Introduction to 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
