zoukankan      html  css  js  c++  java
  • php-css外边距

    css 基本语法  selector{declaration1;declaration2;....delecrationN;} (选择器和一条或多条声明)  选择器为需要改变样式的html元素,每条声明由一个属性一个值组成。总结:selector{property:value;property:value;}

    h1{color:red;size:14px;}

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

    p{color:#ff0000;} p{color:rgb(255,0,0);}

    p{font-family:"one two";}

    p{color:red;align="center";}

    p{text-align:center;color:red;}

    p{

     text-align="center";

     color:red;

      font-family:arial;(font-family:"lucky one";)

    }

    与html一起工作class 和id对大小写敏感。

    margin声明设置中外边距属性 该属性有1-4个值 

    margin:10px 4px 12px 24px; (上右下左)

    margin:10px 5px;(上下边距为10 右左边距为5)

    margin:10px(上下左右均为10)

    eg:(背景颜色要在字体颜色前设置)

    <html>

    <head>

    <style type="text/css">

    p{

        background-color:green;

        color:red;   

        font-size:20px;

        margin:2cm 3cm 5cm 4cm;

    </style>

    </head>

    <body>

    <h1>一级标题</h1>

    <p>本段修改了格式</p>

    <h2>二级标题,并没有修改格式</h2>

    </body>

    </html>

    eg2(指定某个class采用格式)

    类选择器:元素可以基于它们的类而被选择:

    在css中,类选择器用一个.表示

    例如:.test

    td.test{

    color:red;

    font-size:20px;

    }

    <td class="test">

    实例

    <html>
    <head>
    <style type="text/css">
    p.first{
        background-color:green;
      color:red;
      font-size:30px;
      margin:2cm 3cm 4cm 3cm;

    }
    p.second{

    color:yellow;
    font-size:20px;
    margin:2cm 2cm 2cm 2cm;

    }
    </style>
    </head>
    <body>
    <h1>一级标题</h1>
    <p class="first">此处设置格式</p>
    <p>段落三未设置</p>
    <p class="second">此处设置格式2</p>
    </body>
    </html>

    属性选择器:(前提:只有规定了!DOCTYPE IE7 IE8才支持属性选择器)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <style type="text/css">

    [title]{

    background-color:green;

    color=red;

    font-size:20px

    }

    <style>

    eg:(title可赋值可不赋值 赋值为指定某一title名的约束)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <style type="text/css">
    p.test{
    background-color:red;
    font-size:20px;
    margin:2cm 2cm 2cm 2cm;
    }
    [title=JORDON]
    {
    background-color:green;
    color:red;
    font-size:30px;
    }
    </style>
    </head>
    <body>
    <h1 title="Eason">Eason</h1>
    <p title="JORDON">make another choice</p>
    <p class="test">form表单的作用</p>
    <h2 title="JORDON">JORDON</h2>
    </body>

    </html>

  • 相关阅读:
    [JSOI2008]最小生成树计数
    [SCOI2009]windy数
    Sql Server 存储过程
    Sql Server 表操作
    .NET WebService中使用 Session
    从头入手jenkins
    swiftlint 你所要知道的所有!!
    swiftlint swift代码规范检查神器
    使用RxSwift 实现登录页面的条件绑定
    iOS 设置不同环境下的配置 Debug Release 生产 测试 等等
  • 原文地址:https://www.cnblogs.com/teyues/p/5629148.html
Copyright © 2011-2022 走看看