css所有缩写属性,（二）CSS所有属性总结（详细实例版）

(二)表格、盒模型、边框、轮廓、边距

CSS表格

1.给th、td设置黑色边框

table,th,td

{

border:1px solid black;

}

image.png

2.使用border-collaose

table { border-collapse: collapse;}

table, td, th { border: 1px solid black;}

3.设置表格的宽度和高度

table,td,th

{border:1px solid black;}

table{width:100%;}

th{height:50px;}

image.png

4.表格中的水平文本对齐

table,td,th

{border:1px solid black;}

td{text-align:right;}

image.png

5、表格中的垂直文本对齐

table, td, th

{border:1px solid black;}

td

{height:50px;vertical-align:bottom;}

image.png

6.表格边框的颜色

table, td, th

{border:1px solid green;}

th,td

{background-color:green;color:white;}

image.png

7.设置表格标题的位置

caption {caption-side:bottom;}

一个表格的例子

菜鸟教程(runoob.com)

{

font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;

width:100%;

border-collapse:collapse;

}

{

font-size:1em;

border:1px solid #98bf21;

padding:3px 7px 2px 7px;

}

{

font-size:1.1em;

text-align:left;

padding-top:5px;

padding-bottom:4px;

background-color:#A7C942;

color:#ffffff;

}

{

color:#000000;

background-color:#EAF2D3;

}

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Berglunds snabbköp	Christina Berglund	Sweden
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria
Island Trading	Helen Bennett	UK
Königlich Essen	Philip Cramer	Germany
Laughing Bacchus Winecellars	Yoshi Tannamuri	Canada
Magazzini Alimentari Riuniti	Giovanni Rovelli	Italy
North/South	Simon Crowther	UK
Paris spécialités	Marie Bertrand	France

image.png

CSS盒子模型

下图充分解释了一个盒子模型

盒子模型

当指定元素的总宽度为250像素时

在设置padding、margin、border是要注意范围

div

{

width:220px;

padding:10px;

border:5px solid gray;

margin:0px;

}

image.png

跨浏览器解决方法

在上面添加这一行代码，将可以在任何浏览器上显示

CSS边框

设置四个边框的宽度

p.one

{

border-style:solid;

border-width:5px;

}

p.two

{

border-style:solid;

border-width:medium;

}

p.three

{

border-style:solid;

border-width:1px;

}

image.png

设置不同方向边框的宽度

上边框border-top-width:15px;

下边框：border-bottom-width:15px;

左边框：border-left-width:15px;

右边框：border-right-width:15px;

设置四个边框的样式

p.none {border-style:none;}

p.dotted {border-style:dotted;}

p.dashed {border-style:dashed;}

p.solid {border-style:solid;}

p.double {border-style:double;}

p.groove {border-style:groove;}

p.ridge {border-style:ridge;}

p.inset {border-style:inset;}

p.outset {border-style:outset;}

p.hidden {border-style:hidden;}

边框样式

设置不同方向边框的样式

上边框样式：border-top-style:solid;

下边框样式：border-bottom-style:solid;

左边框样式：border-left-style:solid;

右边框样式：border-right-style:solid;

设置四个边框的颜色

p.one

{

border-style:solid;

border-color:#0000ff;

}

p.two

{

border-style:solid;

border-color:#ff0000 #0000ff;

}

p.three

{

border-style:solid;

border-color:#ff0000 #00ff00 #0000ff;

}

p.four

{

border-style:solid;

border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);

}

image.png

设置不同方向边框的颜色

上边框：border-top-color:#ff0000;

下边框：border-bottom-color:#ff0000;

左边框：border-left-color:#ff0000;

右边框：border-right-color:#ff0000;

在一个声明中的所有边框属性

四个边框：p {border:5px solid red;}

上边框：border-top:thick double #ff0000;

下边框：border-bottom:thick dotted #ff0000;

左边框：border-left:thick double #ff0000;

右边框：border-right:thick double #ff0000;

CSS轮廓

围绕一个元素绘制一条轮廓线

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

image.png

设置轮廓的样式

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

image.png

设置轮廓其他属性

颜色：outline-color:#00ff00;

宽度：outline-width:thin;

CSS边距

指定一个元素的边距

margin-top:100px;

margin-bottom:100px;

margin-right:50px;

margin-left:50px;

image.png

边距缩写属性

margin:100px 50px;