一,常用属性
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;