CSS

目录：

• 初识CSS

• 盒子模型

• 定位

• 扩展

一、初识CSS

1.1CSS的优势

 　　内容和表现分离  表现的统一  丰富样式，使布局更灵活  有利于网页搜索

<!--基本写法-->
<style type="text/css">
　　h1{
　　　　font-size:15px;
　　　　color:#0000ff;
　　　　}
</style>

<!--三种基本的选择器-->
    <!--01.标签选择器-->
        比如：h1
    <!--02.类选择器-->
        比如：.lei
    <!--03.Id选择器，一个id只能用一次-->
        比如：#id 

<!--CSS的三种引用方式-->
  <!--01.行内-->
      <p style="color:#0000ff;"></p>
  <!--02.内部-->
      <style type="text/css">
　　  h1{
　　　　  font-size:15px;
　　　　  color:#0000ff;
　　  }
    </style>
  <!--03.外部-->
    <!--引用-->
        <link rel="stylesheet" type="text/css" href="css/new_file.css"/>
    <!--导入-->
         <style type="text/css">@import ulr("css/new_file.css")</style>


<!--行内样式>内部样式>外部样式-->
<!--ID选择器>类选择器>标签选择器-->



<!--复合选择器-->
    <!--01.后代选择器-->
        E F  后代  必须用空格隔开，中间不能插入任何符号  子元素的子元素也被选中
        E>F 子代  E是父F是子 选中所有子元素
        E+F  相邻  选中第一个子元素
        E~F  通用 所有子元素都被选中
        紧挨的是交集选择器 有逗号的并集选择器 全局选择器
    <!--02.交集选择器-->
         p.one{color:#0000ff;}只能p标签使用one样式
    <!--03.并集选择器-->
         多个选择器用逗号连接成，同时生成多个相同样式

<!--结构伪类选择器-->
   type 考虑类型
     ul li :first-child          第一个元素li
     ul li : last-child          最后一个元素li
     ul li p:nth-child(2)        选择第二个子元素 第二个标签是p
     ul li p:nth-of-type(2) 父元素第二个类型为p元素 第几个p标签

<!--属性选择器-->
   E[atrr]               选择有某个属性的元素
   E[atrr='val']      设置的属性attr并且值为val
   E[attr^=val]      开头是val
   E[attr$=val]      结尾是val
   E[attr*=val]      包含val

<!--继承特性，子类会继承父类-->

 

1.2CSS样式

二、盒子模型

三、定位

四、扩展

浮动概述
　　脱离文档流
　　原来的块元素变成行内元素
　　影响别的元素造成文字环绕
　　如果元素都浮动会造成边框塌陷
　　如果不浮动设置宽度
清除浮动
　　清除前面对我的影响
解决父边框塌陷
　　浮动元素后面加个空div
　　设置父元素的高度
　　父级加overflow属性 overflow：hidden
　　　　overflow属性值：visib默认值，内容不会被修剪
　　　　hidden 内容被修剪 只显示盒子内的东西
　　　　scroll 内容被修剪，显示滚动条
　　　　auto 会修 显示滚动条 没有下滚动
　　父级添加伪类
　　　　clear：after{
　　　　　　content=“ ”；内容为空
　　　　　　display：block；添加的内容改为块元素
　　　　　　clerar:both 清浮动
　　　　}

==============================================================================================

内嵌框架：

 <td width="500" rowspan="5" valign="top"><iframe src="images/i11.png" width="800" height="500" scrolling="no" frameborder="0" name="kj"></iframe></td>     target="kj"
==============================================================================================

定位：
     position：fixed;
     right：300px;
     top：200px;

隐藏：
     display：none；

显示：
     display：block；

绝对定位：
         poxition：absolute；

======================================================================================================

.shan{
    text-decoration:line-through;                删除线
    text-decoration: underline（下划线） overline（顶划线） line-through（删除线）;}    三划线
    

h1{
    font-family:Verdana, "华文彩云";    字体
    font-size:300%;                字体放大三倍
    font-style:normal;            正常样式
    color:#00F;                字体颜色
    cursor:pointer;                显示抓手
    font-style:italic;}            显示斜体

h1:hover{
    background-color:#CCC;}            鼠标经过显示背景颜色    

a{
    text-decoration:none;}            超链接不显示下划线


a:visited{
    color:#90F;}                已访问的超链接显示为紫色


a:hover{
    text-decoration:underline;        鼠标经过显示下划线
    color:#F00;}                 显示颜色为红色


a:active{

    color:#FF0;}                点击后显示为黄色

p{
    text-indent:2em;}            首行缩进两个单位


div{
    border:1px dashed red;            红色虚线框
    500px;                宽为500px
    height:300px;                高为300px
    text-align:center;                中间文字
    line-height:300px;}                 居中显示

==========================================================================================================

盒子装饰：

边框：
     border
                                              border：1px solid #666；（粗细）（实线）（颜色）

内边距：
       padding

外边距：
       margin

边框线：
       border-style                                    上.下.左.右边框：top.tottom.left .height

粗细程度：
         border-width                                  1px 2px 3px 4px

首行缩进：
         text-indent：2em

手标志：
       cursor：pointer

增加下划线：
           text-decoration：underline（下划线）overline（顶划线） line-through（中间删除线）

图像位置：
         vertical-align:top(顶部)middle（中间）bottom（底部）

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

去下划线：
       a{
    text-decoration:none;}
下划线变样式：
             a:hover{
              text-decoration:underline;
              font-size:100%;
               color:#F9F;}
圆角：
      img:hover{
    border-radius:20px;}

透明度
.texiao:hover{
    opacity:0.8;
    filter:alpaha(opacity=80);          设置透明度，在每个浏览器都能显示
    transform:translate(15px,15px);     图片位移
    box-shadow:10px 10px 20px #CCC;}    投影

阴影：
      box-shadow:10px 20px 20px #F9F;（横、纵、羽化、颜色）

位移：
     transform:translate(-15px,-20px)

大/小：
      transfrom:sclae（1.0）

旋转：
     transform:rotate(360deg）  scalse(1.5) (放大缩小)    translate(20px,30px)  （位移水平，垂直）
     shew(30deg,30deg)（倾斜水平，垂直）;

过渡：
   .xz：hover{  transition:all 1s;      }                             .xz{
                                                                      transition:all 1s;}   旋转回来时间为1秒      

溢出：
      div{overflow：hidden} 不遮住其它图片或文字(溢出 隐藏)

逐渐：
     transition：all 1s；（俩遍）


动画：
       （存在兼容问题  -webkit- 、-moz- 、-o- 、-ms-）（定义动画也要加）
     -webkit- animation：donghua（随便起一个动画名称） 20s （动画时间）  infinite（一直播放，如果只想播放一次就写1）
         ease（匀速、减速、加速）
定义动画：
     @-webkit- keyframes donghua(动画名称)   （设置三针）
       0%{
                      transform:translatex（0deg）   //延x轴旋转
           }
       50%{
                      transform:rotatex（180deg） //延x轴旋转
           }
      100%{
                      transform:rotatex（360deg） //延x轴旋转
           }

display="inline-block"  行内块级元素
box-sizing  盒子尺寸
    content-box  默认值
    border-box
    inherit
box-shadow  盒子阴影
    box-shadow=inset x y blur-radius color;
    inset(默认外阴影，写上是内阴影,可以不写)
    x  x轴位置
    y  y轴位置
    blur-radius 模糊半径
    color  颜色
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
display属性
    block 块级元素
    inline  行内元素
    inline-bloc    k  行内块元素（使块级元素拥有宽度和高度属性，不会独占一行）
    none   控制元素隐藏
注:块级元素没有高度和宽度的，它是由内容撑开的，行内属性默认独占一行
float属性
    right  向右浮动
    left   向左浮动
    none
浮动（float）的特点
    1.浮动的元素会脱离文档流
    2.原来的块元素会变成行内块元素
    3.会影响别的元素，造成文字环绕等效果，要注意宽度
    4.如果里面所有的元素都有浮动，会造成父元素的边框塌陷
Clear属性（清除浮动）
    left    清除左
    right    清楚右
    both    清除两边
    none
注：Clear属性是清除前面元素浮动造成的影响，不是清除浮动
Overflow属性(溢出处理)
    visible    显示溢出部分（默认）
    hidden    隐藏溢出部分
    scoll    会出现滚动条（有时会出现横向和纵向的滚动条）
    auto    自动（只会出现纵向滚动条）
解决父元素塌陷的问题
    1.浮动元素后添加一个空的div，加Clear属性
    2.设置父元素高度
    3.父级元素添加overflow属性（overflow=hidden,超出部分不会隐藏）
    4.父级元素添加伪类after
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
position
    static 默认值
      无偏移，默认值
    relative 相对定位
      根据元素本身的位置进行偏移
    absolute 绝对定位
      使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素”为基础进行偏移、
      会脱离文档流
    fixed     固定定位
      根据浏览器的位置进行偏移
z-index属性
    0 默认值
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
transform  属性
    translate（x，y）平移
    scale（）     缩放
    rotate（45deg）     旋转
    skew（45deg）     倾斜    (deg 度数)
reansition属性（过渡）
    all(所有属性都会变)
      （过渡属性应先写在元素本身上，不能在：hover时写）

@keyframes IDENT {
    from{}
    to{}
    或%{}
}
    placeholder

解决兼容性：（在属性前加上以下，写5行）
-moz-
-o-
-webkit-
-ms-