CSS 样式（背景、文本、字体、盒模型）

CSS 样式（背景、文本、字体、盒模型）

一、盒模型
盒模型就一个盒子，在页面上用HTML和CSS代码生成，在默认的情况下，我们是看不到盒模型的，因为它是处于透明状态，看不到它是什么模样，而盒模型是通过边框来显示
什么是边框？它是一个属性，它分别有三个值：margin、border、padding；另外还有对于盒模型一些其他设置，比如top、botton、left、right、center;
margin：外边距；border：边框；padding：内边距；

border边框是可以设置盒子的高宽度、样式、颜色的一个属性。
操作CSS代码
.div1{
width: 100px;/宽度/
height:100px;/* 高度*/
border: 10px solid pink;/边框的大小、实线、颜色/
}
效果图：

margin：外边距：它是设置盒子与邻边的盒子的间距，
padding：内边距：它是设置盒子与盒子里面包括的内容的间距

二、背景
在一个空页面上，我们可以给它添加一些颜色或者图片，让整个页面看上去更有画面感，它有4个设置属性的值；它们分别是：背景颜色、背景图片、背景重复、背景位置，这4个值可以同时使用
（1）背景颜色：background-color 它包括很多类型，有颜色的英文名、十六进制的颜色值、rgb(255,255,255)值。例如：
background-color: pink;//粉色 颜色的英文名写法
background-color: #10FB65 //绿色 十六进制的颜色值
background-color: rgb(0,1,2);//黑色 rgb(255,255,255)；
（2）背景图片：background-image 设置背景图片要用url（）来选择图片所在的文件地址，它可以覆盖掉原本背景颜色，也可以只覆盖一部分，这个根据所需条件来设置图片大小
操作CSS代码：
.div1{
width: 500px;/宽度/
height:500px;/高度/
background: pink;/背景颜色/
padding:100px;/内边距/
}
.div2{
width: 400px;/宽度/
height:400px;/高度/
background: url(./248914-106.jpg);/获取图片的路径/
}
效果图：

（3）背景重复：background-repeat 用来设置图片是否重复，它还有4个值
repeat(纵横同时重复),
no-repeat(不重复),
repeat-x(x轴方向重复)
repeat-y(y轴方向重复)
background: url(./248914-106.jpg) no-repeat; 这4个值只能设置在指定的背景图片后面
（4）背景位置：background-position 用来控制图片的位置，图片一开始都会显示在浏览器的左上角，，通过这个属性可以改变它的位置，其还有5个值来分别给他定位，
top、left、bottom、right、center：上、左、下、右、居中；
可以使用两个值来定位，另外还有通过百分比、像素来定位

三、字体
（1）color:用于控制字体颜色，它跟设置背景颜色的用法一样；
操作CSS代码：
.div2{
width: 400px;/宽度/
height: 400px;/高度/
background: #FFF;//背景颜色/
color: red;/文字颜色/
}
效果图：

（2）font-size:用来设置字体的大小，此处的字体大小分为相对字体大小和绝对字体大小。 还可以使用关键字。例如：
Medium（中）、samle（小）、large（大）、 samller（最小）、larger（最大）等.
绝对字体大小：使用像素(px),点(pt),皮卡(pc),英寸(in)来设置字体的大小，它们是绝对单位，设置多大就是多少，不会受到祖先元素的字体大小影响。
相对字体大小：使用百分比(%),em或者rem,这些单位的值是相小要相对该元素最近的“被设定过字体大小”的祖先元素来确定，比绝对字体大小的设定要复杂点。
备注：（2）以上代码来自老师所发的文档。

（3）font-style:更换字体的样式。
font-style：normal；/正常/
font-style：italic；/斜体/
font-style：oblique；/倾斜/

（4）font-weight:设置字体是否加粗，它有4种属性值，
font-weight：normal；/正常/
font-weight：lighter；//
font-weight：bold；//
font-weight：bolder；/**/
还有一种简写方式：font-weight：10px；使用像素来设置。
四、文本
（1）text-decoration:用于设置文字是否有修饰线。
text-decoration：none；/去掉下划线/
text-decoration：underline；/下划线/ ；
text-decoration：line-through；/中划线/
text-decoration：overline；/上划线/
（2）text-align:设置文本对齐，它有4个属性值：
center：居中；left：左对齐；right：右对齐；justify：两端对齐；
（3）text-shadow:该属性用于设置的文字是否有阴影效果。color:想要设定的颜色。xoffset:阴影在x轴向上的偏移。yoffset:阴影在y轴向上的偏移，radius：阴影的模糊半径。模糊半径越大，看上去就越模糊。
操作CSS代码：
.div2{
width: 400px;/宽度/
height:400px;/高度/
background: #FFF;/背景颜色/
color: red;/文字颜色/
text-shadow: 5px 5px 2px #505050;/文字阴影设置/
}
效果图：

（4）line-height:设置文字的行高，使文字处于当前盒模型的中心部分。跟居中很相似。