You can already make simple Web pages by learning HTML, but trying to make a complex web page is not limited to the language of HTML. By learning CSS can greatly improve the efficiency and make beautiful web pages .
What is a style sheet?
Cascading style sheet (English: Cascading style Sheets, abbreviated CSS)is a computer language used to format documents and add Styles .
The style sheet is divided into:
1. External style sheet
Add <link> tag to the head element link to CSS stylesheet <link rel= "stylesheet" type= "Text/css" href= "Css1.css"/>. CSS files can be edited in any text editor and will be
The suffix name can be changed to CSS. In Dreamweaver, the new-file option in the upper-left corner creates the CSS file directly.
2. Internal style sheet
An internal style sheet is the use of <style> to put the complete style sheet in the . An internal style sheet is used when a single document needs to use a special style. An internal style sheet applies a style to the entire document.
<style type= "Text/css" > Body {Background-color:aliceblue} </style> |
3. Inline style
Adding a style attribute to a label is an inline style that changes the properties of individual elements and is not recommended.
<p style= "color:red" > |
Second, the advantages of CSS overlay style sheet
1. Web pages using CSS are easier to maintain later , you only need to modify the CSS content, the content of the entire site will be updated.
2. Content and performance separation , the Web page frame (HTML) and the appearance of the Web page (CSS) separated.
3. The use of CSS to achieve a responsive design , so that the Web page for mobile phones, ipads, game consoles and other electronic devices.
4. The use of CSS can significantly reduce the amount of code in the page , read speed, reduce space footprint.
Iii. examples
HTML file:
| <!doctype html> <meta charset= "Utf-8" > <title> website! </title> <link rel= "stylesheet" type= "Text/css" href= "Css1.css"/> <body> <div class= "logo" > the first website </div> <div class= "Theme" > <div name= "IMG1" > </div> <div class= "Login" > account <input type= "text" name= "USNA" > <br/> Password <input type= "password" name= "password" > </div> </div> <div name= "Question" > <form action= "form.php" > 1 plus 1 equals how many? <p><input type= "Radio" name= "Answer" value= "A1" Checked>1<input type= "Radio" name= "Answer" value= "A2" >2</p> <input type= "Submit" value= "submitted" > </form> </div> <div> <a href= "video.html" target= "_blank" > Video playback </a> </div> </body> |
CSS file
| @charset "Utf-8"; |
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
