CSS轮廓

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

p {
       border: 1px solid red;    outline: thick dotted green;}

    
注意:如果只有一个 !DOCTYP E指定 IE8 支持 outline 属性。

设置轮廓的样式

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;}

点线轮廓
虚线轮廓
实线轮廓
双线轮廓
凹槽轮廓
垄状轮廓
嵌入轮廓
外凸轮廓
注意: 如果只有一个 !DOCTYPE 指定 IE 8 支持 outline 属性。

设置轮廓宽度

p.one {
       border: 1px solid red;    outline: 1px solid black;}p.two {
       border: 1px solid red;    outline: thick dotted black;}

    
This is some text in a paragraoh
    
This is some text in a paragraph
    
注意:如果只有一个 !DOCTYP E指定 IE8 支持 outline 属性。

CSS边距

指定一个元素的边距

p {
       background-color: yellow;}p.size {
       margin: 50px 30px;}

    
这是一个没有指定边距大小的段落。
    
这是一个指定边距大小的段落。

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

p.ex1 {
   margin-top:2cm;}

一个没有指定边距大小的段落。
一个2厘米上边距的段落。
一个没有指定边距大小的段落。

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

p.bottommargin {
   margin-bottom:25%;}

这是一个没有指定边距大小的段落。
这是一个指定下边距大小的段落。
这是一个没有指定边距大小的段落。

CSS填充

p.ex1 {
   padding:2cm;}p.ex2 {
   padding:0.5cm 3cm;}

这个文本两边的填充边距一样。每边的填充边距为2厘米。
这个文本的顶部和底部填充边距都为0.5厘米，左右的填充边距为3厘米。

CSS分组和嵌套

组选择器

h1,h2,p {
       color:green;}

Hello World!
Smaller heading!
This is a paragraph.

嵌套选择器

p {
       color: blue;    text-align: center;}.marked {
       background-color: red;}p.marked {
       text-decoration: underline;}

    
这个段落是蓝色文本，居中对齐。
   
     
        
      
这个段落不是蓝色文本。
   
     
    
所有 class="marked"元素内的 p 元素指定一个样式，但有不同的文本颜色。
    
带下划线的p段落