11月22日：文本

最新推荐文章于 2024-04-18 00:20:31 发布

瑞妖儿

最新推荐文章于 2024-04-18 00:20:31 发布

阅读量47

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/qq_46111433/article/details/127989712

版权

一、长度单位

<!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>
    <!-- 
        长度单位
            1：像素 px
                就是电脑屏幕上的一个个发光的小点，我们眼睛是看不出来的
                    像素是我们pc端最常用的一个单位，它是一个固定单位
            2：百分比 %
                是父元素的宽高的百分比，是一个相对单位，会随着父元素宽高的变化而变化
                一般情况下，做流式布局比较多
            3.em
                也是一个相对单位，相对于当前元素的字体大小来计算最终大小
                也就是1em=1个font-size。如果当前的元素没有设置字体大小，
                那么会继承祖先元素的字体大小
                最终继承到html默认的字体大小，是16px
            4.rem
            r  root  根
            也是一个相对单位，相对于根标签html的字体大小来计算最终大小
            也就是1rem=1个html的font-size
            5、vw、vh
     -->
     <style>
        section{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        div{
            width: 10em;
            height: 10em;
            background-color: red;
        }
     </style>
</head>
<body>
    <section>
        <div>
            书倒么都。
        </div>
    </section>
</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>
    <!-- 颜色单位：
    1：在CSS可以直接使用颜色的单词来表示不同的颜色
        red、green、yellow、blank等
        缺点：颜色单词太多了，不好描述
    
    2.使用RGB值来表示不同的颜色
        rgb（红色，绿色，蓝色）
            颜色的值 0-255之家  0最小，255最大
            直接用电脑或插件可以吸取颜色的比值 ctrl+alt+a
    3：RGBA
    rgba(red,green,blue,alpha)
    alpha 透明度  0-1之间设置透明度  0是透明，1是不透明

    4：使用十六进制的rgb值来表示颜色，原理和上边RGB原理一样
        十六进制：0-9abcdef，
        用十六进制的值来表示0-255之间的数值，表示红色，绿色，蓝色的浓度
        语法：#ff0000，像这样两两重复的表示，可以省略一位，简写成#f00
        例子：#f00  #0f0  #00f  #ccc  #333

    5.HSL值（H - 色相 0-360，S-饱和度 0-1000%，L - 亮度 0-100%）
        HSLA值  A-alpha 透明度  0-1之间
    -->
            <style>
                .box{
                    width: 100px;
                    height: 100px;
                    background-color: rgb(255, 0, 0);
                }
            </style>
</head>
<body>
    <div class="box1"></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>
    <!-- 
        1.color         设置字体颜色，也可以设置其他颜色
        2.font-size     设置字体体大小
        3.font-fammily  可以指定文字的字体
        4.@font-face    自定义字体
     -->
     <style>
        /* 第一步：自定义字体 */
        @font-face{
            /* 你给字体起的名字 */
            font-family: '666';
            /* 字体引入路径 */
            src: url();
        }
        p{
            color: #f00;
            font: 30px;
            /* 设置文字的字体  字体是设计师设计好，提前规定好，我们直接使用即可 */
            /* 第二步：使用自定义字体 */
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        }
     </style>
</head>
<body>
    <p>快子奔妙兮大密选贤梵希到不的非，朋皮好。</p>
</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>
        /* p{
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        } */
      </style>
</head>
<body>
    <!-- 
			在网页中将字体分成5大类：
          serif  ['serif]（衬线字体）
          sans-serif（非衬线字体）
          monospace （等宽字体）
          cursive ['kə:siv]（草书字体）
          fantasy  ['fæntəsi]（虚幻字体）
			可以将字体设置为这些大的分类,当设置为大的分类以后，
				浏览器会自动选择指定的字体并应用样式
			一般会将字体的大分类，指定为font-family中的最后一个字体	,用来兜底
		-->

        <p style="font-size: 20px; font-family: serif">衬线字体：我是一段文字，ABCDEFGabcdefg</p>
        <p style="font-size: 20px; font-family: sans-serif">非衬线字体：我是一段文字，ABCDEFGabcdefg</p>
        <p style="font-size: 20px; font-family: monospace">等宽字体：我是一段文字，IHABCDEFGabcdefg</p>
        <p style="font-size: 20px; font-family: cursive">草书字体：我是一段文字，ABCDEFGabcdefg</p>
        <p style="font-size: 20px; font-family: fantasy">虚幻字体：我是一段文字，ABCDEFGabcdefg</p>
</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>
</head>
<!-- 
    设置一个文字大小 font-siz
    设置一个字体     font-family
    设置文字斜体     font-style
        可选值：
            normal  默认值  文字正常显示
			italic  文字倾斜  （比较常用）
			oblique  文字倾斜  （了解）

    设置文字的加粗
        font-weight: ;
		可选值：
			normal  默认值  文字正常显示
			bold    文字加粗
			bolder   文字加粗
			100-900 之间数值   100最细  900最粗  注意没有单位
	设置一个小型大写字母
		font-variant  
		可选值：
		normal  默认值  文字正常显示
		small-caps  设置小型大写字母


	font简写
		可以统一设置文字相关的一些样式
		注意：
			1、必须要有字体大小和文字的字体
			2、字体大小必须在倒数第二位
			   文字字体必须在倒数第一位

 -->
 <style>
    .p1{
        font-size: 2em;
        font-family: 'Times New Roman', Times, serif;
        /* 设置文字斜体 */
        font-style: italic;
        /* 设置文字的加粗 */
        font-weight: 900;
    }
    .p3{
        color: green;
        font: initial bold 30px serif;
    }
 </style>
<body>
    <p class="p1">我是一段文字我是一段文字我是一段文字，ABCDEFGabcdefg</p>

    <p class="p2">我是一段文字，ABCDEFGabcdefg</p>

    <p class="p3">我是一段文字，ABCDEFGabcdefg</p>
</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>
    <!-- 
        1.行高（line high） 文字占有的实际高度
        行高=上间距+文字的大小+下间距
            上间距=下间距
        如果要设置行与行之间的空白距离，可以通过设置行高来实现
        line-height样式名
            可选值：
                （1）直接写大小  单位：px/em/rem/%
                （2）直接写倍数  1/2/3/4/5....
                （3）可以写百分比，100%，200%。300%
        2.单行文本在父元素中垂直居中
            只需要设置行高跟父元素高度一致
        3.font中也可以指定行高
        font: 字体大小/行高  字体;
     -->
     <style>
        .p1{
            font-size: 25px;
            color: red;
            line-height: 50px;
        }
        .box{
            width: 200px;
            height: 100px;
            background-color: pink;
            line-height: 100px;
        }
        .p2{
            color: green;
            font: 30px/60px sans-serif;
            /* line-height: 60px; */
        }
     </style>
</head>
<body>
    <p class="p1">一株是枣树，还有一株也是枣树。 一株是枣树，还有一株也是枣树。 一株是枣树，还有一株也是枣树。 一株是枣树，还有一株也是枣树。 一株是枣树，还有一株也是枣树。</p>
    <p class="p2">在我的后园，可以看见墙外有两株树，一株是枣树，</p>
    <div class="box">
      <a href="#">我是一个超链接</a>
    </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>
        .p1{
            font-size: 30px;
            /* text-transform: none; */
            /* text-decoration: none; */
            /* letter-spacing: 20px; */
            word-spacing: 30px;
        }
        .p2{
            font-size: 30px;
            /* text-align: left; */
            text-indent: 2em;
        }
        .p3{
            background-color: pink;
            /* 设置单行文本省略号的固定写法 */
            /* 作业：自行研究多行文本省略号的写法 */
            /* 设置宽度 */
            width: 300px;
            /* 设置不换行 */
            white-space: nowrap;
            /* 设置多余的内容裁剪掉 */
            overflow: hidden;
            /* 设置多余的内容以省略号的形式出现 */
            text-overflow: ellipsis;
        }
        h1{
        color: red;
        text-align: center;
        text-shadow: 5px 5px 10px;
      }
      .box{
        width: 100px;
        height: 100px;
        background-color: green;
      }
      /* 需求：当鼠标移入的时候，box四周出现阴影 */
      .box:hover{
        box-shadow: 0px 0px 10px ;
      }
      span{
        text-align: center;
      }
        
    </style>
    <!-- 
        1.text-transform 可以用来设置文本的大小写
            可选值：
                none   文本正常显示  默认值
                uppercase  字母大写
                lowercase  字母小写
                capitalize  单词首字母大写
        2：text-decoration  可以用来设置文本的
            可选值：
                none  文本正常显示  默认值
                underline  文本下划线
                overline  文本上划线
                line-through  文本删除线

        3：letter-spacing可以指定字符间距
        4: word-spacing可以设置单词之间的距离

5: text-align用于设置文本的对齐方式
      可选值：
        left  默认值，文本靠左对齐
        right  文本靠右对齐
        center  文本居中对齐
    注意：设置文本的对齐方式，必须要给文本一定的空间，
        如果行内元素的话，它的宽度是被内容撑开的，也就无法设置
    

6: text-indent 设置首行缩进
      常用的长度单位：em
      
7: white-space: ; 设置网页如何处理空白，可以设置换不换行
8: text-overflow 文本溢出包含元素时发生的事情
        可选值：ellipsis  省略号
9: text-shadow: h-shadow v-shadow blur color;
      4个参数  （参数之间以空格隔开）
        1、阴影的水平位移距离  正值向右，负值向左   必填
        2、阴影的垂直位移距离   正值向下，负值向上   必填
        3、阴影的模糊半径    选填，默认是0px
        4、阴影的颜色  一般情况用rgba   选填，默认是字体的颜色
10：box-shadow: h-shadow v-shadow blur color;
        4个参数跟text-shadow是一样
          唯一不同的是
            阴影的颜色  默认是黑色
11: vertical-align  设置元素垂直对齐的方式
        -->


     -->
</head>
<body>
    <h1>高解韩不后病自。</h1>
    <p class="p1">
        其融保得首法俭韩撒事，国够间下日支的人。
        已慨有逃土死略是卧也我下老促天普他金一。
    </p>
    <p class="p2">
        搏书弟天皇第别台俭，磊次兼之论足说视色。
        秦不风罪锐魂郭非斯命一是如的，说人好老。
    </p>
    <span>我是span标签</span>
</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>
    <!-- vertical-align  设置元素垂直对齐的方式
                作用：
                    1.设置图文的对齐方式
                    2.解决图片三像素的问题
                        引入图片后，图片与图片之间会有三像素的空白，正常情况，
                        方法一：
                            vertical-align 非baseline
                        方法二：
                            设置其父元素的font-size为0
                        方法三：
                            设置图片为块元素
                        方法四：
                            使图片脱离文档流，设置它浮动或者绝对定位皆可
                可选值：
                    baseline  基线对齐  默认值  以x的最下方为标准
                    top    文本靠上
                    bottom  文本靠下
                    middle  文本居中
     -->
     <style>
        div{
            width: 300px;
            /* font-size: 0; */
        }
        img{
            width: 300px;
            /* vertical-align: middle; */
        }
     </style>
</head>
<body>
    <div>
        <img src="./img1.jpeg" alt="">
        <img src="./img1.jpeg" alt="">

        <span>xxx艳大令是。xxssegasdfxx</span>
    </div>
</body>
</html>