编程学习
💈CSS学习（3） - 轮廓文本和字体图标
00 分钟
2023-4-15
2023-11-23
type
status
date
slug
summary
tags
category
icon
password
Email

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 - 定义隐藏的轮廓。
outline-width 用于设置轮廓的宽度。
很简单，就不多写了
outline-color 设置轮廓的颜色。
 
outline 可以简写为如下形式： width ，style，color
其中style是必须的，如果只写了一个参数（style），两个参数（width style / style color）
outline-offset 用于设置轮廓的偏移：元素的轮廓与边框之间添加空白
  1. 设置了margin 外边距
  1. 设置了边框的样式
  1. 设置了轮廓的样式
  1. 设置了轮廓的偏移大小：15px
元素框之外的轮廓的偏移空间是透明的

CSS文本

color 设置文本的颜色
提示： 对于 W3C compliant CSS：如果您定义了 color属性，则还必须定义 background-color属性。
background-color 设置文本背景颜色
text-align 设置文本的对齐方式
direction 用于设置文本的方向
设置为从右往左显示：
vertical-align 属性设置元素的垂直对齐方式。
常用于图片的显示
text-decoration 用于设置或者删除文字的修饰：
请注意链接是自动有下划线的，我们可以使用此方法将下划线去除：
其他形式：
text-transform 用于转换文本中的小写和大写字母
  • lowercase：转化小写
  • uppercase：转换大写
  • capitalize：首字母大写
text-indent 指定文本第一行的首行缩进:
letter-spacing 指定文本字母之间的间距
可以是负值
line-height 指定文本行之间的高度
值较小，谨慎设置值！
word-spacing 设置单词之间的间距
对于中文字符是无效的！！！
white-spacing 设置元素内部空白的处理方法
取消文本的自动换行：
text-shadow 设置文本的阴影效果
参考链接：
CSS 文本阴影
CSS 文本阴影
https://www.w3school.com.cn/css/css_text_shadow.asp

CSS字体

CSS的通用字体族：
  • 衬线字体：Serif
  • 无衬线字体：Sans-Serif
  • 等宽字体：Monospace
  • 草书字体：Cursive
  • 幻想字体：Fantasy
font-family 设置文本的字体样式
设置多个字体以保持兼容性，第一个字体为默认字体然后往后是后备字体
font-style 指定斜体文本
  • normal：正常
  • italic：斜体
  • oblique：倾斜
text-weight 指定文本的粗细
font-variant 设置字体变体：是否为 small-caps 字体（小型大写字母）显示文本。
在 small-caps 字体中，所有小写字母都将转换为大写字母。但是，转换后的大写字母的字体大小小于文本中原始大写字母的字体大小。
font-size 设置字体大小
普通文本（如段落）的默认大小为 16px（16px = 1em）。
使用像素来完全控制字体大小：
要用 em 设置字体大小，因为字体默认就是 1em，这样容易设置。
响应式字体大小: VW 为单位。文本大小将遵循浏览器窗口的大小，请调整浏览器窗口的大小，以查看字体大小如何缩放!
引入谷歌字体：
字体属性简写：
font 属性是以下属性的简写属性：
  • font-style
  • font-variant
  • font-weight
  • font-size/line-height
  • font-family
font-size和font-family 的值是必须的
参考链接：
CSS 字体属性
CSS 字体属性
https://www.w3school.com.cn/css/css_font_shorthand.asp

CSS图标

font Awesome图标

我们使用font Awesome图标库的图标：
Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
Font Awesome
https://fontawesome.com/
Font Awesome
首先需要注册一个账号，然后把自己的 code 复制进yourcode中：
在<head>中添加如下的代码</head>
然后就可以使用图标了：
注意有一些图标是收费的，我们只使用 free 的图标：

Bootstrap 图标

同样在<head> 中添加如下内容：
然后直接复制粘贴就能用了
 
上一篇
Python（2）- 字典概述
下一篇
Python（1）数组浅析：列表+元组+数组+双端队列
评论
  • Twikoo
  • Valine