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

  • 相关阅读:
    Metinfo 5.x 管理员密码重置漏洞
    【CVE-2018-11116】openwrt rpcd 配置文件错误导致访问控制失效
    openwrt-rpcd服务ACL配置错误风险分析
    黑客基础知识
    渗透测试(漏洞利用)
    Niagara物联网框架机制二(笔记)
    基于kali linux无线网络渗透测试
    渗透测试(漏洞扫描)
    Workbench热水泵系统
    Niagara物联网框架机制一(笔记)
  • 原文地址:https://www.cnblogs.com/syyy/p/5841674.html
Copyright © 2011-2022 走看看