css样式

字体样式

       1.字体类型

        font-family:字体类型

        字体类型都是计算机已经安装好的字体

        font-size: 字体大小

        font-style：字体风格

        -normal：正常

        -italic：倾斜

        -oblique：斜体

        font-weight：字体加粗

        -属性提供了100-900多个值，但是浏览器没这个设置，需要数字之间比较大的间隔才能看出效果

        -bold，bolder加粗

        -lighter 细

水平对齐方式：

         -标签中的文本，链接，图片（行内元素）等水平对齐

         text-align

          可选值：

            left：默认，左对齐

            right：右对齐

            center：居中

            justify：两端对齐

        首航缩进：

        text-indent

        行高：line-height

        -每个文本内容下存在一个看不见的线，每个线之间的距离为行高，我们通过调整行高，来间接实现调整行间距，因为css中没有之间调整行间距的属性

        特点

        -文本内容会放置在行高的垂直方向的中线上（垂直居中）

        -如果需要将文本放置在元素垂直方向中线上，则需要设置：行高=高

        文本修饰：

        text-decoration

         可选值：

            none：默认效果，经常用来去掉a的下划线

             underline：下划线

             overline：上划线

             line-through：中划线

        垂直对齐方式：

        vertical-align

        可选值：

        top：顶部

        bottom：底部

        middle：中间对齐

文本阴影效果：

                text shadow：color x-offset y-offset blur-radious

                color:阴影颜色

                x-offset：x轴偏移量， 左移为负，右移为正

                y-offset：y轴偏移量，上移为负，下移为正

                blur-radious：阴影模糊半径

设置鼠标形状

        cursor  pointer 手

a{

    cursor: pointer;

   }

 -伪类

      描述：

      -a标签存在状态

      -伪类：表示元素存在状态

      未访问状态：link

      鼠标悬浮:hover

      点击状态: active

      访问过状态:visited

      hover,active 可用于其他标签

      伪类顺序：

      -4个伪类的优先级相同

      -悬浮状态(hover) 和点击状态（active）不能互换，互换后active失效

   

      顺序：

      link>visted>hover>active

/* 链接状态 */

    a:link{

        text-decoration: none;

    }

  /* 访问状态 */

   a:visited{

     color: blue;

   }

  /* 鼠标悬浮 */

   a:hover{

      color: brown;

      font-size: 20px;

   }

  /*鼠标激活*/

  a:active{

     color: black;

  }

list-style-type:

               可选值：

                  disc：实心圆圈，默认值

                  none： 去掉默认的实心圆圈

                  circle：空心圆

                  square：实体正方形

                  decimal： 数字

            list-style-image: url('图片地址')

            list-style-position：图片位置

                可选值：

                 inside： 默认值：在列表内

                 outside： 默认值：在列表外

 

            简写：

                 list-style: 类型 图片 位置;

                常用：list-style: none;

背景样式：

          background-color：背景颜色，元素最底层

          transparent: 透明

          背景图片

          backgroud-image：url（'图片路径')

          默认图片平铺效果

          如果背景图片大于元素本身，则默认显示左上角内容

          background-repeat

          可选值：no-repeat：不平铺

                 repeat-x: x轴平铺

                 repeat-y：y轴平铺

         图片位置：

           backgroud-position x值 y值

           值可选范围：

           1、px

           2、百分比

           3、关键字：left right

        图片尺寸：

           background-size

           auto：默认值（图片原始大小）

           contain: 按比例占满元素

           cover：填充整个元素

        多个背景设置：

        background-image: url，url

/*

        -position: 方向

        linear-gradient(position,color1,color2,....);

        */

        .box{

            width: 300px;

            height: 300px;

            background-image: linear-gradient(to bottom,orange,blue);  

            background-image: linear-gradient(to top,orange,blue);  

            background-image: linear-gradient(to left,orange,blue);

            background-image: linear-gradient(to right,orange,blue);

            background-image: linear-gradient(to right bottom,orange,blue);  

            background-image: linear-gradient(to top,orange,blue,red);      

        }

径向渐变：

语法：

    background-image:  radial-gradient( shape size at position,color1,....)