css当中经常使用的六种文本样式

css 文本样式是相对于内容进行的样式修饰,下面来说下几种常见的文本样式。

首行缩进

首行缩进是将段落的第一行缩进,这是常用的文本格式化效果。一般地,中文写作时开头空两格,类似于此。

该属性的值是允许为负值的。

语法:

  1. text-indent:<length> | <percentage> | inherit

tip:初始值为0;

应用于: 块级元素(包括block和inline-block)

继承性: 有

百分数: 相对于包含块的宽度

案例:首字符下沉

  1. div{
  2. width: 200px;
  3. border: 1px solid black;
  4. text-indent: 0.5em;
  5. }
  6. div:first-letter{
  7. font-size: 30px;
  8. float: left;
  9. }

水平对齐

水平对齐是影响一个元素中的文本的水平对齐方式。

语法:

  1. text-align: left | center | right | justify | inherit

初始值: left

应用于: 块级元素(包括block和inline-block)

继承性: 有

对于IE7-浏览器来说,使用text-align不仅会改变文本的水平对齐方式,也会改变后代块级元素的水平对齐方式

字间隔

字间隔是指单词间距,用来设置文字或单词之间的间距。实际上,"字"表示的是任何非空白符字符组成的串,并由某种空白符包围。

注意:单词之间用空格分开,单词之间的间距 = word-spacing + 空格大小

注意:字间隔可为负值

语法:

  1. word-spacing: <length> | normal | inherit

初始值: normal(默认为0)

应用于: 所有元素

继承性: 有

字母间隔

字母间隔是指字符间距

注意:字母间隔可为负值

  1. letter-spacing:<length> | normal | inherit

初始值: normal(默认为0)

应用于: 所有元素

继承性: 有

文本转换

文本转换用于处理英文的大小写转换。

语法:

  1. text-transform:uppercase(全大写) | lowercase(全小写) | capitalize(首字母大写) | none | inherit

初始值: none

应用于: 所有元素

继承性: 有

文本修饰

文本修饰用于为文本提供修饰线。

注意:文本修饰线的颜色与文本颜色相同。

语法:

  1. text-decoration:none | [underline(下划线) || overline(上划线) || line-through(中划线)] | inherit

初始值: none

应用于: 所有元素

继承性: 无

在首行缩进(text-index)、水平对齐(text-align)、字间隔(word-spacing)、字母间隔(letter-spacing)、文本转换(text-transform)、文本修饰(text-decoration)这6种文本样式中,首行缩进(text-index)和水平对齐(text-align)只能够应用于块级元素(包括block和inline-block),这是最应该注意的地方。

css经常使用的六种文本样式的更多相关文章

  1. CSS颜色、单位、文本样式

    一.CSS颜色:关键字 red16进制的6位 #ffffff16进制的3位 #fffrgb(0,255,100) 取值范围:0~255 (r:red.g:green.b:blue)rgba(0,255 ...

  2. CSS中常见的6种文本样式

    前面的话 CSS文本样式是相对于内容进行的样式修饰.由于在层叠关系中,内容要高于背景.所以文本样式相对而言更加重要.有些人对文本和字体样式之间的不同不太了解,简单地讲,文本是内容,而字体则用于显示这个 ...

  3. 第 15 章 CSS 文本样式[下]

    学习要点: 1.文本总汇 2.文本样式 3.文本控制 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一.文本总汇 本节课, ...

  4. 第 15 章 CSS 文本样式[上]

    学习要点: 1.字体总汇 2.字体设置 3.Web 字体 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一.字体总汇 本节 ...

  5. 重温CSS之背景、文本样式

    CSS背景样式: 背景色:background-color属性,设置元素的背景色,如:div {background:blue;}--设置所有div元素的背景为蓝色: 背景图像:background- ...

  6. 6.css文本样式

    文本样式,只要针对的是文本的效果和文本的方位,即文本样式和文本控制总结起来有一表中的属性可用: 属性名 说明 CSS 版本 text-decoration 装饰文本出现各种划线 1 text-tran ...

  7. css笔记-文本样式

    聊聊text-decoration.text-indent.text-transform.letter-spacing.word-spacing.vertical-align.下面是一些常用设置文本样 ...

  8. HTML和CSS前端教程03-CSS文本样式

    目录 1.CSS颜色-建议就用十六进制 2.CSS长度的度量单位-建议就用px 3.CSS文本样式 3.1. 字体属性 3.1. 文本样式 1.CSS颜色-建议就用十六进制 p{ color: #ff ...

  9. CSS基础选择器(选择器的优先级),CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成,盒模型-block,盒模型布局

    CSS基础选择器 (1)id选择器:   #       =>  标签拥有 id="user"  属性 <style> #user { width: 200px; ...

随机推荐

  1. Salesforce 超大量数据导入优化策略

    本文参考自以下系列文章: 1 2 3 4 5 6 超大量数据导入优化策略 Salesforce和很多其他系统都可以很好的协作.在协作过程中,数据的导入导出便成为了一个关键的步骤. 当客户的业务量非常大 ...

  2. Android 图片加载框架 Glide4.x

    概述 Glide是一个图片加载框架,使得我们可以轻松的加载和展示图片 Glide4.x新增apply()来进行设置,apply可以调用多次,但是如果两次apply存在冲突的设置,会以最后一次为准 新增 ...

  3. SpringBoot数据库读写分离之基于Docker构建主从数据库同步实例

    看了好久的SpringBoot结合MyBatista实现读写,但是一直没有勇气实现他,今天终于接触到了读写分离的东西,读写分离就是讲读操作执行在Slave数据库(从数据库),写操作在Master数据库 ...

  4. Android音乐播放器的设计与实现

    目录 应用开发技术及开发平台介绍 应用需求分析 应用功能设计及其描述 应用UI展示 一.应用开发技术及平台介绍 ①开发技术: 本系统是采用面向对象的软件开发方法,基于Android studio开发平 ...

  5. java新知识系列 二

      1:数据库事务隔离以及事务隔离的级别 数据库事务隔离: 在数据库操作中,为了有效保证并发读取数据的正确性,提出的事务隔离级别:为了解决更新丢失,脏读,不可重读(包括虚读和幻读)等问题在标准SQL规 ...

  6. C++17剖析:string_view的实现,以及性能

    主要内容 C++17标准发布,string_view是标准新增的内容.这篇文章主要分析string_view的适用范围.注意事项,并分析string_view带来的性能提升,最后从gcc 8.2的li ...

  7. AngularJS学习之旅—AngularJS 控制器(六)

    1.AngularJS 控制器 AngularJS 应用程序被控制器控制. ng-controller 指令定义了应用程序控制器. 控制器是 JavaScript 对象,由标准的 JavaScript ...

  8. Django 路由层(urlconf)

    Django 的路由层(URLconf) URL配置(conf)就像是Django所支撑的网站的目录; 本质就是:URL与调用该URL执行的视图函数的映射表; 通俗的讲:就是用户使用哪个url,URL ...

  9. offsetLeft、offsetX等

    https://blog.csdn.net/w390058785/article/details/80461845

  10. webpack中插件 prerender-spa-plugin 来进行SEO优化(二十四)

    vue.react对于开发单页应用来说带来了很好的用户的体验,但是同样有缺点,比如首页加载慢,白屏或SEO等问题的产生.为什么会出现这种情况呢?我们之前开发单页应用是这样开发的,比如首页 index. ...