第三天加第四天的笔记

人工糖精

已于 2023-07-25 23:32:18 修改

阅读量17

点赞数

文章标签： html5 css 前端

于 2023-07-25 22:56:28 首次发布

本文链接：https://blog.csdn.net/m0_73860010/article/details/131927818

版权

字体样式

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<link rel="stylesheet" href="./05.1-字体样式.css">

</head>
<body>
     <p>我是一段文字，有本事来打我呀</p>
</body>
</html>

p {
    /* font-size:字体大小  */
    /*font-size: 20px; */
    /*  字体  */
    /*font-family :"宋体";*/
 
    /*   字体粗细  400:正常    700：加粗  */
    /*font-weight:bold;*/
    /*font-weight: 700;*/
    /*   字体样式   */
    /*font-style: italic;*/
    /*   style weight size family   字号和字体必须同时存在，不推荐*/
    font:italic  700 20px '宋体';
    /*   
    css的层叠性，属性名相同时，后边的样式会将前边的样式覆盖掉  */
 }

文本缩进

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<link rel="stylesheet" href="./06.1-文本样式.css">

</head>
<body>
    <p>21岁时，刘翔以12秒91的成绩，问鼎雅典奥运会男子田径110米栏冠军之位。
        彼时的他，面对赛后采访锋芒毕露：“谁说黄种人拿不到奥运冠军的”。
        就在所有人以为这枚金牌已经是刘翔的巅峰时，没想到这仅仅是他撼动世界田联的开端。
    </p>
    <p>
        21岁时，刘翔以12秒91的成绩，问鼎雅典奥运会男子田径110米栏冠军之位。
        彼时的他，面对赛后采访锋芒毕露：“谁说黄种人拿不到奥运冠军的”。
        就在所有人以为这枚金牌已经是刘翔的巅峰时，没想到这仅仅是他撼动世界田联的开端。
    </p>
</body>
</html>

/*  CSS还具有继承性  */
/*body {
    text-indent: 20px;
}*/
p {
    font-size: 40px;
    /*text-indent: 32px;    px具有局限性  em表示当前文字的大小   */
    text-indent: 2em;
}

文本对齐方式

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<link rel="stylesheet" href="./07.1-文本对齐方式.css">

</head>
<body>
      <div class="box1">我是一个小盒子</div>
      <div class="box2">
          <img src="../cat.gif">
          <p>我是内容</p>
      </div>
</body>
</html>

.box1 {
    /*   转化成行内块  */
   /* display: block;*/
    /*  对齐方式：text-align   居中的是内容 */
    text-align: center;
}
.box2 {
    width:600px;
    hegiht:800px;
    background-color: pink;
    text-align: center;
}

文本装饰

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<link rel="stylesheet" href="./08.1-文本装饰.css">

</head>
<body>
    <a href="#">去百度</a>
</body>
</html>

a {
    /*  清楚a链接默认样式  */
    text-decoration: none;
}

transform

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         /* uppercase：转大写   lowercase：转小写  */
        ul li:nth-child(1) {
            text-transform: uppercase;
        }
        ul li:nth-child(2) {
            text-transform: lowercase;
        }
    </style>
</head>
<body>
    <ul>
        <li>ggdfbbf我是第1个li</li>
        <li>GHUUBJBU我是第2个li</li>
        <li>ggfgvb我是第3个li</li>
        <li>ggdgtj我是第4个li</li>
    </ul>
</body>
</html>

行高

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<link rel="stylesheet" href="./09.1-行高.css">

</head>
<body>
    <p>21岁时，刘翔以12秒91的成绩，问鼎雅典奥运会男子田径110米栏冠军之位。
        彼时的他，面对赛后采访锋芒毕露：“谁说黄种人拿不到奥运冠军的”。
        就在所有人以为这枚金牌已经是刘翔的巅峰时，没想到这仅仅是他撼动世界田联的开端。
        2006年洛桑站，面对美国双雄特勒梅尔、阿诺德、05锦标赛金牌得主杜库雷的前后夹击，刘翔异常冷静。
        发令声起，他弹射出去，在第三个栏后速度直线飙升，最终以12秒88摘得桂冠，打破英国名将科林杰克逊的尘封13年的世界记录。
    </p>
    <div>
        我是一段文字
    </div> 
</body>
</html>

p {
    line-height:50px;
}
div {
    width: 400px;
    height: 200px;
    background-color: pink;
    text-align: center;
    /*  单行文本借助行高垂直居中  */
    line-height: 200px;
}

文本溢出

在这里插入图片描述

div {
    width: 300px;
    height: 500px;
    background-color:yellow;
    overflow: auto;
    /* overflow:scoll  不只Y轴，X轴也可以滚动 */
}

背景相关

body {
     width: 3000px;
     height: 3000px;
     
   /*background-color: pink; 
     background-image: url(./背景.webp);
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: right bottom;*/
     

     background: pink url(./背景.webp) no-repeat fixed right bottom;
}

列表相关样式

在这里插入图片描述

li {
    /* 去除li默认样式 */
    list-style: none;
    /* list-style: disc;   默认样式 */
    /* list-style: circle;   空圆形标记 */
}

元素显示模式板块

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
         /* 将行内元素转化为块元素 */
            display: inline-block;
            width: 100px;
            height: 50px;
            background-color: pink;
        }
        /*   inline-block:行内块元素 */
        div {
            display: inline-block;
        }
    </style>
</head>
<body>
    <span>我是一个小盒子</span>
    <span>我是一个小盒子</span>
    <span>我是一个小盒子</span>
    <div>我是一段文字</div>
</body>
</html>