第三次网页前端培训（CSS）
作者：互联网
一，常用属性
1，背景
背景颜色
背景图片
是否重复
<style type="text/css">
#div1 {
width:1700px;
height:800px;
/*背景颜色*/
background-color:#EEE8AA;
/*背景图片*/
background-image: url(img/dd.png);
/*是否重复*/
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="div1">
Hello
</div>
2，字体
#div2 {
/*字体颜色*/
color:#0000FF;
/*对齐方式 left center right*/
text-align: left;
/*文本修饰*/
text-decoration: line-through overline underline;
/*首行缩进*/
text-indent: 2em;
}
a {
/*去除文本下划线（去除超链接的下划线）*/
text-decoration:none;
}
</style>
</head>
<body>
<div id="div2">
Hello World
</div>
< a href="">百度</ a>
</body>
</html> 
3，对齐方式（left center right justify)
#p1 {
/*对齐方式*/
text-align: justify;
}
</style>
</head>
<body>
<p id="p1">
选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开
选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开
选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开
选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开
选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开
选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开
选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开
选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开
选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开
选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开
选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开
选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开
选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开
</p >
</body>
</html>
4,display属性
h2{
/*display属性 none隐藏元素 block显示元素*/
display:none;
}5，浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用属性</title>
<style type="text/css">
/*浮动*/
#d1 {
width: 100px;
height: 100px;
background-color: #DA70D6;
/*浮动 左浮动*/
float: left;
}
#d2 {
width: 100px;
height: 100px;
background-color: indianred;
/*浮动 左浮动*/
float: left;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2">
</div>
</body>
</html>
二，盒子模型
1，border边框
（1）设置边框的颜色，样式，宽度
border:颜色，样式，宽度
例如：border:red soild 1px
（2）单独设置边框的宽度，颜色，样式
border-width
border-style
border-color
(3)border-collapse
设置是否将表格边框折叠为单一边框。
属性值：separate(默认，单元格边框独立），collapse(单元格边框合并）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style type="text/css">
#d1 {
width: 100px;
height: 100px;
background-color: #DA70D6;
/*设置边框*/
border: #008000 5px outset;
/*设置内边距*/
/*padding:15px;*/
/*padding-left:20px;*/
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
2，padding 内边距
设置所有内边距的宽度，或者设置各边上内边距的宽度。
单独设置各边的内边距：padding-top,padding-left,padding-bottom,padding-right
默认按照上右下左的顺序设定
设定1个值：上右下左都一致
设置2个值：上下一致，左右一致
设置3个值：上右下，左和右一致
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style type="text/css">
#d1 {
width: 100px;
height: 100px;
background-color: #DA70D6;
/*设置边框*/
border: #008000 5px outset;
/*设置内边距*/
/*padding:15px;*/
padding-left:20px;
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
3，margin 外边距
设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度
单独设置各边的外边框：margin-top, margin-left, margin-bottom,margin-right
/*设置外边距*/
margin-top:100px;
margin-left:100px;
标签：网页,前端,元素,100px,指定,波浪,隔开,CSS,left 来源： https://blog.csdn.net/zjygzzk/article/details/122806522