Web front-end basics 1--CSS_html/css_WEB-ITnose

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

CSS writing method:
1. Inline style: written within the tag;
2. Inline style: written within the tag;
3. Link Style: Use in the tag;
4. Import style: Use the @Import attribute to import Multiple CSS files;

CSS priority: proximity principle Inline style> Inline style> Link style> Import style


CSS selector:
1. Tag selector: Example p{background:#900;} Set the background color of all p tags in the page to red;
2. ID selector: Example #nvg{background:#900; } Set the background color of the label with id nvg in the page to red;
3. Class selector: Example.nvg{background:#900;} Set the background color of the label with class nvg in the page to red;
4. Universal selector: Example *{background:#900} Set the background color of all tags in the page to red;

Supplement:
1. Tags can belong to multiple categories, example: < div class="one two three">Multiple classes

2. Use commas to separate multiple tags, for example: body,div,p,a,ul,li{margin:0; padding:0}
3. Selectors can be nested, for example: #div1 p a{color:#900;} Change the text color of the link a tag in the p tag with the ID to red

CSS selector related optimization:
There is the following code in a certain CSS file:
#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 it 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 parts are defined together, which helps to maintain a unified style and facilitate modification.


CSS selector naming:
1. Camel nomenclature, a name that combines multiple words, the first letter of the first word is lowercase, and the first letter of the subsequent words is lowercase. Capital letters, for example: #navMenuRedButton
2. Pascal nomenclature, the first letters of all words are capitalized, for example: #NavMenuRedButton
3. Hungarian nomenclature, words used to distinguish the same group of tags are written in front for easy identification , Example: #red_navMenuButton

1 and 2 are two commonly used ones

Common naming of page modules:
Header: header
Content: content/container
Tail: footer
Navigation: nav
Sidebar: sidebar
Column: column
Page peripheral control overall layout width: wrapper
Left right center: left right center
Login bar :loginbar
logo:logo
advertisement:banner
page body:main
hotspot:hot
news: news
download:download
subnav:subnav
menu ：menu
Submenu: submenu
Search: search
Friendly link: friendlink
Footer: footer
Copyright: copyright
Scroll: scroll
Tips: tips