CSS学习（3） - 轮廓文本和字体图标

文章首发于我的个人博客：欢迎大佬们来逛逛

@

目录

CSS轮廓

轮廓是在元素的周围绘制一条线，用于修饰元素框。

CSS 拥有如下轮廓属性：

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

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 用于设置轮廓的偏移：元素的轮廓与边框之间添加空白

  1. 设置了margin 外边距
  2. 设置了边框的样式
  3. 设置了轮廓的样式
  4. 设置了轮廓的偏移大小：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字体

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-style
  • font-variant
  • font-weight
  • font-size/line-height
  • font-family

**font-size和font-family 的值是必须的**

p{
    font: italic bold 12px/30px Georgia, serif;
}

参考链接：

CSS 字体属性

CSS图标

font Awesome图标

我们使用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/bootstrap-icons@1.10.2/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>
posted @ 2023-04-19 17:15  hugeYlh  阅读(38)  评论(0)  编辑  收藏  举报