根据MDN网站学习记录笔记

样式化文字

基本文本和字体样式
- 字体种类
- 字体样式、字体粗细
- 文本转换、文本装饰
- 文字阴影
- 文本布局
样式列表
- 符号样式
- 项目符号位置
- 自定义项目符号图片
- 管理列表计数
样式化链接
- 链接状态
- 将样式应用到链接
- 在链接中包含图标
- 样式化链接为按钮
Web 字体
- 使用方法
- 更多细节

基本文本和字体样式

样式文本的 CSS 属性通常可以分为两类：

字体样式: 作用于字体的属性，会直接应用到文本中，比如使用哪种字体，字体的大小是怎样的，字体是粗体还是斜体，等等。
文本布局风格: 作用于文本的间距以及其他布局功能的属性，比如，允许操纵行与字之间的空间，以及在内容框中，文本如何对齐。

字体种类

p {font-family: arial;
}

只有某几个字体通常可以应用到所有系统，因此可以毫无顾忌地使用。这些都是所谓的 网页安全字体。

字体栈：包含一个font-family属性，其值由几个用逗号分离的字体名称组成。

p {font-family: "Trebuchet MS", Verdana, sans-serif;
}

字体样式、字体粗细

字体样式
font-style: 用来打开和关闭文本 italic (斜体)。

normal: 将文本设置为普通字体
italic: 如果当前字体的斜体版本可用，那么文本设置为斜体版本；如果不可用，那么会利用 oblique 状态来模拟 italics。
oblique: 将普通文本倾斜的样式应用到文本中。

字体粗细
font-weight：设置文字的粗体大小。一般用normal或者bold；
lighter, bolder: 将当前元素的粗体设置为比其父元素粗体更细或更粗一步。

文本转换、文本装饰

文本转换
text-transform: 允许你设置要转换的字体。
值包括：

none: 防止任何转型。
uppercase: 将所有文本转为大写。
lowercase: 将所有文本转为小写。
capitalize: 转换所有单词让其首字母大写。
full-width: 将所有字形转换成全角，即固定宽度的正方形。

文本装饰
text-decoration: 设置/取消字体上的文本装饰；
值包括：
none、underline；overline；line-through

text-decoration 可以一次接受多个值

文字阴影

4 个属性如下:

阴影与原始文本的水平偏移，这个值必须指定。
阴影与原始文本的垂直偏移，这个值必须指定。
模糊半径 - 更高的值意味着阴影分散得更广泛。
阴影的基础颜色。如果没有指定，默认为 black.

text-shadow: 4px 4px 5px red;

文本布局

文本对齐
text-align 属性：
left: 左对齐文本。right: 右对齐文本。
center: 居中文字。justify: 使文本展开，改变单词之间的差距，使所有文本行的宽度相同。
行高
line-height 属性：可以设置一个具体的值，也可以设置一个无单位的值作为乘数（乘以font-size）
字母和单词间距
letter-spacing 和 word-spacing 属性允许你设置你的文本中的字母与字母之间的间距、或是单词与单词之间的间距。

p::first-line {letter-spacing: 2px;word-spacing: 4px;
}

样式列表

列表特定样式：list-style-type、list-style-position、list-style-image 这三个属性可以在 <ul> 或 <ol> 元素上设置：

符号样式

list-style-type 允许设置项目符号点的类型，比如

ol {list-style-type: upper-roman;
}

项目符号位置

list-style-position 设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。
如果值设置为 inside，项目条目则位于行内

自定义项目符号图片

list-style-image 属性允许对于项目符号使用自定义图片。

ul {list-style-image: url(star.svg);
}

list-style速记：

ul {list-style: square url(example.png) inside;
}

如果同时指定了 type 和 image，如果由于某种原因导致图像无法加载，则 type 将用作回退。

管理列表计数

start属性允许从1之外的数字开始计数

<ol start="4"><li>Toast pitta, leave to cool, then slice down the edge.</li><li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li><li>Wash and chop the salad.</li><li>Fill pitta with salad, humous, and fried halloumi.</li>
</ol>

则 4 5 6 7

reversed属性将启动列表倒计数

<ol start="4" reversed><li>Toast pitta, leave to cool, then slice down the edge.</li><li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li><li>Wash and chop the salad.</li><li>Fill pitta with salad, humous, and fried halloumi.</li>
</ol>

则 4 3 2 1

value属性允许设置列表项指定数值

<ol><li value="2">Toast pitta, leave to cool, then slice down the edge.</li><li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li><li value="6">Wash and chop the salad.</li><li value="8">Fill pitta with salad, humous, and fried halloumi.</li>
</ol>

样式化链接

链接状态

链接状态：链接存在时处于不同的状态，每一个状态都可以用对应的伪类来应用样式。

Link：未被访问时的默认状态。
Visited：链接已经被访问过了(存在于浏览器的历史纪录)的状态。
Hover：用户的鼠标光标刚好停留在这个链接时的状态。
Focus：链接被选中时。
Active：链接被激活的时候 (比如被点击的时候)。

将样式应用到链接

这几个规则的顺序是有意义的，因为链接的样式是建立在另一个样式之上的。
顺序：LoVe Fears HAte.

a {}a:link {}a:visited {}a:focus {}a:hover {}a:active {}

在链接中包含图标

在链接中包含图标，使链接提供更多关于链接指向的内容的信息。
一般选择在此选择图标

<p>For more information on the weather, visit our <a href="weather.html">weather page</a>,
look at <a href="https://en.wikipedia.org/wiki/Weather">weather on Wikipedia</a>, or check
out <a href="http://www.extremescience.com/weather.htm">weather on Extreme Science</a>.</p>

a[href*="http"] {background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;background-size: 16px 16px;padding-right: 19px;
}

采用background简写：指定位置为100%，使其出现在内容的右边，距离上方是0px；
使用一个属性选择器——a[href*="http"] ——选中拥有 href 属性，且属性的值包含 "http" 的 <a>的元素。

样式化链接为按钮

<ul><li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li>
</ul>

body,html {margin: 0;font-family: sans-serif;
}ul {padding: 0;width: 100%;
}li {display: inline;
}a {outline: none;text-decoration: none;display: inline-block;width: 19.5%;margin-right: 0.625%;text-align: center;line-height: 3;color: black;
}li:last-child a {margin-right: 0;
}a:link, a:visited, a:focus {background: yellow;
}a:hover {background: orange;
}a:active {background: red;color: white;
}

其中 display: inline;表示将其表示为内联元素不换行，这里的<li>本来应该换行，但设置后显示为同一行。

li {display: inline;
}

而display: inline-block还允许在元素上设置宽度和高度。相当于一个可以不换行的块级元素。

Web 字体

使用方法

Web字体是一种CSS特性，允许您指定在访问时随您的网站一起下载的字体文件，这意味着任何支持Web字体的浏览器都可以使用您指定的字体。
方法：

在CSS加入@font-face块

@font-face {font-family: "myFont";src: url("myFont.ttf");
}
html {font-family: "myFont", "Bitstream Vera Serif", serif;
}

可以在字体经销商处获得字体，比如：Font Squirrel下载后将字体文件在Fontsquirrel Webfont Generator中解析下载kit，解压后将 stylesheet.css 中生成好的 @font-face 代码加入css

使用在线字体服务
在线字体服务通常会为你存储和服务字体，这样你就不用担心写@font-face代码了，通常只需要在你的网站上插入一两行代码就可以让一切都运行。
比如 Google Fonts中选择好字体然后生成代码，将其复制到HTML文件<link>元素中导入字体，然后将声明复制到css中就可以使用了

【CSS】样式化文字相关推荐

3-CSS样式化文字
title: 3-CSS样式化文字 tags: CSS(设计Web) category: MDN 基本文本和字体样式参考文档用于样式文本的 CSS 属性通常可以分为两类: 1.字体样式: 作用于字 ...
html5css字体下划线,如何利用css样式做出文字的下划线？
如何利用css样式做出文字的下划线? 在将网页设计完成后,接下来就需要前端和后端工程师的配合,来将网页正式上线了.但是身为网页设计师,还是有必要掌握一些前段知识的,主要指html5和css3,在招聘网 ...
CSS样式让文字水平居中和垂直居中的方法
css中让文字居中,首先可以分单行文字和多行文字,还可以讨论高度是否固定. 不论是多行文字还是单行文字,水平居中都可以设置text-align. text-align 属性规定元素中的文本的水平对齐方 ...
HTML中用CSS样式实现文字两边添加水平线
(1)html中的代码: <div class="content"><p class="title">新特卖每日早10晚8上新</ ...
css样式：文字led效果（走马灯、轮播）
<marquee>标签,它是成对出现的标签,首标签<marquee>和尾标签</marquee>之间的内容就是滚动内容.<marquee>标签的属性主要 ...
html font设置字号,CSS font-size字体文字大小样式属性
CSS font-size字体文字大小样式属性-字体大小样式篇: 本节DIVCSS5为大家介绍通过CSS样式设置文字字体大小知识,涉及CSS样式单词font-size. 一.设置字体大小CSS单词与语 ...
float属性html,详解CSS样式中的float属性
详解CSS样式中的float属性.float是 css 样式的定位属性.我们在印刷排版中,文本可以按照需要围绕图片.一般把这种方式称为"文本环绕".在网页设计中,应用了CSS的fl ...
HTML5 CSS3初学者指南(2) – 样式化第一个网页
介绍我们已经使用基本的 HTML 编写了一个网页.但是,写出来的 HTML 代码的网页看起来很平淡,没有吸引力. 如何改善这种很平淡的页面呢? 让我们开始使用网页的基本样式来改善页面效果,我们将会使 ...
react 组件样式_如何使用样式化组件为React组件创建视觉变体
react 组件样式 by Gilad Dayagi 通过吉拉德·达亚吉如何使用样式化组件为React组件创建视觉变体 (How to create visual variants for Reac ...

【CSS】样式化文字