Demo.html
<HTML>My.css
. Style {/* width */width: 400px;/* must have a semicolon */height: 300px; Background-color: Silver; Border: 1px solid red; margin-left: 400px; margin-top: 250px; padding-top: 20px; padding-left: 40px ;}To unify the format of one to five columns, you only need to modify the name of the class.
Demo2.html
<HTML> <! -- In the CSS section, you can write a single file and then reference it, you can also embed it directly into an HTML file --> <LINK rel = "stylesheet" type = "text/CSS" href = "demo2.css"/> <body> <! -- Generally used to store small pieces of content --> <SPAN class = "S1"> Topic 1 </span> <SPAN class = "S1"> Topic 2 </span> <SPAN class = "S1"> Topic 3 </span> <SPAN class = "S1"> Topic 4 </span> <SPAN class = "S1"> Topic 5 </span> </ body>Demo2.css
/* S1 class selector */. s1 {color: Blue; font-size: 30px; font-style: italic; text-Decoration: underline ;}. s2 {color: yellow; font-size: 12px ;}. s3 {color: Blue; font-style: italic ;}. s4 {color: green; font-weight: bold ;}. s5 {color: # f89582 ;}How to embed CSS directly in HTML and apply filter effects to images.
<HTML>Class selector format:
. Class selector name {
Attribute name: attribute value;
......
}
Id Selector
# ID {
Attribute name: attribute value;
......
}
HTML Selector
HTML element {
Attribute name: attribute value;
......
}
The wildcard selector (represented by an asterisk) Acts on all HTML elements, but has the lowest priority.
*{
Attribute name: attribute value;
......
}
Four selector priority levels:
Id selector> class selector> HTML selector> wildcard Selector
Select.css
. S1 {background-color: pink; font-weight: bold; font-size: 30px; color: black;}/* ID */# id1 {background-color: Silver; font-size: 40px; color: black;}/* HTML selector */body {color: orange ;}Select.html
<HTML> <LINK rel = "stylesheet" type = "text/CSS" href = "select.css"> <body> hello, Beijing. <SPAN class = "S1"> News 1 </span> <SPAN class = "S1"> News 2 </span> <SPAN class = "S1"> News 3 </ span> <SPAN class = "S1"> News 4 </span> <br/> <span id = "id1"> This is a very important news. </span> </body>The priority of the HTML selector is lower than that of the class selector and ID selector.
If two different paragraphs require different formats, but the same elements are used <p> </P>
Use the p. Class Name in CSS to differentiate, and use the class = "Class Name" in HTML to reference the format.
p.cls1{color:blue;font-size:30px;}p.cls2{color:red;font-size:20px;}<p class = "cls1">hellow world</p><p class = "cls2">hello world</p>Parent and Child selector:
1. There can be multiple levels (in practice, no more than three levels are allowed)
2 parent-child selectors have strict hierarchical relationships
CSS
/* Parent-child selector */# id1 span {color: red; font-style: italic;} # id1 span {color: green;} # id1 span a {color: blue ;}Html
<Span id = "id1"> This Is A <span> very <span> heavy <a href = "http://www.baidu.com"> link to Baidu </a> </span> to </span>/ news of span> </span> <br/>
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
