css-day04

最新推荐文章于 2024-07-21 19:13:42 发布

xiaoruia

最新推荐文章于 2024-07-21 19:13:42 发布

阅读量95

点赞数

分类专栏：我的前端学习记录文章标签： css 前端 html

本文链接：https://blog.csdn.net/xiaoruia/article/details/125440903

版权

我的前端学习记录专栏收录该内容

6 篇文章 0 订阅

订阅专栏

day04

文本属性

color颜色属性：
- rgb()形式：括号里面三个0-255的数字组成
- #000000：由井号加十六进制的数组成
family字体属性：
- 后面如果是中文就用双引号括起来
- 可以有多个字体，当第一个字体不兼容或者不存在时则继续往后查找，直到找的存在和兼容的字体为止
font-weight字体粗细属性：
- bold/bolder/600-900：字体加粗
- lighter/100-300：字体变细
- normal/400-500：正常字体
font-style字体倾斜属性：
- italic/onlique：倾斜
- normal：正常
text-decoration文本样式属性：
- underline：下划线
- line-through：删除线
- overline：上划线
- none：清除样式（用于清除超链接标签的下划线）
text-indent首行缩进属性：
- 32px为两个中文字符

重点：

经常使用到text-decoration属性中的none来清除超链接的下划线

实例：

<!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>
        .color {
            color: rgb(233, 89, 39);
        }

        .family {
            font-family: "楷体", "宋体";
        }

        .weight_1 {
            font-weight: 700;
        }

        .weight_2 {
            font-weight: 300;
        }

        .italic {
            font-style: italic;
        }

        .del {
            text-decoration: line-through;
        }

        a {
            text-decoration: none;
        }

        /* 鼠标悬停上时，添加下划线 */
        a:hover {
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <div class="color">我是颜色</div>
    <div class="family">我是字体</div>
    <div class="weight_1">字体变粗</div>
    <div class="weight_2">字体变细</div>
    <div class="italic">字体倾斜</div>
    <div class="del">删除线</div>
    <a href="#">删除下划线</a>
</body>

</html>

文本位置调整

水平对齐方式 text-align
- 居中对齐：center 靠左：left 靠右：right
- 两端对齐：justify（就是当宽度改变时，文字也会紧贴着边缘部分，前提是文字大于两行）
行高：line-height
- 当行高和盒子相同高度时，文本居中显示
- 当行高比盒子高度小时，文本偏上显示
- 当行高比盒子高度大时，文本偏下显示
复合字体：font
- font：weight（字体的粗细）style（字体的倾斜）size（字体的大小）/line-height（行高）family（字体的样式）
- 书写复合字体时，size和family必不可少

实例：

<!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>
        /* 水平对齐方式 text-align */
        .level {
            /* 居中对齐 center 靠左 left 靠右 right */
            text-align: center;
        }
        /* 行高 line-height */
        .line_height {
            
            width: 200px;
            height: 50px;
            /* 
                当行高和盒子高度一样时，文本居中显示 
                当行高大于盒子高度时，文本偏下显示
                当行高小于盒子高度时，文本偏上显示
                当line-height等于数字时，此时高度为文字字体高度的多少倍
            */
            line-height: 50px;
            text-align: center;
            background-color: pink;
        }
        /* 两端对齐 */
        .both {
            /* 两端对齐就是当宽度改变时，文字也会紧贴边缘部分（文字大于两行） */
            width: 200px;
            height: 500px;
            text-align: justify;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="level">这是一段文字</div>
    <div class="line_height">这是第二段文字</div>
    <div class="both">这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字</div>
</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>
    <style>
        .font_all {
            width: 200px;
            height: 50px;
            background-color: pink;
            /* 
                复合属性的顺序  weight：字体的粗细 style：字体的倾斜 size/line-height：字体大小和行高 family：字体样式 
                必须要的是字体大小和字体样式
            */
            font: 700 italic 20px/50px "楷体";
        }
    </style>
</head>
<body>
    <div class="font_all">这是一段文字</div>
</body>
</html>

列表属性

list-style 列表样式：
- 改变列表序号的样式 list-style:circle(空心圆) disc(实心圆) square(小方块)
- 取消列表所有样式 list-style:none
- 用图片作为图标序号 list-style:url(路径)
- 将图标序号放在li里面 list-style:inside

实例：

<!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>
        .list_one {
            /* 
                在列表样式中可以修改列表序号图标 circle（空心圆）disc（实心圆）square（方块）none（无序号）
                还可以使用image()图片作为序号图标
                list-style：inside  将序号图标放入列表内
            */
            /* list-style: circle; */
            
            background-color: skyblue;
        }
        .list_one li {
            list-style: url(image/微笑.png) inside;
            background-color: red;
        }
    </style>
</head>
<body>
    <ul class="list_one">
        <li>今天晚上吃什么？</li>
        <li>今天晚上吃什么？</li>
        <li>今天晚上吃什么？</li>
        <li>今天晚上吃什么？</li>
        <li>今天晚上吃什么？</li>
        <li>今天晚上吃什么？</li>
    </ul>
</body>
</html>