前端三件套之CSS（二）

前端 CSS

字数统计: 1.9k阅读时长: 8 min

 2022/10/28 

CSS表格

表格边框

使用border属性可以指定CSS表格边框：

1
2
3

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

由于表格和th/td元素有独立的边界，故会显示有双边框。

折叠边框

使用border-collapse属性可以设置表格的边框是否被折叠成一个单一的边框或隔开：

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

表格宽度和高度

使用width和height属性定义表格的宽度和高度：

table{
    width:100%;
}
th{
    height:50px;
}

表格文字对齐

表格中的文字对齐可分为水平对齐和垂直对齐。

使用text-align属性设置水平对齐方式，如向左对齐left、向右对齐right或居中对齐center：

1
2
3

td{
	text-align:right;
}

使用vertical-align属性设置垂直对齐方式，如顶部top、底部bottom或中间center：

1
2
3

td{
	vertical-align:bottom;
}

表格填充

使用padding属性控制内容与边框之间的距离：

1
2
3

td{
	padding:15px;
}

表格颜色

使用border属性指定边框的颜色，使用color属性控制文本颜色，使用background-color属性控制背景颜色：

table,td,th{
    border:1px solid green;/*solid指边框线为实线*/
}
th{
    background-color:green;
    color:white;
}

盒子模型

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，包括边距、边框、填充和实际内容。盒模型允许在其他元素和周围元素边框之间的空间放置元素。

标准盒子模型如下图所示：

Margin（外边距）：盒子与其他盒子的距离。Margin没有背景颜色，其完全透明
Border（边框）：盒子的厚度和它的颜色或材料。边框颜色会受到盒子的背景颜色影响
Padding（内边距）：盒子里与盒中内容的填充物。会受到框中填充的背景颜色影响
Content（内容）：盒子里装的东西，显示文本和图像

元素的宽度和高度

当指定一个CSS元素的宽度和高度属性时，实质上只是设置内容区域的宽度和高度，除此之外，还需要添加填充、边框和边距：

a{
    width:250px;
    padding:10px;
    border:5 px solid gray;
    margin:10px;
}

则该元素的总宽度为250px（宽）+20px（左右填充）+10px（左右边框）+20px（左右边距=300px。

因此，元素的总宽度计算公式为：

元素的总宽度=元素自身宽度+左填充+右填充+左边框+右边框+左边距+右边距

同理可得，元素的总高度计算公式为：

元素的总高度=元素自身高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

网页的宽度一般为1920px，高度不限。有限可视区在：950px~1200px的宽度之间。

边框

边框样式

使用border-style属性可以定义边框的样式。

border-style有以下属性值：

none：默认无边框
dotted：定义一个点线框
dashed：定义一个虚线框
solid：定义实线边界
double：定义两个边界。两个边界的宽度和border-width的值相同
groove：定义3D沟槽边距。效果取决于边界的颜色值
ridge：定义3D脊边界。效果取决于边界的颜色值
inset：定义一个3D的嵌入边框。效果取决于边界的颜色值
outset：定义一个3D的突出边框。效果取决于边界的颜色值

边框宽度

使用border-width属性可以为边框指定宽度。可以指定长度值，比如2px或0.1em；或使用3个关键字之一：thin、medium（默认值）和thick。

p{
    border-style:solid;
    border-width:medium;
}

边框颜色

使用border-color属性可以设置边框的颜色，一次最多可以接受4个颜色值，使用border-color必须得先使用border-style来设置边框样式：

p{
    border-style:solid;
    border-color:red;
}

单独设置各边

可以指定不同的侧面不同的边框：

p{
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
}
/*方法2*/
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

透明边框

透明样式的定义如下：

a:link,a:visited{
    border-style:solid;
    border-width:5px;
    border-color:transparent;
}
a:hover{
    border-color:gray;
}

简写边框属性

可以在border属性中设置以下属性：

border-width
border-style
border-color

1	border:5px solid red;

CSS伪类

伪类可以用来添加一些选择器的特殊效果。

伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。伪类的名称不区分大小写，伪类的语法如下：

1
2
3

selector:pseudo-class{
	property:value;
}

CSS类中也可以使用伪类：

1
2
3

selector.class:pseudo-class{
	property:value;
}

anchor伪类

在支持CSS的浏览器中，链接的不同状态可以以不同的方式显示。

a:link{
    color:blue;
}
a:visited{
    color:red;
}
a:hover{
    color:#FF00FF;
}
a:active{
    color:#0000FF;
}

伪类和CSS类

伪类可以与CSS类配合使用：

a.red:visited{
    color:#FF0000;
}
<a class="red" href="1.html">CSS style</a>

`first-child`伪类

可以使用first-child伪类来选择元素的第一个子元素。

注意：在IE8之前是版本必须声明<!DOCTYPE>，first-child才会生效。

如用来匹配第一个元素：

<html>
<head>
<style>
p:first-child{
    color:blue;
}    
</style>    
</head>    
<body>
    <p>我是狼</p>
    <p>我是小狼</p>
</body>
</html>

运行结果如下：

如用来匹配所有元素中的第一个元素：

<html>
<head>
<style>
p>i:first-child{
    color:blue;
}    
</style>    
</head>    
<body>
    <p>我是<i>一只</i><i>狼</i></p>
    <p>我是<i>一只</i><i>小</i>狼</p>
</body>
</html>

运行结果如下：

如用来匹配所有作为第一个子元素的元素中的所有元素：

<html>
<head>
<style>
p:first-child i{
    color:blue;
}    
</style>    
</head>    
<body>
    <p>我是<i>一只</i><i>狼</i></p>
    <p>我是<i>一只</i><i>小</i>狼</p>
</body>
</html>

运行结果如下：

lang伪类

lang伪类可以为不同的语言定义特殊的规则。

注意：在IE8之前是版本必须声明<!DOCTYPE>才能支持lang伪类。

如lang类为属性值为no的q元素定义引号的类型：

<html>
<head>
<style>
q:lang(no){
    quotes:"~""~";
}    
</style>    
</head>    
<body>
    <p>我是<q lang="no">一只</q>狼</p>
    <p>我是一只<q lang="no">小狼</q></p>
</body>
</html>