一.字体款式 font
- font-color 字体色彩
-
font-style 字体款式
italic 斜体 normal 失常字体【默认】 -
font-weight 字体粗细
bold 粗体 lighter 更细的字体 normal 失常字体【默认】 100 ~ 900 数值越大，字体越粗 400 normal 800 bold -
font-size 字体大小
px 浏览器的默认字体大小是16px -
line-height 行高
取值是包裹该字体的元素高度，即可文字垂直居中 <div style="height:200px; line-height:200px;">123</div> -
font-family 字体族
'微软雅黑' 'Microsoft YaHei' serif 衬线 sans-serif 没有衬线 fangsong 政府文件 速写 font:font-style font-weight font-size fonnt-family； 1. 必须蕴含font-size、font-family 2. font-style和font-weight必须在font-size之前 3. font-family必须放在最初 -
webfont
@font-face 1. 下载ttf字体文件 2. 放到绝对应的目录(我的项目的目录) 3. style标签中通过@font-face引入 @font-face { font-family: 'myfont'; src: url('./文件名.ttf'); } 4. 在须要字体的中央应用 div { font-family:'myfont'; }
字体图表库iconfont、fontawesome
iconfont
1. 更改图标的大小的时候，要应用font-size
2. 选中须要更改的图标时，须要通过类名选中
fontawesome
iconfont:
1.图标退出我的项目->在线链接中的fontclass->css文件内容 复制到VScode中新建的css文件中
2.html文件link css文件，i标签增加图标 (class=”iconfont 图标类名”)
留神：
1.增加图标，更新整个css文件，html中增加新的icon
2.更改图标大小
1.批改单个icon --类名
.icon-yonghu{
font-size:30px;
}
2.批改所有icon
.iconfont{
font-size:30px;
}fontawesome
www.bootcdn.cn->font-awesome->复制link标签到html
class中批改图标名，大小
二.文本款式 text
text-align 文本在以后元素中的对齐形式
left
center
right
justifytext-decoration
underline 下划线
overline 上划线
line-through 删除线text-shadow 文本暗影
px x轴偏移
px y轴偏移
blur 含糊间隔
color 色彩
text-shadow:10px 10px 2px red text-transform 文本变形
lowercase 小写
uppercase 大写
capitalize 首字母大写text-indent 首行缩进
2em 2%
三.列表款式
list-style:none; 将li标签的默认的款式打消
四.拓展
-
文字的程度垂直居中
程度:text-align:center; 垂直:line-height:父元素的高度; -
打消a标签的默认款式
color:#333; text-decoration:none; cursor:default; pointer --a标签默认 wait help -
子元素在父元素中程度垂直居中
父元素： display:table-cell; vertical-align: middle; align-items: center; 子元素 display:inline-block;
五.单位
1) 色彩
1. 关键字
red、yellow...
color:red;
2. 十六进制色彩
color:#333333 ==> color:#333;
3. rgb函数
r red
g green
b blue
color:rgb(0,0,0);
0 ~ 255
4. rgba函数
r red
g green
b blue
a 色彩透明度
color:rgba(0,0,0,0.5);
0 ~ 255 / 0 ~ 1
*** opacity与rgba函数的区别***
opacity 父元素的透明度会影响到子元素，且子元素无奈设置为失常透明度
rgba函数 透明度仅仅会作用于父元素，不会影响子元素
5. 渐变色
background-image: linear-gradient(to right,red,yellow);
从左向右，从红色突变到黄色
2) 长度
相对单位 px
绝对单位 em
以后文本的包裹元素上的font-size
<div style='font-size:18px;'>123321</div>
1em = 18px
2em = 36px;
% 绝对于父元素
rem 绝对于根元素html
发表回复