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

梦里梦外; 2022-02-25 06:28 256阅读 0赞

### 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 属性主要用于删除链接中的下划线,对文本进行修饰 ####

![在这里插入图片描述][20190401101259985.png]

#### 加入背景颜色修饰: ####

![在这里插入图片描述][20190401102704223.png]

#### CSS链接框 ####

![在这里插入图片描述][20190401103509501.png]

### 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>

![在这里插入图片描述][20190401104551797.png]

#### list-style-image属性: ####

![在这里插入图片描述][20190401104639868.png]

#### 列表简写属性:list-style ####

![在这里插入图片描述][2019040111073357.png]

### 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>

![在这里插入图片描述][20190401111548938.png]

#### 折叠边框 ####

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

![在这里插入图片描述][20190401112423171.png]

#### 表格宽度和高度 ####

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

![在这里插入图片描述][20190401112843789.png]

#### 表格文字对齐 ####

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

![在这里插入图片描述][20190401112940104.png]

#### 垂直对齐 ####

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

![在这里插入图片描述][20190401113315790.png]

#### 表格填充 ####

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

![在这里插入图片描述][20190401113705346.png]

#### 表格颜色 ####

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

![在这里插入图片描述][20190401114031288.png]

#### 表格标题位置 ####

![在这里插入图片描述][20190401114357126.png]

### CSS"盒子模型" ###

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

#### 计算公式 ####

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

<!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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWJf_size_16_color_FFFFFF_t_70 1]

### 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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWJf_size_16_color_FFFFFF_t_70 2]

#### 边框宽度 ####

可以使用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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWJf_size_16_color_FFFFFF_t_70 3]

#### 边框颜色 ####

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

![在这里插入图片描述][20190401144128507.png]

#### 设置不同的边框 ####

![在这里插入图片描述][20190401144257890.png]

#### 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一起使用。

##### 简写属性,在一个属性中设置几种特征 #####

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

[20190401101259985.png]: /images/20220225/54a502243f244ff2815a628616e1a89b.png
[20190401102704223.png]: /images/20220225/f6d94928126046deae303a6e42205f03.png
[20190401103509501.png]: /images/20220225/d13c38ee39a2469996de687f0fe1ff14.png
[20190401104551797.png]: /images/20220225/5296cb1b2d3a4468acda8009ddb0b1c6.png
[20190401104639868.png]: /images/20220225/728935dc49a346909fe4e0c06b822128.png
[2019040111073357.png]: /images/20220225/ddf9b8f5ee7a4865b1e1cef9d8d33358.png
[20190401111548938.png]: /images/20220225/5e803e03461d45a1af3e5b64dd96487c.png
[20190401112423171.png]: /images/20220225/5f0ffecdb29c40a4a0451d12b8bdf6d9.png
[20190401112843789.png]: /images/20220225/6c1a299ab57d4859b4b04f315b2732aa.png
[20190401112940104.png]: /images/20220225/e1934acf25b84bbfbd15b5980ba9b485.png
[20190401113315790.png]: /images/20220225/b3e747814d604e36a7796db01eb55f6d.png
[20190401113705346.png]: /images/20220225/335cccc2f08d4990b49e54c01895d4ad.png
[20190401114031288.png]: /images/20220225/3e3339c22a5c4fd9abcb718e8c5bd8cf.png
[20190401114357126.png]: /images/20220225/bf01e7d8b5b94c00bd07db906e141be3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWJf_size_16_color_FFFFFF_t_70]: /images/20220225/a4d11b404efa48808d43f0a6dba008fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWJf_size_16_color_FFFFFF_t_70 1]: /images/20220225/73edea302d5b4cfbb78647aaf539260e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWJf_size_16_color_FFFFFF_t_70 2]: /images/20220225/9f078d89b058493493b17cddea8092a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWJf_size_16_color_FFFFFF_t_70 3]: /images/20220225/ddc3735e8e98481fba7d290ead6a3c51.png
[20190401144128507.png]: /images/20220225/4b0e4b0f18a347d7b771b8f0883936fa.png
[20190401144257890.png]: /images/20220225/3a3b977b91a143329e0d151b3c8ccf2a.png