Home > Developer > Web Develop
| 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. |
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) */ |
| Use<! -- Comment content -->Comment For example:<Body> <! --<Div class = "wrap"> </div>--> </Body> |
| ①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. |
| 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. |
| 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. |
| 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 |
| 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
CSS font attributes
|
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
