Project review summary 3: CSS introduction method, comments, naming conventions, background, line height, text attributes_html/css_WEB-ITnose

目录： 1、CSS注释的书写 怎么写？好处？ 2、CSS引入方式  各种的优缺点 3、选择器的写法与选择器的优先级 4、CSS命名规范 5、背景，行高 6、文本(text与font开头)等所有属性

Directory:

① CSS注释书写规范：

1、单行注释：

   

   直接写在属性值的后面，如：

1. ① .search{  
2.     border:1pxsolid#fff;/*定义搜索输入框边框*/  
3.     background:url(../images/icon.gif)no-report#333;/*定义搜索框的背景*/  
4.   }  
6. ② .wrap {    /*height: 100px;*/   } 

2、多行注释：

     分别在开始的地方及结束的地方注释，如：

1. ①/********Start 搜索条开始********/  
2. .search{  
3.   border:1pxsolid#fff;  
4.   background:url(../images/icon.gif)no-repeat#333;  
5. }  
6. /********End 搜索条结束*********/  
7.  
8. ②

1. How to write CSS comments? benefit?

2. Various advantages and disadvantages of CSS introduction methods

② CSS注释书写好处：

1. 利用注释可以快速定位到复杂的代码页面中，可以高效的编写样式，使得代码层次清楚，修改更加直观。

2. css注解（css 注释）可以帮助我们对自己写的CSS文件进行说明，如说明某段CSS代码是什么地方、功能、样式等说明，以便我们以后维护具有一看即懂的方便性，同时在团队开发网页是时候合理适当的注解有利于团队看懂css样式是对应html哪里的，以便顺利快速开发网页。

3. Selector writing and selector priority

4. CSS naming convention

5. Background, line height

6. All attributes such as text (starting with text and font)

行注释	// 这是行注释，注意'//'后面有空格 /* 这是一段注释 */
块注释	/*                                 * 注释以一行（*后面记得有空格）       * 注释以二行（*后面记得有空格）       * 注释以三行（*后面记得有空格）       */

① CSS comment writing specifications: 1. Single-line comments: is written directly after the attribute value, such as:

1. ① .search{
2. border:1pxsolid#fff;/*Define the search input box border*/
3. background:url(../images/icon.gif)no-report #333;/*Define the background of the search box*/
4. }
6. ② .wrap { /*height: 100px;*/ }

2. Multi-line comments: Comment at the beginning and end respectively, such as:

1. ①/********Start Search bar starts*************/
2. .search{
3. border:1pxsolid#fff;
4. background:url(../ images/icon.gif)no-repeat#333;
5. }
6. /********End End of search bar*************/
8. ②

② Benefits of writing CSS comments: 1. Use comments to quickly locate complex problems In the code page, styles can be written efficiently, making the code hierarchy clear and modifications more intuitive. 2. CSS annotations (css annotations) can help us explain the CSS files we write, such as explaining the location, function, style, etc. of a certain piece of CSS code, so that we can maintain it at a glance in the future. It is convenient to understand. At the same time, when the team is developing web pages, reasonable and appropriate annotations will help the team understand where the css style corresponds to the html, so that the web page can be developed smoothly and quickly.

Extension: Two annotation methods for JavaScript

Line comment	// This is a line comment, please note There is a space after '//' /* This is a comment */
Block comment	🎜> * Comments should be in three lines (remember to have spaces after *) */

Extension: HTML structure Annotation method

Use

使用  进行注释

如：
       
   

to annotate

Such as:

 ① 外部引入：使用最广泛，一个css文件可控制多个页面，从整站来讲，减少代码数量，提高加载速度，便于维护
    
 ② 头部引入：使用也比较多，加载速度快，一般用于访问量较大的网站或首页，但是整站代码较多，不利于维护

 ③ 标签内写：用得比较少，权重最高，代码多，加载慢，不利于维护

 ④ @import : 跟link类似，如果使用@import的话，要将@import放到样式代码的最前面，否则它将会不起作用

link与@inport区别：

① @import url（）机制是不同于link的，link是在加载页面前把css加载完毕，而@import url（）则是读取完文件后在加载，所以会出现一开始没有css样式，闪烁一下出现样式后的页面(网速慢的情况下)。

② @import 是css2里面的，所以古老的ie5不支持。

③ 当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的

④ link除了能加载css外还能定义RSS，定义rel连接属性，@import只能加载css

Various advantages and disadvantages of CSS introduction methods

① External introduction

: The most widely used, one css file can control multiple pages. From the perspective of the entire site, it reduces the number of codes, improves loading speed, and facilitates Maintenance
② Header introduction

: It is used more often and has fast loading speed. It is generally used for websites or homepages with large visits, but the entire site has a lot of code, which is not conducive to maintenance

③

written inside the tag : less used, with the highest weight, a lot of code, slow loading, not conducive to maintenance

④ @import

:

选择器种类：

① 标签名选择器 ② ID名选择器 ③ 类选择器 ④ 后代选择器 

⑤ 群组选择器 ⑥ 伪类选择器 ⑦ 属性选择器 ⑧ 通配符 ⑨ 子代选择器

选择器优先级：

① CSS不同引入方式的优先级：标签内嵌样式 > 头部书写样式 > 外部引用样式 > 浏览器默认样式。

② CSS选择器的优先级：id > class > tagname.

③ 多个选择器混用时的优先级：例子.a  .b  c{}和.a  c{},它们指向的目标都是c，但是前者的优先级高于后者。

注：当指向同一目标选择器的优先级相同时，后面的优先级大于前面的优先级；当同一个标签中定义有多个class名时，各个类选择器之间的优先级与html中的class名排列无关，而是与css文件中各个类选择器的排列有关。

Similar to link, if you use @import, you must put @import at the front of the style code, otherwise it will not work link Differences from @inport: ① The @import url() mechanism is different from link. Link loads the css before loading the page, while @import url() reads the file. Then it is loading, so there will be a page with no css style at the beginning, and the style will appear after flashing (when the network speed is slow). ② @import is in css2, so the ancient ie5 does not support it. ③ When using JavaScript to control the dom to change the style, you can only use the link tag, because @import is not controllable by the dom ④ In addition to loading css, link In addition, RSS and rel connection attributes can be defined. @import can only load css

Extension: Three ways to introduce JS Selector writing and selector priority

Selector type: ① Tag name selection ② ID name selector ③ Class selector ④ Descendant selector ⑤ Group selector ⑥ Pseudo-class selector ⑦ Attribute selector ⑧ Wildcard ⑨ Descendant selector Selector priority: ① Priority of different CSS introduction methods: tag inline style > Header writing style > External reference style > Browser default style . ② CSS selector priority: id > class > tagname. ③ Multiple selections Priority when servers are mixed: Example.a .b c{} and .a c{}, they both point to c, but the former has a higher priority than the latter. Note: When the priorities of selectors pointing to the same target are the same, the later priority is greater than the previous priority; when in the same tag When multiple class names are defined, the priority between each class selector has nothing to do with the arrangement of class names in the HTML, but is related to the arrangement of each class selector in the CSS file.

CSS naming convention

1. In the naming of rules, always use lowercase letters plus middle letters. The way of underlining is not allowed to use capital letters or _

   1、规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或_
   2、命名避免使用中文拼音，应该采用更简明有意义的英文但是进行组合
   3、命名注意缩写，但是不能盲目缩写
   4、不允许通过1 、2、3等序号进行命名
   5、避免class与id重名
   6、id用于标识模块或页面的某一父容器区域，名称必须唯一，不要随意新建id
   7、class命名必须言简意赅
   8、除了重置浏览器默认样式外，禁止直接为html tag添加css样式设置，例如：div { width:200px;height:100px;}
   9、每一条规则应该确保选择器唯一，禁止直接为全局 .nav/.header/.body等类设置属性

2. Avoid using Chinese Pinyin when naming, and use more concise and meaningful English but combine it

3. Pay attention to abbreviations when naming, but do not abbreviate blindly
4. Naming by serial numbers such as 1, 2, 3, etc. is not allowed

5. Avoid duplicate names of class and id

6. ID is used to identify a certain parent container area of ​​a module or page. The name must be unique and not arbitrary. Create a new id

7. Class naming must be concise and concise 8. In addition to resetting the browser default style, it is prohibited to directly add css style settings to html tags, for example: div { width:200px;height:100px;}

9. Each rule should ensure that the selector is unique, and it is prohibited to directly set attributes for global .nav/.header/.body and other classes

For details, see: Lonely Binghai-CSS Coding Specification

1、 区分大小写

2 、 首写符必须是字母，下划线（ _ ）或者美元符($)

3、 除首字母外的字符，可以由字母，数字，下划线，美元符号组成

4、 不允许包含空格

Extension: JS Naming Specification

1. Case sensitive 2. The first letter must be a letter, underscore (_) or dollar sign ($)

3. Except the first letter Characters outside of >

background背景 属性：

   * background-color
   * background-position
   * background-size
   * background-repeat
   * background-origin
   * background-clip
   * background-attachment
   * background-image

CSS3新增的属性：

属性 浏览器支持

background-size
background-origin

background-clip

Background, line height attributes

background background Attributes: * background-color * background-position * background-size * background-repeat * background-origin * background-clip * background-attachment * background-image New attributes in CSS3: Property browser support

background-size	td>
background-origin

background-clip

Background syntax: [For details, please see 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;

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 the attribute value of background-size only sets one value, the second value will be set to "auto".

 cover: Expand the background image to a large enough size so that the background image completely covers the background area.

 contain : Expand the image to its maximum size so that its width and height fit completely within the content area

line-height line-height attribute: Set the distance between lines (line height).

Syntax: line-height : normal | | | | inherit

Line height and line spacing:

Detailed explanation of line-height

CSS text property

CSS 文本属性

属性 描述

color	设置文本颜色
direction	设置文本方向。
line-height	设置行高。
letter-spacing	设置字符间距。
text-align	对齐元素中的文本。
text-decoration	向文本添加修饰。
text-indent	缩进元素中文本的首行。
text-shadow	设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。
text-transform	控制元素中的字母。
unicode-bidi	设置文本方向。
white-space	设置元素中空白的处理方式。
word-spacing	设置字间距。

Property description

color

Set text Color

direction

Set the text direction. 属性 描述

font	简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family	设置字体系列。
font-size	设置字体的尺寸。
font-size-adjust	当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）
font-stretch	对字体进行水平拉伸。（CSS2.1 已删除该属性。）
font-style	设置字体风格。
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	设置字体的粗细。

line-height

Set the line height.

letter-spacing

Set character spacing.

text-align

Align text within an element.

text-decoration

Add decoration to text.

text-indent

Indent the first line of text in the element.

text-shadow

Set text shadow. CSS2 includes this property, but CSS2.1 does not retain it.

text-transform

Controls the letters in the element.

unicode-bidi

Set text direction.

white-space

Sets how whitespace in elements is handled.

word-spacing

Set word spacing. CSS font property Property description

font	Abbreviation attribute. The function is to set all font-specific properties in one statement.
font-family	Set the font family.
font-size	Set the font size.
font-size-adjust	Smart scaling of replacement fonts when the preferred font is unavailable. (This property has been removed in CSS2.1.)
font-stretch	Stretch the font horizontally. (CSS2.1 has removed this attribute.)
font-style	Set the font style.
font-variant	Display text in small caps or normal font.
font-weight	Set the weight of the font.