字体文本样式和特殊符号

一.字体样式
字体颜色 color
字体风格 font-family
字是一样的写法，但是展示的风格不一样，比如宋体，楷书，隶书，草书，这些都是不一样的字体，在学校的时候我们都练过字对吧！
注意：
注意，当电脑上没有属性里规定的字体的时候，是无法显示出相应的字体的，需要在电脑上安装相应的字体才可以！
为了解决用户电脑里没有安装我们想要的字体，导致页面的问题，我们一般会写多个值，中间用逗号隔开，浏览器会优先使用前面的字体样式，如果前面的没有用第二个，以此类推！
span{
font-family:’微软雅黑’,’宋体’;
}
字体大小 font-size
div{
/*具体的值*/
font-size:50px;
/*百分比 相当于父容器的字体百分比调整 浏览器默认字体大小16px*/
font-size:50%;
/*em 父元素的字体大小 根据父元素字体大小来调整*/
font-size:1em;
/*rem 跟标签的字体大小默认16px 最小只能12px*/
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 定义字体的斜体 (两者没有明显的区别，记住一个就行)
4.normal 默认 一般用来规定本来就是斜体的字体变成普通字体
如果对没有 italic 字体风格的字体使用 italic 就没有效果了,这时需要用斜体就使用 oblique;
如果字体没有 italic样式 ,而只有 oblique 样式 ,则使用后者 oblique ;但若 字体没有oblique样式 ,则不能用 italic 替代,此时浏览器会将正常直立字体倾斜一个角度来作为倾斜字体使用
规定小型大写字母 font-variant
smallcaps= 大型小写字母
规定小型大写字母 把小写字母变大，但是比文字小一圈，大写字母保持原型。
line-height 行高
设置行与行之前的距离
div{
/*给高度的一样的是可以实现垂直居中!*/
line-height:30px;
line-height:100%; 根据字体大小
line-height:1.2em; rem
}
只写数字不写单位的时候 等于em，当不给高度的时候行高可以撑开盒子的高度！但不是所有时候都可以用行高代替高度,会造成布局的混乱,当没有字的时候 行高不起作用.
复合写法
基本写法：
div{
/*字体大小和字体风格是必须要写的*/
font:12px ‘微软雅黑’,’宋体’;
}
多样式写法:
/*字体:字体大小/行高 字体风格 字体粗细 小型大写字母 倾斜 顺序不能改变*/
font:bold small-caps italic 12px/1.2 ‘微软雅黑’;
文本样式
text-transform 控制文本大小写
uppercase 字母大写
capitalize 首字母大写
lowercase 小写字母
text-align 文本对齐方式
left 左对齐
right 右对齐
center 居中
justify 两端对齐
text-indent 首行缩进
px 或者 百分比 em rem
text-decoration 文本修饰 下划线
none 去掉下划线
underline 下划线
linethrough
中划线
overline 上划线
letter-spacing 字间距
px
em
word-spacing 词间距 对中文无效.
px
em
white-space 文本不换行
nowrap 不换行
文本会在在同一行上继续，直到遇到标签为止。
word-break 单词内换行
breakall
单词内换行 一行写不下的时候，强制拆开一部分，换行显示，对中文无效。
text-overflow 文本省略号
ellipsis 文本省略号
要实现这个效果，必须要搭配一个属性overflow:hidden;元素溢出隐藏,对行内元素无效(内容撑开宽高)
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

打赏作者