字体 文本颜色:color:red; 引入CSS文件<link rel=’stylesheet’ href=’css/font-awesome.min.css’> <body> <style> .s1{font-size:120px; color:red;} </style> 2. 将文件css和webfonts放在fa文件夹中 <link rel="stylesheet" href="fa/css/all.css"> 使用时:<i class="fas fa-stroopwafel" style="font-size: 100px;"></i>
阿里图标字体:http://www. 选中想要的图标加入购物车,且添加到项目中,下载到本地,放入iconfont中,引入iconfont/iconfont.css 三种方法
1.通过实体<span class=’iconfont’ style=’font-size:100px;color:red;’></span> 2.通过类<span class=’iconfont icon-icon-test’ style =’ font-size:100px;color:red; ’> </span> 3.通过伪类<p></p > <style> p::before{ content:’\e63f’ font-family:iconfont; font-size:100px;} </style> 字体大小 1em=1font-size:em也是CSS中的一个单位,相当于一个字体大小 1rem=HTML的1font-size,默认16px,相对于根元素 修改:html{font-size:200px;}
行高(line height) 行高指的是文字占有的实际高度。通过line-height来设置行高,行高可以指定一个大小(px,em),也可以直接设置整数(整数代表行高是字体的指定倍数)
为了使得文字垂直居中:行高设置和高度一样 line-height=height; 行高还可以设置文字的行间距:行间距=行高-字体大小
字体框:字体存在的格子,设置font-size实际上就是设置字体框的高度。 行高会在字体框的上下平均分配。
字体的简写属性 font同时设置字体相关的所有样式,后面必须是字体大小和字体族,必须写(空格隔开) font:40px 'Times New Roman ’,Times font:[加粗 斜体 变形]大小/行高 字体族 行高 可以省略不写,如果不写使用默认值
字重,字体加粗:font-weight:100-900;九个级别,但基本上没有用 可选值:normal 默认值,不加粗 bold 加粗
字体样式:font-style 可选值:normal 默认值,正常 italic 斜体
字体变形:font-variant 可选值:small-caps(小型大写字母)
文本样式 text-align:设置文本的对齐方式 left 默认值,靠左对齐 right 靠右对齐 center 居中对齐 justify 两端对齐
vertical-align:垂直对齐方式 baseline:基线对齐 top:和父元素顶部对齐 bottom:和父元素的底部对齐 可设置图片对齐,使其不向基线对齐 super:上标 sub:下标 middle:居中 text-decoration:设置文本修饰 underline:下划线 line-through:删除线 overline:上划线 none:没有线
white-space:如何处理空白内容 normal 默认值,自动换行 nowrap 不换行 pre 保留文本的格式 text-overflow: 如何处理溢出的文本 ellipsis 使用省略号来表示溢出的内容 |
|