CSS 列表
- 设置不同的列表项标记为有序列表
- 设置不同的列表项标记为无序列表
- 设置列表项标记为图像
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
ul {
list-style-image:url('sqpurple.gif');
}
浏览器兼容性问题的解决;
ul{
list-style-type:none;
padding:0px;
margin:0px;
}
ul li{
background-image:url(sqpurple.gif);
background-repeat:no-repeat;
background-position:0px 5px;
padding-left:14px;
}
列表 -简写属性
ul {
list-style:square url("sqpurple.gif");
}
可以按顺序设置如下属性:
- list-style-type
- list-style-position (有关说明,请参见下面的CSS属性表)
- list-style-image
如果上述值丢失一个,其余仍在指定的顺序,就没关系。
table,th,td{
border:1px solid black;
}
表格有双边框,因为表和th/ td元素有独立的边界;
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开;
table,td,th{
border:1px solid black;
}
table{
width:100%;
}
th{
height:50px;
}
td{
text-align:right;<!--表格中文本 水平对齐方式-->
vertical-align:bottom;<!--表格中文本 竖直对齐方式-->
}
td{
padding:15px;<!--在表的内容中控制空格之间的边框-->
}
th{
background-color:green;<!--表格的背景颜色-->
color:white;<!--表格中的文本颜色-->
}
caption {caption-side:top;}<!--表格标题位置-->
CSS 盒子模型(Box Model)
- 本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容;
- 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素;
不同部分的说明:
- Margin(外边距) - 清除边框外的区域,外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图像。
div {
background-color: lightgrey;
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
- 指定一个CSS元素的宽度和高度时,只是设置内容区域的宽度和高度
- 完全大小的元素,你还必须添加填充,边框和边距。.
300px (宽) + 50px (左 + 右填充) + 50px (左 + 右边框) + 50px (左 + 右边距) = 450px
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
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;}
</style>
</head>
<body>
<p class="none">无边框。</p>
<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 class="hidden">隐藏边框。</p>
</body>
</html>
边框宽度
- 可以通过 border-width 属性为边框指定宽度;
- 两种方法:可以指定长度值,比如 2px 或 0.1em(单位为 px, pt, cm, em 等);
- 或者使用 3 个关键字之一,它们分别是 thick 、medium(默认值) 和 thin;
- 注意:CSS 没有定义 3 个关键字的具体宽度,所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px,而另一个用户则分别设置为 3px、2px 和 1px;
- "border-width" 属性 单独使用则不起作用;要先使用 "border-style" 属性来设置边框;
p.one {
border-style:solid;
border-width:5px;
}
p.two {
border-style:solid;
border-width:medium;
}
p.three{
border-style:solid;
border-width:1px;
}
边框颜色
border-color属性用于设置边框的颜色。可以设置的颜色:
- name - 指定颜色的名称,如 "red"
- RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
- Hex - 指定16进制值, 如 "#ff0000"
您还可以设置边框的颜色为"transparent"。
注意: border-color单独使用是不起作用的,必须得先使用border-style来设置边框样式。
p.one{
border-style:solid;
border-color:red;
}
p.two{
border-style:solid;
border-color:#98bf21;
}
边框-单独设置各边
在CSS中,可以指定不同的侧面不同的边框:
p{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
p{
border-style:dotted solid;
}
border-style属性可以有1-4个值:
- border-style:dotted solid double dashed;
- 上边框是 dotted
- 右边框是 solid
- 底边框是 double
- 左边框是 dashed
- border-style:dotted solid double;
- 上边框是 dotted
- 左、右边框是 solid
- 底边框是 double
- border-style:dotted solid;
- 上、底边框是 dotted
- 右、左边框是 solid
- border-style:dotted;
- 四面边框是 dotted
上面的例子用了border-style。然而,它也可以和border-width 、 border-color一起使用。
边框-简写属性
你可以在"border"属性中设置:
- border-width
- border-style (required)
- border-color
p{
border:5px solid red;
}
border-style:属性1,属性2,属性3,属性4
上->右->下->左
border-style:属性1,属性2,属性3
上->左右->下
border-style:属性1,属性2
上下->左右
border-style:属性1
上下左右属性相同