前端のCSS（二）美化网页

文章目录

1.CSS 的作用和字体样式

span标签
span 和 div 是两个习惯用来更改字体样式的

 <span> </span>
 <div>  </div>

<style>
        body{
            /* 字体的样式 */
            font-family: 楷体;
        }
        .p1{
            /* 字体的颜色 */
            /* 字体的大小 */
            /* 字体的粗细 */
            font-size: 30px;
            color: brown;
            font-weight: lighter;
        }
    </style>
</head>
<body>
  <p class="p1">座落在景区内的湖光山色酒店门前，三五成群的游客，酒店出来的食者，</p>
  <p>站在月光下，赏月留影。孩子们穿梭逗乐、姑娘们月下聊天、情侣打情骂俏、男人们谈笑风生，好不热闹</p>
</body>

2.文本格式

颜色
文本对齐的方式
首行缩进
行高
装饰
文本图片水平对齐

    <style>
        h1 {
            /* 用带#的这种方式，其实就是rgb三通道的写法，最后还可以跟上透明度 */
            color: rgba(33, 254, 77, 0.9);
            text-align: center;
            /* 文本居中 */
        }

        .p1 {
            /*首行缩进两个字的位置*/
            text-indent: 2em;
            /*行高不是指的字的大小，而是一行字上下位置占的大小*/
            /* 行高的目的，是为了让文字居中显示 */
            line-height: 30px;
        }

        .p2 {
            /* 中划线 */
            text-decoration: line-through;
        }

        img, span {
            /* 图片中的span 和 img 放在一行里 */
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <h1>故事介绍</h1>
    <p class="p1">座落在景区内的湖光山色酒店门前，三五成群的游客，酒店出来的食者，</p>
    <p class="p2">站在月光下，赏月留影。孩子们穿梭逗乐、姑娘们月下聊天、情侣打情骂俏、男人们谈笑风生，好不热闹</p>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603528808474&di=f668306a6cbecedd420d83adcd69f305&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F64%2F52%2F01300000407527124482522224765.jpg"
        alt="">
    <span>
        <p>一只狗和一只猫</p>
    </span>
</body>

3.列表样式练习

list-style 的样式

none 去掉原点
circle 空心圆
decimal数字
square 正方形

#nav{
    /* 改变 div 的样式表 */
    width: 200px;
}
.title{
    /* 更改标题的大小，缩进 */
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    background-color: rgb(245, 128, 128);
}

ul li{
    height: 30px; /* 行高 */
    list-style: none; /* 把前边的点话没有了，当然还有其他的样式 */
}
a{
   text-decoration: none;
   text-indent: 200px;
}
/* 鼠标碰到的时候，变颜色 */
a:hover{
    color: red;
}

效果图：
在这里插入图片描述

4.背景图片应用及渐变

就是用图片作为背景

一个变渐色的网站，把颜色调好，直接复制粘贴过去就行 https://www.grabient.com/

<style>
    /* 边框的颜色 */
    div{
        width: 8000px;
        height: 500px;
 
    /* 盒子的思想，现在还没学 */
        border: 1px  solid red;

        /* 默认是全部平铺 */
        background-image: url("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1276352266,3653643148&fm=26&gp=0.jpg");
    }
    .div1{
        /* 沿 x 轴平铺 */
        background-repeat: repeat-x;
    }
    .div2{
        /* 沿 y 轴平铺 */
        background-repeat: repeat-y;
    }
    .div3{
        /* 不平铺 */
        background-repeat: no-repeat;
    }
    h1{
        color: chartreuse;
    }
</style>

</head>
<body>
    <div class="div1">
        <h1>哈哈</h1>
    </div>
    <div class="div2"></div>
    <div class="div3"></div>
</body>

效果图：

在这里插入图片描述

5.盒子模型

在这里插入图片描述
主要的几个属性：

margin：外边距
padding：内边距
border：边框

边框

边框的粗细
边框的样式 (solid 实线)
边框的颜色

5.1边框的使用

#box{
width:300px
border:1px solid red;
}

<style>
    body{
        margin: 0px;
    }
    .app{
        width: 300px;
        /* 边界的 宽，线条的样式，颜色 */
        border: 5px solid red;
        /* 外边框 */
        margin: 0px;
        /* 内边框 */
        padding: 2px;
    }
</style>
<body>
    <div class="app">
        <span>用户名：</span>
        <input type="text">
    </div>
</body>

效果图：
在这里插入图片描述

5.2外边距

外边距的一个妙用就是让图居中

(上下边距为0，左右居中)

  .app {
        margin: 0 auto; 
    }