文本样式的学习
我们学习css的文本样式需要掌握css常见的字体样式规则,以及css的常见字体布局规则。
文本样式:
color:
font-size:
font-weight
text-indent
text-decrotion
text-transform
font-family
一些文本的细节设置样式:
word-spacing:单词之间间距
letter-spacing:字符间距
word-break: break-all;:设置超出父元素部分是否换行显示
overflow:
hidden:超出元素部分隐藏
scroll:超出元素部分以滚动条形式显示
width
height
min-width
min-height
max-width
display:
none;:元素的隐藏,
隐藏元素所占据的空间
block;元素的显示
visibility:
hidden:元素的隐藏;
相当于修改了元素的透明度,不隐藏元素空间
visible:元素的显示
设置文本样式需要有以下步骤:
1.选择到div
2.设置样式
颜色单位:
1.关键字
2.rgb(r,g,b);0-255之间
3.rgba(r,g,b,a);a:0-1取值;0代表完全透明 1代表完全不透明
4.16进制的颜色值
#fff
#ccc
尺寸单位:
1.px:绝对单位
2.em 相对单位
3.百分比 相对单位
代码如下:
hello
hello
hello
<!DOCTYPE html>
<style>
div{
width:300px;
max-width: 200px;
height:100px;
border: 1px solid red;
/* letter-spacing:10px; 字符之间的的间隔设置*/
/* word-spacing:20px; 单词之间的间隔设置*/
/* word-break:break-all ; 设置超出 */
/* overflow:hidden; 超出部分隐藏 */
/* overflow:scroll; 超出部分以滚动条形式展示 */
}
</style>
hello world! hello world! hello world!hello world!hello world!hello world!hello world!hello world! !!!!!!!!!!!!!!!!!!!!