Home > Developer > Web Develop
CSS is cascading style sheets abbreviation, Chinese called Cascading style sheet, used to control the performance of Web page data, can make the performance of the Web page and data content separation.
Four ways to introduce a CSS
1. In-line
Inline is a CSS style that is set in the Style property of the tag. This approach does not reflect the advantages of CSS, is not recommended to use.
2. Embedded
Embedded is a set of CSS styles that are written in the
<style type= "Text/css" >
... Write CSS style here
</style>
3. Import type
Introduce a standalone. css file into an HTML file, import using CSS rules to introduce external CSS files,<style> tags are also written in the
<style type= "Text/css" >
@import "Mystyle.css"; Note the path to the. css file here
</style>
4. Link-type
Also introduce a. css file into an HTML file <link href= "mystyle.css" rel= "stylesheet" type= "Text/css"/>
Attention:
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 a flaw inherent in the import. The use of the link is different from the import is that it will be loaded with the Web page file body before loading CSS files, so the displayed 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 the advantage of linking.
Selector for two CSS (Selector)
The selector indicates the object of the style in {}, which elements in the Web page the style acts on
1 Base selector:
*: Universal element Selector, matches any element * {margin:0; padding:0;}
E: Tag Selector, matching all elements using the E tag p {color:green;}
. info and E.info:class selectors that match all elements of the class attribute that contain info. info {background: #ff0;} P.info {background:blue;}
#info和E the #info ID selector, match all elements of the id attribute equal to footer #info {background: #ff0;} P#info {background: #ff0;}
2 Combo Selector
E,f a multi-element selector that matches all E or F elements, separated by commas between E and F div,p {color: #f00;}
E F descendant element selector, matching all F elements belonging to the descendants of e elements, separated by spaces between E and F #nav li {display:inline;} Li a {font-weight:bold;}
e > F child element Selector, matching all elements of e element F div > Strong {color: #f00;}
E + F adjoins the element selector, matching all sibling elements immediately following the E element F p + p {color: #f00;}
Note nested rules :
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Title</title> <style>. Div1>p{Background-color:Aqua;Color:Deeppink; }. Main2>div{Background-color:Blueviolet;Color:Chartreuse; } </style></Head><Body> <Divclass= "Div1">Hello1<Divclass= "Div2">Hello2<Div>Hello4</Div> <P>Hello5</P> </Div> <P>Hello3</P> </Div> <P>Hello6</P><HR> <Divclass= "Main2">1<Div>2<Div> </Div> </Div> <Div> </Div> </Div></Body></HTML>View Code
3 Property Selector
E[att] matches all e elements that have the ATT attribute, regardless of its value.
(Note: E can be omitted here, such as "[cheacked]". to the same. ) P[title] {color: #f00;}
E[att=val] match all att attributes equal to "Val" e element div[class= "error"] {color: #f00;}
E[att~=val] matches all ATT attributes with multiple space-delimited values, one with a value equal to "Val" for the e element td[class~= "name"] {color: #f00;}
E[att|=val] matches all ATT attributes with multiple hyphen delimited (hyphen-separated) values, one of the e elements with a value beginning with "Val", primarily for the lang attribute,
such as "en", "en-us", "EN-GB" and so on p[lang|=en] {color: #f00;}
E[attr^=val] matches the attribute value to specify the value at the beginning of each element div[class^= "test"]{background: #ffff00;}
E[attr$=val] matches the attribute value to specify each element at the end of the value div[class$= "test"]{background: #ffff00;}
E[attr*=val] matches each element of the attribute value that contains the specified value div[class*= "Test"]{background: #ffff00;}
p:before Insert content before the contents of each <p> element p:before{content:" Hello "; color:red}
P:after Insert content before each <p> element content p:after{contents: "Hello"; color:red}
4 Pseudo-Class selectors:
Pseudo-Class selector: Designed to control the display of links, pseudo-class selectors:
A:link (links that have not been contacted) are used to define the general state of the link.
A:hover (the state on which the mouse is placed on the link) for creating visual effects.
A:visited (visited links), used to read articles, can clearly judge the links that have been visited.
A:active (the state when the mouse is pressed on the link), which is used to show the link state when the mouse is pressed.
Pseudo-class selectors: pseudo-class refers to different states of a label:
A ==> state has no point over state mouse hover state activated state
a:link {color: #FF0000}/* Link not visited */
a:visited {color: #00FF00}/* Visited link */
a:hover {color: #FF00FF}/* Mouse over link */
a:active {color: #0000FF}/* Selected link */format: Tag: Pseudo-class name {CSS code;}
<styletype= "Text/css">A:link{Color:Red; }a:visited{Color:Blue; }a:hover{Color:Green; }a:active{Color:Yellow; }</style></Head><Body> <ahref= "01-hello-world.html">Hello-world</a></Body></HTML>View Code
CSS Introduction and Selector
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
