一、CSS设置样式
1.1 边框border
作用:设置标签周围的边框,方法 board:宽度 样式 颜色,一般情况下样式使用 solid实体的,和dotted虚线的
<head>
<meta charset="UTF-8">
<title>css边框</title>
<style>
.c1{
border: 1px solid red;
}
</style>
</head>
<body>
<div class="c1">
今天天气真好
</div>
</body>
此外还有 border-top,border-left,border-right,border-bottom,分别是边框顶部,边框左边,边框右边,边框底部
1.2 高度height
作用:设置标签的高度的,使用方法:height: 高度大小 ,可以是具体的数字大小比如说:20px,也可以是百分比:80%,但是高度没有固定的值,这个设定要在一个边框内,否则没有意义。
<head>
<meta charset="UTF-8">
<title>css边框</title>
<style>
.c1{
border: 1px solid red;
height: 80px;
}
</style>
</head>
<body>
<div class="c1">
今天天气真好
</div>
</body>
1.3 宽度width
作用:设置标签的宽度,使用方法:width:宽度大小,这个跟上面的height是一样的,可以是具体大小:50px,也可以根据浏览器大小设置为百分比:80%
<style>
.c1{
border: 1px solid red;
height: 80px;
width: 70%;
}
</style>
1.4 字体大小 font-size
作用:设置标签内的字体大小,使用方法:font-size:字体大小,示例:font-size:20px
<style>
.c1{
border: 1px solid red;
height: 80px;
width: 70%;
font-size:20px;
}
</style>
1.5 字体颜色 color
作用:设置标签内的字体颜色, 使用方法: color:颜色,示例:color:red
<style>
.c1{
border: 1px solid red;
height: 80px;
width: 70%;
font-size:20px;
color: blue;
}
</style>
1.6 字体加粗 font-weight
作用:给你标签内的字体加粗。使用方式:font-weight:bold
<style>
.c1{
border: 1px solid red;
height: 80px;
width: 70%;
font-size:20px;
color: blue;
font-weight: bold;
}
</style>
1.7 水平居中
作用:能把标签内的字体,进行水平居中。使用方法:text-align:center
<style>
.c1{
border: 1px solid red;
height: 80px;
width: 70%;
font-size:20px;
color: blue;
font-weight: bold;
text-align: center;
}
</style>
1.8 垂直居中
作用:能把标签内的字体,进行水平居中。使用方法:line-height:标签高度值。
<style>
.c1{
border: 1px solid red;
height: 80px;
width: 70%;
font-size:20px;
color: blue;
font-weight: bold;
text-align: center;
line-height:80px;
}
</style>
更多专业前端知识,请上 【猿2048】www.mk2048.com