Home > Article > Web Front-end > Web front-end basics 1--CSS_html/css_WEB-ITnose
Web front-end basics 1--CSS_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:47:411033browse
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
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
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn