Layout——文本样式（1）

最新推荐文章于 2023-11-09 14:32:29 发布

一只天马行空的飞猪

最新推荐文章于 2023-11-09 14:32:29 发布

阅读量1.1k

点赞数

分类专栏： CSS学习笔记文章标签： css html5

本文链接：https://blog.csdn.net/weixin_46149357/article/details/119156455

版权

CSS学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

行高（line height）

行高指的是文字占有的实际高度，可以通过line-height来设置行高

行高也可以直接指定一个大小（px em）

也可以直接为行高设置一个整数

如果是一个整数的话，行高将会是字体指定的倍数

行高还经常用来设置文字间的行间距

（行间距 = 行高 - 字体大小）

字体框：

字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度

行高会在字体框的上下平均分配

可以将行高设置为和高度一样的值使得单行文字在一个元素中垂直居中

字体：

字体的简写属性

font可以设置字体相关的所有属性

语法：

font: 字体大小/行高字体族

行高可以省略不写，相当于默认的值（不意味着不写），如果有在前面设置行高，默认值会把前面的行高覆盖

font-weight 自重字体的加粗

可选值:

normal 默认值不加粗

bold 加粗

100-900 九个级别（没什么用）

font-style 字体的风格

normal正常

italic 斜体

注意：简写属性如果不写是默认使用默认值

 p{
            border: black solid 2px;
            font: 20px;
            font-family: Georgia, 'Times New Roman', Times, serif;

            /* font: 20px Georgia, 'Times New Roman', Times, serif ; */
        }

文本的样式

text-align 文本的水平对齐

可选值：

left 左侧对齐

right 右对齐

center 居中对齐

justify 两端对齐

vertical-align 设置元素垂直对齐方式

可选值：

baseline 默认值基线对齐

top 顶部对齐

bottom 底部对齐

middle 居中对齐

    <style>

        div{
            display: block;
            border: solid greenyellow 2px;
            font: 20px;
            width: 300px;
            text-align: right;
            /* text-justify: auto; */
            /* vertical-align: baseline;
            vertical-align: bottom; */
        }
    </style>
</head>
<body>


    <div >
        今天是周三 !!！cccccccccccccdddddddddddddjjjjjjjjjjjjec
    </div>

图片的引入，其实也是类似于字体，沿着基线的，引入的图片也会有基线，想要去掉基线效果

可设置 vertical-align (baseline\top\bottom\middle 任选其一)

text-decoration 设置文本修饰

可选值：none 什么也没有

underline 下划线

line-through 删除线

overline 上划线

注意：text-decorationIE浏览器没有颜色和其他样式设置

white-space 设置网页如何处理空白

可选值：

normal 正常

nowrap 不换行

pre 保留空白

white-space ：nowrap;

overflow: hidden；

text-overflow : elliipsis；

超出文本框省略号显示，这个三个缺一不可

缺一不可

缺一不可!!!

总体代码如下：

    <style>
        div{
            display: block;
            /* border: solid greenyellow 2px; */
            font: 20px;
            width: 300px;
            text-align: right;
            /* text-justify: auto; */
            /* vertical-align: baseline;
            vertical-align: bottom; */
        }
        .box1{
            width: 200px;
            font: 5px;
            font-family: Georgia, 'Times New Roman', Times, serif;
            text-align: left;

            text-decoration: underline;
            /* 设置省略号 */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }





    </style>
</head>
<body>


    <div >
        今天是周三 !!！cccccccccccccdddddddddddddjjjjjjjjjjjjec
    </div>
   
    <div  class="box1">
        从里约到东京，不管是过去4年还是5年，我的目标从来都没有改变：金牌。这是中国代表团、中国举重队对我们每一位参赛选手的期待，也是我们对自己的期待。
        今天，我再次实现了自己的梦想。我为生在红旗下而自豪，为身为中国选手而骄傲！
    
        
    </div>

  
</body>

一只天马行空的飞猪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Layout——文本样式（1）

行高指的是文字占有的实际高度，可以通过line-height来设置行高行高也可以直接指定一个大小（px em）也可以直接为行高设置一个整数如果是一个整数的话，行高将会是字体指定的倍数行高还经常用来设置文字间的行间距（行间距 = 行高 - 字体大小）字体框：字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度行高会在字体框的上下平均分配可以将行高设置为和高度一样的值使得单行文字在一个元素中垂直居中...
复制链接

扫一扫