[Web] CSS (No.15) Css comments, tag display mode (display), Css writing specifications

CSS comments

CSS rule is to use the / * content requires comment / annotation, that using the "/ comment before the content needs to " mark the beginning of the comment, use the "* /" end at the end of the content.

E.g:

p {
  font-size: 14px;                 /* 所有的字体是14像素大小*/
}

Label display mode (display)

Type (display mode) of the label

HTML tags and labels are generally divided into blocks both types of the row labels are also called intra-block element and the row element. details as follows:

Block-level elements (block-level)

Each block element alone usually occupy an entire row or entire rows may be provided on its width, height, alignment and other attributes, commonly used in the building structure of pages and page layout.

Common block elements are:

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

Characteristics of block-level elements:
(1) always starts a new row
(2) height, line height, from the outer and the inner margins can be controlled.
(3) The default is 100% the width of the container
(4) can be accommodated inline elements and other block elements.

Inline element (inline-level)

Inline elements (inline elements) not occupy separate areas, only by their size and font size of the image to the support structure, generally can not set the width, height, alignment and other attributes, used to control page of this Chinese style.

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。

Characteristics of the line elements:
(1) and an inner adjacent row elements on one line.
(2) high, invalid wide, but the padding and margin may be provided in the horizontal direction, the vertical direction valid.
(3) the default width is the width of its own content.
(4) the line element can only receive the text or other inline elements. (A special)

note:

1. Only text can be grouped together into paragraphs so p can not put block level elements inside the same token there are these tags h1, h2, h3, h4, h5, h6, dt, they are writing class block-level tag, which can not put other block-level elements .
2. Link which can not recapture link.

Block-level elements and inline elements difference

块级元素的特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。

行内元素的特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。

Inline block elements (inline-block)

There are several elements within the row of special labels - , <img />, <input />, <td>you can set the width and height and alignment attributes to them, some of the information may refer to them as inline block elements.

Characteristics of the line block elements:
on one line, but there is a gap between the blank (1) and an inner element adjacent row (row within the block).
(2) the default width is the width of its own content.
(3) height, line height, from the outer and the inner margins can be controlled.

Label display mode switching display

The switch block: the display: inline;

Row转块: Display: Block;

Block, the line elements into a row within the block: the display: inline-Block;

CSS writing specifications

Space specifications

[Force] {selector and it must contain spaces between.

Example: .selector {}

[Mandatory] attribute name and after: No spaces are allowed between: between property value and must contain spaces.

Example: font-size: 12px;

Select Specification

[Force] When a rule comprises a plurality of selector, each selector declaration must separate line.

Example:

/* good */
.post,
.page,
.comment {
    line-height: 1.5;
}


/* bad */
.post, .page, .comment {
    line-height: 1.5;
}

[Recommendations nesting level selector stage should be less than 3, the condition defined by the location as precisely as possible.

Example:

/* good */
#username input {}
.comment .avatar {}

/* bad */
.page .header .login #username input {}
.comment div * {}

Property Specification

[Mandatory] attribute definition must be on a separate line.

Example:

/* good */
.selector {
    margin: 0;
    padding: 0;
}

/* bad */
.selector { margin: 0; padding: 0; }

[Mandatory] must end with a semicolon after the attribute definition.

Example:

/* good */
.selector {
    margin: 0;
}

/* bad */
.selector {
    margin: 0
}

Sample code:

<!DOCTYPE html>
<html lang="en">
  <head>
	<meta charset="UTF-8">
	<title>显示模式</title>
	<style>
	  div,
	  span{
	  	width:100px;
	  	height:100px;
	  	background-color:pink;
	  	/* 设置透明度 */
	  	background-color:rgba(0,0,0,0.2);
	  	/* 外边距 */
	  	margin:50px;
	  	/* 内边距 */
	  	padding:50px;
	  }
	</style>
  </head>
  <body>
    <!-- 占整行：hn标签，p，div，ul，li，ol，dl，dt，dd，table等等 -->
    <!-- 同行显示多个：a，font，span，b，strong，del，em，i，ins，input，img等等 -->
	<!-- 块级元素：占整行，宽高生效，内外边距都生效，宽默认100%；
	     行内元素：同行显示，宽高不生效，内外边距左右生效，上下不生效，里面只能包含行内元素，宽高以内容撑开，a标签除外；
	     行内块级元素：input，img
	                  同行显示，宽高生效，会有默认的间隙，外边距以及内边距都可以控制。
	     ！文字类块级元素里面不能放块级元素，例如：p，h1-h6；a链接不能再嵌套a链接！
	      -->
	<!-- 元素的转换：
	               ①块转行：display:inline;
	               ②转化为行内块级元素：display:inline-block;
	               ③行转块：display:block;
	               ④元素隐藏：display:none;
	               ⑤元素隐藏后显示元素：display:block. -->
	<div>
	  胭脂碎
	  <h1>云如墨，夜凉清透竹曳影疏坠</h1>
	  <del>西风起，潇潇暮雨洗雾铅华退</del>
	</div>
	<div>
	  更阑烛，映寒窗，薄烟淡洒遮月寐
	</div>
	<div>
	  空思量,落塌半醒发缠袂
	</div>
	<span>轻尘纤,絮漫天,浮华幻灭旧景非</span> <br>
	<span>
	  枉如梦,孤鸿声凄萧瑟回
	</span>
  </body>
</html>