CSS基础总结

总结: 1.初识及核心选择器:css基本语法style，     三种引入方式:内部样式，行内样式，外部样式。 遵循就近原则     核心选择器:标签 class id 优先级id>class>标签
     高级选择器:层次选择器: 1.后代选择器：在某个元素的后面。 body空格p{}
                         2.子选择器：只会让body下面的一代做出改变 body>p{}
                         3.相邻兄弟选择器：弟弟选择器，只有一个只会对下面那个作出改变 .类名+p{}
                         4.通用选择器 ：弟弟们选择器，在遵循子选择器的前提下，添加了把选中的标签下面的做出改变
              伪类选择器
              属性选择器 a[属性名]{...}
                       = 绝对等于
                       *= 包含这个元素
                       ^= 以什么什么开头
                       $=以什么什么结尾


     2.美化网页:
             字体的样式 :字体的颜色 color 设置字体大小 font-size
             排版网页: text-align 文本对齐方式 text-indent 首行缩进 line-height 行高设置 text-decoration去除下划线
             超链接伪类：:hover 当鼠标放上去的时候做出的改变
             列表样式:list-style 设置排序时候圆点的样式 list-none取消圆点
             背景样式:背景颜色:background:颜色
                     背景图片: 可以使用渐变颜色，渐变颜色可以参考网上的资源没必要非要自己写
     3.盒子模型:
             边框:border
             内边距：padding
             外边距：margin
             盒子的计算方式:border+margin+padding+内容元素
             盒子的大小：box-size
             圆角边框:border-radius
             阴影:box-shadow
     4.浮动:
         网页布局:标准文档流
         display:block 块,inline 只能在行内,inline-block 有块元素但是有行内的特性。
         float:
          left 1px距离左边边框的距离也就是，单独写 left就是漂浮在最左边
          right 1px距离右边边框的距离也就是，单独写 right就是漂浮在最右边
          清除浮动: clear left 清除左侧 clear right  清除右侧 clear both 清除两侧
        父级边框塌陷的问题解决方案:1.设置空div
                              2.父元素高度
                              3.在父级元素中增加一个overflow
                              4.after
          inline-block 和浮动的区别:
               不同之处：对元素设置display：inline-block ，元素不会脱离文本流，而float就会使得元素脱离文本流，且还有父元素高度坍塌的效果
               相同之处：能在某程度上达到一样的效果

     5.定位:relative 相对定位
           absolute 绝对定位
           fixed 固定定位
           z-index
           opacity:透明度设置


常用：
list-style: none 去掉a超链接的圆点
list-style: circle; 空心圆
  list-style: decimal; 有序列表按照数字排序 l
ist-style: square;  正方形
 text-decoration: none a标签下划线取消
text-decoration: underline; 开启下划线
text-align: center; 文字居中
opacity: 0.5;某个东西变成透明的
z-index: 999;优先显示默认是1或2调节成999肯定就是最先选择的
圆角边框  border-radius:  100px; 
text-align:排版
text-align: center 居中
text-indent: 2em; 首行缩进 1em就是一个字的距离
hover超链接伪类：鼠标放到标签上的时候做出的改变
字体的样式:
font-size 设置字体大小
 font-family 设置字体
font-weight: bold 字体设置为粗体
color 字体的颜色

重点：

选择器:
   作用:选择页面上的某一个或者某一页元素

   1.标签选择器：选择一类标签 格式 标签{}
   2.class选择器：选择所有class属性一直的标签跨标签 .类名{}
   3.id选择器：全局唯一，不能重复 #id名{} 注意id名不能以数字开头
    优先级 id选择器>class选择器>标签选择器

 层次选择器:
        1.后代选择器：在某个元素的后面。 body空格p{}
        2.子选择器：只会让body下面的一代做出改变 body>p{}
        3.相邻兄弟选择器：弟弟选择器，只有一个只会对下面那个作出改变 .类名+p{}
        4.通用选择器 ：弟弟们选择器，在遵循子选择器的前提下，添加了把选中的标签下面的做出改变
 结构伪选择器：
         /*选中li标签的第一个*/
                ul li:first-child {
                    background: red;
                }
           /*选中li标签的最后一个*/
                  ul li:last-child {
                      background: greenyellow;
                  }
             /*选中li标签的第二一个*/
                    li:nth-child(2) {
                        background: blueviolet;
                    }
   伪类：同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。

   比如div是属于box类，这一点很明确，就是属于box类。但是a属于什么类？不明确。
   因为需要看用户点击前是什么状态，点击后是什么状态。所以，就叫做“伪类”。

   静态伪类和动态伪类
   伪类选择器分为两种。

   （1）静态伪类：只能用于超链接的样式。如下：

   :link 超链接点击之前
   :visited 链接被访问过之后
   PS：以上两种样式，只能用于超链接。

   （2）动态伪类：针对所有标签都适用的样式。如下：

   :hover “悬停”：鼠标放到标签上的时候
   :active “激活”： 鼠标点击标签，但是不松手时。
   :focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）
   PS：以上三种样式，只能用于超链接。