CSS 文字篇
字体类型 font-family
修改元素的文本的字体类型(当前设备支持的字体类型)
font-family可以把多个字体名称作为一个"回退"系统来保存. 如果浏览器不支持
第一个, 则会尝试下一个. 建议在最后再追加一个通用字体类型.
css通用字体类型:
1. Serif字体
2. Sans-serif字体
3. Monospace字体
4. Cursive字体
5. Fantasy字体
font-family在书写字体名字的时候: 中文名称加引号, 英文可以不加, 如果英文
名称是多个单词的组合, 建议也加上引号
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.serif { font-family: "Times New Roman", Times, serif; }
.sans-serif { font-family: Arial, Helvetica, sans-serif; }
.monospace { font-family: "Courier New", Courier, monospace; }
</style>
<title>上机练习</title>
</head>
<body>
<p class="serif">衬线字体 - serif</p>
<p class="sans-serif">无衬线字体 - sans-serif</p>
<p class="monospace">等宽字体 - monospace</p>
</body>
</html>
font-family 如果要展示自定义字体?? — 使用@font-face
字体包类型:
a. ttf 最常用, 兼容性最好, Chrome, Safari, FireFox, Opera, iOS, Andriod
b. eot: 只兼容IE
c. svg: 适用于iOS
d. woff: Chrome FireFox
@font-face {
font-family: waiwai;
src: url(HYWaiWaiTiJ.ttf);
}
.div1 {
font-family: "waiwai";
}
字体大小 font-size
<style type="text/css">
div{font-size:20px;} /* 以像素为单位设置div标签中的字体大小*/
.p1{ font-size: 0.6in; } /* 以英寸为单位设置字体大小 */
.p2{ font-size: 0.8em; } /* 以父辈字体大小为参考设置大小 */
.p3{ font-size: 2cm ; } /* 以厘米为单位设置字体大小*/
.p4{ font-size: 16pt; } /* 以点为单位设置字体大小 */
.p5{ font-size: 2pc; } /* 以皮卡为单位设置字体大小 */
</style>
字体颜色 color
<style type="text/css">
p{
color:green !important;
}
.p1 { color:red;}
.p2 { color:#ff0000;}
.p3 { color:rgb(255,0,0);}
.p4 { color:rgba(255,0,0,1);}
.p5 { color:hsl(360,100%,50%);}
.p6 { color:hsla(360,100%,50%,1.00);}
</style>
定义斜体字体 font-style
<style type="text/css">
.italic {
Font-size: 24px;
font-style: italic;
/* normal|italic 斜体|oblique 倾斜字体 */
}
</style>
定义字体粗细 font-weight
<style type="text/css">
p { font-weight: normal } /*相当于400*/
h1 { font-weight: 700 } /*100~900*/
div{ font-weight: bolder } /*和lighter相对于字体粗细而言*/
.bold { font-weight:bold; } /*相当于700或者<b>*/
</style>
定义下划线 text-decoration
<style type="text/css">
.underline {text-decoration:underline;} /*下划线*/
.overline {text-decoration:overline;} /*上划线*/
.line-through {text-decoration:line-through;} /*贯穿线*/
/* none 默认 blink 闪烁效果 */
</style
定义字体大小写 font-variant text-transform
<style type="text/css">
.small-caps {
font-variant:small-caps;
/* 小型的大写字母字体 */
font-variant: normal;
}
</style>
<style type="text/css">
a{
text-transform: none;
/* 默认 */
}
.capitalize {
text-transform:capitalize;
/* 每个单词的第一个字母换成大写，其他不变 */
}
.uppercase {
text-transform:uppercase;
/* 所有字母转换为大写 */
}
.lowercase {
text-transform:lowercase;
/* 所有字母转换为小写 */
}
</style>
定义水平对齐 text-align
<style type="text/css">
.left { text-align: left; } /*左对齐*/
.center { text-align: center; } /*居中对齐*/
.right { text-align: right; }/*右对齐*/
.justify { text-align: justify;}/*两端对齐，IE效果强制所有文本两端对齐，不够文本间加空格*/
</style>
定义垂直对齐 vertical-align
<style type="text/css">
.super {
vertical-align:super;
/*另外补充*/
}
</style>
字间距和词间距 letter-spacing word-spacing
<style type="text/css">
.lspacing {
letter-spacing:2em;
/* 定义字距 */
}
.wspacing {
word-spacing:2em;
/* 定义词距 */
}
</style>
定义行高 line-height
<style type="text/css">
body {
line-height:1.6em;
/* 一般单位为em*/
}
</style>
定义首行缩进 text-indent
<style type="text/css">
p { text-indent:2em; }
</style>
文本阴影 text-shadow
左负右正，上负下正
box-shadow: inset,/*内外阴影*/
-10px 0px 10px red, /*左边阴影*/
0px -10px 10px #000, /*上边阴影*/
10px 0px 10px green, /*右边阴影*/
0px 10px 10px blue; /*下边阴影*/
参数详解：
1：inset
有inset 则为内阴影，没有insert 则为外阴影，默认为外阴影。
2：offset-x
横向阴影的大小，正值阴影在右边，负值阴影在左边，0的时候阴影中盒子后面，看不见的，如果有blur-radius值会有模糊效果。
3：offset-y
纵向阴影的大小，值同offset-x。
4：blur-radius
阴影的模糊程度，值越大，阴影越模糊。
5：spread-radius
阴影的扩大缩小，正值时，阴影扩大；负值时，阴影缩小，默认为0，和盒子同样大。
word-break:break-all / word-wrap:break-word
DIV的内容自动换行
共同点：
都能把长单词强行断句
不同点：
word-wrap:break-word 先起一个新行来放置当前行放不下的长单词，如果新的行还是放不下这个长单词，才会对长单词进行强制断句；
word-break:break-all 当前行放不下的时候就直接强制断句。
文本的换行方式 white-space
white-space主要用于空格处理, 默认值为white-space:normal。
属性值：
1.normal: 表示合并空格，多个相邻空格合并成一个空格，在源码中的换行作为空格处理，只会根据容器的大小进行自动换行。
2.nowrap: 表示不换行;nowrap和normal一样，也合并空格，但是不会根据容器大小换行，表示不换行。和overflow:hidden一起用可以产生多余内容用…代替的效果.
3.pre: 表示保留空格不换行. pre的作用是保持源码中的空格，有几个空格算几个空格显示，同时换行只认源码中的换行和
标签。4.pre-wrap: 表示保留空格换行.pre-wrap的作用是保留空格，并且除了碰到源码中的换行和
会换行外，还会自适应容器的边界进行换行。5.pre-line: 表示合并空格换行.pre-line的作用是合并空格，换行和white-space:pre-wrap一样，遇到源码中的换行和
会换行，碰到容器的边界也会换行。
————————————————
版权声明：本段为CSDN博主「KingDragon_Baron」的原创文章内容，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/fy_long/article/details/83048796
文本溢出包含元素时发生的事情 text-overflow
clip 修剪文本。
ellipsis 显示省略符号来代表被修剪的文本。
注：text-overflow：ellipsis;必须与white-space:nowrap; 和overflow:hidden;一起使用才能使超出内容以省略号效果显示
/*单行文本超出显示省略*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/*多行文本超出显示省略*/
/*
* 允许在单词内换行
* flex布局 一共出现了版
* 1. 旧版的box
* 2. 混合版的flexbox
* 3. 新版的flex
*/
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2; /*控制文本行数*/
-webkit-box-orient: vertical; /*将元素内的文字从上至下垂直排列*/
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
