css 文本，光标，背景属性

原创已于 2023-03-22 11:23:48 修改 · 325 阅读

CC 4.0 BY-SA版权

文章标签：

于 2023-03-22 11:19:18 首次发布

7 篇文章

订阅专栏

该博客聚焦前端开发，介绍了文本属性，包括文字颜色、大小、字体等设置，还有行高、对齐方式、修饰属性等；阐述了更改光标的方法，可自定义鼠标指针；讲解了背景属性，如背景颜色、图片设置、平铺方式等，还提及背景图片与img标签的区别。

文本属性

文字属性设置

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: 字重倾斜字号/行高字体;：文字的复合属性。必须把字号和字体按照顺序放在最后才能生效。

行高属性

文本对齐方式

文本修饰属性

text-decoration: 位置颜色类型;：文本修饰属性。一般用来设置a标签的下划线不显示。
text-decoration-line：用于设置修饰线的显示位置。none，underline，overline，line-through删除线。
text-decoration-color：用来设置修饰线的颜色。
text-decoration-style：用来修饰线的类型。solid实线，dashed虚线。

文本缩进&间距

英文大小写转换

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-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固定时，背景图片会脱离容器，位置参照当前视口，用于实现视差效果。