css字体、文本相关

一、字体样式

字体颜色

设置字体颜色，使用color来设置字体颜色
设置文字大小，使用font-size设置，浏览器中一般默认的文字大小都是16px
设置文字的字体，通过font-family可以指定文字的字体，当采用某种字体时，如果浏览器支持则使用该字体，如果字体不支持，则使用默认字体，该样式可以同时指定多个字体，多个字体之间使用,分开，当采用多个字体时，浏览器会优先使用前边的字体，如果前边没有在尝试下一个。浏览器使用的字体默认就是计算机中的字体，如果计算机中有，则使用，如果没有就不用。

二、字体分类

在网页中将字体分成5大类：
```
serif（衬线字体）
sans-serif（非衬线字体）
monospace （等宽字体）
cursive （草书字体）
fantasy （虚幻字体）
```
可以将字体设置为这些大的分类,当设置为大的分类以后，浏览器会自动选择指定的字体并应用样式，一般会将字体的大分类，指定为font-family中的最后一个字体。

三、字体的其他样式

font-style可以用来设置文字的斜体

可选值：
normal，默认值，文字正常显示。
italic 文字会以斜体显示。
oblique 文字会以倾斜的效果显示。
大部分浏览器都不会对倾斜和斜体做区分，一般我们只会使用italic。

font-weight可以用来设置文本的加粗效果：

可选值：
normal，默认值，文字正常显示。
bold，文字加粗显示。

font-variant可以用来设置小型大写字母

可选值：
normal，默认值，文字正常显示。
small-caps 文本以小型大写字母显示。

font同时设置字体相关的所有样式

可以将字体的样式的值，统一写在font样式中，不同的值之间使用空格隔开。
使用font设置字体样式时，斜体 加粗 小大字母，没有顺序要求，甚至可写可不写。
如果不写则使用默认值，但是要求文字的大小和字体必须写，而且字体必须是最后一个样式。
大小必须是倒数第二个样式。

四、行间距

line-height来设置行高

在CSS并没有为我们提供一个直接设置行间距的方式。
我们只能通过设置行高来间接的设置行间距，行高越大行间距越大。
行间距 = 行高 - 字体大小。

line-height可选值

1.直接就收一个大小。
2.可以指定一个百分数，则会相对于字体去计算行高。
3.可以直接传一个数值，则行高会设置字体大小相应的倍数。
4.在font中也可以指定行高，在字体大小后可以添加/行高，来指定行高，该值是可选的，如果不指定则会使用默认值。

五、文本样式

text-transform可以用来设置文本的大小写

可选值：
none 默认值，该怎么显示就怎么显示，不做任何处理。
capitalize 单词的首字母大写，通过空格来识别单词。
uppercase 所有的字母都大写。
lowercase 所有的字母都小写。

text-decoration可以用来设置文本的修饰

可选值：
none：默认值，不添加任何修饰，正常显示。
underline 为文本添加下划线。
overline 为文本添加上划线。
line-through 为文本添加删除线。
ps：如果需要去除超链接的下划线则需要将该样式设置为none。

letter-spacing可以指定字符间距

word-spacing可以设置单词之间的距离。
实际上就是设置词与词之间空格的大小。

text-align用于设置文本的对齐方式

可选值：
left 默认值，文本靠左对齐。
right ， 文本靠右对齐。
center ， 文本居中对齐。
justify ， 两端对齐。

text-indent用来设置首行缩进

当给它指定一个正值时，会自动向右侧缩进指定的像素。
如果为它指定一个负值，则会向左移动指定的像素。
通过这种方式可以将一些不想显示的文字隐藏起来。
这个值一般都会使用em作为单位。

css字体、文本相关相关推荐

CSS初识(三)：CSS字体文本相关属性
属性 CSS属性有很多,不过常用的并不多,大概30个左右.请注意区别CSS属性和HTML属性. 按照功能大致分为以下几类: 字体有关属性 font-size: 设置字体大小,单位是px(像素):一些不 ...
CSS 字体文本样式
文章目录 CSS字体文本样式字体样式 color 字体颜色 font-size 字体大小 font-family 字体类型 font-weight 字体粗细 font-style 字体风格综合简写 ...
【CSS基础】基础选择器+字体文本相关样式
目录 1.CSS基础选择器 1.1 标签选择器 1.2 类选择器 1.3 id选择器 1.4 通配符选择器 1.5 基础选择器总结 2.CSS字体样式 2.1 字体大小 2.2 字体粗细 2.3 字体 ...
CSS 字体文本过渡盒子初步
12.17 学习笔记主要内容: 1.CSS字体样式 2.CSS文本样式 3.CSS使用过渡 4.盒子初步一.CSS字体 1 font-size :字体大小 2.font-family:样式(后加字 ...
CSS选择器/CSS字体文本属性/CSS引入方式/案例
CSS 1.CSS简介 1.1 HTML的局限性虽然 HTML 可以做简单的样式,但是带来的是无尽的臃肿和繁琐 1.2 CSS-网页的美容师 CSS 是层叠样式表 ( Cascading Style ...
CSS基础(基础选择器+字体文本相关样式)
文章目录目录前言一.css的语法规则二.css引入方式三.基础选择器四.字体和文本样式字体样式文本样式 line-height行高前言层叠样式表(Cascading Style S ...
2.css字体文本属性
一.字体风格 font-family 字体(比如宋体,微软雅黑) font-size 字体大小 font-weight 字体粗细(700加粗,400正常) font-style 字体风格(normal ...
CSS样式字体与文本相关属性
CSS样式字体与文本相关属性字体相关属性基本属性添加阴影添加多阴影微调字体大小颜色表示文本相关属性文本基本属性文本自动换行长单词和URL地址换行 CSS3新增服务器字体字体相关属 ...
CSS中伪元素、伪类选择器和字体、文本相关属性
CSS中伪元素.伪类选择器伪元素选择器伪元素选择器只能针对CSS中已有的伪元素起作用. CSS提供的伪元素选择器有如下几个: :first-letter:对指定对象的第一个字符起作用. :firs ...

css字体、文本相关

css字体、文本相关

css字体、文本相关相关推荐

最新文章

热门文章