本文已参与「新人创作礼」活动，一起开启掘金创作之路。
一、CSS字体、文本样式的使用
1.字体样式关键字
1）字体：font-family
2）字体大小：font-size
3）字体样式：font-style
4）字体粗细：font-weight
5）字体大小写：font-variant
6）复合样式：font
具体使用方法如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
p{
/*!*1.字体类型*!*/
font-family: 楷体;
/*!*2.字体大小*!*/
font-size: 24px;
/*!*3.字体样式*!*/
font-style: italic;
/*!*4.字体加粗*!*/
font-weight: bold;
/*!*5.字体大小写*!*/
font-variant: small-caps;
color: green;
/*6.复合样式:必须按照下面的规则来写,不写的部分就删掉不写*/
/*font:字体样式 字体大小写 字体粗细 字体大小 字体类型*/
font: italic small-caps 600 36px 楷体;
}
div .p1{
/*2.首行缩进*/
text-indent: 2em;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<div>
<!-- <p class="p1">我以前很瘦</p>-->
<p>我 以前 很瘦</p>
</div>
<a href="#">111</a>
</body>
</html>
2.文本样式关键字
1）对齐方式：text-align
2）首行缩进：text_indent
3）文本线：text-decoration
4）字距：letter-spacing
5）词距：word-spacing
6）行高：line-height
具体使用方法如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
/*文本样式*/
div{
width: 300px;
height: 300px;
border: 1px solid red;
/*1.文本居中:center,right,left*/
text-align: center;
/*!*3.下划线*!*/
/*text-decoration: underline;*/
/*!*清除下划线*!*/
/*text-decoration: none;*/
/*4.垂直居中:跟盒子height的值保持一致就可以,注意先用margin和padding清除原本格式*/
line-height: 300px;
/*5.词距:每个词要用空格隔开才会有效果*/
word-spacing: 10px;
/*6.字距*/
letter-spacing: 10px;
}
div .p1{
/*2.首行缩进*/
text-indent: 2em;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<div>
<!-- <p class="p1">我以前很瘦</p>-->
<p>我 以前 很瘦</p>
</div>
<a href="#">111</a>
</body>
</html>
二、CSS背景样式
1.背景样式关键字
1）背景颜色：background-color
2）背景图片：background-image
3）背景铺盖：background-repeat
4）背景大小：background-size
5）背景定位：background-position
6）复合样式：background
具体使用方法如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 300px;
height: 300px;
border:1px solid red;
/*!*1.背景颜色*!*/
/*background-color: #63c7f9;*/
/*!*2.背景图片*!*/
/*background-image: url("../01HTML简介和HTML标签/瞪眼.jpg");*/
/*!*3.背景大小:一般和盒子大小一致,不一致可能就会有多张图片显示出来*!*/
/*background-size: 150px 100px; !*第一个是宽度 第二个参数是高度*!*/
/*!*4.背景平铺:图片比盒子小时,不平铺就只会显示一张图片*!*/
/*!*1)不平铺:no-repeat*!*/
/*!*2)横轴平铺:repeat-x*!*/
/*!*3)纵轴平铺:repeat-y*!*/
/*background-repeat: no-repeat;*/
/*!*5.背景定位*!*/
/*background-position: 75px 50px;*/
/*6.复合样式:复合样式必须加定位,不然图片可能出现很多奇怪的形状*/
/*定位加在设置图片大小的前面:顺序也是宽 高 用斜线/隔开 */
background: skyblue url("../01HTML简介和HTML标签/瞪眼.jpg") no-repeat 0 0/150px 100px;
/*7.边框圆角的实现:圆形就是设置成盒子宽高的一半*/
border-radius: 150px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
