字体样式
review:
继承:
initial:不继承
inherit:继承
颜色值:
关键字
rgb():0-255之间
rgba():a透明度:0-1之间
16进制颜色值:#fff
尺寸:
width:
像素:px 绝对单位
em:相对单位 1em=16px
百分比:相对单位
相对于父级元素的尺寸
文本样式:
color:字体颜色
font-size:字体大小
font-weight:字体粗细
text-indent:首行缩进
text-decrotion:下划线
text-transform:改变字体大小写
font-family
1.下载网络字体
2.设置/声明字体
@font-face{
font-family:'wangym',
src:url()
}
div{
font-family:'wangym'
}
3.使用字体
字体图标库:
fontawesome:
.css
index.html
1.link:引入外部样式文件
2.使用行内元素
<span class='fa fa-xxx'></span>
iconfont:阿里巴巴
.css
1.引入外部css文件
link
2.使用
<span class='iconfont xxxx'></span>
文本样式续…
word-spacing空白:每个单词之间间距
letter-spacing:字符之间的间距
word-break: break-all;:设置超出父元素部分是否换行显示
overflow:
hidden:超出元素部分隐藏
scroll:超出元素部分以滚动条形式显示
width
height
min-width:最小宽度
min-height:最小高度
max-width:最大宽度
max-height:最大高度
元素的隐藏和显示
display:
none;:元素的隐藏,
隐藏元素所占据的空间
block;元素的显示
visibility:
hidden:元素的隐藏;
相当于修改了元素的透明度,不隐藏元素空间
visible:元素的显示
设置表格的边框合并:
border-collapse: collapse;
设置表格标题位置:
caption-side:top/left/right/bottom
img: 特殊的行内元素
私有属性:width height src alt
----列表样式----
列表样式:
ol 有序列表 私有属性:reversed
li
ul 无序列表 ul>li*3>ul>li*2
外部是圆点 嵌套为空心
li
dl 标题列表
dt:标题项
dd:列表项
list-style-type:
list-style-position: 设置列表项标志出现的位置
outside 默认, 主块外
inside 主块内
list-style-image:自定义设置列表项标志
list-style-image: url('./2.png');
list-style:list-style: url('./2.png') inside
----盒子----
盒模型:
标准盒模型/w3c盒子/默认盒模型:
box-sizing:content-box
特点:
width-->content
怪异盒子/边框盒子:
box-sizing:border-box;
特点:
width--》盒子
background-image:
background-repeat:
background-clip:
background-origin:
background-position:
background-attachment:
background-size:
border-image-source: