CSS学习之链接,列表,表格,盒子模型,边框

CSS链接

链接的样式,可以用任何CSS属性(如颜色,字体,背景等)。
特别的链接,可以有不同的样式,这取决于他们是什么状态。
这四个链接状态是:

a:link - 正常,未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

链接顺序:

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
a:link {color:#000000;}      /* 未访问链接,黑色*/
a:visited {color:#00FF00;}  /* 已访问链接,绿色*/
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 洋红色*/
a:active {color:#0000FF;}  /* 鼠标点击时 蓝色*/
</style>
</head>
<body>
<p><b><a href="http://www.baidu.com" target="_blank">这是一个链接</a></b></p>
</body>
</html>

text-decoration 属性主要用于删除链接中的下划线,对文本进行修饰

<style>
/*text-decoration 属性主要用于删除链接中的下划线:*/
a:link {text-decoration:none;}      /* 未访问链接*/
a:visited {text-decoration:none;}  /* 已访问链接*/
a:hover {text-decoration:underline;}  /* 鼠标移动到链接上*/
a:active {text-decoration:underline;}  /* 鼠标点击时*/
</style>
</head>
<body>
<p><b><a href="http://www.baidu.com" target="_blank">百度主页</a></b></p>
</body>

在这里插入图片描述

加入背景颜色修饰:

<style>
a:link {background-color:#B2FF99;}    /* 未访问链接 */
a:visited {background-color:#FFFF85;} /* 已访问链接 */
a:hover {background-color:#FF704D;}   /* 鼠标移动到链接上 */
a:active {background-color:#FF704D;}  /* 鼠标点击时 */
</style>
</head>
<body>
<p><b><a href="http://www.baidu.com" target="_blank">百度主页</a></b></p>
</body>

在这里插入图片描述

CSS链接框

<style>
a:link,a:visited
{
	display:block; /*display 属性规定元素应该生成的框的类型,block代表此元素将显示为块级元素,此元素前后会带有换行符。*/
	font-weight:bold;
	color:#FFFFFF;
	background-color:#98bf21;
	width:120px;
	text-align:center;
	padding:4px;/*padding 简写属性在一个声明中设置所有内边距属性。此例表示四边边距都是4px*/
	text-decoration:none;
}
a:hover,a:active
{
	background-color:#7A991A;
}
</style>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">这是一个链接</a>
</body>

在这里插入图片描述

CSS列表

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

列表:默认列表和加入list-style-type属性列表进行对比

在HTML中,有两种类型的列表:
无序列表 - 列表项标记用特殊图形(如小黑点、小方框等)
有序列表 - 列表项的标记有数字或字母

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS列表</title> 
<style>
ul.a {list-style-type:circle;}
ol.b {list-style-type:lower-alpha;}
</style>
</head>
<body>
<p>无序列表实例:</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>
<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>
<p>有序列表实例:</p>
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>
<ol class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>
</body>
</html>

在这里插入图片描述

list-style-image属性:

<style>
ul 
{
	list-style-image:url('sqpurple.gif');
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>

在这里插入图片描述

列表简写属性:list-style

<style>
ul 
{
	list-style:square url("sqpurple.gif");
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>

在这里插入图片描述

CSS表格

表格边框(在html学习中都有详细的代码,只是加了style属性,后续将不再赘述)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>css表格</title>
<style>
table,th,td
{
	border:1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>

在这里插入图片描述

折叠边框

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开:不然向上述例子会产生双边框现象.

<style>
table {
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid black;
}
</style>

在这里插入图片描述

表格宽度和高度

Width和height属性定义表格的宽度和高度。
下面的例子是设置100%的宽度,50像素的th元素的高度的表格:

<style>
table,td,th
{
	border:1px solid black;
}
table
{
	width:100%;
}
th
{
	height:50px;
}
</style>

在这里插入图片描述

表格文字对齐

表格中的文本对齐和垂直对齐属性。
text-align属性设置水平对齐方式,向左,右,或中心:

<style>
table,td,th
{
	border:1px solid black;
}
td
{
	text-align:right;
}
</style>

在这里插入图片描述

垂直对齐

垂直对齐属性设置垂直对齐,比如顶部,底部或中间:

<style>
table, td, th
{
	border:1px solid black;
}
td
{
	height:50px;
	vertical-align:top;
}
</style>

在这里插入图片描述

表格填充

如果在表的内容中控制空格之间的边框,应使用td和th元素的填充属性:
实例为上下左右均距边框15px

<style>
table, td, th
{
	border:1px solid black;
}
td
{
	padding:15px;
}
</style>

在这里插入图片描述

表格颜色

下面的例子指定边框的颜色,和th元素的文本和背景颜色

<style>
table, td, th
{
	border:1px solid green;
}
th
{
	background-color:green;
	color:white;
}
</style>

在这里插入图片描述

表格标题位置

<style>
table,th,td
{
	border:1px solid black;
}
caption {caption-side:top;}
</style>
</head>
<body>
<table>
<caption>Table 1.1 Customers</caption>

在这里插入图片描述

CSS"盒子模型"

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

计算公式

最终元素的总宽度计算公式是这样的:
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的:
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>盒子模型</title>
<style>
div {
    background-color: lightgrey;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}
</style>
</head>
<body>
<h2>盒子模型演示</h2>
<p>CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。</p>
<div>这里是盒子内的实际内容。有 25px 内间距,25px 外间距、25px 绿色边框。</div>
</body>
</html>

在这里插入图片描述

CSS边框

border-style属性用来定义边框的样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS边框</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。
注意:“border-width” 属性 如果单独使用则不起作用。要先使用 “border-style” 属性来设置边框。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS边框宽度</title>
<style>
p.one 
{
	border-style:solid;
	border-width:5px;
}
p.two 
{
	border-style:solid;
	border-width:medium;
}
p.three
{
	border-style:solid;
	border-width:0.1em;
}
</style>
</head>
<body>
<p class="one">一些文本。</p>
<p class="two">一些文本。</p>
<p class="three">一些文本。</p>
</body>
</html>

在这里插入图片描述

边框颜色

border-color属性用于设置边框的颜色。可以设置的颜色:
name - 指定颜色的名称,如 “red”
RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
Hex - 指定16进制值, 如 “#ff0000”
您还可以设置边框的颜色为"transparent"。
注意: border-color单独使用是不起作用的,必须得先使用border-style来设置边框样式。

<style>
p.one
{
	border-style:solid;
	border-color:red;
}
p.two
{
	border-style:solid;
	border-color:#98bf21;
} 
</style>
</head>

<body>
<p class="one">实线红色边框</p>
<p class="two">实线绿色边框</p>
</body>

在这里插入图片描述

设置不同的边框

<style>
p
{
	border-top-style:dotted;
	border-right-style:solid;
	border-bottom-style:dotted;
	border-left-style:solid;
}
</style>
</head>
<body>
<p>两个不同的边界样式。</p>
</body>

在这里插入图片描述

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一起使用。
简写属性,在一个属性中设置几种特征
<style>
p
{
	border:5px solid red;
}
</style>

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			设置元素的上边框的宽度。

没有更多推荐了,返回首页