1. 内容修饰样式
1.1 字体样式
1.1.1字体
| 标签{font-family:’楷体’;} |
字体修饰样式，设置字体为楷体 |
li{
font-family:'楷体';
}
1.1.2字号
| 标签{font-size:18px;} |
字号修饰样式，设置字号为18像素 |
li{
font-size:18px;
}
1.1.3加粗
| 标签{font-weight:bolder;} |
加粗修饰样式 |
li{
font-weight:bolder;
}
1.1.4颜色
li{
color:#069;
}
1.1.5斜体
| 标签{font-style:italic;} |
将字体修饰为斜体 |
li:nth-of-type(2){
font-style:italic;
}
1.2 背景样式
1.2.1背景颜色
| 标签{background-color:#888;} |
设置标签背景颜色 |
ch{
background-color:#888;
}
1.2.2背景图片
| 标签{background-image:url(“路径”);} |
设置背景图片 |
ch{
background-image:url("./images/1.jpg");
}
1.2.3背景图片位置
| 标签{background-position: xpx ypx; } |
设置背景图片位置 |
ch{
background-position:-340px -190px;
}
1.2.4边框
| 标签{border: solid 2px red;} |
设置边框属性 |
ch{
border: solid 2px red;
}
1.2.5设置圆角边框
| 标签{border-radius:5px;} |
设置圆角边框 |
ch{
border-radius:5px;
}
1.2.6设置背景为圆形
| 标签{border-radius:50%;} |
将背景样式设置为圆形 |
ch{
border-radius:50%;
}
1.2.7字体居中
| 标签{text-align:center;} |
字体居中 |
ch{
text-align:center;
}
1.2.8字体上下居中
| 标签{line-height:200px} |
设置行高 |
ch{
line-height:200px;
}
1.2.9溢出内容处理
| 标签{overflow: hidden;} |
将溢出标题的内容隐藏 |
ch{
overflow: hidden;
}
2. 定位样式
2.1 内边距|外边距
任何标签在操作过程中都会有一个默认的边距，会影响网页元素的定位
在操作过程中，选中所有标签，设置它们的内外边距都为0
*{
margin:0px;
padding:0px;
}
2.1.1元素外边距
| 标签{margin-left:220px;} |
调整元素与窗口左边距的距离 |
| 标签{margin-right:220px;} |
调整元素与窗口右边距的距离 |
| 标签{margin-top:220px;} |
调整元素上边距的距离 |
| 标签{margin-bottom:220px;} |
调整元素与窗口下边距的距离 |
#box{
/*元素外边距*/
margin-left:220px;
margin-top:20px;
}
2.1.2元素内边距
| 语法 |
描述 |
| 标签{padding-left:50px;} |
调整标签内容在div中与左内边距的距离 |
| 标签{padding-top:50px;} |
调整标签内容在div中与右内边距的距离 |
#box{
/*内边距*/
padding-left:50px;
passing-top:20px;
}
2.2标签分类
2.2.1行标签
标签前后不换行，标签不能设置宽度和高度
| 语法 |
描述 |
| display:inline; |
表示修饰的标签为行标签 |
2.2.2行内块标签
标签前后不换行，标签可以设置宽度和高度
| 语法 |
描述 |
| display:inline-block; |
表示修饰的标签为行内块标签 |
2.2.3块标签
标签前后自动换行，标签可以设置宽度和高度
| 语法 |
描述 |
| display:block; |
表示修饰的标签为块标签 |
2.3标签元素的定位
默认定位：一般一个标签的定位样式为：position:static;
相对定位：position:relative;
绝对定位：position:absolute;
固定定位：fixed;
2.3.1默认定位 position:static;
相对于浏览器或者父元素的定位【margin定位】
2.3.2相对定位 position:relative;
相对于父元素进行定位，同时内部的所有标签参考自己定位
#container{
width:800px;
height:2000px;
background-color:#888;
margin:auto;
position:relative;
}
#box{
/*默认定位方式，相对于父元素左上角的坐标进行定位*/
position:absolute;
top:0;
left:0;
width:200px;
height:200px;
background-color:red;
}
2.3.3绝对定位position:absolute;
脱离HTML文档，独立定位【top|left定位】
#box{
/*默认定位方式，相对于父元素左上角的坐标进行定位*/
position:absolute;
top:0;
left:0;
width:200px;
height:200px;
background-color:red;
}
left:0;top:0;父元素默认定位，当前元素相对于浏览器进行定位
2.3.4固定定位 fixed;
一种独立的定位方式，【top|left定位】相对于浏览器的固定位置
广告栏的应用
