CSS 基础

cascading style sheets 层叠样式表#

导入方式

优先级高到低 ↓

1. 行内样式 <div style="color:red;margin:100px 100px">

2. 内部样式 
      <style>
        h1{
            color:green;
        }
      </style>

3. 外部样式 <link rel="stylesheet" href="../css/test.css">

三大选择器

优先级高到低 ↓#

id选择器(全局唯一不能复用)#

**css**
#name{
  margin:0
}

**html**
<h1 id="name">标题</h1>

class选择器#

**css**
.name{
  font-size:20px;
}

**html**
<h1 class="name">标题</h1>

标签选择器#

**css**
span{
  font-size:20px;
}

**html**
<span>标题</span>

层次选择器

子选择器 body>p{}，下一个p儿子

后代选择器 body p{}，全部p儿子

兄弟选择器 .name+p{} ,下一个兄弟，对下不对上

通用兄弟选择器 .name~p{} ,向下所有

伪类选择器

a:hover{} , 鼠标滑过有效果

div:after{}, 选择div里最后一个儿子

.nav p:nth-of-type(n+2) ,nav下面p 2之后的p全亮

属性选择器

• input[value]{} 选择input标签上有value的那个
• input[value="123"]{} 选择input标签上有value='123'的那个

浮动float和塌陷

方法一：
创建clearfix:after 伪类选择器（after是选最后一个子元素）
输入空字符,变成块然后clear:both
.clearfix::after{
     content: "";
     display: block;
     clear: both;
}

方法二：
在父选择器里加
.nav{
  overflow:hidden;  
}

定位 position

//相对定位，相对于自己偏移，还会留位置在原地复制移动
position:relative; 

//绝对定位，父级没有定位就按照body偏移，锁定在定位里
position:absolute;

//固定定位，按照body偏移，随滑轮滑动也在固定位置
position:fixed;

z-index层优先级，opacity透明度

前提是三层必须在同一个定位区域

z-index:(0~+∞);   // 越大越优先显示
opacity:0.5;     //不透明度

文本样式

height：50px
line-height：50px  // 便签高和行高相等就会居中！

list-style:none  //把无序列表li标签上的点去掉

text-decoration:none  //把a便签上的下划线去掉

text-align:certer  //文本居中


margin: 0px 0px 0px 0px; //上右下左(顺时针)

display: inline-block  //既有块属性也有行属性，模块会上去上行，none就是没了

border-collapse: collapse  // 表单中合并相邻框

tab切换，标题变颜色#