1.文本控制基础
1.1 设置字体
1.1.1 设置默认字体
font-family:设置字体风格
- 单设置：直接输入风格标识
- 多设置：使用,风格，假如浏览器不提供默认字体，会从左到右找适配的字体
注：当字体标识有空格，使用""包裹，不然无法解析
浏览器默认提供的字体：
- Serif 字体族（衬线字体）：
- Times New Roman
- Georgia
- Garamond
- Sans-Serif 字体族（无衬线字体）：
- Arial
- Helvetica
- Verdana
- Tahoma
- Monospace 字体族（等宽字体）：
- Courier New
- Lucida Console
- Monaco
- Cursive 字体族（手写字体）：
- Comic Sans MS
- Fantasy 字体族（艺术字体）：
- Impact
例：
<html >
<head >
<meta charset="UTF-8">
<title>字体属性测试</title>
<style>
h2{
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
</style>
</head>
<body>
<h2>wql.luoqin.ltd</h2>
</body>
</html>
1.1.2 设置自定义字体
步骤：
- 下载font字体文件
- @font-face设置自定义字体
- font-family指定自定义字体标识
例：
<!DOCTYPE html>
<html >
<head >
<meta charset="UTF-8">
<title>字体属性测试</title>
<style>
/* 1.自定义字体格式的设置 */
@font-face {
/* 1.自定义字体名称 */
font-family: "wql";
/* 2.引用字体文件 */
src: url("../OTF/hongleizhushu.otf");
}
h2{
/*引用*/
font-family: wql;
}
</style>
</head>
<body>
<h2>wql.luoqin.ltd</h2>
</body>
</html>
1.2 设置字重字号
字重设置字体的粗细，字号设置字体的大小
属性：
- font-weight：设置字重
- font-size：设置字号
字重的取值：
- normal：正常字体粗细。
- bold：粗体字。
- bolder：比正常字体更粗，具体粗细取决于字体族。
- lighter：比正常字体更细，具体细度取决于字体族。
- 数字值：可以使用数字来指定字体粗细，范围从100到900。通常，以下是常见的数值与字体粗细的对应关系：
- 100: Thin（非常细）
- 200: Extra Light/Ultra Light（极轻）
- 300: Light（轻）
- 400: Normal/Regular（正常）
- 500: Medium（中等）
- 600: Semi-Bold/Demi-Bold（半粗）
- 700: Bold（粗）
- 800: Extra-Bold/Ultra-Bold（极粗）
- 900: Black/Heavy（非常粗）
字号的取值：
- xx-small：非常小的字体大小
- x-small：较小的字体大小
- small：小号字体
- medium：中等大小的字体（通常是浏览器的默认大小）
- large：大号字体
- x-large：较大的字体大小
- xx-large：非常大的字体大小
- 数组值(px)：指定像素值
- 百分比单位(em)：在响应式布局中常用，em 单位等同于百分数单位
例：
<html >
<head >
<meta charset="UTF-8">
<title>字重字号测试</title>
<style>
div div:nth-of-type(1){
font-weight: normal;
font-size: xx-small;
}
div div:nth-of-type(2){
font-weight: bold;
font-size: x-small;
}
div div:nth-of-type(3){
font-weight: bolder;
font-size: small;
}
div div:nth-of-type(4){
font-weight: lighter;
font-size: medium;
}
div div:nth-of-type(5){
font-weight: 800;
font-size: large;
}
div div:nth-of-type(6){
font-weight: 200;
font-size: x-large;
}
div div:nth-of-type(7){
font-weight: 500;
font-size: xx-large;
}
</style>
</head>
<body>
<div>
<div>wql.luoqin.ltd</div>
<div>wql.luoqin.ltd</div>
<div>wql.luoqin.ltd</div>
<div>wql.luoqin.ltd</div>
<div>wql.luoqin.ltd</div>
<div>wql.luoqin.ltd</div>
<div>wql.luoqin.ltd</div>
</div>
</body>
</html>
1.3 文本颜色
color：设置颜色属性
文本颜色的设置值：
- 使用如red | green等字符颜色声明
- color：red
- 使用16进制网页颜色
- color：#ddffde
- 使用RGB颜色
- color：rgb(18,21,21)
- 透明颜色：透明色0~1之间，表示从透明到不透明
- color：rgba(18,21,21,.2)
例：
<html >
<head >
<meta charset="UTF-8">
<title>字体颜色测试</title>
<style>
div div:nth-of-type(1){
color: red;
}
div div:nth-of-type(2){
color: #a85b5b;
}
div div:nth-of-type(3){
color: rgb(35, 192, 52);
}
div div:nth-of-type(4){
color: rgba(35, 192, 52,.6);
}
</style>
</head>
<body>
<div>
<div>wql.luoqin.ltd</div>
<div>wql.luoqin.ltd</div>
<div>wql.luoqin.ltd</div>
<div>wql.luoqin.ltd</div>
</div>
</body>
</html>
1.4 行高和倾斜
属性：
-
line-font：设置行高
-
font-style：设置倾斜
font-style的值：
-
normal：字体以正常风格显示。
-
italic：字体以斜体显示，通常是斜体字型。
-
oblique：字体以倾斜的方式显示，类似于斜体，但有时会有一些差异。
例：
<!DOCTYPE html>
<html >
<head >
<meta charset="UTF-8">
<title>字体倾斜风格测试</title>
<style>
div div:nth-of-type(1){
line-height: 1em;
}
div div:nth-of-type(2){
line-height: 2em;
font-style: normal;
}
div div:nth-of-type(3){
line-height: 3em;
font-style: italic;
}
div div:nth-of-type(4){
line-height: 4em;
font-style: oblique;
}
</style>
</head>
<body>
<div>
<div>wql.luoqin.ltd</div>
<div>wql.luoqin.ltd</div>
<div>wql.luoqin.ltd</div>
<div>wql.luoqin.ltd</div>
</div>
</body>
1.5 组合定义
font组合设置组合顺序：
-
font-style：首先指定字体的风格，例如 italic 或 oblique。如果不需要斜体或倾斜风格，可以跳过这一步
-
font-variant：可选，用于设置字体的变体，如 small-caps（小型大写字母）。如果不需要变体，可以跳过这一步
-
font-weight：指定字体的粗细，例如 normal、bold 或数字值。如果不需要自定义粗细，可以跳过这一步
-
font-size：指定字体的大小，可以使用像素（px）、百分比（%）或其他单位。这是必需的设置
-
line-height：可选，指定行高。如果不需要特别设置行高，可以跳过这一步
-
font-family：最后指定字体族，可以包括一个或多个备选字体族，以确保在指定字体不可用时有备选选择
例：
font: italic small-caps bold 20px/1.5 "Times New Roman", Times, serif;
2. 文本控制风格
2.1 大小转换
两种方式：
-
font-variant
-
normal：字体以正常文本形式显示，没有文本变体效果。
-
small-caps：将所有小写字母替换为小型大写字母，同时保留大写字母不变。这种效果通常用于创建小型大写字母的文本。
-
-
text-transform：属性 ->属性值
-
none：不进行文本转换
-
capitalize：首字母大写
-
uppercase：全部大写
-
lowercase：全部小写
-
font-variant 和 text-transform 是两个不同的 CSS 属性，它们用于实现文本大写效果，但它们的作用方式和用途略有不同：
-
font-variant：用于设置字体的文本变体效果，主要是控制字母的大小写形式，通常与 small-caps 一起使用。它主要影响字母的显示形式
-
text-transform：用于设置文本的转换效果，通常用于控制文本的大小写形式
例：
<!DOCTYPE html>
<html >
<head >
<meta charset="UTF-8">
<title>字体大小写转换测试</title>
<style>
div div:nth-of-type(1){
font-variant: small-caps;
}
div div:nth-of-type(2){
text-transform: lowercase;
}
div div:nth-of-type(3){
text-transform: uppercase;
}
div div:nth-of-type(4){
text-transform: capitalize;
}
</style>
</head>
<body>
<div>
<div>wql.luoqin.ltd</div>
<div>wql.luoqin.ltd</div>
<div>wql.luoqin.ltd</div>
<div>wql.luoqin.ltd</div>
</div>
</body>
</html>
2.2 文本线条
text-decoration：设置文本线条属性
-
none：默认值，没有线条装饰效果
-
underline：在文本下方添加下划线
-
overline：在文本上方添加上划线
-
line-through：在文本中间添加删除线
例：
<!DOCTYPE html>
<html >
<head >
<meta charset="UTF-8">
<title>字体线测试</title>
<style>
div div:nth-of-type(1){
text-decoration: underline;
line-height: 3em;
}
div div:nth-of-type(2){
text-decoration: overline;
}
div div:nth-of-type(3){
text-decoration:line-through;
line-height: 3em;
}
div div:nth-of-type(4){
text-decoration:underline overline line-through
}
</style>
</head>
<body>
<div>
<div>wql.luoqin.ltd</div>
<div>wql.luoqin.ltd</div>
<div>wql.luoqin.ltd</div>
<div>wql.luoqin.ltd</div>
</div>
</body>
</html>
1.3 阴影控制
text-shadow：阴影控制属性，顺序
-
颜色
-
水平偏移
-
垂直偏移
-
模糊度
例：
<!DOCTYPE html>
<html >
<head >
<meta charset="UTF-8">
<title>字体阴影测试</title>
<style>
div div:nth-of-type(1){
font-size: x-large;
font-weight: bold;
text-shadow: rgba(35, 192, 52,.6) 6px 5px 1px;
}
</style>
</head>
<body>
<div>
<div>wql.luoqin.ltd</div>
</div>
</body>
</html>
2.4 空白处理
white-space：控制文本空白显示
-
pre：保留文本中的所有空白，类似使用pre标签
-
nowrap：禁止文本换行
-
pre-wrap：保留空白，保留换行符
-
pre-line：空白合并，保留换行符
例：
<!DOCTYPE html>
<html >
<head >
<meta charset="UTF-8">
<title>空白处理测试</title>
<style>
div div:nth-of-type(1){
white-space: pre;
}
div div:nth-of-type(2){
white-space: pre-line;
}
div div:nth-of-type(3){
white-space: nowrap;
}
div div:nth-of-type(4){
white-space: pre-wrap;
}
</style>
</head>
<body>
<div>
<div>wql luoqin ltd
kxj</div>
<div>wql luoqin ltd
kxj</div>
<div>wql luoqin ltd
kxj</div>
<div>wql luoqin ltd
kxj </div>
</div>
</body>
</html>
1.5 文本溢出
overflow-wrap：文本溢出换行处理属性
-
normal：默认值。文本不会在单词内部断行，而是在单词之间断行，可能导致单词被截断
-
break-word：如果某个单词太长，它将在单词内部断行，以确保不溢出容器。这是处理长单词或URL的有用选项
text-overflow：控制文本溢出容器时的显示方式
-
clip：默认值，文本超出容器时将被裁剪，不会显示省略号(ellipsis)或其他指示符号
-
ellipsis：当文本溢出容器时，以省略号(三个连续的点号)来表示截断的文本
-
string：可以指定一个自定义字符串，代替默认的省略号
例：
<!DOCTYPE html>
<html >
<head >
<meta charset="UTF-8">
<title>字体颜色测试</title>
<style>
div div:nth-of-type(1){
width: 200px;
border: solid 1px blueviolet;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>
<div>The pursuit of technology is endless, but human life is limited, technology can only be a means of social survival, the purpose is to better survival, if there is a higher desire and pursuit in the real world, you can not spend a lot of time, but to explore people and things</div>
</div>
</body>
</html>
3. 文本段落控制
3.1 文本缩进
text-indent：控制元素部的文本、图片进行缩进操作
例：
<!DOCTYPE html>
<html >
<head >
<meta charset="UTF-8">
<title>段落缩进测试</title>
<style>
div div:nth-of-type(1){
text-indent: 2em;
}
</style>
</head>
<body>
<div>
<div>wql.luoqin.ltd</div>
</div>
</body>
</html>
3.2 水平对齐
text-align：水平对齐属性
-
left：左对齐
-
center：居中对齐
-
right：右对齐
例：
<html >
<head >
<meta charset="UTF-8">
<title>水平对齐测试</title>
<style>
div div:nth-of-type(1){
text-align: left;
}
div div:nth-of-type(2){
text-align: center;
}
div div:nth-of-type(3){
text-align: right;
}
</style>
</head>
<body>
<div>
<div>wql.luoqin.ltd</div>
<div>wql.luoqin.ltd</div>
<div>wql.luoqin.ltd</div>
</div>
</body>
</html>
3.3 垂直对齐
vertical-align：垂直对齐
-
baseline：默认值。元素的基线与其父元素的基线对齐。这是大多数行内元素的默认垂直对齐方式
-
sub：垂直对齐到父元素的下标基线。通常用于数学公式中的下标
-
super：垂直对齐到父元素的上标基线。通常用于数学公式中的上标
-
top：垂直对齐到父元素的顶部
-
text-top：垂直对齐到父元素的文本顶部
-
middle：垂直对齐到父元素的中线
-
bottom：垂直对齐到父元素的底部
-
text-bottom：垂直对齐到父元素的文本底部
例：
<!DOCTYPE html>
<html >
<head >
<meta charset="UTF-8">
<title>垂直对齐测试</title>
<style>
div div:nth-of-type(1){
vertical-align: middle;
}
div div:nth-of-type(2){
vertical-align: sub;
}
div div:nth-of-type(3){
vertical-align: top;
}
</style>
</head>
<body>
<div>
<div>wql.luoqin.ltd</div>
<div>wql.luoqin.ltd</div>
<div>wql.luoqin.ltd</div>
</div>
</body>
</html>
3.4 字符间隔
字符间隔分类：
-
单词间隔(word-spacing )
-
单字间隔，字母之间的间隔(letter-spacing)
例：
<!DOCTYPE html>
<html >
<head >
<meta charset="UTF-8">
<title>字符间隔测试</title>
<style>
div div:nth-of-type(1){
word-spacing: 1em;
}
div div:nth-of-type(2){
letter-spacing: 1em;
}
div div:nth-of-type(3){
word-spacing: 1em;
letter-spacing: 1em;
}
</style>
</head>
<body>
<div>
<div>wql luoqin ltd</div>
<div>wql luoqin ltd</div>
<div>wql luoqin ltd</div>
</div>
</body>
</html>
3.5 字符排版
writing-mode：字符排版模式属性
-
horizontal-tb：默认值。文本从左到右水平排列，文本流从上到下，通常用于大多数欧洲和英语文本
-
vertical-rl：文本从上到下排列，文本流从右到左。这是一种垂直排版方式，通常用于中文、日文、韩文等东亚语言
-
vertical-lr：文本从上到下排列，文本流从左到右。这也是一种垂直排版方式，通常用于中文、日文、韩文等东亚语言，但文本流方向与 vertical-rl 相反
-
sideways-rl：文本从左到右排列，但字符以垂直方向排列，文本流从上到下。通常用于某些特殊排版需求，如某些书籍的封面文字排版
-
sideways-lr：文本从左到右排列，字符以垂直方向排列，文本流从下到上
-
sideways：根据文本的书写方向自动选择 sideways-rl 或 sideways-lr，以确保适当的排版
例：
<!DOCTYPE html>
<html >
<head >
<meta charset="UTF-8">
<title>字符排版测试</title>
<style>
div div:nth-of-type(1){
writing-mode: vertical-rl;
}
div div:nth-of-type(2){
writing-mode: vertical-lr;
}
div div:nth-of-type(3){
writing-mode: vertical-lr;
}
div div:nth-of-type(4){
writing-mode: sideways-lr;
}
</style>
</head>
<body>
<div>
<div>wql.luoqin.ltd</div>
<div>wql.luoqin.ltd</div>
<div>wql.luoqin.ltd</div>
<div>wql.luoqin.ltd</div>
</div>
</body>
</html>
Comments | NOTHING
Warning: Undefined variable $return_smiles in /www/wwwroot/wql_luoqin_ltd/wp-content/themes/Sakura/functions.php on line 1109