- font:设置字体样式
常用属性有:
- style:设置字体样式,斜体、加粗等等
- weight:设置字体粗细,400等于正常,700=bold
- size:设置字体大小
- family:设置什么字体,微软雅黑、华文彩云等等。
- background :设置背景
常用属性有:
- color:背景颜色
- image:图片背景(默认全铺)
- repeat:图片背景平铺样式
- line-height:一般用于块级元素内容的垂直居中,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
border: black 1px solid;
font-style: italic;
font-weight: bolder;
font-size: 36px;
font-family: "微软雅黑";
text-align: center;
height: 80px;
line-height:80px;
/*font:italic bolder 36px/80px "华文彩云";*/
}
body{
background-color: antiquewhite;
background-image: url(img/接吻兔.gif);
background-repeat: repeat;
}
</style>
</head>
<body>
<div>中国河南</div>
</body>
</html>
- text-indent :设置文本输入框的起始空格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
input{
text-indent: 0px;
}
</style>
</head>
<body>
<input placeholder="请输入账号" />//默认是0px。
</body>
</html>
实验结果:
初始:
加上text-indent后是:
- list-style:设置列表的样式,一般用于去除列表序号
- cursor:设置鼠标样式,cursor:pointer;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul{
border: red 1px solid;
}
li{
border: blue 1px solid;
}
</style>
</head>
<body>
<ul>
<li>pvp</li>
<li>pve</li>
</ul>
</body>
</html>
正常情况下如图所示:
当我们设置了list-style和padding后就会出现如下情况:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul{
border: red 1px solid;
list-style-type: none;
padding:0px;
}
li{
border: blue 1px solid;
}
</style>
</head>
<body>
<ul>
<li>pvp</li>
<li>pve</li>
</ul>
</body>
</html>
效果如下: