CSS入门六

作者: 码农修行之路 | 来源:发表于2020-12-07 21:55 被阅读0次

CSS入门六
#30天专注橙长计划#向前端工程师进发#day0#航线设计
前端入门系列
前端开发之 CSS入门
CSS第一小节第一天
mdui quickstart 快速入门
CSS Syntax（CSS 语法）
前段书籍
CSS初探
2019-04-29

背景样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>背景样式属性</title>
    <style type="text/css">
        /* 背景样式属性 */
        .box1 {
            /*水平居中*/
            /*text-align: center;*/
            width: 500px;
            /*高度和行高值一致 垂直居中*/
            height: 1000px;
            /*line-height: 500px;*/
            /*边框*/
            border: 1px solid skyblue;

            /*背景颜色*/
            /*background-color: blue;*/

            /*背景图片 默认是重复的*/
            /*background-image: url(../img/android.png);*/

            /*背景是否可重复 只有当图片大小不足以覆盖全区域时 可以设置图片背景重复状态 以达到整个背景铺满的效果*/ 
            /* repeat（全区域可重复平铺） no-repeat（不可重复） repeat-x（水平重复平铺 单行） repeat-y（垂直重复平铺 单列） */
            /*background-repeat: no-repeat;*/

            /*背景图片其实位置*/
            /*盒子水平居中*/
            margin-left: auto;
            margin-right: auto;
            /*background-position: right top;*//*右上*/
            /*background-position: left bottom;*//*左下*/
            /*background-position: center center;*//*居中*/
            /*background-position: 100px 100px;*//*固定数值表示*/
            /*background-position: 50% 50%;*//*百分比表示
            /*background-position: 100px 50%;*//*混合方式表示 固定值和百分比*/


            /*背景图片是固定还是随着页面滑动而滚动*/
            /*background-attachment: fixed;*//*固定不动*/
            /*background-attachment: scroll;*//*滚动*/

            /*背景复合式简写形式*/
            background: url(../img/android.png) #ff0 no-repeat center center;
            /* 1. background 可以同时设置多个样式 背景颜色、背景图片、背景图片是否平铺、背景水平垂直位置 */
            /* 2. background 其值的设置 不固定个数 不固定顺序 每个值之间通过空格隔开 */

        }


    </style>

</head>
<body>

    <div class="box1">经过8年持续奋斗，我们如期完成了新时代脱贫攻坚目标任务，现行标准下农村贫困人口全部脱贫，贫困县全部摘帽，消除了绝对贫困和区域性整体贫困，近1亿贫困人口实现脱贫，取得了令全世界刮目相看的重大胜利。经过8年持续奋斗，我们如期完成了新时代脱贫攻坚目标任务，现行标准下农村贫困人口全部脱贫，贫困县全部摘帽，消除了绝对贫困和区域性整体贫困，近1亿贫困人口实现脱贫，取得了令全世界刮目相看的重大胜利。</div>

</body>
</html>

背景颜色 background-color: blue;
背景图片默认是重复的 background-image: url(../img/android.png);
背景是否可重复只有当图片大小不足以覆盖全区域时可以设置图片背景重复状态以达到整个背景铺满的效果 background-repeat
repeat（全区域可重复平铺） no-repeat（不可重复） repeat-x（水平重复平铺单行） repeat-y（垂直重复平铺单列）
背景图片起始位置可以通过固定数值、百分比、混合方式表示
背景图片是固定还是随着页面滑动而滚动 background-attachment: fixed、scroll;
背景复合式简写形式 background: url(../img/android.png) #ff0 no-repeat center center;

background 可以同时设置多个样式背景颜色、背景图片、背景图片是否平铺、背景水平垂直位置
background 其值的设置不固定个数不固定顺序每个值之间通过空格隔开

边框样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>边框样式</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            /*border: 2px solid #f00;*/

            /* 给每个边设置样式 */
            /*border-top: 1px solid #f00;
            border-bottom: 2px solid #00f;
            border-left: 3px solid #0f0;
            border-right: 4px solid #000;*/

            /* 去掉某一边的边框 */
            border: 2px solid #f00;
            /* 是把上下边框宽度设置为0或者设置为none，这样上下边框就没有宽度了，因此去除了上下边框 */
            border-top: 0px;
            border-bottom: none;

        }
    </style>
</head>
<body>

    <div>盒子</div>

</body>
</html>