CSS learning: compiling CSS files

Source: Internet
Author: User
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 >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.