HTML5学习——第三天-CSDN博客

本文链接：https://blog.csdn.net/weixin_64683517/article/details/140613458

1.伪类选择器

hover伪类选择器 - 当鼠标悬停到标签上的时候产生的样式变化

链接伪类选择器：

 <style>
        /* 点击之前的样式 */
        a:link{
            color: green;
        }

        /* 点击之后的样式 */
        a:visited{
            color: orange;
        }

        /* 鼠标悬停的样式 */
        a:hover{
            color: aqua;
        }

        /* 激活瞬间的样式 */
        a:active{
            color: pink;
        }

    </style>

2.字体相关样式

 <style>
        p{
            /* 字体大小 */
            /* font-size: 30px; */

            /* 设置是否加粗 */
            /* 加粗 - 单词 */
            /* font-weight: bold; */
            /* font-weight: bolder; */
            /* 加粗 - 数值(100-900之间的整百数) */
            /* font-weight: 700; */

            /* 设置是否倾斜 */
            /* font-style: italic; */
            /* font-style: oblique;更具强制性的倾斜 */

            /* 设置字体类型 */
            /* 
                字体类型一般设置多个,执行顺序从左到右执行,有相对的字体,就执行,后面的忽略

                常见字体类型: windows - 微软雅黑   mac - 苹方
             */
            /* font-family: '手札体-简','黑体-简','宋体','隶体',sans-serif; */

            /* 字体的连写 */
            /* 加粗 倾斜可以省略  类型必须有,可是放置一个空引号 */
            /* 当连写碰到单独的属性,连写一定放在单独属性的前面,避免样式被层叠 */
            font: bold 30px '';
            font-style: italic;
            
            

        }
        strong,b{
            /* 取消加粗 - 单词 */
            font-weight: normal;

            /* 取消加粗 - 数值 */
            font-weight: 400;
        }
        i,em{
            /* 取消倾斜 */
            font-style: normal;
        }
    </style>

3.首行缩进

<style>
        /* 首行缩进 */
        p{
            font-size: 18px;

            /* 明确表示开头空出某某距离 */
            /* text-indent:50px; */

            /* 明确表示开头空出某某个字的时候使用 */
            /* 1em = 当前标签的font-size的取值 */
            text-indent: 2em;
        }
    </style>

4.文本水平对齐方式

取值:

1.left - 水平左对齐

2.center - 水平中间对齐

3.right - 水平右对齐

4.justify - 水平两端对齐

5.文本修饰线

  <style>
        div{
            /* 下划线 */
            /* text-decoration: underline; */
            /* 删除线 */
            /* text-decoration: line-through; */
            /* 上划线 */
            /* text-decoration: overline; */

            
            /* text-decoration-line: underline;
            text-decoration-color: red;
            text-decoration-style: wavy; */
            /* 连写不分先后顺序 - 颜色可以省略,默认是黑色 */
            text-decoration: underline wavy green;
            text-decoration: underline dotted green;
            text-decoration: underline dashed green;
            text-decoration: underline solid  red;
            text-decoration: underline double  red;
        }
        u,
        ins,
        s,
        del,
        a{
            /* 取消修饰线 */
            text-decoration: none;
            /* color: black; */
        }
    </style>

6.颜色表示方式

1. /* 三原色 - 取值范围0-255 */

background-color: rgb(255,0,0);

background-color: rgb(0,255,0);

background-color: rgb(0,0,255);

background-color: rgb(0,0,0);

background-color: rgb(255,255,255);

background-color: rgb(0,255,255);

background-color: rgb(20, 216, 75);

2. /* rgba a:透明度 (0-1,0代表完全透明,1代表完全不透明) */

background-color: rgba(20, 216, 75, 0.5);

background-color: rgba(20, 216, 75, 0);

background-color: rgba(20, 216, 75, 1);

background-color: rgba(20, 216, 75, .7);

3. /* 十六进制 - 取值范围: 0-9 a-f */

background-color: #aabbcc;

background-color: #003456;

background-color: #1f9a3c;

background-color: #aaddff;

7.平衡车案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #f5f5f5;
        }
        .box{
            width: 234px;
            height: 300px;
            background-color: #fff;
            margin: auto;
            text-align: center;
        }
        img{
            width: 160px;
        }
        p{
            line-height: 25px;
            font-size: 14px;
        }
        .box>div{
            line-height: 30px;
            font-size: 12px;
            color: #ccc;
        }
        span{
            color: #ffa500;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./img/car.jpg" alt="">
        <p>
            九号平衡车
        </p>
        <div>
            成年人的玩具
        </div>
        <span>
            1999元
        </span>
    </div>
</body>
</html>

结果展示：