I. Use CSS
1. Why use CSS: Unified website Style
CSSS Syntax:
Selector {
Attribute 1: attribute value;
Attribute 2: attribute value;
}
Dome1.html file:
<HTML>
<Head>
<LINK rel = "stylesheet" type = "text/CSS" href = "demo1.css">
</Head>
<Body>
<! -- The span element is used to store a small piece of content -->
<SPAN class = "css1"> Title 1 </span> <br/>
<SPAN class = "css2"> Title 2 </span> <br/>
<SPAN class = "css3"> Title 3 </span> <br/>
<SPAN class = "css4"> Title 4 </span> <br/>
<SPAN class = "css5"> Title 5 </span> <br/>
<Br/>
</Body>
</Html>
CSS file:
. Css1 {
Font-size: 14px;
Color: red;
}
. Css2 {
Font-size: 20px;
Color: green;
Font-style: italic;
}
. Css3 {
Font-size: 30px;
Color: Silver;
Font-weight: bold;
}
. Css4 {
Font-size: 25px;
Color: yellow;
Text-Decoration: underline;
}
. Css5 {
Font-size: 20px;
Background-color: blue;
}
Effect:
2. Apply filter effects to CSS:
CodeAs follows:
<HTML>
<Head>
<Title> CSS Filter effect and use of CSS internal links </title>
<! -- The style label pair is used for the internal link of CSS. It can only be valid for this page. -->
<Style type = "text/CSS">
/* Here, pseudo classes are used to demonstrate the effects in the moving process */
A: link IMG {/* A: Link: sets the style of an object before it is accessed. */
Filter: Gray;
}
A: hover IMG {/* A: hover: Set the style of an object when it is hovering over it. */
Filter :"";
}
</Style>
</Head>
<Body>
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
</Body>
</Html>
2. Commonly Used 4 middle Selector
1. class selector)
Basic usage
. Class selector {
Attribute name: attribute value;
.........
} Example:
. Style1 {
/* The CSS file is annotated using this definition */
Width: 400px;
Height: 350px;/* pay special attention to the number of semicolons. Be sure to write a semicolon. If it is missing, there will be a problem */
Border: 1px solid red;
Background-color: Silver;
Margin-left: 100px;
Margin-top: 50px;
Padding-top: 20px;
Padding-left: 30px;
}
2. ID Selector
Basic usage
# ID selector {
Attribute name: attribute value;
.........
}
For example:
# Mid {
Font-size: 12px;
Color: red;
}
3. HTML element Selector
Usage
HTML element {
Attribute name: attribute value;
.........
}
For example
P {
Background-color: red;
Font-size: 14px;
}
Table {
Border: 1 solid;
}
Tip: HTML element Style Classification: The content displayed in two P tags is different. Let's take a look at how it is implemented (note that it is marked with a red font )?
<HTML>
<Head>
<Title> different processing methods for two P elements using the HTML selector </title>
<! -- The style label pair is used for the internal link of CSS. It can only be valid for this page. -->
<Style type = "text/CSS">
P. Num{
Font-size: 14px;
Color: red;
Text-Decoration: underline;
}
P. num1{
Font-size: 16px;
Color: green;
}
</Style>
</Head>
<Body>
<P class = "num">He said that the Chongqing Municipal Party committee has a clear attitude towards this matter and the Measures are resolute, that is, to handle affairs in accordance with the law </P>
<P class = "num1">He stressed that for cadres involved in indecent videos, they should conduct in-depth investigations, take the facts as the basis, take the law as the criterion, and handle according to the law and the final handling results, relevant departments will announce the announcement to the outside world in due time </P>
</Body>
</Html>
:
4. wildcard Selector
This selector can use allHtmlElement,But it has the lowest priority
Priority:IDSelector> ClassSelector> HtmlSelector>Wildcard Filter
CSSFiles can be used in various files(Such as HTML,PHP,...)
*{
Attribute name: attribute value;
.........................
}
Tip: keep the body content centered on the webpage:
Body {
Border: 1px solid red;
Width: 500px;/* set the height and width as needed */
Height: 500px;
Margin: 0px auto;
}
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
