214、CSS属性

最新推荐文章于 2023-07-24 23:29:23 发布

l0510402015

最新推荐文章于 2023-07-24 23:29:23 发布

阅读量86

点赞数

分类专栏： 04_html

本文链接：https://blog.csdn.net/l0510402015/article/details/104384535

版权

04_html 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

一、字体、文本
    1、font-size 字体大小
    2、color:文本颜色
    3、text-align:对齐方式
    4、line-height:行高。如果单纯是文字看不出效果，要配合边框才能看到效果
二、边框
    1、border:设置边框，是个复合属性
    注意：边框的四个边其实都可以分别设置
三、背景
    1、background:是个复合属性
四、尺寸
    1、width:宽度
    2、height:高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            /*文本属性*/
            font-size: 30px;
            color: red;
            text-align: center;
            line-height:100px;

            /*border: 5px solid green ;*/
            border: 5px dashed green ;
        }

        div{
            border: 1px solid red;
            /*背景绿色，设置一个图片为背景图片，不重叠，图片位置固定在屏幕中央，不随滚条拖动而变动*/
            background: #00ff00 url("image/tv01.jpg") no-repeat fixed center ;
            height: 200px;
            width: 800px;
        }
    </style>
</head>
<body>

    <p>中华人民共和国</p>
    <br>
    <div> 56个民族56个家</div>

</body>
</html>

五、盒子模型：控制布局
    1. margin:外边距
    2. padding:内边距
        * 默认情况下内边距会影响整个盒子的大小，可以通过设置box-sizing:border-box盒子属性，让width和height就是最终何止的大小。
    3.float：浮动
        * left
        * right

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border: 2px solid blue;
        }
        /*外边距*/
        .div1{
             height: 200px;
             width: 200px;
         }
        .div2{
            height: 100px;
            width: 100px;
            margin: 50px;
        }
        /*内边距*/
        .div3{
            height: 200px;
            width: 200px;
            padding-left: 50px;
            box-sizing: border-box;
        }
        .div4{
            height: 100px;
            width: 100px;
        }

        /*未开启属性*/
        .div5{
            width: 50px;
        }
        .div6{
            width: 50px;
        }
        .div7{
            width: 50px;
        }

        /*浮动效果*/
        .div8{
            width: 50px;
            float: left;
        }
        .div9{
            width: 50px;
            float: left;
        }
        .div10{
            width: 50px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
    <br>
    <div class="div3">
        <div class="div4"></div>
    </div>

    <div class="div5">盒子1</div>
    <div class="div6">盒子2</div>
    <div class="div7">盒子3</div>
    <br>
    <div class="div8">盒子4</div>
    <div class="div9">盒子5</div>
    <div class="div10">盒子6</div>
</body>
</html>