css学习25:设置文本样式
1、应用基本文本样式
1.1 对齐文本
对齐属性:
属性 | 说明 | 值 |
---|---|---|
text-align | 指定文本块的对齐方式 | start,end,left,right,center,justify |
text-justify | 如果text-align属性使用了justify值,则该值会用来指定对齐文本的规则 | 见下表 |
text-align属性相当简单,不过,需要注意的重要一点是:可以将文本对齐到显式命名的某个边界(使用left或者right值),或者对齐到语言本来使用的边界(使用start和end值)。在处理从右到左的语言时,这是一个非常重要的区别。
text-justify属性的值:
值 | 说明 |
---|---|
auto | 浏览器选择对齐规则,这是最简单的方法,不过,不同浏览器之间的呈现方式会有微小差别 |
none | 禁用文本对齐 |
inter-word | 空白分布在单词之间,适用于英语等词间有空的语言 |
inter-ideograph | 空白分布在单词、表意字之间,且文本两端对齐,适用于汉语、日文和韩文等语言 |
inter-cluster | 空白分布在单词、字形集的边界,适用于泰文等无词间空格的语言 |
distribute | 空白分布在单词、字形集的边界,但连续文本或者草体除外 |
kashida | 通过拉长选定字符调整对齐方式(仅适用于草体) |
1.2 处理空白
空白在HTML文档中通常是被压缩或者直接忽略掉。这允许你将HTML文档的布局跟页面的外观分离。
whitespace属性控制浏览器对空白字符的处理方式。
值 | 说明 |
---|---|
normal | 默认值,空白符被压缩,文本行自动换行 |
nowrap | 空白符被压缩,文本行不换行 |
pre | 空白符被保留,文本只在遇到换行符的时候换行,这跟pre元素(参见第8章)的效果一样 |
pre-line | 空白符被压缩,文本会在一行排满或遇到换行符时换行 |
pre-wrap | 空白符被保留,文本会在一行排满或遇到换行符时换行 |
1.3 指定文本方向
direction属性告诉浏览器文本块的版块方向。
值:ltr,rtl
1.4 指定单词,字母,行之间的间距
属性 | 说明 | 值 |
---|---|---|
letter-spacing | 设置字母之间的间距 | normal长度值 |
word-spacing | 设置单词之间的间距 | normal长度值 |
line-height | 设置行高 | normal长度值,数值,% |
1.5 控制断词
word-wrap属性告诉浏览器当一个单词的长度超出包含块的宽度时如何处理。
值 | 说明 |
---|---|
normal | 单词不断开,即使无法完全放入包含块元素 |
break-word | 断开单词,使其放入包含块元素 |
p元素使用了normal值,意思是浏览器不会断开长单词,即使长单词溢出p元素。
1.6 首行缩进
text-indent属性用于指定文本块首行缩进,值可以是长度值,%。
text-indent: 15%;
2、文本装饰与大小写转换
text-decoration和text-transform两个属性分别允许我们装饰文本和转换文本大小写。
属性 | 说明 | 值 |
---|---|---|
text-decoration | 为文本块应用装饰效果 | none,underline,overline,line-through,blink |
text-transform | 为文本块转换大小写 | none,capitalize,uppercase,lowercase |
3、创建文本阴影
text-shadow为文本块应用阴影,值h-shawod,v-shadow,blur,color
h-shadow和v-shadow值分别指定阴影的水平偏移和垂直偏移。它们的值用长度值表示,允许负值。blur值也是一个长度值,定义了阴影的模糊程度,该值可选。color值指定阴影的颜色。
text-shadow: 0.1em 0.1em 1px lightgrey;
4、使用字体
属性 | 说明 | 值 |
---|---|---|
font-family | 指定文本块采用的字体名称 | 见下表 |
font-size | 指定文本块的字体大小 | 见下表 |
font-style | 指定字体样式 | normal,italic,oblique |
font-variant | 指定字体是否以小型大写字母显示 | normal,smallcaps |
font-weight | 设置字体粗细 | normal,bold,bolder,lighter,100~900之间的数字 |
font | 在一条声明中设置字体的简写属性 | 见后的表 |
格式:
font: font-style font-variant font-weight font-size font-family
4.1 选择字体
font-family属性指定使用的字体,按照优先顺序排列。浏览器从字体列表中的第一种开始尝试,直到发现合适的字体为止。这种方法很有必要,因为你可以使用用户安装在电脑上的字体,而由于操作系统和偏好不同,不同用户安装的字体会有所不同。
当然还有最后的保障:CSS定义了几种任何情况下都可以使用的通用字体。有几大类字体,称为通用字体系列,浏览器在呈现这些字体时可能有差异。
通用字体系列 |
---|
serif |
sans-serif |
cursive |
fantasy |
monospace |
4.2 设置字体大小
font-size属性的值:
值 | 说明 |
---|---|
xx-small | 设置字体大小。浏览器会决定每个值代表具体大小。不过,从上到下逐渐增大是有保证的 |
x-small | |
small | |
medium | |
large | |
x-large | |
xx-large | |
smaller | 设置字体相对于父元素字体的大小 |
larger | |
使用CSS长度值精确设置字体大小 | |
<%> | 将字体大小表示为父元素字体大小的百分数 |
4.3 设置字体样式的粗细
可以使用font-weight属性设置字体粗细——增加字体“重量”会使文本更粗。font-style属性允许我们在正常字体、斜体和假斜体(倾斜字体)三种字体之间选择。斜体和假斜体有明显区别,但这是技术上的,通常从文本外观看来差别很小。
font-weight: medium;
5、使用web字体
我之前提到过CSS字体的一大问题:不能指望用户的机器上一定安装了你想使用的字体。解决这个问题的方法是使用Web字体,我们可以直接下载Web字体并使用在自己的页面上,而不需要用户做什么。使用@font-face指定Web字体。
#font-face {font-family: 'MyFont';font-style: normal;font-weight: normal;src: url('http://titan/listins/MyFont.woff');
}
使用@font-face的时候,需要使用标准字体属性来描述正在使用的字体。font-family属性定义字体名称,用来引用要下载的字体;font-style和font-weight属性告诉浏览器如何设置Web字体的样式和粗细,也就是说你可以创建斜体和粗体字符;src属性用来指定字体文件的位置。Web字体有多种格式,但WOFF格式得到了最为广泛的支持和应用。
css学习25:设置文本样式相关推荐
- 前端学习笔记之——设置文本样式
设置文本样式 1.应用基本文本样式 1.1.对齐文本 有好几个属性可以用来设计文本内容的对齐方式. 属性 说明 值 text-align 指定文本块的对齐方式 start end left right ...
- 可跨页字符串:使用Spans设置文本样式
文本样式是增强Android应用程序UI的重要方面之一.在Android中,我们可以更改文本的大小,颜色,重量,样式等,并使文本更具吸引力和吸引力. 但是想想一种情况,当你希望为TextView的不同 ...
- html链接不同状态样式,如何用css为超链接设置不同样式
如何用css为超链接设置不同样式 css设置超链接的样式可以使用伪类来实现,使用link来设置正常链接的样式,visited设置访问过的链接样式,hover设置鼠标悬浮时的样式,active设置鼠标点 ...
- 阿ken的HTML、CSS的学习笔记_文本样式属性(笔记三)
前段时间国庆中秋那会儿学校放八天假 几乎所有人都选择回家或者是出去玩儿 而我选择留在学校这边儿 找一个晚七到早七的兼职去警醒一下浑浑噩噩的自己 整栋宿舍楼就剩下我和我的一个舍友 虽不过十月深秋 却让人 ...
- 【CSS】设置文本样式
大家好,我是翼同学! 目录 1️⃣前言 2️⃣文本样式
- Web前端开发之CSS学习笔记11—文本格式和动画设计
目录 1.文本对齐text -align 2.保留空白字符white-space 3.设置文本方向direction 4.设置文本缩进text-indent 4.设置字符间距letter-spacin ...
- 表格内容居中css样式,css表格中的内容如何居中?css表格中的文本样式介绍
你知道css表格的内容太是如何居中的吗?你知道css表格的文本如何设计左对齐吗?你知道css表格如何设置右对齐吗?这些内容都在这篇文章之中等着你来学习了. 首先我们先介绍css表格中的内容是如何居中的 ...
- 【温故知新】CSS学习笔记(字体样式属性)附加篇
CSS字体样式属性 目录 CSS字体样式属性 一.font属性 二.color属性 三.line-height 行间距(行高) 四.text-align 水平对齐方式 五.text-indent 首行 ...
- CSS入门五:文本样式;字体颜色:英文字母,十六进制,RGB;文本颜色,字间距,行间距,对齐方式;下划线、上划线…,文本阴影,字母大小写,首行缩进
CSS入门部分已经了解了:CSS简介.样式表分类,内部样式表简单使用:选择器和类选择器简单使用:背景色.背景图:以及外部样式表的简单使用: 本篇博客主要介绍,如何对文本设置,包括字体颜色:字间距,行间 ...
- CSS表格和设置表格样式
表格 表格在日常生活中使用的非常的多,比如excel就是专门用来创建表格的工具, 表格就是用来表示一些格式化的数据的,比如:课程表.银行对账单 1.如何在网页中创建表格 在网页中也可以来创建出不同的表 ...
最新文章
- 一种新方法或让AI模型拥有“联想”力,或能识别从未见过的事物
- Pair Testing
- solaris 10 安装oracle 10g
- 计算机科学与编程基础,国外经典教材·计算机科学与技术:Oracle 10g编程基础
- JavaScript中的Window窗口对象【转载】
- ImportError: cannot import name *
- 待字闺中之兄弟数字分析
- SQLi LABS Less-13 报错注入+布尔盲注
- Spring Boot 启动参数设置详解
- 大数据读书——《淘宝技术这十年》读书笔记
- python语音聊天_语音聊天实现
- 如何解决竞价推广中的恶意点击?
- 关于笔记本电脑无法连接到网络
- JavaSE第二阶段之面向对象编程
- 【C++游戏设计】用颜色原理打印平面地图
- solicit报文_DHCPv6原理与配置
- Predis的一些操作汇总
- matlab功率谱密度单位,功率谱密度的工程单位和国际制单位
- 安装elevation_mapping与traversability_estimation
- open-vm-tools安装问题及解决方法