您好,欢迎访问代理记账网站
移动应用 微信公众号 联系我们

咨询热线 -

电话 15988168888

联系客服
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

CSS中背景的一些设置。

    在CSS的运用中,对于背景的设置也是非常重要的一环。如何设置背景是我们的主题。

    一.背景颜色样式的设置

1.颜色样式设置的4种方式

(1)用英文单词表示。

(2)用16进制数来表示。

(3)用rab()来表示。 rgb()中需要写数字,数字的范围在0~255之间,值越小颜色越深。

(4)用raba()来表示。rgb()中需要写数字,数字的范围在0~255之间,值越小颜色越深。rgba()中最后一个值表示透明度,范围在0~1之间,0表示完全透明,1表示完全不透明。

代码:

<html lang="en"><head>
    <meta charset="UTF-8">
    <title>背景颜色的样式设置</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: blueviolet;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: #cccccc;
            position: absolute;
            left: 8px;
            top: 8px;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: rgb(255,255,0);
            position: absolute;
            left: 8px;
            top: 120px;
        }
        .box3 {
            width: 100px;
            height: 100px;
            background-color: rgba(0,255,255, .3);
            position: absolute;
            left: 120px;
            top: 20px;
        }
    </style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

</body></html>

二.背景图片的样式设置。

知识点:

(1)通过样式来设置背景图片时,需要使用 background-image属性来设置,而图片的路径需要写在 url()中。
但是,默认情况下,背景图片如果不有容器大的话,那么它会把背景图平铺后再显示。
对于背景图的处理,我们有以下几种方式:
1. no-repeat: 不平铺
2. repeat-x: x轴方向平铺
3. repeat-y: y轴方向平铺
4. repeat: x轴和y轴方向都平铺(默认方式)
要想设置面的值,我们需要另外的属性叫background-repeat。

(2)希望背景图在容器的中间位置,怎么做?
需要使用 background-position属性来指定,它是通过坐标轴来设置的。有以下几种设置方式:
1. left top: 左上角(默认值)
2. right top: 右上角
3. left bottom: 左下角
4. right bottom: 右下角
5. left center: 左中间位置
6. right center: 右中间位置
7. center center: 居中位置

(3)以上的这些属性,我们可以使用 background 来统一指定,它的语法格式为:
background: color position size repeat origin clip attachment image;

代码:

<html lang="en"><head>
    <meta charset="UTF-8">
    <title>背景图片样式设置</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            border: 1px dotted #000000;
            /*设置图片背景*/
            /*background-image: url(images/02.png);需要输入直接电脑中的文件地址
            background-repeat: no-repeat;*/
            /*background-position: center center;*/
            /*background-position: 20px 50px;*/

            background: gray url("images/02.png") no-repeat center center;
        }
    </style>
</head>
<body>

<div class="box"> aadfad</div>

</body></html>

三.边框属性

知识点:

指定边框可以使用 border-left|top|right|bottom-color来设置颜色
              border-left|top|right|bottom-style来设置样式
              border-left|top|right|bottom-width来设置宽度

在实际开发中,我们使用 border 属性来统一指定即可。
它的语法格式为:
border: 线的宽度 线的样式 线的颜色
上面这种方式指定的话有一个缺点:四个边的宽度、样式和颜色都是相同的才可以。

代码:

<html lang="en"><head>
    <meta charset="UTF-8">
    <title>边框属性</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: #cccccc;
            /*设置左边框的颜色*/
            /*
            border-left-color: blueviolet;*/
            /*设置左边框的样式:solid实线,dotted小圆点构成的线,dashed虚线*/
            /*border-left-style: dashed;*/
            /*设置左边框的粗细(宽度)*/
            /*border-left-width: 5px;

            border-top-color: green;
            border-top-style: dotted;
            border-top-width: 2px;*/

            border: 2px solid red;
        }
    </style>
</head>
<body>
<div class="box"></div>

</body></html>

四.内边距

知识点:

(1)什么是内边距?
容器中的内容和容器的边线之间的距离就叫内边距。

(2)内边距的指定是使用 padding 属性来设置的,
- 左边使用 padding-left
- 上边使用 padding-top
- 右边使用 padding-right
- 下边使用 padding-bottom

(3)可以使用 padding 属性来设置这四个边距。它的设置顺序为:
1. 如果设置四个值,则表示:上、右、下、左
2. 如果设置三个值,则表示:上 左右 下
3. 如果设置二个值,则表示:上下 左右
5. 如果设置一个值,则表示:上右下左的值都是一样的。

代码:

<html lang="en"><head>
    <meta charset="UTF-8">
    <title>内边距</title>
    <style>
        .box {
            width: 200px;
            /*height: 100px;*/
            border: 1px solid black;
            /*左内边距*/
            /*padding-left: 20px;
            padding-top: 20px;
            padding-right: 20px;
            padding-bottom: 20px;*/
            /*padding: 10px 20px 30px 50px;*/
            /*padding: 10px 30px 50px;*/
            /*padding: 10px 50px;*/
            padding: 10px;
        }
    </style>
</head>
<body>
<div class="box">这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字</div>

</body></html>

五.外边距

知识点:

(1)什么是外边距?
容器与另一个容器之间的距离就叫外边距。

(2)外边距使用 margin 属性来指定。它的使用和语法格式与 padding 相同。
- margin-left: 左边外距
- margin-top: 上外边距
- margin-right: 右外边距
- margin-bottom: 下外边距

(3)仍然可以使用 margin 属性来简化,它顺序如下:
1. 如果设置四个值,则表示:上、右、下、左
2. 如果设置三个值,则表示:上 左右 下
3. 如果设置二个值,则表示:上下 左右
5. 如果设置一个值,则表示:上右下左的值都是一样的

代码:

<html lang="en"><head>
    <meta charset="UTF-8">
    <title>外边距</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            border: 1px solid gray;
        }
        .inner {
            width: 200px;
            height: 100px;
            border: 1px solid blueviolet;
            /*margin-left: 20px;
            margin-top: 20px;*/
            margin: 20px 50px 30px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="inner"></div>
</div>

</body></html>

ps:盒子模型

 六.浮动(只作为了解)

知识点:

默认情况下,li中的内容是竖着显示的,如果想要横着显示,那么就需要浮动。
浮动是使用 float 属性来定义,它有两个值:
- left: 左浮动
- right: 右浮动

注意:在开发中不建议使用浮动,因为它会影响后面的元素的位置。

代码:

<html lang="en"><head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        ul,li {
            padding: 0;
            margin: 0;
        }
        li {
            list-style: none;
            width: 60px;
            height: 25px;
            float: left;
        }
        .clear {
            /*清除浮动*/
            clear: both;
        }
    </style>
</head>
<body>
<ul>
    <li>首页</li>
    <li>新闻</li>
    <li>活动</li>
</ul>
<div class="clear"></div>

</body></html>

七.阴影

知识点:

定义阴影效果使用 box-shadow 属性,它的语法格式为:
box-shadow: h-shadow v-shadow blur spread color position;
- h-shadow:必需。水平阴影的位置。允许负值。
- v-shadow:必需。垂直阴影的位置。允许负值。
- blur:可选。模糊距离。
- spread:可选。阴影的尺寸。
- color:可选。阴影的颜色。请参阅 CSS 颜色值。
- position:可选。将外部阴影 (outset) 改为内部阴影。默认为inset

代码:

<html lang="en"><head>
    <meta charset="UTF-8">
    <title>阴影</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: deeppink;
            box-shadow: 50px 20px 2px blueviolet;
        }
    </style>
</head>
<body>
<div class="box"></div>

</body></html>

八.圆角

知识点:

定义圆角使用 border-radius 属性来定义,它的语法为:
border-radius:length/persentage;
1. 四个属性值,分别表示左上角、右上角、右下角、左下角的圆角大小(**顺时针方向**)
2. 三个属性值,第一个值表示左上角,第二个值表示右上角和左下角(对角),第三个值表示右下角。
3. 两个属性值,第一个值表示左上角和右下角,第二个值表示右上角和左下角。
4. 斜杠二组值:第一组值表示水平半径,第二组值表示垂直半径,每组值也可以同时设置1到4个值,规则与上面相同。

代码:

<html lang="en"><head>
    <meta charset="UTF-8">
    <title>圆角</title>
    <style>
        .box {
            /*width: 100px;
            height: 100px;*/
            width: 120px;
            height: 160px;
            background: blueviolet;
            /*border-radius: 10px;*/
            /*border-radius: 50%;*//*圆*/
            /*border-radius: 10px 20px 30px 40px;*/
            /*border-radius: 10px 30px 60px;*/
            /*border-radius:20px 40px;*/
            /*border-radius:100px/40px;*/
            border-radius: 60px 60px 60px 60px/100px 100px 60px 60px;
        }
    </style>
</head>
<body>
<div class="box"></div>

</body></html>

如何设置和优化背景,今天我们从颜色,图片,边框,内边距,外边距,浮动,阴影,圆角这几个角度进行了学习。“且将新火试新茶,诗酒趁年华”,望与诸君共勉。


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进