CSS（2）--样式-CSDN博客

本文链接：https://blog.csdn.net/zxyccm/article/details/123353507

span标签

重点要突出的字，使用span套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    #a{
    font-size: 50px;
    }
  </style>

</head>
<body>

欢迎学习 <span id="a">java</span>

</body>
</html>

字体样式

<!--
    font-family: 字体
    font-size: 字体大小
    font-weight: 字体粗细
    color：字体颜色
    -->
    <style>
        body{
        font-family: 楷体;
        color: gray;
        }
        h1{
        font-size: 50px;
        }
        .p1{
        font-weight: bold;
        }
    </style>

文本样式

颜色

颜色：
    单词
    RGB：red green blue 组成的16进制
    RGBA A：0~1

对齐方式 text-align = center
首行缩进 text-indent: 2em
行高 line-height 单行文字上下居中：line-height = height;
装饰 text-decoration: underline
文本图片水平对齐：vertical-align: middle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!-- text-align: 排版，居中
     text-indent: 段落首行缩进 一个em是一个字符
     line-height: 行高 行高和块高一致时，就可以实现上下居中
    -->
    <style>
        h1{
        color: rgba(0,255,255,0.9);
        text-align: center;
        }
        .p1{
        text-indent: 2em;
        font-family: 楷体;
        }
        .p1{
        background: pink;
        line-height: 50px;
        }
        /* 下划线 */
        .l1{
        text-decoration: underline;
        }
        /* 中划线 */
        .l2{
        text-decoration: line-through;
        }
        /* 上划线 */
        .l3{
        text-decoration: overline;
        }
    </style>

</head>
<body>

<h1>岳阳楼记</h1>

<p class="p1">
    予观夫巴陵胜状，在洞庭一湖，衔远山，吞长江，浩浩汤汤，横无际涯。
</p>

<p class="l1">123123</p>
<p class="l2">123123</p>
<p class="l3">123123</p>

</body>
</html>

文本阴影超链接伪类

/*  去掉a标签默认下划线
	默认初始颜色为黑色
*/
a{
    text-decotation: none;
    color: #000000;
}
/*  伪类用hover
	鼠标悬浮状态颜色变为橘色 字体变大
*/
a:hover{
    color: orange;
    font-size: 50px;
}
/* 鼠标按住未释放的状态 颜色变绿 */
a:active{
    color: green;
}
/*  文本阴影： text-shadow：
	阴影颜色 水平偏移，竖直偏移，阴影半径
*/
#price{
    text-shadow: blue 10px 10px 10px;
}

列表样式

/* ul li */
list-style:
none 去掉原点
circle 空心圆
decimal 有序列表
square 正方形
    
/* ul */
	background: gray;

背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    div{
    width: 1000px;
    height: 700px;
    border: 1px solid red;
    background-image: url("images/zxy.jpg");
    /* 默认全部是平铺的 */
    }
    .div1{
    background-repeat: repeat-x;
    }
    .div2{
    background-repeat: repeat-y;
    }
    .div3{
    background-repeat: no-repeat; 
    }
  </style>

</head>
<body>

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

</body>
</html>

渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
    body{
    background: linear-gradient(19deg, #21D4FD 0%, #00ff4e 100%);
    }
</style>

<body>
111
</body>
</html>

盒子模型

margin:外边距
padding：内边距
border：边框
- 边框的粗细
- 边框的样式
- 边框的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

/* 外边距：居中元素  margin: 0 auto; */
    body{
    /* margin总有一个默认的外边距8 */
    margin: 0;
    padding: 0;
    text-decoration: none;
    }

    /* border:粗细，样式，颜色 */
    #box {
    width: 300px;
    border: 1px solid red;
    margin: 0 auto;
    }

    h2{
    font-size: 16px;
    margin: 0;
    background-color: #3cbda6;
    line-height: 35px;
    color: white;
    }

    form{
        background: #3cbda6;
    }

    div:nth-of-type(1) input{
    border: 2px solid black;
    padding: 10px;
    }

    input{
    border: 1px solid black;
    }
</style>

</head>

<body>

<div id="box">
    <h2>
        会员登录
    </h2>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>
    </form>

</div>


</body>
</html>

盒子计算方式： margin+border+padding+内容宽度

圆角边框

    <style>

        div{
        width: 100px;
        height: 50px;
        margin: 30px;
        background: red;
        <!-- 左上 右上 右下 左下  顺时针方向-->
        border-radius: 50px 50px 0px 0px;
        }

    </style>

阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
    div{
    width: 100px;
    height: 100px;
    border: 10px solid red;
    box-shadow: 10px 10px 5px yellow;
    }
</style>

<body>

<div></div>

</body>
</html>