zoukankan      html  css  js  c++  java
  • CSS轮廓 边距 填充 分组和嵌套

    CSS轮廓

    围绕一个元素(outline),绘制一条线

    p {
        border: 1px solid red;
        outline: thick dotted green;
    }
    <body>
        <p><b>注意:</b>如果只有一个 !DOCTYP E指定 IE8 支持 outline 属性。</p>
    </body>

    设置轮廓的样式

    p {border:1px solid red;}
    p.dotted {outline-style:dotted;}
    p.dashed {outline-style:dashed;}
    p.solid {outline-style:solid;}
    p.double {outline-style:double;}
    p.groove {outline-style:groove;}
    p.ridge {outline-style:ridge;}
    p.inset {outline-style:inset;}
    p.outset {outline-style:outset;}
    <body>
    
    <p class="dotted">点线轮廓</p>
    <p class="dashed">虚线轮廓</p>
    <p class="solid">实线轮廓</p>
    <p class="double">双线轮廓</p>
    <p class="groove">凹槽轮廓</p>
    <p class="ridge">垄状轮廓</p>
    <p class="inset">嵌入轮廓</p>
    <p class="outset">外凸轮廓</p>
    <p><b>注意:</b> 如果只有一个 !DOCTYPE 指定 IE 8 支持 outline 属性。</p>
    </body>

    设置轮廓宽度

    p.one {
        border: 1px solid red;
        outline: 1px solid black;
    }
    p.two {
        border: 1px solid red;
        outline: thick dotted black;
    }
    <body>
        <p class="one">This is some text in a paragraoh</p>
        <p class="two">This is some text in a paragraph</p>
        <p><b>注意:</b>如果只有一个 !DOCTYP E指定 IE8 支持 outline 属性。</p>
    </body>

    CSS边距

    指定一个元素的边距

    p {
        background-color: yellow;
    }
    p.size {
        margin: 50px 30px;
    }
    <body>
        <p>这是一个没有指定边距大小的段落。</p>
        <p class="size">这是一个指定边距大小的段落。</p>
    </body>

    文本顶部边距设置的值使用厘米

    p.ex1 {margin-top:2cm;}
    <body>
    
    <p>一个没有指定边距大小的段落。</p>
    <p class="ex1">一个2厘米上边距的段落。</p>
    <p>一个没有指定边距大小的段落。</p>
    
    </body>

    使用百分比值设置文本的地步边缘

    p.bottommargin {margin-bottom:25%;}
    <body>
    
    <p>这是一个没有指定边距大小的段落。</p>
    <p class="bottommargin">这是一个指定下边距大小的段落。</p>
    <p>这是一个没有指定边距大小的段落。</p>
    
    </body>

    CSS填充

    p.ex1 {padding:2cm;}
    p.ex2 {padding:0.5cm 3cm;}
    <body>
    <p class="ex1">这个文本两边的填充边距一样。每边的填充边距为2厘米。</p>
    <p class="ex2">这个文本的顶部和底部填充边距都为0.5厘米,左右的填充边距为3厘米。</p>
    </body>

    CSS分组和嵌套

    组选择器

    h1,h2,p {
        color:green;
    }
    <body>
    <h1>Hello World!</h1>
    <h2>Smaller heading!</h2>
    <p>This is a paragraph.</p>
    </body>

    嵌套选择器

    p {
        color: blue;
        text-align: center;
    }
    .marked {
        background-color: red;
    }
    p.marked {
        text-decoration: underline;
    }
    <body>
        <p >这个段落是蓝色文本,居中对齐。</p>
       <div class="marked">
            <P>这个段落不是蓝色文本。</P>
       </div>
        <P>所有 class="marked"元素内的 p 元素指定一个样式,但有不同的文本颜色。</P>
        <p class="marked">带下划线的p段落</p>
    </body>
  • 相关阅读:
    大话设计模式之代理模式
    大话设计模式之装饰者模式
    策略模式与简单工厂模式
    一个简单的使用Quartz和Oozie调度作业给大数据计算平台执行
    oozie JAVA Client 编程提交作业
    HashMap分析及散列的冲突处理
    cmp排序hdoj 1106排序
    定义member【C++】cstddef中4个定义
    目录启动CXF启动报告LinkageError异常以及Java的endorsed机制
    算法代码[置顶] 机器学习实战之KNN算法详解
  • 原文地址:https://www.cnblogs.com/Tony98/p/10964784.html
Copyright © 2011-2022 走看看