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注释方式  <!--......-->

  • 相关阅读:
    <script>元素
    女朋友问什么是动态规划,应该怎么回答?
    从输入URL到页面展示,这中间都发生了什么?
    TypeScript之父:JS不是竞争对手,曾在惧怕开源的微软文化中艰难求生
    Flash 终将谢幕:微软将于年底停止对 Flash 的支持
    尤雨溪:TypeScript不会取代JavaScript
    JVM参数设置、分析(转发)
    -XX:PermSize -XX:MaxPermSize 永久区参数设置
    堆的分配参数
    -Xmx 和 –Xms 设置最大堆和最小堆
  • 原文地址:https://www.cnblogs.com/syyy/p/5841674.html
Copyright © 2011-2022 走看看