HTML中样式CSS控制基础

1、文本值

div {        visibility: hidden; }

2、数字值

div {        width: 200px; }

3、颜色值

1、颜色名。例如红色（red）、蓝色（blue）等。        参考：W3C颜色名定义，https://www.w3.org/TR/css3-color/#html5

2、十六进制颜色。红色（#ff0000）        说明：6位数字前两位代表红色，中间两位代表绿色，末两位代表蓝色。

3、RGB颜色值（Red, Green, Blue）。红色   rgb(250, 0, 0) 或者 rgb(100%, 0, 0)

4、RGBA颜色值（Red, Green, Blue, Alpha）。红色50%的透明度   rgb(250, 0, 0, .5 )        

找到元素，呈现样式。

#号选择id  .选择class

4.4.1 上下文选择器

4.4.2、特殊上下文选择器： 子选择符 
>

4.4.3 特殊上下文选择器： 紧邻同胞元素
+ :之后相邻的

4.4.4、 特殊上下文选择器： 一般同胞元素 ~ :之后隔开的所有

4.4.5、特殊上下文选择器：  通用选择符 * : 选中所有

ID属性选择符 : 在页面中唯一的标识一个元素。 类属性选择符：标识一组具有共同特征的元素。

1、不要为每个标签重复的样式。

2、利用继承和上下文选择符能够让不同的标签共享样式。从而降低需要编写和维护CSS的工作量。

实际上并没有标签附加到元素的标签上。

UI伪类：当元素处于某一状态时，为该元素应用样式。

a:hover//悬浮时

a:link//默认

a:active//单机时

a:visited//被点击(访问)后

作为目标被链接到后的变化

结构化伪类：元素标记存在一定的逻辑关系，为符合这种关系的元素应用样式。

margin: 5px 10px 8px 9px;

margin: 5px 10px;

margin: 10px

margin-left: 10px

3.1、理解盒子模型 ： 内边距设置 (同上)

3.1、理解盒子模型 ： 边框宽度 /样式/颜色

边框颜色

边框圆角

给浮动元素的父元素添加 overflow:hidden。

同时浮动父元素。

父元素的的最后一个子元素，是一个非浮动的具有清除样式（clear: both / clear: left ）的元素。 使用 :after 添加清除元素。

包裹浮动元素的方法

.mainWrapper{

border: 1px solid red;

/*包裹浮动元素：方法一*/

/*overflow: hidden;*/

/*包裹浮动元素：方法二 比翼双飞也浮动*/

/*float: left;*/

}

/*包裹浮动元素：方法三 使用伪元素（元素）*/

.mainWrapper::after{

content: ".";

display: block;

clear: both;

visibility: hidden;

height: 0;

}

width: 100%;

vertical-align: middle;

text-align: center;