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

文章目录

CSS轮廓
CSS文本
CSS字体
CSS图标
- font Awesome图标
- Bootstrap 图标

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

设置了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字体

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>

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

【前端学习之HTMLCSS进阶篇】-- CSS第一篇 -- @规则与web字体图标
[前端学习之HTML&CSS进阶篇]- CSS第一篇 - @规则与web字体图标文章目录 [前端学习之HTML&CSS进阶篇]- CSS第一篇 - @规则与web字体图标前言一. ...
微信小程序学习11：iconfont 网络字体图标使用（阿里巴巴）
微信小程序学习11:iconfont 网络字体图标使用(阿里巴巴) 使用方法 [1] 是直接下载图片,使用<image src="/static/images/v2.jpg" ...
web前端入门学习 css（7）css高级技巧（精灵图、字体图标、css三角、鼠标样式、表单轮廓线、文本框拖拽、垂直对齐、图底空白缝隙、margin负值、溢出文字省略号、文字环绕、css初始化）
文章目录精灵图为什么需要精灵图? 精灵图的使用精灵图课堂案例用精灵图拼出自己的名字字体图标字体图标的下载字体图标的引入字体图标的追加 css三角(用边框border制作) 案例:京东三 ...
html css图标怎么跟文字并排,CSS高级技巧：精灵图、字体图标、CSS三角做法、CSS用户界面样式、vertical-align属性应用、溢出文字省略号、常见布局技巧...
CSS高级技巧目录 1.精灵图使用原因:一个网页往往会有很多小的背景图片作为装饰,为了有效减少接收和发送请求的次数,提供页面加载速度,所以出现了精灵技术.核心原理就是将小图片整合到一张图里,这样浏览 ...
【CSS进阶】精灵图、字体图标、用户界面样式、常见布局技巧、初始化、CSS三角
该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何问题都欢迎在评论区提出.本文主要介绍精灵图.字体图标.CSS三角.用户界面样式.vertical-align.常见布局技巧.初始化思 ...
【web前端】CSS高级技巧（精灵图，字体图标，CSS三角，CSS用户界面样式，文字与图片垂直对齐，溢出的文字省略号显示，常见布局技巧，CSS初始化）
使用课程是黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 目录一.精灵图 1.为什么需要精灵图 2.精灵图( sprit ...
CSS高级技巧：精灵图、字体图标、三角形制作、布局技巧
CSS高级一.精灵图二.字体图标字体图标的优点: 这里附一下阿里的字体图标使用方法: 三.三角形制作四.一些样式 1.用户界面鼠标样式cursor 2.轮廓线outline 3.防止拖拽文本域 ...
Web前端开发笔记——第三章 CSS语言第三节文本、字体、背景、超链接样式属性
目录一.CSS文本属性二.CSS字体属性 (一)常用文本字体样式属性 (二)设置整体font属性三.CSS背景属性 (一)背景颜色 (二)背景图片 (三)图片平铺方式 (四)图片位置 (五)设置 ...
CSS总结（基本文本和字体样式）
基本文本和字体样式: 颜色: p{color:red;} 字体种类: p{font-family:arial;} arial 字体,这个字体可在任何电脑上找到. 通常认为最佳做法还是添加 Helvet ...

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