style标签用于为HTML文档定义样式信息 位于head部分中

简单选择器：

*：通配选择器 给所有标签加上样式

标签名(E) ：元素选择器 给所有E标签加上样式

#idName ：id选择器 给idName的标签加上（权重大于class）样式 且id不能重复

.className：class选择器 给className的标签加上样式，且可以重复使用 

关系选择器：

E F :包含选择器  选择所有包含有E元素里面的F元素

E>F：子选择器  选择所有作为E元素的子元素F

E+F：相邻选择器 E~F：兄弟选择器

伪类选择器   x：hover{   } 鼠标指上去，出现{   }中添加的效果

即鼠标 放在a链接上，链接会改变颜色

属性选择器：E[att] 选择具有att属性的E元素

文字样式

font-size:2px; 文字大小（谷歌最小12px）

font-weight:200; 文字粗细

color 文字颜色

text-align: center; 文字对齐方式 right右 left左

text-indet：2pt; 文字缩进

letter-spacing:1px; 文字间的间距

line-height:30px; 文字每行的间距

text-decoration: none;                   默认无下划线

text-decoration: overline; 文字上有一条线

text-decoration: line-through; 文字中有一条线(删除线)

text-decoration: underline; 文字下有一条线

文字垂直居中：行高=高度  height：40px  line-height：40px

行内元素如span无法设置宽高

行内块和块元素才可以设置宽高

行内样式表：<h1 style=color：red；> xxx </ h1>

外部样式表：

元素转化

display: block; 行内元素转换成===>块级元素

display: inline; 块级元素转换成===>行内元素

display: inline-block; 转换为行内块元素

样式权重比

1.权重大小的排序：! important >行内样式> id > class >标签>通配符(*)

2.选择器完全相同的情况下，后者的样式会覆盖前者

3优先级计算方式：

  ! important     无穷大

  行内样式          1000

   id                     100

   class                 10

   标签                  1

    *                       0

边框样式(border)===>transparent透明色

border-width 边框粗细

border-style:solid 边框样式（实线边框）

border-color:  边框颜色

border:20px solid red 简写形式

border-radius: xpx; 边框圆角  x越大  圆角越圆

背景颜色：background-color

背景图片：background-image：url（图片地址）

背景平铺：background-repeat：默认平铺 repeat / 不平铺 no-repeat / x轴平铺 repeat-x / y轴平铺 repeat-y

背景图片的位置：background-position：top 上 / right 右 / left 左 / bottom 下 / x%  y%  center（居中）

背景尺寸：background-size：cove（会裁剪） contain（会留有空白） 100 %  100%  （常用 会被拉伸 铺满整个屏幕）

背景复合写法：background ：red url（xxx） no-repeat  center/100%  100% （顺序无要求 但是position与size同时存在 要以“/”隔开）

尺寸大小：

widht：宽度  height：高度 widht和height默认值是auto 

aotu与%的区别：auto会将元素撑开至整个父元素widht，但是会减去margin+padding+border（自适应 随着网页的缩小而缩小）

%会强制将元素变成父元素一样的宽度，并且额外的空间margin+padding+border会加到width上

单位：

绝对单位：不会因为其他元素的尺寸变化而变化

相对单位：没有一个固定的度量值 而是由其他元素尺寸来决定的相对值

px:像素---绝对单位

vw：1%视口 （浏览器可视区域）的宽度

vh：1%视口 （浏览器可视区域）的高度

%：相对于父元素的宽度或字体大小

注意;%与父元素有关  auto与子元素有关

为什么hight：100%不生效：如果包含快的高度没有显示 并且该元素不是绝对定位 则计算值为auto 也就是说子元素100%*auto=NAN 结算无效