1.背景:颜色 图片 重复
#div1 {
/* width: 500px; */
height: 1000px;
/* 背景颜色 */
background-color: brown;
/* 背景图片 */
background-image: url(img/1873422_20210906124309618080_0.jpg);
/* 是否重复 */
background-repeat: no-repeat;
}
2.文本:去除文本修饰,文本对齐方式
#div2{
/* 字体颜色 */
color: #A52A2A;
/* 对齐方式 left center right*/
/* text-align: center; */
/* 文本修饰 */
text-decoration: line-through overline underline;
/* 首行缩进 em是一个相对值,如一个文本的长度为17px,则2em为34px */
text-indent: 2em ;
}
a{
color: #A52A2A;
/* 去除文本效果 */
text-decoration: none;
}
#p1{
/* 对齐方式 */
text-align: justify;(左右都对齐)
}
3.display属性
h2{
/* display属性 :none隐藏元素 block显示元素(显示成块级元素,会自动换行) */
display: none;
}
属性还有很多,如行内块级属性
4.浮动
#d1{
width: 100px;
height: 100px;
background-color: chocolate;
/* 浮动 左浮动 */
float: left;
}
#d2{
width: 100px;
height: 100px;
background-color: aqua;
/* 浮动 左浮动 */
float: left;
}
左右都可以浮动
5.盒子模型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style type="text/css">
#d1{
width: 100px;
height: 100px;
background-color: #00FFFF;
/* 设置边框 */
border: #D2691E outset 5px;
/* 设置内边距 */
/* padding: 15px; */
/* padding-left: 20px; */
padding: 20px 20px;
/* 设置外边距 */
margin-top: 100px;
margin-left: 100px;
}
</style>
</head>
<body>
<!--
盒子模型
padding 内边距
border 边框
margin 外边距
border 边框
设置边框的颜色 样式 宽度
border:颜色 样式 宽度
如:border: red solid 1px
单独设置边框颜色 样式 宽度
如:border-width
border-style
border-color
border-collapse
设置是否将表格边框折叠为单一边框
属性值:separate(默认,单元格边框独立) collapse(单元格边框合并)
padding 内边距
设置元素所有内边距的宽度,或者设置各边上内边距的宽度
单独设置:padding-top padding-right padding-bottom padding-left
设置1个:都相同
设置2个:上下一致左右一致
设置3个:上右下一致,左和右一致
margin外边距
设置一个元素所有外边距的宽度,或者个边上外边距的宽度
-->
<div id="d1">牛</div>
</body>
</html>