css常用样式

<!--css常用样式.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css常用样式.css">
</head>
<body>
    <h1>温酒斩华雄</h1>
    <div>
        <p>
            关公曰：“酒且斟下，某去便来。”出帐提刀，飞身上马。众诸侯听得关外鼓声大振，喊声大举，如 天摧地塌，岳撼山崩，众皆 失惊。正欲探听，鸾铃响处，马到中军，云长提华雄之头，掷于地上。其酒尚温。后人有诗赞之曰：
            <span>
                威镇乾坤第一功，辕门画鼓响咚咚。<br>
                云长停盏施英勇，酒尚温时斩华雄。<br>
            </span>
        </p>
        <div id="div2">
            <p>
                关公曰：“酒且斟下，某去便来。”出帐提刀，飞身上马。众诸侯听得关外鼓声大振，喊声大举，如 天摧地塌，岳撼山崩，众皆 失惊。正欲探听，鸾铃响处，马到中军，云长提华雄之头，掷于地上。其酒尚温。后人有诗赞之曰：
                <span>
                威镇乾坤第一功，辕门画鼓响咚咚。<br>
                云长停盏施英勇，酒尚温时斩华雄。<br>
                </span>
            </p>
        </div>
    </div>


</body>
</html>

/*css常用样式.css*/
h1{
    /*块级元素，可设置宽高和背景颜色及边框等*/
    width: 600px;
    height: 50px;
    background: purple;
    border: 1px solid black;
}

div{
    /*div元素有内外边距之分，内边距padding，外边距margin。分别具有四个方上右下左top、right、bottom、left，
    例如padding-top:顶部内边距*/
    background: #2ff2ff;
    height: 100px;
    width: 400px;
    /*边距的表示方法有五种：1、padding: 上下左右；2、padding:上下 左右； 3、padding:上、左右、下；
    4、padding:上、左、右、下；5、只对某个方向进行设置：padding-left: 20px;*/
    padding: 20px 40px;
    margin: 10px 20px;
    /*position设置元素的位置定位方法：绝对定位absolute，相对定位relative，固定fixed*/
    position: relative;
    /*overflow: 设置元素内容显示方式：visible(超出元素边框的内容可见)、hidden(隐藏超出元素边框的内容)、
    scroll(添加滚动条)、auto(在内容超出边框时添加滚动条)*/
    overflow: auto;
    /*border: 元素边框位于内外边距之间*/
    border: 1em solid #43ff34;
    /*float:设置元素在窗口显示位置（其位置不受放大缩小的影响，总显示在可见窗口部分)：
    left(元素总浮动在窗口左边)、right(元素总浮动在窗口右边)*/
    float: right;
}

p{
    /*设置字体样式：颜色、字体、大小、粗细、行高、装饰（下划线、删除线）*/
    color: orange;
    font-size: 10px;
    font-family: 宋体;
    font-weight: normal;
    line-height: 20px;
    text-decoration: none;
}

span{
    color: #ff383c;
    font-size: 15px;
    font-family: 楷体;
    font-weight: normal;
    line-height: 30px;
    /*设置显示方式：block(以块元素显示)、none(隐藏元素)*/
    display: block;
}

#div2{
    background: yellow;
    height: 100px;
    width: 400px;
    /*子级元素绝对定位*/
    position: absolute;
    left: 400px;
    top: 0px;
}