Project Review Summary 3: CSS introduction method, annotation, naming convention, background, line height, text attributes

Source: Internet
Author: User


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.



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.