文本属性
文字属性设置
color
:文字颜色。可以用十六进制
或rgba(red, green, blue, alpha)
设置颜色。font-size
:文字大小。默认16px
,最小字号12px
。font-family: 英文字体,"中文字体";
:文字字体。字体从前到后进行选择。由中文或多个英文组成的字体推荐加引号。中文字体会影响英文内容,一般写在后面。font-weight
:文字粗细。normal
,bold
,bolder
,light
,lighter
,100-900
。font-style
:normal
正常,italic
倾斜,oblique
。font: 字重 倾斜 字号/行高 字体;
:文字的复合属性。必须把字号和字体按照顺序放在最后才能生效。
行高属性
line-height
:单行文本所占的高度。数值+单位;不带单位表示倍数,默认值1.3
,行高计算字号x倍数
,如果字号与行高相等就没有行间距。line-height=height
:可以实现单行文本垂直居中。- 行间距的计算:
两行文字之间的距离=上一行的下半行距+下一行的上半行距
,半行距=(行高-字号)/2
。
文本对齐方式
text-align
:文本对齐方式。left
,center
,right
,justify
两端对齐,只对多行文字有效,且对最后一行无效。
文本修饰属性
text-decoration: 位置 颜色 类型;
:文本修饰属性。一般用来设置a
标签的下划线不显示。text-decoration-line
:用于设置修饰线的显示位置。none
,underline
,overline
,line-through
删除线。text-decoration-color
:用来设置修饰线的颜色。text-decoration-style
:用来修饰线的类型。solid
实线,dashed
虚线。
文本缩进&间距
text-indent
:首行缩进。设置2em
首行缩进两格。支持负值。letter-spacing
:字间距。单位px
。支持负值。word-spacing
:词间距。支持负值。
英文大小写转换
text-transform
:英文大小写转换。none
默认值,uppercase
大写,lowercase
小写,capitalize
单词首字母大写。
空白空间的显示
浏览器默认情况不识别缩进,且会自动把多个空格合并成一个,回车显示一个空格。我们这里把空格回车统一称为空白,上述情况称为合并空白。
white-space
:normal
默认值;nowrap
强制文本不换行,合并空白;pre
完全保留文本格式(包括所有缩进,空格,回车,溢出盒子也不换行);pre-wrap
保留文字格式,溢出换行;pre-line
保留行列格式(连续的空格只显示一个,但是显示回车)。
溢出隐藏属性
overflow: 水平 垂直
:溢出隐藏。overflow-x
:设置水平方向的溢出显示效果。visible
默认值,hidden
溢出隐藏,scroll
总是显示右、下滚动条,auto
溢出显示滚动条。overflow-y
:设置垂直方向的溢出显示效果。
文本溢出隐藏:设置宽高+溢出隐藏
p{
width:100px;
height:20px;
overflow: hidden;
}
单行文本溢出显示省略号:设置宽高+强制不换行+溢出隐藏+文本溢出显示省略号
div{
width:200px;
height: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
更改光标
cursor
:设置鼠标指针的形状。在不同元素上显示的鼠标形状可能由区别。auto
默认,大多是箭头,pointer
显示小手,等等。可以自定义引入图片作为鼠标指针。cursor: url(xx.ico), auto;
:自定义鼠标指针。图片尺寸推荐32*32
,图片格式.ico
兼容最好,还可以.cur
,.ani
,还需设置一个系统默认可以实现的指针类型。https://www.bitbug.net。
背景属性
背景属性
background
:复合属性。background-color
:设置背景颜色。四种方式都可以用。
背影图片的设置
一般设置某些行为的图片,插入背景图,因为前景图鼠标拖拽会动。
background-image: url(图片路径);
:设置背景图片。图片默认平铺。background-repeat
:设置背景图片平铺的方式。默认repeat
水平和垂直平铺,repeat-x
水平平铺,repeat-y
垂直平铺,no-repeat
不重复不平铺。background-size
:设置背景图片的大小。background-position:水平距离 垂直距离
:设置背景图片在容器当中显示的位置。当只设置一个数值(数值+单位
)时,只对水平有效,垂直居中。设置关键字水平方向left
,center
,right
;垂直方向top
,center
,bottom
。如果关键字和数值混用,必须某一方向的关键字对应才能实现。推荐固定写法,先水平后垂直。background-position-x
:设置背景图的水平距离。background-position-y
:设置背景图的垂直距离。background-attachment
:设置背景固定。auto
默认不固定。当设置fixed
固定时,背景图片会脱离容器,位置参照当前视口,用于实现视差效果。
背景图片和img标签的区别