css层叠样式表总结

时间:2022-03-09 13:19:01

一.css

  css里注释只有一种 /*  */

二.css与HTML四种结合方式

  1.行内样式

    在标签中加入style属性  内部的写法:key1:value;key2:value;

      <div style="font-size:4cm">css</div>

  2.内嵌样式

      <style type="text/css">

        div{

            font-size:4cm;

          }

      </style>

      作用于当前页面中所有具有相同选择器的标签

  3.外部样式引入(主流)

    <link rel="stylesheet" type="text/css" href="demo1.css"></link>

    href指定的是样式文件的样式;必须一个个引入,多个link。

  4.  <style>

      @import url(demon2.css);  //分号一定要加

    </style>

  后三种引入方式一般都写在<head></head>中

  优先级总结:就近原则

三.六种选择器

  1.HTML选择器

    div{

        font-size:4cm;

      }

  2.id选择器  #定义css选择器

    #mydiv{

          color:red;

        }

  3. class选择器  .开始--------->引入时在标签中用class属性

    .myclass{

          font-weight:bold;

         }

  4.关联选择器

    选择器1 选择器2 p div{ 

              font-family:"黑体";

            }

  5.组合选择器

    选择器1,选择器2{}

  6.伪元素选择器

    a:link  超链接未点击的状态

    a:visited  被访问后的状态

    a:hover  光标移到超链接上的状态(未点击)

    a:active  点击超链接时的状态

    <style>

       a{

          font-size:20px;

          color:blue;

        }

        a:hover{

          font-size:50px;

          color:yellow;

           }

        a:visited{

           font-size:10px;

           color:green;

            }

        a:active{

          font-size:100px;

          color:red;

            }

    </style>

四.

  1.字体样式

    font-style:italic;  斜体

    font-weight:bold;  粗体

    font-size:36px;  字号

    font-family:"黑体";  字体

    text-indent:2em;  首行缩进

  2.文本样式

    text-align:right;  右边输入

  3.背景样式

    background:red url('photo.jpg') 150px 40px no-repeat;

    background-color:red;

    background-image:url('photo.jpg');

    background-position-x:150px;

    background-position-y:40px;

    background-repeat:no-repeat;(repeat-x  水平平铺;repeat-y  垂直平铺)

  4.定位

    div{

      width:150px;

      height:60px;

      border:1px solid red;  /*边框 宽度 实线 边框颜色*/

      margin:2px;  /*div与div之间的间距*/

      margin:2px 3px 5px  上2px 左右3px 下5px

      margin:2px 3px  上下2px 左右3px

      padding:10px;  /*边框与文字的距离*/

      }

  5.布局

    float:right;  /*漂浮效果 left center right*/

    clear:both;  /*清除 left right both*/