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. (最简单)红米手机5A的USB调试模式在哪里开启的方法

    当我们使用安卓手机链接Pc的时候,或者使用的有些APP比如我们公司营销小组当使用的APP引号精灵,之前使用的老版本就需要开启usb调试模式下使用,现当新版本不需要了,如果手机没有开启usb调试模式,P ...

  2. 基于WanAndroid开放API实现的文章阅读APP

    简介 基于WanAndroid开放API开发的技术文章阅读App.主要功能包括:首页.体系.项目.公众号.搜索.登录.收藏.夜间模式等. 用到的第三方框架 RxJava RxAndroid Retro ...

  3. Android 启动APP时黑屏白屏的解决方案

    在开发中,我们在启动app的时候,屏幕会出现一段时间的白屏或者黑屏,不同设备时间长短不同.很影响用户体验. 首先分析一下,产生这个现象的原因,当我们在启动一个应用时,系统会去检查是否已经存在这样一个进 ...

  4. [20190401]跟踪dbms_lock.sleep调用.txt

    [20190401]跟踪dbms_lock.sleep调用.txt --//自己在semtimedop函数调用理解错误,加深理解,跟踪dbms_lock.sleep调用的情况. 1.环境:SCOTT@ ...

  5. 使用Spring.Net

    一:在Asp.net MVC中应该怎样使用Spring.Net? 1:先导入dll文件. 2:将案例中的Config文件夹拷贝到项目中. 3:修改Config文件夹中的相关的配置信息. 4:修改Web ...

  6. mysql免安装版初次使用

    在自己电脑上安装一个mysql数据库并启动,碰到一些问题,总结一下 1.下载免安装版mysql数据库,百度下载了了5.7.25版本 2.在bin文件夹下找到my-defaults.ini文件,我这没有 ...

  7. 给Integer对象加锁的错误方式

    package com.thread.test; public class BadLockOnInteger implements Runnable { public static Integer i ...

  8. HTML---引入css,js | 常用标签示例

    一.前端基础包括哪些?如何理解 二.css,js引入_及head中其他标签 三.特殊符号 四.常见的标签 4.1,form表单 4.2,input系列(单选框.复选框.input传文件.重置) 4.3 ...

  9. 日志学习系列(二)——Log4net的实例

    一.log4net简单实例创建步骤如下 1.第一步:在项目中添加对log4net.dll的引用,这里引用版本是2.0.8.0 2.第二步:程序启动时读取log4net的配置文件. 读取log4net的 ...

  10. lsof -i

    https://www.cnblogs.com/sparkbj/p/7161669.html 主要命令