一、文章概述
因为CSS属性较多，所以我们分多篇文章对CSS属性进行讲解。本篇文章主要讲解CSS属性中的边框属性、字体属性、外观属性、CSS背景属性、内边距、外边距。
二、CSS属性
1、边框属性
（1）边框写法
HTML
<div class="box">边框</div>
CSS样式：
上边框： border-top-width:宽度;
border-top-style:样式;
border-top-color:颜色;
border-top:宽度 样式 颜色;
.box {
/* 给盒子设置宽高 */
width: 200px;
height: 200px;
/* 设置上边框 边框宽度 */
border-top-width: 10px;
/* 设置上边框样式 solid：实线 */
border-top-style: solid;
/* 设置上边框颜色 */
border-top-color: blue;
}
/* 综合写法 */
.box {
/* 给盒子设置宽高 */
width: 200px;
height: 200px;
/* border-top:宽度 样式 颜色; */
border-top: 10px solid blue;
}
下边框： border-bottom-width:宽度;
border-bottom-style:样式;
border-bottom-color:颜色;
border-bottom:宽度 样式 颜色;
.box {
/* 给盒子设置宽高 */
width: 200px;
height: 200px;
/* 设置下边框 边框宽度 */
border-bottom-width: 10px;
/* 设置下边框样式 solid：实线 */
border-bottom-style: solid;
/* 设置下边框颜色 */
border-bottom-color: blue;
}
/* 综合写法 */
.box {
/* 给盒子设置宽高 */
width: 200px;
height: 200px;
/* border-bottom:宽度 样式 颜色; */
border-bottom: 10px solid blue;
}
左边框： border-left-width:宽度;
border-left-style:样式;
border-left-color:颜色;
border-left:宽度 样式 颜色;
.box {
/* 给盒子设置宽高 */
width: 200px;
height: 200px;
/* 设置左边框 边框宽度 */
border-left-width: 10px;
/* 设置左边框样式 solid：实线 */
border-left-style: solid;
/* 设置左边框颜色 */
border-left-color: blue;
}
/* 综合写法 */
.box {
/* 给盒子设置宽高 */
width: 200px;
height: 200px;
/* border-left:宽度 样式 颜色; */
border-left: 10px solid blue;
}
右边框： border-right-width:宽度;
border-right-style:样式;
border-right-color:颜色;
border-right:宽度 样式 颜色;
.box {
/* 给盒子设置宽高 */
width: 200px;
height: 200px;
/* 设置右边框 边框宽度 */
border-right-width: 10px;
/* 设置右边框样式 solid：实线 */
border-right-style: solid;
/* 设置右边框颜色 */
border-right-color: blue;
}
/* 综合写法 */
.box {
/* 给盒子设置宽高 */
width: 200px;
height: 200px;
/* border-right:宽度 样式 颜色; */
border-right: 10px solid blue;
}
边框综合设置： border：四边宽度 四边样式 四边颜色；
.box {
/* 给盒子设置宽高 */
width: 200px;
height: 200px;
/* border：四边宽度 四边样式 四边颜色； */
border: 10px solid blue;
}
（2）边框样式
边框样式： 无（默认样式）： border-style: none;
单实线： border-style: solid;
虚线： border-style: dashed;
点线： border-style: dotted;
双实线： border-style: double；
2、字体属性
HTML
<div class="box">这是一个盒子标签</div>
（1）字号大小
CSS样式： font-size: 14px; (px：像素单位，最常用单位，推荐使用)
常用技巧： 现在网页中普遍使用14px+
.box{
/* 设置字体大小 */
font-size: 30px;
}
（2）字体
CSS样式： font-family: “微软雅黑”;
常用技巧：
1、可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。
2、中文字体需要加英文状态下的引号，英文字体一般不需要加引号。
3、当需要设置英文字体时，英文字体名必须位于中文字体名之前。
4、如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: “Times New Roman”;。
.box{
/* 字体，可以直接写中文名称 */
font-family: '楷体';
}
（3）字体粗细
CSS样式： font-weight：400;
常用技巧：
1、font-weight属性的属性值：normal（无样式）、bold（加粗）、bolder（更粗）、lighter（更细）、100~900（100的整数倍）。
2、数字400等价于normal，而700等价于bold。但是我们更喜欢用数字来表示。
.box{
/* 设置字体粗细 */
font-weight: 700;
}
（4）字体风格
CSS样式： font-style：italic;
常用技巧：
1、font-style属性的属性值：normal（无样式）、italic（斜体）、oblique（倾斜）。
2、平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式。
.box{
/* 字体样式 */
font-style: italic;
}
（5）字体属性综合设置
CSS样式： font: font-style font-weight font-size font-family;
注意：
1、使用font属性时，必须按上面语法格式中顺序书写，不能更换顺序，各属性以空格隔开。
2、其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
.box{
/*
综合写法 font: font-style font-weight font-size font-family;
顺序不可改变
*/
font: italic 700 50px '宋体';
}
/* 必须保留font-size和font-family属性 */
.box{
font: 50px '宋体';
}
3、外观属性
（1）字体颜色
HTML
<div class="box">字体颜色</div>
CSS样式：
color： 设置字体颜色
color样式： 十六进制、英文单词、rbg、rbga（不常用）。
注意：
十六进制中若第1、2位，第3、4位，第5、6位的十六进制数相同，可以将其简写成一位十六进制数，例：#112233，可以简写为#123。
.box {
/* 英文单词 */
color: red;
/* 十六进制 */
color: #fff; /* 相当于#ffffff */
color: #123456;
/* rbg */
color: rbg(255,255,255);
}
（2）行间距
HTML
<div class="box">行间距，文字垂直居中</div>
CSS样式：
line-height: 行间距
常用技巧：
文字垂直居中：当line-height的属性值与其父盒子高度属性值相同时，可以实现文字垂直居中效果（只适用于单行文字）。
.box {
width: 200px;
height: 200px;
/* 文字垂直居中 与盒子高度height保持一致 */
line-height: 200px;
}
（3）水平对齐方式
HTML
<div class="box">水平对齐方式</div>
CSS样式：
text-align: 左对齐left(默认)、右对齐right、居中对齐center
.box {
width: 200px;
height: 200px;
/* 水平居中对齐 */
text-align: center;
}
（3）文字首行缩进
HTML
<div class="box">文字首行缩进</div>
CSS样式：
text-indent: 首行缩进 单位：em(字符)
.box {
/* 首行缩进2字符 */
text-indent: 2em;
}
（3）文本装饰
HTML
<div class="box">文本装饰</div>
CSS样式：
text-decoration: 下划线 underline 上划线 overline line-through 删除线
常用技巧：
去除a标签默认的下划线效果：text-decoration： none；。
.box {
/* 去除a标签默认的下划线 */
text-decoration: none;
/* 下划线 */
text-decoration: underline;
/* 上划线 */
text-decoration: overline;
/* 删除线 */
text-decoration: line-through;
}
4、背景属性
（1）背景颜色
HTML
<div class="box">背景颜色</div>
CSS样式：
background-color: 背景颜色
.box {
width: 100px;
height: 100px;
/* 背景颜色 */
background-color: red;
}
（2）背景图片
HTML
<div class="box">背景图片</div>
CSS样式：
background-color: 背景颜色
常用技巧：
背景平铺：background-repeat： 平铺repeat 不平铺no-repeat。
背景图大小：background-size： 水平值 垂直值 ; background-size: cover ;
背景图位置：background-position： 上下 左右（这个技巧一般在精灵图中常用，后续在讲精灵图时会涉及）
.box {
width: 1000px;
height: 800px;
/* 背景图片 url（图片地址） */
background-image: url('../../../票据/1.png');
/* 不平铺 */
background-repeat: no-repeat;
/* 背景图大小 background-size: 水平 垂直*/
background-size: 100% 100%;
/* 背景图大小 background-size: cover*/
background-size: cover ;
/* 背景图位置 background-position：上下 左右*/
background-position: 50% 10%;
}
5、内边距
HTML
<div class="parent">
<div class="child"></div>
</div>
CSS样式：
padding： 边框到内容的距离，会改变盒子的大小
.parent {
width: 300px;
height: 300px;
background-color: aqua;
/* 上内边距 */
padding-top: 20px;
/* 下内边距 */
padding-bottom: 20px;
/* 左内边距 */
padding-left: 20px;
/* 右内边距 */
padding-right: 40px;
/* 内边距 一个值：上下左右 */
padding: 20px;
/* 两个值 第一个值是上下，第二个值是左右 */
padding: 20px 50px;
/* 三个值 第一个值代表上 第二个值代表左右 第三个值代表下 */
padding: 20px 40px 60px;
/* 四个值 上 右 下 左 （顺时针）*/
padding: 20px 30px 40px 50px;
}
.child {
width: 100%;
height: 100%;
background-color: red;
}
6、外边距
HTML
<div class="parent">
<div class="child"></div>
</div>
CSS样式：
margin： 盒子到盒子之间的距离
常用技巧：
== 同时给父盒子与子盒子设置同方向的margin会产生嵌套元素的塌陷问题；
解决嵌套元素的塌陷问题：
一、border-top: 1px solid #000;
二、padding-top: 1px;
三、overflow:hidden; ==
.parent {
width: 300px;
height: 300px;
background-color: aqua;
/* 上外边距 */
margin-top: 20px;
/* 下外边距 */
margin-bottom: 40px;
/* 左下边距 */
margin-left: 50px;
/* 右外边距 */
margin-right: 60px;
/* 一个值 上下左右 */
margin: 30px;
/* 两个值 上下 左右 */
margin: 30px 60px;
/* 三个值 上 左右 下*/
margin: 30px 40px 50px;
/* 四个值 上 右 下 左 （顺时针） */
margin: 30px 40px 50px 60px;
}
.child {
width: 100%;
height: 100%;
background-color: red;
}
三、小结
本章介绍了CSS的部分属性，后续属性会在后续CSS属性讲解（二）的章节中介绍。
希望本章的内容会给您带来帮助！
1836
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
