字体介绍
1.文字大小font-size
2.字体类型font-family
可以把字体类型里书写的若干个值看作一个"回退"系统来理解,
如果写了多个值,系统会从第一个一个一个判定当前的浏览器是否支持该种字体。
如果不支持,尝试下一个,但是最后一个值必须写css通用的字体类组名,
css一共有5个通用的类族:"serif","sans-serif","cursive","fantasy","monospace"
3.font-variant: small-caps;小写字母以大写字母的形式+小写字母的高度进行显示
4.字体样式-font-style
normal 正常
oblique 强制文字斜体
italic 文字自身的斜体,如果设置的文字或者字体集内没有斜体,无效果.
5.字体粗细
1.对应的单词
normal,lighter,bold,bolder
2.具体的数值(100到900)
400=normal
700=bold
font复合属性,书写顺序(font-size,font-family不可缺少):
font-style,font-variant,font-weight,font-size,line-height,font-family
自定义字体
给下载的或者我们自定义的字体声明一个名字,方便我们以后的引用,引用时需要告诉系统文字的路径。
语法:@font-face {
font-family:我们自己起的名字.像Yfont
src:自定义文字包的路径.
/*兼容IE高版本的写法*/
url(自定义字体);
}
文字的字体包(字体文件):格式:
1.ttf:最常用。chrome,Safari,Opera,Firefox,iOS,Android都支持该类型的字体包.
2.eot:仅IE浏览器支持.
3.svg:应用ios
4.woff:chrome和Firefox.
文本
1.文字颜色
默认文字颜色是黑色，颜色值得三种写法:
1.用颜色对应的英文单词
2.rgba(red,green,blue,alpha);
rgb三原色,所有的颜色都由这三种颜色调和而成,三种颜色的取值范围是0~255
3.十六进制:#后面跟6个值,值的取值范围0-9,A-F
2.文字的排版方向
ltr:left to right;
rtl:right to left(先把右边填满,不影响文字的阅读顺序的方向,但是会影响标点符号);
3.字母间距
默认值normal=0px;可以取负值
letter-spacing: 3px;
单词间距，都用于英文文本,可以给负值
word-spacing: 10px;
4.对齐方式
该属性只对行元素或者行级块元素有作用,对块级元素无效
text-align:值在下面;(一般对图片和文字居中)
left,center,right,
justify(分布对齐,不推荐使用,部分浏览器不支持该属性)
单纯的文字是匿名的行元素
5.文字修饰
text-decoration:
underline 下划线
overline 上划线
line-through 删除线
none 没有线
6.首行缩进
text-indent
1.数值类型:像素大小;(不推荐使用)
2.em单位类型:一个单位的em表示当前元素的font-size值
7.文字转化,一般用在英文文本
text-transform:值;
uppercase:转成大写;
lowercase:转成小写;
capitalize:首字母大写;
8.空白区域处理
white-space:值在下面;
normal;
nowrap 不换行;
pre 保留文本原有的格式,包括所有的空格;
9.行高
line-height,x基线与x基线之间的距离
normal 默认的行高,
具体的数值(如：12px)
文字的垂直居中
单行时,设置行高等于父级元素的高即可
10.文本溢出时的处理方式
text-overflow
clip:剪裁掉;
ellipsis:用省略号代替;
string:用给定的字符代替(不建议使用,有些浏览器不支持);
11.不换行,下面三个属性加在一起可以做成省略号的小效果
white-space: nowrap;
/*文本如果溢出怎么处理*/
text-overflow: ellipsis;
/*如何处理溢出的部分*/
overflow:hidden;
12.文字的多列显示
// column复合属性
1.column-count:最大列数
2.column-width:最小列的宽度
3.columns:是column-count和column-width缩写
4.column-gap:列与列之间的距离
5.column-rule:分割线
a.column-rule-width
b.column-rule-style
c.column-rule-color
6.column-span:是否允许跨列,两个值,默认为1,all为跨所有列
背景透明文字不透明
解决办法1: 使用background:rgba(); 不使用background:颜色;opacity:0~1;
解决办法2: 一个div上有另外一个包含文字的div,下层div设置opacity.
em和rem
一个em单位表示当前元素的font-size值.元素的font-size会继承.
一个rem单位相当于HTML标签的font-size值.
图片的垂直居中
使用vertical-alicn:该元素定义行内元素的基线
相对于该元素所在行的基线的对齐方式.
值为:
baseline:基线对齐.
top:父元素content区域的顶端.
middle:元素的中线与所在行的基线对齐,
bottom:父元素content区域的低端;
text-top:文本的最高点topline与图片对齐.
text-bottom:文本的最低点bottomline与图片对齐.
super:与上标文字的基线对齐
sub:与下标文字的基线对齐
英语本-四线格自上而下:topline,middleline,baseline,bottomline.
1.如果图片的高度就是父元素的高度,直接给图片设置vertical-align:middle即可
2.如果图片的高度比父元素的高度小,除了要设置图片的vertical-align:middle还需要设置父元素的行高为整个父元素的高度.
3.块级元素(div)的垂直居中。给子元素设置绝对定位,top,bottom值都给0,上下margin给auto,设置固定高度.要居中的父级一定要设置非static的定位属性.(一般会给relative,降低对父级元素的影响)