Based on the position of the CSS style table in the HTML file, the CSS file is divided into: Header CSS, subject CSS, external CSS
1. Write the header CSS Head
< Html >
< Head >
< Style Type = "Text/CSS" >
<! --
H3 { Color : Black ; Font-size : 35px ; Font-family : Simhei }
P { Background : Yellow ; Color : Red ; Font-family : }
-->
</ Style >
< Title > Compile the CSS file in the header </ Title >
</ Head >
< Body >
< H3 Align = "Center" > Compile the CSS file in the header </ H3 >
< HR >
< P >
Apply the internal style sheet method to add CSS in the header of the HTML file.
</ P >
</ Body >
</ Html >
2. Compile the CSS of the subject Body
< Html >
< Head >
< Title > Compile the main CSS file </ Title >
</ Head >
< Body >
< Center >
< H1 Style = "Color: green; font-size: 35px; font-family:" > Compile the main CSS file </ H1 >
</ Center >
< HR >
< P Style = "Background: cyan; color: red; font-size: 25px; font-family:" >
Add CSS in the Embedded Sample Table Method to the main body of the HTML file.
</ P >
</ Body >
</ Html >
3. Compile external CSS
(1). The method for linking an application to an external style sheet calls the externally defined CSS file in an HTML file.
CSS Code : <! CSS file code>
<Style type = "text/CSS">
<! --
H3 { Color : Black ; Font-size : 35px ; Font-family : Simhei }
P { Background : Orange ; Color : Blue ; Font-size : 25px ; Font-family : Shu }
-->
</Style>
HTML code: Html
< Html >
< Head >
< Title > Compile an external CSS file </ Title >
< Link REL = Stylesheet Type = "Text/CSS" Href = "Niuniu1.css" >
</ Head >
< Body >
< H3 Align = "Center" > Compile an external CSS file </ H3 >
< HR >
< P > The external CSS is called by linking an HTML file to an external style sheet. </ P >
</ Body >
</ Html >
(2) apply the method of importing an external style sheet to call the CSS file of the external definition in the HTML file
Font setting
Font-family: The font can define multiple fonts at a time.
Font-size: font size
Font-style: Font Style normal, italic, and oblique (normal, italic, and skew)
Font-weight: font bold normal, bold, bolder, lighter, number
Font-variant: font variant normal, small-caps (small uppercase letters in English)
Font: Set Font attributes in combination
The font attribute is a composite attribute that allows you to set multiple attributes for text at the same time.
Basic Syntax:
Font: font-family | font-size | font-style | font-weight | font-variant
For example, P {Font: italic bold small-caps 15pt/18pt ;} must be separated by spaces.
Instance: Code
< Html >
< Head >
< Title > Font setting example </ Title >
< Style Type = "Text/CSS" >
<! --
H3 { Font-family : Simhei ; Font-size : 25px ; Font-weight : Bolder }
. P1 { Font : Italic Samll-caps 15pt/20pt ; }
-->
</ Style >
</ Head >
< Body >
< Center >
< H3 > Basic CSS concepts </ H3 >
</ Center >
< HR >
CSS (Cascading Style Sheet) is a Cascading Style Sheet. < BR >
< P Class = P1 > CSS (Cascading Style Sheet) is a Cascading Style Sheet. </ P >
</ Body >
</ Html >