首页 > 代码库 > CSS学习(二)

CSS学习(二)

 

列表

在HTML中,有两种类型的列表:

  • 无序列表 - 列表项标记用特殊图形(如小黑点、小方框等)
  • 有序列表 - 列表项的标记有数字或字母

使用CSS,可以列出进一步的样式,并可用图像作列表项标记。

所有的CSS列表属性

属性描述
list-style简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image将图象设置为列表项标志。
list-style-position设置列表中列表项标志的位置。
list-style-type设置列表项标志的类型。

 

 

CSS 表格

直接上一个实例:

技术分享
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>WENG教程</title><style>table,td,th{    border:2px solid gray;}table{    width:100%;    border-collapse:collapse;}th{    background-color:blue;    color:yellow;    height:60px;    padding:10px; // margin td、th is 6px    }td{    text-align:center;    height:35px;    vertical-align:bottom;    padding:8px; //如果在表的内容中控制空格之间的边框,应使用td和th元素的填充属性:}            </style></head><body><table><tr><th>Firstname</th><th>Lastname</th><th>Savings</th></tr><tr><td>Peter</td><td>Griffin</td><td>$100</td></tr><tr><td>Lois</td><td>Griffin</td><td>$150</td></tr><tr><td>Joe</td><td>Swanson</td><td>$300</td></tr><tr><td>Cleveland</td><td>Brown</td><td>$250</td></tr></table></body></html>
View Code

技术分享

盒子模型(Box Model)

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model):


技术分享

不同部分的说明:

    • Margin(外边距) - 清除边框外的区域,外边距是透明的。
    • Border(边框) - 围绕在内边距和内容外的边框。
    • Padding(内边距) - 清除内容周围的区域,内边距是透明的。
    • Content(内容) - 盒子的内容,显示文本和图像。

边框

边框-单独设置各边

p{    border-top-style:dotted;    border-right-style:solid;    border-bottom-style:dotted;    border-left-style:solid;}

CSS 边框属性

属性描述
border简写属性,用于把针对四个边的属性设置在一个声明。
border-style用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
border-width简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
border-color简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。
border-bottom简写属性,用于把下边框的所有属性设置到一个声明中。
border-bottom-color设置元素的下边框的颜色。
border-bottom-style设置元素的下边框的样式。
border-bottom-width设置元素的下边框的宽度。
border-left简写属性,用于把左边框的所有属性设置到一个声明中。
border-left-color设置元素的左边框的颜色。
border-left-style设置元素的左边框的样式。
border-left-width设置元素的左边框的宽度。
border-right简写属性,用于把右边框的所有属性设置到一个声明中。
border-right-color设置元素的右边框的颜色。
border-right-style设置元素的右边框的样式。
border-right-width设置元素的右边框的宽度。
border-top简写属性,用于把上边框的所有属性设置到一个声明中。
border-top-color设置元素的上边框的颜色。
border-top-style设置元素的上边框的样式。
border-top-width设置元素的上边框的宽度。

 

 

CSS 轮廓(outline)

轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

CSS outline 属性规定元素轮廓的样式、颜色和宽度。

技术分享

 
CSS" 列中的数字表示哪个CSS版本定义了该属性(CSS1 或者CSS2)。

属性说明CSS
outline在一个声明中设置所有的轮廓属性outline-color
outline-style
outline-width
inherit
2
outline-color 设置轮廓的颜色color-name
hex-number
rgb-number
invert
inherit
2
outline-style 设置轮廓的样式none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
2
outline-width 设置轮廓的宽度thin
medium
thick
length
inherit

 

CSS学习(二)