Web Front-end basics 1--CSS and web Front-end css

Web Front-end basics 1--CSS and web Front-end css

W3C standard:
1. Structure standard (xHTML)
2. Action Standards (JavaScript)
3. Performance Standard (CSS)

CSS syntax:
1. Intra-row style: Writing in the label;
2. Embedded style: write in the 3. link style: Use <link rel = "stylesheet" type = "text/css" href = "link address"/> In the 4. Import style: You can use the @ Import attribute to Import multiple CSS files;

CSS priority: nearby rule in-line style> embedded style> link style> Import Style


CSS selector:
1. Tag selector: for example, p {background: #900;} sets the background color of all p tags on the page to red;
2. ID selector: for example, # nvg {background: #900;}. Set the background color of the tag whose id is nvg to red;
3. class selector: for example,. nvg {background: #900;}. Set the background color of the tag whose class is nvg to red;
4. General selector: for example * {background: #900}, set the background color of all labels on the page to red;

Supplement:
1. Labels can belong to multiple classes. For example, <div class = "one two three"> multiple classes </div>
2. Use commas to separate multiple tags, such as body, div, p, a, ul, li {margin: 0; padding: 0}
3. the selector can be nested. For example, # div1 p a {color: #900;} indicates that the text color of the link a label in the p label with the ID of div1 is red.

CSS selector optimization:
A css file contains the following code:
# Header {font-size: 14px; background: # ccc ;}
Div {font-size: 14px; width: 960px ;}
. Blue {font-size: 14px; color: #009 ;}
. H1 {font-size: 14px; font-weight: normal ;}
Extract the same part: fount-size: 14px
# Header, div,. blue,. h1 {fount: 14px ;}
# Header {background: # ccc ;}
Div {width: 960px ;}
. Blue {color: #009 ;}
. H1 {font-weight: normal ;}
The same part is defined in a centralized manner, which helps maintain a unified style and facilitate modification.


CSS selector Name:
1. Camel naming method: name of a combination of multiple words. The first letter of the first word is lowercase, and the first letter of the next word is uppercase. For example: # navMenuRedButton
2. Pascal's naming method. The first letter of all words is capitalized, for example: # NavMenuRedButton
3. The Hungarian naming method is used to distinguish words in the same group of tags from the previous one, which is easy to recognize. For example: # red_navMenuButton

1 and 2 are commonly used

Common names of page modules:
Header: header
Content: content/container
End: footer
Navigation: nav
Sidebar: sidebar
Column: column
Overall Layout width of the page peripheral control: wrapper
Left right center
Logon entry: loginbar
Logo: logo
Advertisement: banner
Page subject: main
Hotspot: hot
News: news
Download: download
Subnavigation: subnav
Menu: menu
Sub menu: submenu
Search: search
Link: friendlink
Footer: footer
Copyright: copyright
Scroll: scroll
Tips: tips