CSS属性大全（二）

最新推荐文章于 2023-05-15 11:16:38 发布

~莫~言~

最新推荐文章于 2023-05-15 11:16:38 发布

阅读量156

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/zcq125521/article/details/88706812

版权

前端专栏收录该内容

18 篇文章 3 订阅

订阅专栏

a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。

a:active 必须在 a:hover 之后。

border:1px solid black;指定边框样式（边框大小实体黑色）

border-collapse：默认边框会分开（collapse：单一边框；inherit：继承父元素border-collapse）

caption-side:指定表格标题位置;

<caption>Table 1.1 Customers</caption>

表格简单例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>简单例子(runoob.com)</title>
<style>
#customers
{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	width:100%;
	border-collapse:collapse;
}
#customers td, #customers th 
{
	font-size:1em;
	border:1px solid #98bf21;
	padding:3px 7px 2px 7px;
}
#customers th 
{
	font-size:1.1em;
	text-align:left;
	padding-top:5px;
	padding-bottom:4px;
	background-color:#A7C942;
	color:#ffffff;
}
#customers tr.alt td 
{
	color:#000000;
	background-color:#EAF2D3;
}
</style>
</head>

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

CSS 盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



加上了 DOCTYPE 声明(在 html元素前面) 它将在任何浏览器中都将正常显示。

border-top-width：上边框宽度（当然还有其他位置的，还有一些边框样式、颜色等等）

outline：围绕一个标签画一个边框（颜色样式宽度）

~莫~言~

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS属性大全（二）

a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。a:active 必须在 a:hover 之后。border:1px solid black;指定边框样式（边框大小实体黑色）border-collapse：默认边框会分开（collapse：单一边框；inherit：继承父元素border-collapse）caption-sid...
复制链接

扫一扫