CSS 属性大全(一)

最新推荐文章于 2023-01-13 14:58:31 发布

~莫~言~

最新推荐文章于 2023-01-13 14:58:31 发布

阅读量161

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/zcq125521/article/details/88694213

版权

前端专栏收录该内容

18 篇文章 3 订阅

订阅专栏

color：文本颜色

text-align:文本位置（center：居中；right：右对齐；left：左对齐；）

text-decoration:下划线格式（none：没有；overline：上边有下划线；line-through：中间；underline：下边）

text-transform：控制文本字母（uppercase：大写;lowercase：小写;capitalize：开头字母大写;）

text-indent:缩进文本;

letter-spacing:指定字符之间的间距（数字越大间距越大，反之一样）；

line-height：行与行之间的间距（可以用百分比或者PX）；

direction：文本方向（默认是从左到右；rtl：从右到左）；

word-spacing：空格的大小（用PX来代表）；

white-space:文字换行（nowrap：禁用文字换行;）

vertical-align:文字图像的垂直对齐方式（text-top：居上对齐；text-bottom：居下对齐）

text-shadow:文本阴影（1px 1px #ffffff---水平垂直颜色）;

font-weight:文字粗细程度（只有两种normal和bold）

a：链接颜色（a:link{}：未访问链接；a:visited{}:已访问链接；a:hover{}：鼠标移动到链接上；a:active{}：鼠标点击时）

a:after {content: " (" attr(href) ")";} 将链接地址也展示出来

font-size：文字大小；链接可以通过这个属性，在鼠标移动上去放大字体，创建链接框的例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
a:link,a:visited
{
	display:block;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#98bf21;
	width:120px;
	text-align:center;
	padding:4px;
	text-decoration:none;
}
a:hover,a:active
{
	background-color:#7A991A;
}
</style>
</head>

<body>
<a href="/css/" target="_blank">这是一个链接</a>
</body>
</html>

list-style-type：列表标记（有很多种就不介绍了）

list-style-image：列表的图片

使用跨浏览器设置列表标记的图像
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
ul
{
	list-style-type:none;
	padding:0px;
	margin:0px;
}
ul li
{
	background-image:url(a.png);
	background-repeat:no-repeat;
	background-position:0px 5px; 
	padding-left:14px;
}
</style>
</head>

<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>

</html>