|
Directory:1. How to Write CSS comments? Benefits? 2. Advantages and Disadvantages of CSS introduction Methods 3. selector writing and Selector Priority 4. CSS Naming Convention 5. Background, line height 6, text (beginning with text and font) and other attributes |
① CSS annotation writing specifications: 1. Single line comment:Directly after the property value, such:①. Search {border: 1 pxsolid # fff;/* define the search input box border */background: url (.. /images/icon.gif) no-report #333;/* defines the background of the search box */} ②. wrap {/* height: 100px ;*/} 2. Multi-line comment: comment at the start and end, for example:①/********* Start ********/. search {border: 1 pxsolid # fff; background: url (.. /images/icon.gif) no-repeat #333 ;} /******** End of the search bar *********/② <style type = "text/css"> /*. tb {width: 300px; font-size: 12px; background: #6887D9; table-layout: fixed;} */</style> |
② CSS annotation writing advantages: 1. You can use annotations to quickly locate complex code pages and write styles efficiently, so that the Code levels are clear and modifications are more intuitive. 2. css annotation (css annotation) helps us describe the CSS files we have written, such as the description of the position, function, and style of a certain CSS code, this makes it easy for us to maintain the web pages in the future. At the same time, when the team develops webpages, reasonable and appropriate annotations help the team understand where css styles correspond to html, so as to develop webpages smoothly and quickly. |
Extension: Two annotation methods for JavaScript
Line comment |
// This is a line comment. Note that '//' is followed by a space. /* This is a comment */ |
Block comment |
/* * Comment in one line (* there is space behind it) * The comments must be two lines (* There is a space behind it) * The comments are separated by three lines (* spaces are retained) */ |
Extension: Comment Method of HTML Structure
Use<! -- Comment content -->Comment
For example:<Body> <! --<Div class = "wrap"> </div>--> </Body> |
Advantages and disadvantages of CSS introduction Methods
①External Introduction: It is the most widely used. A css file can control multiple pages. The whole site can reduce the number of codes, increase the loading speed, and facilitate maintenance.
②Header Introduction: It is usually used for websites or home pages with a large volume of traffic, but the whole site has a lot of code, which is not conducive to maintenance.
③Label write: Less used, the highest weight, more code, slow loading, not conducive to maintenance
④ @ Import:Similar to link, if @ import is used, place @ import at the beginning of the style code; otherwise, it will not work. Difference between link and @ inport:① @ Import url () mechanism is different from link Mechanism. link loads css before loading the page, while @ import url () is loaded after reading the file, so there will be a page with no css style at the beginning, flashing the page with the style (when the network speed is slow ). ② @ Import is in css2, so the old ie5 does not support it. ③ When using javascript to control dom to change the style, only link labels can be used, because @ import is not controllable by dom. ④ In addition to loading css, link can also define RSS and rel connection attributes. @ import can only load css. |
Extension: Three JS import methods
Selector syntax and Selector priority
Selector type:
① Tag name selector ② ID name selector ③ class selector ④ descendant Selector
⑤ Group selector ⑥ pseudo-class selector 7 attribute selector wildcard character generator child Selector
Selector priority:
① Priorities of different CSS import methods: label embedded style> header Writing Style> external reference style> browser default style. ② CSS selector priority: id> class> tagname. ③ Priority when multiple selectors are used in combination: example. a. B c {} And. a c {} point to the target c, but the priority of the former is higher than that of the latter.
Note:When the priorities of the same target selector are the same, the subsequent priorities are higher than the previous ones. When multiple class names are defined in the same tag, the priority of each class selector is not related to the class name arrangement in html, but to the class selector arrangement in css files. |
CSS naming rules
1. All rules are named in lowercase or hyphens. uppercase letters or _ 2. Naming should be simpler and more meaningful than Chinese pinyin. 3. Note the abbreviations for naming, but do not blindly name them. 4. names with numbers 1, 2, and 3 are not allowed. 5. Avoid duplicate class and id names 6. id is used to identify a parent container region of a module or page. The name must be unique and do not create an id at will. 7. class naming must be concise 8. In addition to Resetting the default style of the browser, do not add css style settings for html tags directly, for example, div {width: 200px; height: 100px ;} 9. Each rule should ensure that the selector is unique. Do not directly set attributes for global. nav/. header/. body and other classes. |
For details, refer to: lone Bing Hai-CSS coding specification.
Extension: JS naming rules
1. Case Sensitive 2. The first letter must be a letter, an underscore (_), or a dollar sign ($) 3. A character other than the first letter, which can contain letters, numbers, and underscores, dollar sign composition 4, cannot contain spaces |
Background, Row Height attribute
BackgroundAttribute: * Background-color * Background-position * Background-size * Background-repeat * Background-origin * Background-clip * Background-attachment * Background-image Newly Added attributes of CSS3: Background Syntax:[For details, refer to "blog background image merging knowledge".]Background-color: red | # RGB; Background-position: X axis coordinate Y axis coordinate | left | right | center | top .. Background-size: 100px | 30% | cover | contain;Online Testing Background-repeat: repeat | no-repeat | repeat-x | repeat-Y Background-origin: border | padding | content Background-clip: border-box | padding-box | content-box Background-attachment: fixed | scroll Background-image: url Abbreviated form:Background: color url () positon repeat; Note:If only one value is set for the attribute value of background-size, the second value is set"Auto". Cover:To extend the background image to a large enough size, so that the background image completely overwrites the background area. Contain:Extend the image size to the maximum size so that its width and height fully adapt to the content area.
Line-height:Set the line distance (line height ). Syntax: line-height: normal | <real number >|< length >|< percentage >| inherit Line Height and line spacing:
Line-height
|
CSS text attributes
Attribute |
Description |
Color |
Set text color |
Direction |
Set the text direction. |
Line-height |
Set the Row Height. |
Letter-spacing |
Set the Character spacing. |
Text-align |
Align the text in the element. |
Text-decoration |
Add modifier to text. |
Text-indent |
The first line of text in the indent element. |
Text-shadow |
Set text shadow. CSS2 contains this attribute, but CSS2.1 does not retain this attribute. |
Text-transform |
The letters in the control element. |
Unicode-bidi |
Set the text direction. |
White-space |
Set the blank Processing Method in the element. |
Word-spacing |
Set the padding. |
CSS font attributes
Attribute |
Description |
Font |
Attribute. The function is to set all font attributes in a declaration. |
Font-family |
Set the font family. |
Font-size |
Set the font size. |
Font-size-adjust |
When the preferred font is unavailable, intelligently scale the replaced font. (CSS2.1 deleted this attribute .) |
Font-stretch |
Horizontally stretch the font. (CSS2.1 deleted this attribute .) |
Font-style |
Set the font style. |
Font-variant |
Display text in small or normal font. |
Font-weight |
Set the font width. |
|