CSS property_html/css_WEB-ITnose

CSS--property

css attribute key-value pair, property: value. Mainly in the following categories:

Text-related attributes: control the font, color, modification, shadow and other attributes of the text.

font-family Set the font type, such as "Arial", "宋体", etc.
font-size Set the font size, common measurement units are pt and px
font-style Set the font style, optional Values ​​normal, italic and oblique
font-weigh sets the font "weight", common values ​​are normal and bold
font comprehensively sets the above various font attributes

Paragraph-related attributes: control the display effect of the entire paragraph or div, including text indentation and text alignment.

text-align Set the text alignment, optional values ​​​​left, center, right, justify
text-indent Set the first line indent, the value can be absolute or relative length units and percentages
line-height sets the line height, the value can be in absolute or relative length units and percentages
letter-spacing sets the character spacing, the value can be in absolute or relative length units
color sets the text color

Background related attributes: control background color, background image and other attributes.

Table related properties: Control the appearance of the table.

Size-related attributes: Control the length, width, minimum length, width and other attributes of the target object.

In CSS style sheets, length units are divided into two categories:

Position-related attributes: control the position of the target object, including whether it is suspended on the page. It is necessary to talk about this type of related attributes here. In fact, this is the positioning mechanism of CSS.

Document flow
Line boxes: placed horizontally in order, scroll bars will appear if they cannot be placed
Block boxes: placed vertically in order, scroll bars will appear if they cannot be placed
1, Relative positioning, the original position in the document flow is still retained, and the current position is the result of an offset relative to the original position.

position: relative;#pos {position: relative;top: 5px;left: 55px;}

2, absolute positioning position: absolute;
removes its original position from the document flow, as if the element never existed. If its current position overlaps with other elements, it will cover the display of other elements. This is the concept of CSS middle layer. There are two situations for positioning the current position:
① The parent container and ancestor container are not positioned: relative to the upper left corner of the browser

#pos {position: absolute;top: 0px;left: 0px;}

② There is a positioned ancestor element: relative to the closest already Positioned ancestor element

<div> </div><div> </div><div id="pos"><div id="test">测试</div></div><div> </div><div> </div>#pos {position: absolute;top: 30px;left: 100px;}#test {position: absolute;top: 5px;left: 20px;}

3, floating: separated from the document flow, floated upward one level, all floating elements in the same container are arranged in order according to the float attribute value, for example, if they are all float:left, then they are arranged from Arranged in order from left to right. Also obscures normal unfloated elements in the document flow.

<div> </div><div> </div><div> </div><div> </div><div> </div>div {border-style: solid;border-width: 1px;border-color: black;width: 50px;height: 50px;margin-right: 5px;float: left;}

Border related properties: Set the border characteristics of the target object, including color, thickness, and line type used.

Outline related attributes: used to generate a halo around the target object. This halo will not occupy the actual physical layout of the page. Through the contour-related attributes, the color, line width, and line type of the halo can be set.

块元素和行元素：

HTML元素按其显示方式可分为“块级”（block）元素和“行内”(inline)元素两种：
块级元素： 前后换行、可设定块大小（宽度和高度）、块的定位、块边框、块间距、块内和块边框间空隙等。如body,p,tr,td,div等。
行内元素： 位于当前行中，前后不换行，不单独定位。如span元素。

  <p>一段文字中的<span style='="font-size:20pt;' color:red>一部分显示效果有所不同</span>，可以采用span元素来实现</p>

可以使用CSS的display属性设置/修改元素的显示方式，其常用属性取值为：block、inline和none

以上这些属性我们大概知道就OK了，具体的相关属性翻ipa文档就好了，如下图。

特别介绍3个常用的属性

1，display，用于设置目标对象是否以及如何显示。该属性的常用值是none，用于设置目标对象隐藏，一旦这个对象隐藏，其占用的页面空间也会释放。如果没有为该属性指定值，目标对象就会显示出来。这个还是比较常用的，一般的我们在页面上控制一部分页面的显示和隐藏，一般都是如下设置；

显示：document.getElementById('id').style.display='' ；隐藏：document.getElementById('id').style.display='none' ；

2，visibility，用于设置目标对象是否显示。与display不同的是，通过该属性隐藏某个html元素后，该元素占用的页面空间会被依然保留，不会被释放。该属性的2个常用值是：visible和hidden，分别用于控制对象的显示和隐藏。

显示：document.getElementById('id').style.visibility='visible' ；隐藏：document.getElementById('id').style.visibility='hidden' ；

3，cursor，用于设置目标对象上光标的形状。该属性常用的值auto（自动光标），crosshair（十字线光标），default（客户端光标），hand（手形光标），move（十字箭头光标），help（带问号的帮助光标），text（文本光标），wait（沙漏光标），url（自定义光标）。比如：

<div style="cursor:wait;"></div>