CSS学习（3） – 轮廓文本和字体图标
文章首发于我的个人博客：欢迎大佬们来逛逛
CSS轮廓
轮廓是在元素的周围绘制一条线，用于修饰元素框。
CSS 拥有如下轮廓属性：
outline-styleoutline-coloroutline-widthoutline-offsetoutline
outline-style 用于设置轮廓的样式：
-
dotted- 定义点状的轮廓。 -
dashed- 定义虚线的轮廓。 -
solid- 定义实线的轮廓。 -
double- 定义双线的轮廓。 -
groove- 定义 3D 凹槽轮廓。 -
ridge- 定义 3D 凸槽轮廓。 -
inset- 定义 3D 凹边轮廓。 -
outset- 定义 3D 凸边轮廓。 -
none- 定义无轮廓。 -
hidden- 定义隐藏的轮廓。
p.solid{
outline-style: solid;
}
p.dashed{
outline-style: dashed;
}
p.groove{
outline-style: groove;
}
outline-width 用于设置轮廓的宽度。
很简单，就不多写了
outline-color 设置轮廓的颜色。
outline 可以简写为如下形式： width ，style，color
p.simple{
outline: 5px double forestgreen;
}
其中style是必须的，如果只写了一个参数（style），两个参数（width style / style color）
outline-offset 用于设置轮廓的偏移：元素的轮廓与边框之间添加空白
- 设置了margin 外边距
- 设置了边框的样式
- 设置了轮廓的样式
- 设置了轮廓的偏移大小：15px
p.simple{
margin: 50px;
border: 2px solid red;
outline: 5px double forestgreen;
outline-offset: 15px;
}
元素框之外的轮廓的偏移空间是透明的
CSS文本
color 设置文本的颜色
color: red;
提示：
对于 W3C compliant CSS：如果您定义了 color属性，则还必须定义 background-color属性。
background-color 设置文本背景颜色
background-color: yellow;
text-align 设置文本的对齐方式
text-align: center;
direction 用于设置文本的方向
设置为从右往左显示：
direction: rtl;
vertical-align 属性设置元素的垂直对齐方式。
常用于图片的显示
text-decoration 用于设置或者删除文字的修饰：
请注意链接是自动有下划线的，我们可以使用此方法将下划线去除：
a{
text-decoration: none;
}
...
<p><a href="https://helloylh.com">这是一个链接! 请注意链接是自动有下划线的</a></p>
其他形式：
p.text_line1{
text-decoration: overline;
}
p.text_line2{
text-decoration: line-through;
}
p.text_line3{
text-decoration: underline;
}
text-transform 用于转换文本中的小写和大写字母
- lowercase：转化小写
- uppercase：转换大写
- capitalize：首字母大写
p.lowercase{
text-transform: lowercase;
}
p.uppercase{
text-transform: uppercase;
}
p.capitalize{
text-transform: capitalize;
}
text-indent 指定文本第一行的首行缩进:
p{
text-indent: 50px;
}
letter-spacing 指定文本字母之间的间距
可以是负值
h1{
letter-spacing: 5px;
}
h2{
letter-spacing: -5px;
}
line-height 指定文本行之间的高度
值较小，谨慎设置值！
p{
text-indent: 50px;
line-height: 2;
}
word-spacing 设置单词之间的间距
对于中文字符是无效的！！！
p{
text-indent: 50px;
line-height: 2;
word-spacing: 10px;
}
white-spacing 设置元素内部空白的处理方法
取消文本的自动换行：
white-space: nowrap;
text-shadow 设置文本的阴影效果
h1{
letter-spacing: 5px;
text-shadow: 2px 2px red;
}
参考链接：
CSS字体
CSS的通用字体族：
- 衬线字体：Serif
- 无衬线字体：Sans-Serif
- 等宽字体：Monospace
- 草书字体：Cursive
- 幻想字体：Fantasy
font-family 设置文本的字体样式
设置多个字体以保持兼容性，第一个字体为默认字体然后往后是后备字体
p{
font-family: serif, sans-serif, fantasy;
}
font-style 指定斜体文本
- normal：正常
- italic：斜体
- oblique：倾斜
font-style: italic; ``
text-weight 指定文本的粗细
font-weight: bold;
font-variant 设置字体变体：是否为 small-caps 字体（小型大写字母）显示文本。
在 small-caps 字体中，所有小写字母都将转换为大写字母。但是，转换后的大写字母的字体大小小于文本中原始大写字母的字体大小。
font-variant: small-caps;
font-size 设置字体大小
普通文本（如段落）的默认大小为 16px（16px = 1em）。
使用像素来完全控制字体大小：
font-size: 80px;
要用 em 设置字体大小，因为字体默认就是 1em，这样容易设置。
响应式字体大小: VW 为单位。文本大小将遵循浏览器窗口的大小，请调整浏览器窗口的大小，以查看字体大小如何缩放!
font-size: 1vw;
引入谷歌字体：
<head>
<link rel="stylesheet" type="text/css" href="3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body{
font-family: "Sofia";
font-size: 20px;
}
</style>
</head>
字体属性简写：
font 属性是以下属性的简写属性：
font-stylefont-variantfont-weightfont-size/line-heightfont-family
**font-size和font-family 的值是必须的**
p{
font: italic bold 12px/30px Georgia, serif;
}
参考链接：
CSS图标
font Awesome图标
我们使用font Awesome图标库的图标：
首先需要注册一个账号，然后把自己的 code 复制进yourcode中：
在中添加如下的代码
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
然后就可以使用图标了：
注意有一些图标是收费的，我们只使用 free 的图标：
<i class="fa-solid fa-user"></i>
<i class="fa-brands fa-facebook"></i>
<i class="fa-solid fa-download"></i>
<i class="fa-solid fa-image"></i>
Bootstrap 图标
同样在 中添加如下内容：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" integrity="sha384-b6lVK+yci+bfDmaY1u0zE8YYJt0TZxLEAFyYSLHId4xoVvsrQu3INevFKo+Xir8e" crossorigin="anonymous">
然后直接复制粘贴就能用了
<i class="bi bi-airplane-engines-fill"></i>
<i class="bi bi-amd"></i>
<i class="bi bi-apple"></i>