一、字体样式
1、字体颜色 color
2、字体风格font-family
span{
font-family:'微软雅黑','宋体';
}
引入外部字体
@font-face{
font-family:"名称";
src:url(' ');
}
3、字体大小 font-size
div{
/*具体的值*/
font-size:50px;
/*百分比 相当于父容器的字体百分比调整 浏览器默认字体大小
16px*/
font-size:50%;
/*根据父元素字体大小来调整*/
font-size:1em;
/*当html字体大小为100px的时候 我想得到一个14px的字体，
14/100 等于0.14rem
移动端布局比较多*/
font-size:1rem;
}
4、字体粗细font-weight
1.
bold定义粗的字体
2.bolder定义更粗的字体
3.lighter定义更细的字体
4.100 200 300 400 500 600 700 800 900数值的写法没有单位
5.normal默认 默认一般是用来给本来就加粗的字体，变成普通粗度
5、规定字体是否倾斜font-style
1
.italic定义字体倾斜
2.oblique定义字体的斜体 (两者没有明显的区别，记住一个就行)
3.normal 默认 一般用来规定本来就是斜体的字体变成普通字体
6、规定小型大写字母 font-variant
smallcaps大型小写字母
line-height行高
7、设置行与行之前的距离
div{
line-height:30px;
line-height:100%;
line-height:1.2em;
}
8、复合写法
基本写法：
div{
/*字体大小和字体风格是必须要写的*/
font:12px ‘微软雅黑’,’宋体’;
}
9、多样式写法:
/*字体:字体粗细 小型大写字母 字体风格 字体大小/行高 字体类型
顺序不能改变*/
font:bold small-caps intalic 12px/1.2 ‘微软雅黑’;
10、文本样式
text-transform 控制文本大小写
uppercasev字母大写
capitalize/'kæpɪtəlaɪz/首字母大写
lowercase小写字母
text-align 文本对齐方式
left 左对齐
right 右对齐
center 居中
justify 两端对齐
text-indent 首行缩进
px
text-decoration 文本修饰 下划线
none 去掉下划线
underline 下划线
linethrough 中划线
overline 上划线
letter-spacing 字间距
px
em
word-spacing 词间距
px
em
white-space 文本不换行
nowrap不换行
word-break 单词内换行
breakall单词内换行
text-overflow文本省略号
ellipsis文本省略号
span{
display:block;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
}
image.png
11、css属性的继承
默认继承的属性：
color
font:small-caps italic bold 50px/100px 'microsoft yahei';
text-align
text-indent:
letter-spacing = 字间距
word-spacing = 词间距
list-style
a标签的color不继承，不继承的加上inherit
a{color:inherit;}
12、特殊符号
空格
 ;
大于号>
小于号<
引号"
版权符号©
http://www.w3school.com.cn/tags/html_ref_symbols.html
13、鼠标样式
/*后缀名必须要是`.cur`后面的pointer是防止浏览器不兼容或者出错
的时候！就执行后面的一个
样式！*/
div{
cursor:url('路径')，pointer;
}
14、让标签里面的文字变成可以被编辑的文本
可以设置一个 contenteditable 属性值为 true
<p contenteditable="true">楚鑫大帅逼</p>
