Uint 7.文本和字体属性,background,精灵图和3种定位

一. 文本属性

　　CSS 文本属性可定义文本的外观。

　　通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>文本属性和字体属性</title>

    <style type="text/css">

    /* font-weight:表示字体粗细,bold或者bolder表示粗体 */

    /* font-family:设置字体,如果没有匹配的字体,那么默认就是宋体; */

    /* text-align:center,设置文本居中,s; */

    /* text-decoration:underlin red 设置下划线和下划线颜色,默认none.一般使用这个属性来清除a标签的下划线; */

    /*line-height:100px 设置行高.; */

    /* text-indent:20px 设置缩进; 也可以使用text-indent:1em,表示缩进1字体.缩进以em为准*/

    div{

        width: 200px;

        height: 1000px;

        border: 2px solid gold;

        font-size: 20px;

        font-weight: bolder;

        font-family: "Microsoft Yahei","微软雅黑";

        text-align: center;

        text-decoration: underline pink;

        /* line-height: 100px; */

        text-indent: 2em;

    }

    </style>

</head>

<body>

    <div>

        CSS最重要的目标是将文件的内容与它的显示分隔开来。在CSS出现前，几乎所有的HTML文件内都包含文件显示的信息，比如字体的颜色、背景应该是怎样的、如何排列、边缘、连线等等都必须一一在HTML文件内列出，有时重复列出。CSS使作者可以将这些信息中的大部分隔离出来，简化HTML文件，这些信息被放在一个辅助的，用CSS语言写的文件中。HTML文件中只包含结构和内容的信息，CSS文件中只包含样式的信息。

    </div>

</body>

</html>

常用文本和字体属性

二. 背景属性

　　使用background-*一些属性来对网页背景进行设计.　　

　　常用背景属性:

`background-repeat`取值范围：

`background-attachment`取值范围：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>color repeat和image属性</title>

    <style type="text/css">

        .b_color{

            float: left;

            width: 300px;

            height: 300px;

            border: 1px solid red;

            /* 设置背景色 */

            background-color: green;

            overflow: hidden;

        }

        .b_img{

            float: left;

            width: 600px;

            height: 800px;

            border: 1px solid pink;

            /* repeat: 设置背景图片不重复加载; */

            background-repeat: no-repeat;

            /* image里url是图片的路径. */

            background-image: url('./images/bojie.jpg')

        }

    </style>

</head>

<body>

    <div class="b_color">

    </div>

    <div class="b_img">

    </div>

</body>

</html>

背景属性

三. 精灵图

　　在计算机图形学中，当一张二维图像集成进场景中，成为整个显示图像的一部分时，这张图就称为精灵图（Sprite）

　　利用background-position属性,可以截取去我们想要的图片.图片下载

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css精灵图技术</title>

    <style type="text/css">

        .box1{

            width: 48px;

            height: 48px;

            background-image: url(./images/1.png);

            background-repeat: no-repeat;

            background-position: 00px -528px

        }

        .box2{

            width: 48px;

            height: 48px;

            background-image: url(./images/1.png);

            background-repeat: no-repeat;

            /* 第一个参数(x)表示水平方向上移动的像素,第二个参数(y)是竖直方向上的移动的像素.可以是负数.在负数的情况下,x移出屏幕左边,y向上移动.

         */

            background-position: 00px -703px

        }

    </style>

</head>

<body>

    <div class="box1">

    </div>

    <div class="box2">

    </div>

</body>

</html>

精灵图案例

四. 背景定位

　　background-position :规定背景图像的位置。

　　常用属性:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>background-position</title>

    <style type="text/css">

        *{

            padding: 0;

            margin: 0;

        }

        div{

            width: 1200px;

            height: 800px;

            background-image: url(./images/bojie.jpg);

            background-repeat: no-repeat;

            background-position: center top;

        }

    </style>

</head>

<body>

    <div class="sex">

    </div>

</body>

</html>

居中图片

backgroup-attach实例

五. 定位

　　5.1相对定位

　　设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。

　　3种定位方式:
　　1.相对定位:position:relative;
　　2.绝对定位:position:absolute;
　　3.固定定位:position:fixed;

　　特性:
　　1.不脱标,元素不脱离标准流.
　　2.形影分离
　　3.老家留坑

　　2个作用:
　　1.元素微调
　　2.做绝对定位的参考(术语:父相子绝)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>相对定位</title>

    <style type="text/css">

        div{

            width: 300px;

            height: 300px;

            background-color: green;

            /*如果仅对当前元素设置相对定位,那么该元素就与标准文档流中的元素一样了*/

            position: relative;

            /*设置了相对定位,我们就可以使用4个方向的属性了 left right top bottom

             相对定位:是相对于原来的自己定位.top20px表示相对于原来的位置向下移动20px.相对定位仅仅微调我们元素的位置.

            */

            top: 20px;

            left: 30px;

        }

    </style>

</head>

<body>

    <!-- 3种定位方式:

         1.相对定位:position:relative;

         2.绝对定位:position:absolute;

         3.固定定位:position:fixed;

     -->

     <div class="box">

     </div>

</body>

</html>

相对定位

　相对定位隐藏导航栏

　5.2 绝对定位

　　特性:

　　　　1.脱标

　　　　2.做遮盖效果,提升层级　　

　　　　3.设置绝对定位后,不区分块级元素和行内元素,都可以设置宽高.

　　绝对定位的参考点:设置绝对定位top属性时,是以页面左上角为参考点.(以盒子margin左上角0为参考点).

　　　　　　　　　　设置绝对定位bottom属性时,是以首屏(首次打开页面的状态)的左下角为参考点.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>绝对定位参考点</title>

    <style type="text/css">

    /*     *{

            padding: 0;

            margin: 0;

        } */

        body{

            width: 99%;

            height: 10000px;

            border: 5px solid green;

        }

        .box{

            width: 200px;

            height: 200px;

            background-color: red;

            /* 绝对定位: 设置top属性的时候,是以页面的左上角(浏览器)为参考点.(以盒子margin左上角0为参考点); */

            position: absolute;

            top: 13px;

            left: 13px;

            /* bottom: 以首屏(首次打开页面)的左下角为参考点.; */

            /* bottom: 100px; */

        }

    </style>

</head>

<body>

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

</body>

</html>

绝对定位脱标参考点

　　父相子绝:父辈元素设置相对定位,子元素又设置了绝对定位,那么子元素的参考点就是父辈元素左上角.父辈元素也可以是父辈的父辈,以此类推

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>绝对定位以盒子为参考点</title>

    <style type="text/css">

        *{

            padding: 0;

            margin: 0

        }

        .box{

            width: 300px;

            height: 300px;

            border: 2px solid red;

            margin: 200px;

            /*父辈元素设置相对定位,子元素又设置了绝对定位,那么子元素的参考点就是父辈元素左上角.父辈元素也可以是父辈的父辈,以此类推    */

            /*position: relative;*/

            padding: 50px;

        }

        .box2{

            width: 200px;

            height: 200px;

            background-color: gold;

            /*这里设置相对定位后,p就会议box2的左上角为参考点*/

            position: relative;

        }

        .box p{

            width: 100px;

            height: 100px;

            background-color: green;

            position: absolute;

            top: 20px;

            left: 20px;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="box2">

            <p></p>

        </div>

    </div>

</body>

</html>

父相子绝案例

　　父相子绝,父绝子绝,父固子绝都是以父辈元素的左上角为参考点.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>父绝子绝</title>

    <style type="text/css">

        *{

            padding: 0;

            margin: 0;

        }

        .box{

            width: 400px;

            height: 400px;

            background-color: red;

            border: 2px solid gold;

            /*绝对定位*/

            position:absolute;

            /*固定定位*/

            position: fixed;

            top: 100px;

            left: 100px;

        }

        .box p{

            width: 200px;

            height: 200px;

            background-color: green;

            position: absolute;

            top: 100px;

            left: 100px;

        }

    </style>

</head>

<body>

    <!-- 父相子绝,父绝子绝,父固子绝,都是以父辈元素的左上角为参考点.

        注意:父绝子绝在实战布局中,不使用.因为绝对定位会脱标,影响页面布局.相反的 父相子绝 经常使用在布局中.因为相对定位不脱标,子元素仅仅是在父辈元素内调整自己的位置信息.

     -->

    <div class="box">

        <div class="box2">

            <p></p>

        </div>

    </div>

</body>

</html>

父绝子绝,父固子绝案例

　　如何让一个绝对定位的子盒子居中显示?

　　子盒子设置绝对定位后,margin:0 aotu 就不起作用了.这时候要记下一个公式:left:50% margin-left:-(父元素宽度/2),一定要是个负数.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>绝对定位的子盒子居中</title>

    <style type="text/css">

        *{

            padding: 0;

            margin: 0;

        }

        .box{

            width: 100%;

            height: 40px;

            /*position: absolute;*/

            background: black;

        }

        .box .c1{

            width: 900px;

            height: 40px;

            background-color: pink;

            margin: 0 auto;

            /*position:absolute 绝对定位后.margin:0 auto 就不起作用了.如果想要让c1居中显示,那么c1的left等于父元素的50%.然后margin-left等于父元素的一半(是个负数)

            */

            position: absolute;

            /*left:50%,让子元素向左移动父元素一半的值*/

            left: 50%;

            margin-left: -480px;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="c1"></div>

    </div>

</body>

</html>

子盒子居中显示

　　5.3 固定定位

　　　　固定当前的元素,不会随着页面的滚动而滚动.　　　　

　　　　特性:
　　　　1.脱标
　　　　2.提升层级
　　　　3.固定不变

　　　　常见用途:

　　　　　1.返回顶部按钮

　　　　　2.固定导航栏

　　　　 3.做小广告

　　　　参考点: 设置top是以浏览器左上角为参考点.设置bottom是以浏览器左下角为参考点;

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>固定定位的使用</title>

    <style type="text/css">

        *{

            padding: 0;

            margin: 0;

        }

        p{

            width: 100px;

            height: 100px;

            background-color: pink;

            /* 固定定位: 固定当前的元素,不会随着页面的滚动而滚动

                特性:

                1.脱标

                2.提升层级

                3.固定不变

                参考点: 设置top是以浏览器左上角为参考点.设置bottom是以浏览器左下角为参考点;

            ; */

            position: fixed;

            right: 100px;

            top: 100px;

        }

    </style>

</head>

<body>

    <div>

        <p></p>

        <img src="./images/bojie.jpg" alt="">

        <img src="./images/bojie.jpg" alt="">

        <img src="./images/bojie.jpg" alt="">

        <img src="./images/bojie.jpg" alt="">

        <img src="./images/bojie.jpg" alt="">

        <img src="./images/bojie.jpg" alt="">

    </div>

</body>

</html>

固定定位案例