目录
学习地址：
【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili
1.CSS常用属性设置
1.1背景
CSS背景属性用于定义HTML元素的背景效果
1.1.1background-color
设置元素的背景颜色
body {
background-color:#ff0000;
}
1.1.2backgrounf-image
设置元素的背景图像，默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。
body {
background-image:url('paper.gif')
}
1.1.3background-repeat
设置是否及如何重复背景图像
body {
background-image：url（image/logo.jpg）;
background-repeat:no-repeat;
}
| 值 | 说明 |
| repeat | 背景图像将向垂直和水平方向重复。这是默认 |
| repeat-x | 只有水平位置会重复背景图片 |
| repeat-y | 只有垂直位置会重复背景图片 |
| no-repeat | background-image不会重复 |
| inherit | 指定background-repeat属性设置应该从父元素继承 |
1.2文本
1.2.1color
body {
color:blue;
}
h1 {
color:#00ff00
}
h2 {
color:rgb(255,0,0);
}
1.2.2text-align
设置文本对齐方式，center（居中），left(左对齐)，right（右对齐）
body {
text-align:center;
}
1.2.3text-decoration
body {
text-decoration:none;
}
1.2.4text-indent
设置文本首行缩进
p.ident2 {
text-indent:2em;
}
注：em一个相对值，例如页面的文本大小为17px,则2em就为17px*2
1.3字体
1.3.1font-family
文本字体，该属性设置为文本的字体
1.4对齐方式
text-align规定元素中的文本的水平对齐方式。属性值如下：
| 值 | 描述 |
| left | 把文本排列在左边。默认值：由游览器决定 |
| right | 把文本排列到右边 |
| center | 把文本排列到中间 |
| justify | 实现两端对齐文本效果 |
| inherit | 规定应该从父元素继承text-align属性的值 |
注意：
值justify可以使文本的两端都对齐，在两端对齐的文本中，文本行的左右两端都防灾父元素的内边界上。然后调整单词和字母之间的间隔，是各行的长度恰好相等，对最后一行不生效。
display属性规定应该生成的框的类型，这个属性用于定义建立布局时元素生成的显示框类型。
| 值 | 描述 |
| none | 此元素不会被现实 |
| block | 此元素将会显示为块级元素，此元素前后会带有换行符 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| inline-block | 行内块元素。 |
| list-item | 此元素会作为列表显示。 |
1.6浮动
float属性值有none，left，right。
1.只有横向浮动没有纵向浮动
2.会将元素的display属性变更为block
3.浮动元素的后一个元素会围绕着浮动元素（典型的运用是文字围绕图片）
4.浮动元素的前一个元素不会受到任何的影响。（如果你想让两个块状元素并排显示，必须让两个块状元素都应用float）。
1.7盒子模型
1.7.1border
设置所有的边框属性
可同时设置边框的宽度，样式，颜色
table，th，td {
border：1px solid black;
}
table {
width 100%;height:50px;
}
使用border-width、border-style、border-color单独设置
table，td {
border-width：1px;
border-style:dotted;
border-color:green;
}
border-style的属性
none默认无边框
dotted：定义一个点线边框
dashed：定义一个虚线边框
solied：定义实线边框
double:定义两个边框。两个边框的宽度和border-width的值相同
groove：定义3D沟槽边框。效果取决于边框的颜色值
ridge:定义3D脊边框。效果取决于边框的颜色值
inset：定义一个3D的嵌入边框。效果取决于边框的颜色值
outset：定义一个3D突出边框。效果取决于边框的颜色值
border-collapse
设置是否将表格边框折叠为单一边框。
属性值：separate（默认，单元格边框独立）、collapse（单元格边框合并）
table {
border
}
1.7.2padding
设置元素的所有内边距的宽度，或者设置各边上内边距的宽度。
如果在表的内容中控制文本到边框的内边距，使用td和th元素的填充属性：
td {
padding:15px;
}
单独设置个边的内边距：padding-top、padding-left、padding-bottom、padding-right
默认按照上右下左的顺序设定
td.test1 {
padding:1.5cm
}
td.test2 {
padding:0.5cm 2.5cm
}
1.7.3margin
设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
p.margin {
margin:2px 4px 3px 4px;
}
也可以单独设置各边的外边距，margin-top、margin-left、margin-bottom、margin-right。用法与padding相同。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1 {
height: 600px;
background-color: #EEE8AA;
background-image: url(../img/2.jpg);
/* 是否重复 */
background-repeat: no-repeat;
}
#div2 {
/* 设置字体颜色 */
color: #0000FF;
/* 对齐方式 */
text-align: center;
text-decoration: line-through overline;
}
a {
/* 去除文本效果 */
text-decoration: none;
}
#p1 {
/* 对齐方式 left center right justify */
text-align: justify;
}
h2 {
/* display属性 none隐藏属性 block显示属性 */
display: none;
}
#d1 {
width: 100px;
height: 100px;
background-color: #0000FF;
/* 浮动 */
float: left;
}
#d2 {
width: 100px;
height: 100px;
background-color: #9ACD32;
/* 浮动 */
float: left;
}
</style>
</head>
<body>
<!--
背景
背景颜色
背景图片
是否重复
-->
<div id="div1">
Hello World
</div>
<hr >
<!-- 文本 -->
<div id="div2">
Hello World
</div>
<!-- 去除文本效果 -->
<a href="">百度</a>
<hr >
<p id="P1"> 值justify可以使文本的两端都对齐，在两端对齐的文本中，文本行的左右两端都防灾父元素的内边界上。然后调整单词和字母之间的间
隔，是各行的长度恰好相等，对最后一行不生效。 值justify可以使文本的两端都对齐，在两端对齐的文本中，文本行的左右两端都防灾父元
素的内边界上。然后调整单词和字母之间的间隔，是各行的长度恰好相等，对最后一行不生效。 值justify可以使文本的两端都对齐，在两端
对齐的文本中，文本行的左右两端都防灾父元素的内边界上。然后调整单词和字母之间的间隔，是各行的长度恰好相等，对最后一行不生效。
值justify可以使文本的两端都对齐，在两端对齐的文本中，文本行的左右两端都防灾父元素的内边界上。然后调整单词和字母之间的间隔，是
各行的长度恰好相等，对最后一行不生效。</p>
<h2 style="display: block;">Hello</h2>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style type="text/css">
#div1 {
width: 100px;
height: 100px;
background-color: #FAEBD7;
/* 设置边框 */
border: #9ACD32 5px outset;
/* 设置内边距 */
padding: 15px;
/* 设置外边距 */
margin-top: 100px;
margin-left: 100px;
}
</style>
</head>
<body>
<!--
盒子模型
padding 内边框
border 边框
margin 外边距
border 边框
设置边框的颜色，样式，宽度
border：颜色 样式 宽度
例：border：red soild 1px
单独设置边框的颜色 样式 宽度
border-color
border-style
border-width
border-collapse
设置是否将表格边框折叠为单一边框。
属性值：separate（默认，单元格边框独立）、collapse（单元格边框合并）
padding 内边距
设置元素的所有内边距的宽度，或者设置各边上内边距的宽度。
单独设置个边的内边距：padding-top、padding-left、padding-bottom、padding-right
默认按照上右下左的顺序设定
设置一个值：上右下左都一样
设置两个值：上下一致，左右一致
设置三个值：上右下，左
margin 外边距
设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
可以单独设置各边的外边距，margin-top、margin-left、margin-bottom、margin-right
-->
<div id="div1">
</div>
</body>
</html>
