一、长度单位

1:像素 px

实际上是屏幕上的一个个小点，100px，100个小点

在pc端，一般情况下1px=1个发光点。

也是我们最常用的长度单位，它是固定单位

2:百分比 %

相对单位，它是相对于其父元素内容区（width/height）宽高

子元素的大小会随着父元素的大小变化而变化，我们管这种大小布局，叫流式布局

3:em

相对单位，它是相对于其父元素内字体大小而设置的，也就是1em=父元素1个font-fize，

如果父元素没有字体大小，它就会继承祖先元素的字体大小，如果祖先元素没有设置，

就会继承根标签（html）的默认的字体大小，也就是16px

4:rem

r root

相对单位，它是只相对于根标签（html）的字体大小而设置，也是1rem=1个html的font-size

html的默认字体大小是16px，有些浏览器有最小的字体大小，一般是10-12px

5:vw

viewport width 视口的宽度

6:vh

viewport heigth 视口的高度

二、颜色单位

1.在CSS可以直接使用颜色的单词来表示不同的颜色red,green,yellow等

2:使用RGB值来表示不同的颜色

rgb（red，green，blue）浓度0-255

3:RGBA

rgba(red, green, blue, alpha)

alpha 透明度 0-1之间

0是透明，1是不透明

4:使用十六进制的rgb值来表示颜色，原理和上边RGB原理一样,只不过表示的方式不一样

rgb（200，100，80）

0-9abcdef 16个数字

语法：#红色的浓度绿色浓度蓝色的浓度

#7f2eaa

00 表示最小 0

ff 表示最大 255

红色、绿色、蓝色用两位十六进制表示，如果两位十六进制是一样的，可以省略一位

#ff0000 可简写#f00

#f0f0f0 不可简写

5:HSL值 HSLA值（了解）

HSLA值（色度，饱和度，亮度，透明度）

三、字体样式

1:color 设置字体颜色,也可以设置其他颜色,例如边框的颜色

2:font-size 设置字体的大小,注意不同的单位px，em，rem

3:font-family 可以指定文字的字体设计师也会提前设计好

4:@font-face 自定义字体

四、字体的分类

在网页中将字体分成5大类：

1. serif （衬线字体）

2. sans-serif（非衬线字体）

3.monospace （等宽字体）

4.cursive （草书字体）

5.fantasy （虚幻字体）

五、字体的其它样式

1.设置一个文字大小

2.设置一个字体

3.设置文字斜体

4.设置文字的加粗

5.设置一个小型大写字母

6.font 可以同时设置以上所有的字体相关的样式，颜色不可以

注意：

1、必须有字体大小和字体

2、字体必须在倒数第一位，字体大小必须在倒数第二位

六、行间距

行高（line height）

文字占有的实际高度

行高=上间距+字体的大小+下间距

其中，字体是垂直居中显示，上间距=下间距

line-height 设置行高

可选值：

1、直接放一个大小，例如：40px

2、还可以放倍数，是当前字体大小的倍数

3、可以放百分比

2、单行文本在父元素中垂直居中

只要设置父元素的行高和高度一致即可

3、font中也可以指定行高

font:字体大小/行高字体类型;

七、文本样式

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

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

3: letter-spacing可以指定字符间距

4: word-spacing可以设置单词之间的距离

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

6: text-indent 设置首行缩进

可选值：常用长度单位： px，em ，rem

7: white-space: ; 设置网页如何处理空白

8: text-overflow 文本溢出包含元素时发生的事情

9.设置多行文本省略号{

可以用webkit-line-clamp 实现

它需要和 display、 -webkit-box-orient 和 overflow 结合使用

display:-webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient; 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

text-overflow:ellipsis; 可选属性，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。

优点有：响应式截断，根据不同宽度做出调整。

文本超出范围才显示省略号，否则不显示省略号。

浏览器原生实现，所以省略号位置显示刚好。

缺点有：因为 -webkit-line-clamp 是一个不规范的属性，它没有出现在 CSS 规范草案中。

也就是说只有 webkit 内核的浏览器才支持这个属性，像 Firefox, IE 浏览器统统都不支持这个属性，浏览器兼容性不好。

使用场景：多用于移动端页面，因为移动设备浏览器更多是基于 webkit 内核，除了兼容性不好，实现截断的效果不错。

}

10: text-shadow:; 设置文本的阴影

4个参数：

(1)、阴影的水平位移距离正值向右偏移，负值向左偏移必选

（2）、阴影的垂直位移距离正值向下偏移，负值向上偏移必选

（3）、阴影的模糊半径可选默认0px

（4）、阴影的颜色一般用rgba颜色可选，默认是字体的颜色

11:vertical-align

作用：1、设置图文对齐方式

2、解决图片三像素的问题

可选值：

baseline 基线对齐以英文x最底下为对齐标准

bottom 底部对齐

top 顶部对齐

middle 居中对齐

12：display属性实现元素之间的相互转化

常用属性：

none 隐藏元素

block 将元素专成块元素

inline 将元素转成行内元素

inline-block 将元素转成行内块元素

css样式字体文本汇总相关推荐

CSS样式字体与文本相关属性
CSS样式字体与文本相关属性字体相关属性基本属性添加阴影添加多阴影微调字体大小颜色表示文本相关属性文本基本属性文本自动换行长单词和URL地址换行 CSS3新增服务器字体字体相关属 ...
css怎么调整输入框的大小,CSS样式控制文本输入框大小
CSS样式控制文本输入框大小 (2013-09-04 10:56:15) 标签: 文本输入框大小拖动禁止拖动 textarea it HTML 标签 textarea 在大部分浏览器中只要指定行 ...
使用CSS样式设置文本超出2行显示为省略号
设置文本超出2行显示为省略号在设计前端页面中,我们经常会遇到文本太长导致超出规定区域的情况. 我们只需要在文本中设置以下样式即可解决该问题: html页面: <div class=" ...
php 给字符中间添加间距,html中的字符间距怎么设置？css样式设置文本对齐方式总结...
我们经常用的html字符间距总是不好设置,html的文本对齐方式也不会设置,现在这篇文章就来帮助大家了,这里有关于html 字符间距的调整,还有文本的对齐方式设置,现在让我们来看看这篇文章吧首先我们 ...
html中文字空心如何设置,css 中字体文本小诀窍
本篇介绍 css 几种文本修饰的案例. 1.现实中的文字效果 1.1 凸版印刷效果背景知识:text-shadow 凸版印刷需要考虑两种情况:浅底深色字和深色浅底字浅底深色字代码示例凸版印刷效果 ...
js函数改变html样式,JavaScript改变CSS样式的方法汇总
JavaScript允许你即时的改变CSS样式,这样就可以将用户的眼球吸引到你想他们关注的地方上,并且提供较好的交互体验给力 . JavaScript修改CSS有4种方法: 修改节点style(内联样 ...
系列九、vue中css样式字体设置为华文行楷
一.下载华文行楷字体 # 下载地址 https://file.diyiziti.com/front/download/common/download?id=91# 百度网盘分享地址链接:https: ...
css样式设置文本框为只读,css怎么将文本框设置为只读
css将文本框设置为只读的方法是,在input文本框中添加readonly属性即可.readonly属性是一个布尔属性,该属性用来规定输入字段是只读的. 本文操作环境:windows10系统.css ...
字体css样式在线,CSS Fonts(字体)
CSS Fonts(字体) CSS字体属性允许您为字体设置各种样式,例如文本的字体系列,大小和粗体,变体等. 字体属性在CSS样式为文本内容的字体,如提供几个属性:font-family,font- ...

css样式字体文本汇总

六、行间距

行高（line height）

css样式字体文本汇总相关推荐

最新文章

热门文章