zoukankan      html  css  js  c++  java
  • CSS样式

    1.内链样式表

      格式:

    <body style="background-color:green margin:0; padding:0;"></body>

    2.嵌入式样式表

      需要将样式放在<head></head>中

      格式:

    <head>
        <style type="text/css">
            body{
                background-color:green;
                color:red;
            }
            p{
                color:#fff;
            }
      </style> </head> <body> <p>学习CSS</p> </body>

    3.引入式样式表

    原html文件中格式:

    <hesd>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    新建一个名为style.css的文件,内容格式为:

    body{
      background-color:red;
      color:#fff;    
    }

     4.标记选择器

      一个选择器可以控制若干个样式属性,他们之间用分号隔开,最后一个分号可以不加

    <head>
        <style type="text/css">
            p{
                color:#fff; font-size:18px;
            }
        </style>
    </head>
    <body>
           <p>学习CSS</p>
    </body>

    5.class选择器

      定义以.开始

      可以重复使用

      可以控制div容器

    <head>
        <style type="text/css">
               .p { color:#fff; font-size:18px;}
        </style>
    </head>
    <body>
           <p class="p">学习CSS</p>
    </body>

     6.子类选择器

    <head>
        <style type="text/css">
               .p { color:#fff; font-size:18px;} /* 整个div*/
                .p p{color:red;} /* 学习css*/
        </style>
    </head>
    <body>
        <div class="p">
           <p>学习CSS</p>
            学习学习学习
        </div>
    </body>

    7.ID选择器

      唯一选择器

      定义以#开始

    <head>
        <style type="text/css">
               #p { color:#fff; font-size:18px;}
        </style>
    </head>
    <body>
           <p id="p">学习CSS</p>
    </body>

    8.优先级问题

      1)id>class>html

      2)同级时选择离元素最近的一个

    9.组合选择器(同时控制多个元素)

    h1,h2,div {font-size:14px;color:red;}

    10.伪元素选择器(控制超链接样式)

      1)a:link  正常连接的样式

      2)a:hover  鼠标放上去的样式

      3)a:active  选择链接时的样式

      4)a:visited  已经访问过的链接的样式

    11.CSS注释方式  /*......*/

      html注释方式  <!--......-->

  • 相关阅读:
    コナン純黒のナイトメア20180715
    コナン純黒のナイトメア20180630
    コナン純黒のナイトメア20180629
    コナン純黒のナイトメア20180623
    コナン純黒のナイトメア20180622
    コナン純黒のナイトメア20180616
    コナン純黒のナイトメア20180613
    コナン純黒のナイトメア20180611
    单词乱记 20180607
    五周突破日语能力考试 单词5-2
  • 原文地址:https://www.cnblogs.com/syyy/p/5841674.html
Copyright © 2011-2022 走看看