一、文本属性

1、文本对齐

text-align 属性规定元素中的文本的水平对齐方式。

属性值:
none | center | left | right | justify

2、文本颜色

color属性

3、文本首行缩进

text-indent 属性规定元素首行缩进的距离,单位建议使用em

4、文本修饰

text-decoration属性规定文本修饰的样式

属性值:
none(默认) | underline(下划线) | overline(定义文本上的一条线) | line-through (定义穿过文本的一条线) | inherit(继承父元素的text-decoration属性的值。)

5、行高

line-height就是行高的意思,指的就是一行的高度。

6、阴影

text-shadow:水平方向偏移量 垂直方向偏移量 模糊度 阴影颜色;

7、文字溢出

text-overflow:clip | ellipsis
规定当文本溢出包含元素时发生的事情。

属性值:

  • clip    修剪文本
  • ellipsis 显示省略符号来代表被修剪的文本
  • string   使用给定的字符串来代表被修剪的文本

overflow: 规定当内容溢出元素框时发生的事情。

属性值:

  • visible   默认值。内容不会被修剪,会呈现在元素框之外。
  • hidden     内容会被修剪,并且其余内容是不可见的。
  • scroll     内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
  • auto      如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
  • inherit   规定应该从父元素继承 overflow 属性的值。

案例:文字超出部分显示...

css部分
div{width: 200px;height: 200px;border: 1px solid red;}
div p{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
} html部分
<div><p>等你我等了那么久,花开花落不见你回头</p><p>多少个日夜想你泪儿流,望穿秋水盼你几多愁</p>
</div>

二、字体属性

1、字体大小

font-size表示设置字体大小,如果设置成inherit表示继承父元素的字体大小值。可以用px表示,也可以用em表示

2、字体粗细

font-weight表示设置字体的粗细

属性值:
none(默认值,标准粗细) | bold(粗体) | border(更粗)| lighter(更细) | 100~900(设置具体粗细,400等同于normal,而700等同于bold)| inherit(继承父元素字体的粗细值)

3、字体系列

font-family

font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识别的第一个值。如果都不支持则显示宋体。

sans-serif是无衬线字体,是一种通用字体族。
常见的无衬线字体有 Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, 中文的幼圆、隶书等等。
font-family最后加上sans-serif,也是为了保证能够调用这个字体族里面的字体,因为大多数计算机里都有这种字体。

三、行高 line-height

针对单行文本垂直居中
公式:行高的高度等于盒子的高度,可以使当行文本垂直居中,注意只适用单行文本。

针对多行文本垂直居中
行高的高度不能小于字体的大小,不然上下字之间会紧挨一起。

第一步,一个宽度300*300的盒子,看盒子中一共显示了几行文字,假如是5行,再看一下行高,如果行高是line-height:30px; 那么就知道行高*5=150px

第二步,让(盒子的高度-150px)/2=75;那么设置盒子的padding-top:75px;同时保证盒子的高度为300px,那么高度改为225px;

四、font-family

使用font-family注意几点:

1.网页中不是所有字体都能用

因为这个字体要看用户的电脑里面有没有安装,比如你设置: font-family: "华文彩云"; 如果用户电脑里面没有这个字体,那么就会变成宋体
页面中,中文我们只使用: 微软雅黑、宋体、黑体。
如果页面中,需要其他的字体,那么需要切图。
英语:Arial 、 Times New Roman

2.配置多个备选字体,用逗号隔开

为了防止用户电脑里面,没有微软雅黑这个字体。就要用英语的逗号,隔开备选字体,就是说如果用户电脑里面,没有安装微软雅黑字体,那么就是宋体:
font-family: "微软雅黑","宋体"; 备选字体可以有无数个,用逗号隔开。

3.将英语字体放在最前面

这样所有的中文如果不能匹配英语字体,就自动的变为后面的中文字体:
font-family: "Times New Roman","微软雅黑","宋体";

4.所有的中文字体,都有英语别名 

微软雅黑的英语别名:font-family: "Microsoft YaHei";
宋体的英语别名: font-family: "SimSun";
font属性能够将font-size、line-height、font-family合三为一: font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";

5.行高可以用百分比,表示字号的百分之多少。

一般来说,都是大于100%的,因为行高一定要大于字号。
font:12px/200% “宋体” 等价于 font:12px/24px “宋体”;
反过来,比如: font:16px/48px “宋体”;等价于 font:16px/300% “宋体”

五、vertical-align

定义:vertical-align 属性设置元素的垂直对齐方式。

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐

常用属性值:

  • baseline 默认值
  • top
  • bottom
  • middle

它的作用:

  • 内联元素之间的对齐
  • 文字与图片垂直方向的对齐
  • 图片与图片垂直方向的对齐
  • 行内块元素垂直方向的对齐
  • 单元格td的内容垂直方向的对齐

六、display

display 属性规定元素应该生成的框的类型。

值    描述
none    此元素不会被显示。
block    此元素将显示为块级元素,此元素前后会带有换行符。
inline   默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
等等。。。

转载于:https://www.cnblogs.com/dxnui119/p/10252563.html

12-文本属性和字体属性相关推荐

  1. python 全栈开发,Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)...

    昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active属性选择器: [属性~='属性值'] 伪类选择器 a ...

  2. 01-CSS属性:字体属性和文本属性

    本文重要内容 CSS的单位 字体属性 文本属性 定位属性:position.float.overflow等 CSS的单位 html中的单位只有一种,那就是像素px,所以单位是可以省略的,但是在CSS中 ...

  3. CSS属性:字体属性和文本属性

    本文重要内容 CSS的单位 字体属性 文本属性 定位属性:position.float.overflow等 CSS的单位 html中的单位只有一种,那就是像素px,所以单位是可以省略的,但是在CSS中 ...

  4. css文本行高是哪个属性_CSS样式----CSS属性:字体属性和文本属性(图文详解)...

    本文最初于2015-10-04发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重要内容 CSS的单位 字体属性 文本属性 定 ...

  5. css文本行高是哪个属性_CSS字体属性和文本属性总结

    1.CSS字体属性 1.1 字体  font-family 1.2 字号 font-size 1.3 字体粗细  font-weight font-weight : bold; font-weight ...

  6. 【CSS】文本属性、字体属性

    文章目录 一.color属性 英语单词表示法 十六进制表示法 rgb()表示法 rgba()表示法 二.font-size属性 三.font-weight属性 四.font-style属性 五.tex ...

  7. html字体相关的属性,CSS 字体属性font相关的用法

    phpweb设置字体名称属性(font-family) 这个属性设置页面中选择用哪种字体,常用的字体有:Simsun.Arial.Verdana.Helvetica. sans-serif等,定义方法 ...

  8. css字体属性和css文本属性

    字体属性和文本属性 css字体属性 color属性:设置文字颜色 值类型: 关键词:red,green- 十六进制:#000,#fff rgb(255,255,255) font-size属性:定义文 ...

  9. 前端基础:CSS字体属性

    目录 1. 字体系列 2. 字体大小 3. 字体粗细 4. 字体样式 5. 字体复合属性 6. 字体属性总结 css fonts(字体)属性用于字体系列.大小.粗细.文字样式(如斜体). 1. 字体系 ...

最新文章

  1. 成为阿里 P7 真的难么?
  2. Javascript设置cookie和获取cookie
  3. char和byte的区别
  4. cambridge sharing note 1
  5. 中国首台千万亿次超级计算机,中国首台千万亿次超级计算机首批设备开始试用...
  6. 普通显示器开启freesync_【大小金刚显示器是什么?】之二代ROG PG279Q测试
  7. windows录屏_电脑自带录屏软件怎么打开?详细操作教程
  8. java集成开发工具项目_Java项目开发(一)-不借助集成工具创建Java项目并编写编译执行脚本...
  9. 漫画:如何给女朋友解释什么是策略模式?
  10. 对话张潼 | 腾讯AI Lab周岁:规模飙至370人,要做后来居上的终结者
  11. 管理新语:工作没做好,批评几句,怎么成了诛心
  12. PS教程第六课:魔棒工具进行抠图
  13. 我爱过你吗--我看美丽心灵的永恒阳光
  14. “华为杯”第十八届中国研究生数学建模竞赛B题参赛总结
  15. excel分列---多页批量操作--vba宏实现
  16. centos7 firewall-cmd 命令报错 ModuleNotFoundError: No module named 'gi'
  17. 三里屯有优衣库也有程序员,猜猜他们在干嘛?
  18. python cookies是什么_Python获取cookie有什么用
  19. 在线考试系统的倒计时
  20. Linux 流量控制工具 TC 详解

热门文章

  1. 亿贝html5,亿贝CALL
  2. 基于深度学习的大豆病虫害自动计数(SLIC超像素方法进行图像分割)
  3. everything html修改,在HTML 5视频标签上更改源
  4. 基于BERT 的中文数据集下的命名实体识别(NER)
  5. queryrunner带参数的构造函数和不带参数的构造函数有什么区别_再谈构造函数、原型、原型链之间的关系...
  6. java dispose null_Java Map释放内存置null以及调用clear()的区别
  7. nginx服务器配置安全维护,nginx 安全:如何强化服务器配置
  8. 如何使用计算机中的导出,(excel在电脑的哪个文件里?)excel怎么把查找的导出
  9. 数据结构与算法-java笔记一 更新中
  10. git钩子放服务器_Git代码自动化部署、Hook、钩子