码迷,mamicode.com
首页 > Web开发 > 详细

CSS学习(二)

时间:2017-07-19 00:12:48      阅读:232      评论:0      收藏:0      [点我收藏+]

标签:medium   color   center   rgb   .com   splay   img   黑点   code   

 

列表

在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学习(二)

标签:medium   color   center   rgb   .com   splay   img   黑点   code   

原文地址:http://www.cnblogs.com/arxive/p/7203301.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!