初识html

/*

   标签选择器：通过标签的名字来设置标签的样式。

  

   {} ：代码块（范围）

  

   逗号 ： 共同、和

  

   css样式写法：

      属性  :  值   ;

  

   分号：结束符

  

   注意：

      在html，css中所有的符号都是英文的

 

   颜色有三种不同的写法：

      1）颜色名；

      2）rgb值

      3）十六进制颜色代码

 */

   color:red;   /*  文本颜色  */

   /* 文本装饰     

    * none:消失     

    * underline:下划线    

    * line-through:贯穿线 

    * overline:顶线    */

   text-decoration: none;

   /* 文本转换

    uppercase:大写

    lowercase：小写

    capitalize：首字母大写

    * */

   text-transform:capitalize ;

 

 

   /* px：像素   cm：厘米    em：比例      %：百分比    */

   text-indent: 2em;/* 文本首行缩进 */

   word-spacing:30px ;/* 文本间隔 */

   text-align: left;/* 文本对齐方向    left、right、center */

   font-size:30px;/* 字体尺寸   */

   font-weight:bold;/* 字体粗细    normal:正常的      bold：加粗的   100~900  */

   font-family:"楷体";/* 字体 */

   font-style:italic;/* 字体样式    oblique：倾斜    italic：斜体字    normal：正常的的*/

   line-height:50px;/* 行高    文本上下居中 */

   text-shadow:2px 2px 4px gray;

   box-shadow: 1px 1px 4px lightgray;

 

 

  width:宽度

  height：高度

  background-color: 背景颜色

  background-image：url();  背景图

  background-position:    背景位置

  background-repeat：    背景重复

  background-size：背景尺寸

  border:边框（边框的宽度   边框样式    边框颜色）

  border-right：右边框

  border-top-color:上边框颜色

  border-top-width：上边框宽度

  border-top-style:上边框样式

 

所有标签都会自带display这个属性

  display ：显示状态

          block（块状）默认最大宽度，独占一行

         inline（内联）根据内容的多少决定宽度的大小，普通情况下不能设置宽高，不会独占一行

         none（消失）

         inline-block：（内联块）能设置宽高，不会独占一行

 

margin:距离（外边距）

        -left：左边

        -right:右边

        -top：上边

        -bottom:下边

     margin:一个值（四周）

             两个值（上下 、 左右）

             三个值（上、左右 、下）

             四个值（上、右、下、左）

    

        auto：自适应

    

    

     padding:填充

        -left：左边

        -right:右边

        -top：上边

        -bottom:下边

     padding：一个值（四周）

             两个值（上下 、 左右）

             三个值（上、左右 、下）

             四个值（上、右、下、左）

    

     float：漂浮   

           只有两个方向可以漂浮：left、right

    

    

     position:位置（定位）

           相对位置：relative（参照原始位置,相对位置可以更改绝对位置的参照）

           绝对位置：absolute(参照的窗口)

           固定位置：fixed(参照窗口)

    

     z-index：层级