Css 文本样式
1. text-align:设置文本的水平对齐方式
a.text-align:必须用于块状元素,如 <p>,<div>,
定义内部文本级内联元素如何横向对齐;
b.默认值是start,取决于html文档的direction属性设置(默认都是从左至右,所以等同于left)
c.值
left:左对齐
righ:右对齐
center:居中对齐
jusify:两端对齐(老浏览器支持不好,新浏览器效果不错)
2.text-decoration:设置文本的修饰方式
a.主要是用来对文本添加线条修饰
b.值
none 无修饰(标准文本的默认效果)
underline 下划线修饰(超链接的默认效果)
line-through 删除线
overline 上划线(基本没啥地方用到)
c.主要是用来消除超链接的默认下划线修饰
3. text-indent :设置文本的首行缩进
a.作用于块状元素,用来在块级元素的内容第一行添加一定的空格,已达到缩进的效果
b.和font-size属性一样,对于句首行缩进,可以使用px,em或%;
c.一般使用相对单位em,以元素本身字体尺寸为参考基数;
中文网页中段落的首行缩进通常是2个文字的距离 ,常用代码p{text-indent:2em};
可以使用负值,产生一些特殊的效果,如“悬挂缩进”;
4. text-transform:设置文本的转换(针对英文)
a.用于转换文字中的大小写方式(忽略源文档中的大小写)对中文无效;
b.值
uppercase 全部大写
lowercase 全部小写
capitalize 单词首字母大写;
5.text-shadow:设置文本的阴影效果;
a. text-shaow:用来设置文本的阴影效果,是css3新增的属性;
b. 实现一种阴影效果需要设定一组值而非一个值,并按照一定顺序来书写;
c.可以通过添加多组值来设定多重阴影,达到特殊效果, 多组值之间用逗号隔开;
d.部分老的浏览器版本不支持该属性(IE9以下)
e.值的写法:
按顺序书写4个值:水平阴影距离>垂直阴影距离>模糊程度>阴影颜色
水平阴影位置 :必须;长度单位,允许负值,用来控制阴影的水平方向;
垂直阴影位置: 必须;长度单位,允许负值,用来控制阴影的垂直方向;
模糊程度:可选;不允许为负数 ;不写默认为0,无模糊效果,值越大阴影越模糊;
阴影颜色: 可选 ;设置阴影的颜色,不写是=是默认等同于文本的颜色;
6.box-shadow:针对盒子;
none:无阴影(默认值)
按顺序书写:阴影水平偏移值>阴影垂直偏移值>阴影模糊值>阴影外延值>阴影的颜色>阴影类型
阴影水平偏移值:可以为负值;必须;
阴影垂直偏移值:可以为负值;必须;
阴影模糊值:不允许负值;可选;
阴影外延值:不允许负值;可选;
阴影的颜色:可选;默认是文字的颜色;
阴影类型:可选;默认为外阴影;inset:内阴影;
7.line-height:设置文本的行高
a. line-height:设置行的高度,是一个简单又复杂的属性;
b. 可以简单的把行高看成以文字内容本身为中线,上下垂直延伸形成的空隙而成;
c. 即将行距的值(行高-字号)/2,分别增加到内容区域的上下两边;
d. 通常使用相对单位来设定行高,英文行高是以文本的字号为基准的;
e.默认情况下,浏览器将行高呈现为字体的尺寸的1到1.2倍作用,行间紧凑,视觉容易感觉疲劳,所以通常情况下,
将行高设置为字号的150%到180%之间,阅读行距的实际舒适度较好;
d.单行文本在容器中垂直居中
实现办法:让容器的行高等同于容器的高度; .title{height: 30px;line-height: 30px;}
8.overflow :设置文本(容器内部内容(img))溢出的控制方式;
a.设置对象处理溢出内容的控制方式,针对的是容器的内部的内容,不仅仅是单纯的文本;
b.此属性适用于块状元素;
c.内容的溢出可能是横向或纵向的,因此延展开来,可以分为x轴(横向)和y轴(纵向)
d. 属性
overflow 包括横向和纵向的内容溢出的控制
overflow-x:仅处理横向的内容溢出的控制;
overflow-y:仅处理纵向的内容溢出的控制;
f. 值:
visible: 内容可见,溢出到容器外部;(默认值)
hidden:溢出内容被隐藏,无法查看;
scroll: 无论内容是否溢出, 容器都被添加滚动条(溢出才会激活)
auto:当内容溢出时, 容器边缘(纵向)出现滚动条;
g. overflow:hidden;
使固定了宽和高的容器强制隐藏内容(超出容器的内容);
主要防止页面布局被撑开,配合实现文字截取;
overflow:auto;
在某个页面或栏目板块的固定区域中调用呈现动态的内容;
9.letter-spacing:设置字符之间的间距;
a.设置单个字符之间的间距。中文:单个文字,英文单个字母;
b.指定的简介将被添加字符之后;
c.通常以字号为参考,使用相对单位来控制间距;
d.可以是负值;
e.怎么使用大幅度letter-spacing的文字水平居中?
p{tex-aling:center;width:500px;font-size:12px;letter-spacing:2em;border:1px red solid,padding-left:24px}
首先使用text-aling让文本居中,由于letter-spacing属性的影响,不能完全居中;
然后给左边一个padding-left:letter-spacing的值;
10.word-spacing:设置词语之间的间距;
a.设置单词或词语之间的间距,判断单词或词语的依据是文本的"空格";
b.指定的间距将被添加到单词或词语之后,但最后一个除外;
c.通常以字号为参考,使用相对单位来控制间距;
e.可以使用负值;
e.直接用text-align就可以居中;
11.word-break:设置文本自动换行的方法;
a.设置容器中文本的内容换行的行为;
b.值
break-all:允许文本在到达容器边缘时,可以任意位置断开,部受词语的限制;
keep-all:不允许词语断开,只能在出现词语分隔的空格或连接符时才能换行;
c.word-break:break-all;
针对数字或英文字母排版,防止出现连续无意义的长字符打破布局;
浏览器默认以'空格'来分词的,在默认情况不会把超过容器的一个完整单词自动换行;