CSS

 css 的声明

Header 里面增加Style 标签

标签内增加Style属性

Header 内部Link标签引入外部的css文件

        

        HTML 会从上往下加载程序，如果定义了2次样式，则使用就近原则

 

css 的选择器

　　id选择器   #id1{}   适用于特有的标签  使用于标签的id属性 

　　  标签选择器  table{}   适用于具有相同样式的某个标签

  　　class选择器   .class1{}    适用于不同的标签具有相同的样式   使用于标签的class属性 

 　　 全局选择器   *{}   适用于所有标签

　　  组合选择器   选择器1，选择器2，...{}    适用于不同的选择器具有相同的样式

         父子(标签)选择器   选择器1 子标签选择器2...{}

　　 属性选择器 标签名[属性名=属性值]{}   特殊样式类型，几乎不用

 

　　 使用伪类给标签设置样式

　　 img:hover{/*设置鼠标放到图片上，图片回正，图片显示优先级别为1表示优先显示*/

　　　　transform: rotate(0deg) scale(1.5);/*设置旋转角度和缩放比例*/
  　　     z-index: 1;/*设置显示优先级别*/
               transition: 1.5s;/*设置显示加载时间*/

　　}

 

css的使用过程：
    1、声明css代码域
    2、使用选择器选择要添加样式的标签
     根据需求来。
      使用*选择器来给整个页面添加基础样式
      使用类选择器给不同的标签添加基础样式
      使用标签选择器给某类标签添加基础样式
      使用id、属性选择器、style属性声明方式给某个标签添加个性化样式。
    3、书写样式单
     边框设置
      border:solid 1px;
     字体设置:
      font-size:10px;设置字体大小
      font-family:"黑体";(设置字体的格式)
      font-weight：bold;设置字体加粗
     字体颜色设置
      color:颜色;
     背景颜色设置
      background-color:颜色;
     背景图片设置
      background-img:url(图片的相对路径);
     高和宽设置
     浮动设置
      float:left|right
     行高设置
      line-height:10;

　　 

css 的常用样式

       参考api 帮组文档去写

css 的盒子模型

    div标签：
      块级标签，主要是用来进行网页布局的，会将其中的子元素内容作为一个独立的整体存在。
      特点：
      默认宽度是页面的宽度，但是可以设置。
      高度默认是没有的，但是可以设置。(可以顶开)
      如果子元素设置了百分比的高或者宽，占据的是div的百分比，不是页面的。
    盒子模型：
      外边距:margin
      作用：用来设置元素和元素之间的间隔。
      居中设置:margin:0px auto;上下间隔是0px,水平居中。
      可以根据需求单独的设置上下左右的外边距。
     边框：border
      作用：用来设置元素的边框大小
          可以单独设置上下左右
     内边距：padding
      作用：设置内容和边框之间的距离
      注意：内边距不会改变内容区域的大小
      可以单独的设置上下左右的内边距
     内容区域：
      作用：改变内容区域的大小。
      设置宽和高即可改变内容区域的大小。

css 的定位 position

　　相对定位:relative
       作用：相对元素原有位置移动指定的距离(相对的自己的原有位置)
       可以使用top,left,right,bottom来进行设置。
       注意：
       其他元素的位置是不改变的。

      绝对定位:absolute
      作用：可以使用元素参照界面或者相对父元素来进行移动  
      注意：
       如果父级元素成为参照元素，必须使用相对定位属性
       默认情况下是以界面为基准进行移动的。
      固定定位:fixed
      作用：将元素固定现在页面的指定位置，不会随着滚动条的移动而改变位置。
     以上定位都可以使用top,left,right,bottom来进行移动。
    z-index:此属性是用来声明元素的显示级别的。

css 的布局