前端基础学习笔记 字体文本样式和特殊符号

字体样式

字体颜色 color
字体风格 font-family

​
span{
font-family:'微软雅黑','宋体';
}
引入外部字体
@font-face{
font-family:"名称";
src:url(' ');
}

​

字体大小 font-size

div{
/*具体的值*/
font-size:50px;
/*百分比 相当于父容器的字体百分比调整 浏览器默认字体大小16px*/
font-size:50%;
/*根据父元素字体大小来调整*/
font-size:1em;
/*当html字体大小为100px的时候 我想得到一个14px的字体，14/100 等于0.14rem
移动端布局比较多*/
font-size:1rem;
}

字体粗细 font-weight

1. bold  定义粗的字体
2. bolder  定义更粗的字体
3. lighter  定义更细的字体 
4. 100 200 300 400 500 600 700 800 900 数值的写法没有单位
5. normal 默认  默认一般是用来给本来就加粗的字体，变成普通粗度

规定字体是否倾斜 font-style

1. italic 定义字体倾斜
2. oblique 定义字体的斜体 (两者没有明显的区别，记住一个就行)
3. normal 默认  一般用来规定本来就是斜体的字体变成普通字体

规定小型大写字母 font-variant

small­caps = 大型小写字母

line-height 行高

设置行与行之前的距离：

div{
    line-height:30px;
    line-height:100%;
    line-height:1.2em;
}

复合写法

基本写法：

div{
    /*字体大小和字体风格是必须要写的*/
    font:12px ‘微软雅黑’,’宋体’;
}

多样式写法:

​
​/*字体:字体大小/行高 字体风格 字体粗细 小型大写字母 倾斜 顺序不能改变*/
font:blod small-caps intalic 12px/1.2 ‘微软雅黑’;

​

​

文本样式

text-transform 控制文本大小写

uppercase 字母大写 
capitalize 首字母大写 
lowercase 小写字母

text-align 文本对齐方式

left 左对齐 
right 右对齐 
center 居中 
justify 两端对齐

text-indent 首行缩进

px

text-decoration 文本修饰 下划线

none 去掉下划线 
underline 下划线 
line­through 中划线 
overline 上划线

letter-spacing 字间距

px
em

word-spacing 词间距

px
em

white-space 文本不换行

nowrap 不换行

word-break 单词内换行

break­all 单词内换行

text-overflow 文本省略号

ellipsis 文本省略号

span{
    display:block;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
}

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;}

特殊符号

空格 nbsp &; 
大于号 gt 
小于号 lt 
引号 quot 
版权符号 copy 
http://www.w3school.com.cn/tags/html_ref_symbols.html

鼠标样式

​
/*后缀名必须要是`.cur`后面的pointer是防止浏览器不兼容或者出错的时候！就执行后面的一个
样式！*/
div{
    cursor:url('路径')，pointer;
}

​