CSS基础知识36~39

最新推荐文章于 2024-07-18 14:29:38 发布

删除没备份的痛

最新推荐文章于 2024-07-18 14:29:38 发布

阅读量85

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/qq_41995845/article/details/120301428

版权

36、CSS 图标

如何添加图标
向 HTML 页面添加图标的最简单方法是使用图标库，比如 Font Awesome。

将指定的图标类的名称添加到任何行内 HTML 元素（如 <i> 或 <span>）。

下面的图标库中的所有图标都是可缩放矢量，可以使用 CSS进行自定义（大小、颜色、阴影等）。

Font Awesome 图标
如需使用 Font Awesome 图标，请访问 fontawesome.com，登录并获取代码添加到 HTML 页面的 <head> 部分：

<script src="https://kit.fontawesome.com/yourcode.js"></script>

请在我们的 Font Awesome 5 教程中，阅读有关如何开始使用 Font Awesome 的更多内容。

提示：无需下载或安装！

实例

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>

<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>

</body>
</html>

结果：

Bootstrap 图标
如需使用 Bootstrap glyphicons，请在 HTML 页面的 <head> 部分内添加这行：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

提示：无需下载或安装！

实例

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>

</body>
</html>

结果：

亲自试一试
Google 图标
如需使用 Google 图标，请在HTML页面的部分中添加以下行：

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

提示：无需下载或安装！

实例

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>

</body>
</html>

结果：

亲自试一试
37、设置链接样式
链接可以使用任何 CSS 属性（例如 color、font-family、background 等）来设置样式。

实例


```css
a {
  color: hotpink;
}


亲自试一试
此外，可以根据链接处于什么状态来设置链接的不同样式。

四种链接状态分别是：

a:link - 正常的，未访问的链接
a:visited - 用户访问过的链接
a:hover - 用户将鼠标悬停在链接上时
a:active - 链接被点击时
实例


```css

```css
/* 未被访问的链接 */
a:link {
  color: red;
}

/* 已被访问的链接 */
a:visited {
  color: green;
}

/* 将鼠标悬停在链接上 */
a:hover {
  color: hotpink;
}

/* 被选择的链接 */
a:active {
  color: blue;
}




亲自试一试
如果为多个链接状态设置样式，请遵循如下顺序规则：

a:hover 必须 a:link 和 a:visited 之后
a:active 必须在 a:hover 之后
文本装饰
text-decoration 属性主要用于从链接中删除下划线：

实例


```css
a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

亲自试一试
背景色
background-color 属性可用于指定链接的背景色：

实例

a:link {
  background-color: yellow;
}

a:visited {
  background-color: cyan;
}

a:hover {
  background-color: lightgreen;
}

a:active {
  background-color: hotpink;
}

亲自试一试
链接按钮
本例演示了一个更高级的例子，其中我们组合了多个 CSS 属性，将链接显示为框/按钮：

实例

a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center; 
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}

38、使用 CSS 可以极大地改善 HTML 表格的外观：
表格边框
如需在 CSS 中设置表格边框，请使用 border 属性。

下例为 <table>、<th> 和 <td> 元素规定了黑色边框：

Firstname Lastname
Bill Gates
Steve Jobs
实例

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

注意：上例中的表格拥有双边框。这是因为 table 和 <th> 和 <td> 元素都有单独的边框。
全宽表格
在某些情况下，上表似乎很小。如果您需要一个可以覆盖整个屏幕（全宽）的表格，请为 <table> 元素添加 width: 100%：

实例

table {
  width: 100%;
}

双边框
请注意上面的表格有双边框。这是因为表格和 th、td 元素都有单独的边框。

如需删除双边框，请看下面的例子。

合并表格边框
border-collapse 属性设置是否将表格边框折叠为单一边框：

Firstname Lastname
Bill Gates
Steve Jobs
实例


```css
table {
  border-collapse: collapse;
}

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


如果只希望表格周围有边框，则仅需为 <table> 指定 border 属性：

Firstname	Lastname
Bill	Gates
Steve	Jobs
实例

```css
table {
  border: 1px solid black;
}

亲自试一试
表格宽度和高度
表格的宽度和高度由 width 和 height 属性定义。

下例将表的宽度设置为 100％，将元素的高度设置为 50px：

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300
实例

table {
  width: 100%;
}

th {
  height: 50px;
}

亲自试一试
要创建仅占页面一半的表，请使用 width: 50%：

实例

table {
  width: 50%;
}

th {
  height: 70px;
}

亲自试一试
水平对齐
text-align 属性设置 <th> 或 <td> 中内容的水平对齐方式（左、右或居中）。

默认情况下，<th> 元素的内容居中对齐，而 <td> 元素的内容左对齐。

要使 <td> 元素的内容也居中对齐，请使用 text-align: center：

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300
实例

th {
  text-align: center;
}

亲自试一试
下例使 <th> 元素中的文本左对齐：

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300
实例

th {
  text-align: left;
}

亲自试一试
垂直对齐
vertical-align 属性设置 <th> 或 <td> 中内容的垂直对齐方式（上、下或居中）。

默认情况下，表中内容的垂直对齐是居中（<th> 和 <td> 元素都是）。

下例将 <td> 元素的垂直文本对齐方式设置为下对齐：

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300
实例

td {
  height: 50px;
  vertical-align: bottom;
}

亲自试一试
表格内边距
如需控制边框和表格内容之间的间距，请在 <td> 和 <th> 元素上使用 padding 属性：

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300
实例

th, td {
  padding: 15px;
  text-align: left;
}

亲自试一试
水平分隔线
Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300
向 <th> 和 <td> 添加 border-bottom 属性，以实现水平分隔线：

实例

th, td {
  border-bottom: 1px solid #ddd;
}

亲自试一试
可悬停表格
在元素上使用 :hover 选择器，以突出显示鼠标悬停时的表格行：

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300
实例
tr:hover {background-color: #f5f5f5;}
亲自试一试
条状表格
Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300
为了实现斑马纹表格效果，请使用 nth-child() 选择器，并为所有偶数（或奇数）表行添加 background-color：

实例
tr:nth-child(even) {background-color: #f2f2f2;}
亲自试一试
表格颜色
下例指定了 <th> 元素的背景颜色和文本颜色：

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300
实例

th {
  background-color: #4CAF50;
  color: white;
}

亲自试一试
响应式表格
如果屏幕太小而无法显示全部内容，则响应式表格会显示水平滚动条：

First Name Last Name Points Points Points Points Points Points Points Points Points Points
Bill Gates 50 50 50 50 50 50 50 50 50 50
Steve Jobs 94 94 94 94 94 94 94 94 94 94
Elon Musk 67 67 67 67 67 67 67 67 67 67
在 <table> 元素周围添加带有 overflow-x:auto 的容器元素（例如 <div>），以实现响应式效果：

实例

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>

亲自试一试
注释：在 OS X Lion（在 Mac 上）中，滚动条默认情况下是隐藏的，并且仅在使用时显示（即使设置了 “overflow:scroll”）。
39、

删除没备份的痛

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS基础知识36~39

36、CSS 图标如何添加图标向 HTML 页面添加图标的最简单方法是使用图标库，比如 Font Awesome。将指定的图标类的名称添加到任何行内 HTML 元素（如 <i> 或 <span>）。下面的图标库中的所有图标都是可缩放矢量，可以使用 CSS进行自定义（大小、颜色、阴影等）。Font Awesome 图标如需使用 Font Awesome 图标，请访问 fontawesome.com，登录并获取代码添加到 HTML 页面的 <head> 部分：&
复制链接

扫一扫