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