zoukankan      html  css  js  c++  java
  • css层叠样式表总结

    一.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{

          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*/

      

  • 相关阅读:
    3373=数据结构实验之查找一:二叉排序树
    3345=数据结构实验之二叉树六:哈夫曼编码
    3341=数据结构实验之二叉树二:遍历二叉树
    3340=数据结构实验之二叉树一:树的同构
    3362=数据结构实验之图论六:村村通公路
    Object处理方法返回值
    ASPCTJ
    myBatis 多对多
    初识MyBatis
    测试题
  • 原文地址:https://www.cnblogs.com/reaptomorrow-flydream/p/6445996.html
Copyright © 2011-2022 走看看