长度单位
1:像素 px
不同显示器像素大小不同的,显示效果越好,像素越小,反之像素越大
2:百分比 %
根据父元素的样式来计算该值
优势就是父元素宽度放生改变的时候,子元素也会发生改变
3:em
个人那句当前元素的大小来计算 1em=1font-size
浏览器默认大小是16px 磨人的最小是12px
使用em时,当字体大小发生改变,em也会发生改变
4:rem
相对于根元素的字体大小来计算
字体样式
color 设置字体颜色,当然也可以设置其他颜色
font-size 设置字体大小
注意:(1)设置的不是文字本身的大小,而是字符框的大小
font-size 实际上字符框的高度
一般情况下,文字会比字符框稍微小一点,有时也会稍微大一些
(2)常用单位:px rem em
字体分类
在网页中字体分为5类
serif 衬线字体
sans-serif 非衬线字体
monospace 等宽字体
cursive 草书字体
fantasy 虚幻字体
浏览器会自动下载指定的字体应用
字体的其他样式
1:font-style:;设置文字的斜体
可选值:normal 默认值 文字正常显示
italic 文字会倾斜显示 【用的更多】
oblique 文字也会倾斜显示
{ font-style:italic ;}
2:font-weight 用于设置文本的加粗效果
属性值可以100——900之间的值
也可以使用 比较常用
normal 默认值 文字正常显示
bold 文字加粗
{ font-weight: bold;}
3:font-variant 可以用来设置小型的大写字母
可选值: normal 正常显示 默认值
small-caps 文字以小型的大小字母显示
{ font-variant: normal;}
行间距
font 简写方式 必须要写字体大小和font-family
顺序都可以,其他没写的样式,浏览器会默认,指定行高,需要在字体大小后/行高大小
行高(line height)
行高类似于我们上学的单线本,一行一行的,线与线之间的间距就是行高
网页中的文字实际上也是写在线上的,文字默认会哦在行高中间垂直居中显示
可以用line-height设置行高
line-height:属性值;
属性值:
1:直接是一个大小
2:可以指定一个百分数,会相对于字体去计算行高
文本样式
1:text-decoration 用来设置文本装饰
可选值:
none 默认值 正常显示,没有任何修饰
underline 为文本添加下划线
overline 为文本添加上划线
line-through 删除线
2:text-transform:; 用来设置文本的大小写
可选值:
none 默认值 不添加任何修饰,正常宣誓
uppercase 所有字母大写
lowercase 所有的字母小写
capitalize 单词首字母大写
3:white-space 用来设置网页如何处理空白
可选值:
mormal 正常
mowrap 不换行
per 保留空白
4:text-overflow : ; 文本溢出的内容如何处理
可选值:
clip 修建文本
ellipsis 显示省略好来表示被修剪的文本
.P1{text-decoration: underline;}
a{text-decoration: none;}
.p2{ /*text-transform: uppercase;*/
/*background-color: red;*/
/* 以下是设置文本 */
/* 设置宽度 */
white-space: nowrap;
text-overflow: ellipsis;
width: 200px;
/* 裁剪多余 */
overflow: hidden;
}