HTML5权威指南读书笔记13（第22章）--文本控制，对齐，空白，方向，间距，断词，缩进，装饰，转换，阴影，字体，字体大小，粗细，样式，web字体

最新推荐文章于 2021-10-13 20:10:36 发布

心湖中的石子

最新推荐文章于 2021-10-13 20:10:36 发布

阅读量169

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/weixin_43745804/article/details/110120316

版权

html5 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

1、概述

在这里插入图片描述

2、text-align对齐文本

在这里插入图片描述
代码略

3、text-justify指定文本添加空白的方式

在这里插入图片描述

4、whitespace属性处理文本空白

在这里插入图片描述
空格会被保留

<head>
    <style type="text/css">
        #mydiv{ white-space: pre-wrap;}
    </style>    
</head>
<body>
    <div id="mydiv">
        hon相关知识越           来越多的人选择。最新研究，Python已成为美国top高校最受欢迎的语言，同时国内用Python开发的网站越来越多，on开发的网站越来越多，比较知名的网站如知析和网络爬虫一直使用的是Python，对它比较熟悉，所以这系列文章将讲述Python搭建网站，后面会
    </div>
</body>

5、direction属性指定文本对齐方向

<head>
    <style type="text/css">
        #mydiv1{ direction: ltr;}
        #mydiv2{ direction: rtl;}
    </style>    
</head>
<body>
    <div id="mydiv1">
        相关知识越来越多的人选择。最新研究，Python已成为美国top高校最受欢迎的语言，同时国内用Python开发的网站越来越多，on开发的网站越来越多，比较知名的网站如知析和网络爬虫一直使用的是Python，对它比较熟悉，所以这系列文章将讲述Python搭建网站，后面会
    </div>
    <br/>
    <div id="mydiv2">
        相关知识越来越多的人选择。最新研究，Python已成为美国top高校最受欢迎的语言，同时国内用Python开发的网站越来越多，on开发的网站越来越多，比较知名的网站如知析和网络爬虫一直使用的是Python，对它比较熟悉，所以这系列文章将讲述Python搭建网站，后面会
    </div>
</body>

在这里插入图片描述

6、指定单词、字母、行之间的间距

在这里插入图片描述

7、word-wrap控制断词

<head>
    <style type="text/css">
        #mydiv1{word-wrap: break-word;}
        
    </style>    
</head>
<body>
    <div id="mydiv1">
        相关知识越来越多的人选择。最新研究，Python已成为美国top高校最受欢迎的语言，同时国内用Python开发的网站越来越多，on开发的网站越来越多，比较知名的网站如知析和网络爬虫一直使用的是Python，对它比较熟悉，所以这系列文章将讲述Python搭建网站，后面会
    </div>
    <br/>
   
</body>

在这里插入图片描述

8、text-indent首行缩进

略

9、text-decoration文本装饰与text-transform大小写转换

在这里插入图片描述

略

10、text-shadow文本阴影

在这里插入图片描述

11、使用字体

在这里插入图片描述

12、选择字体

在这里插入图片描述
略

13、font-size设置字体大小

#mydiv1{font-size: medium; font-size: xx-large; font-size: large;}

14、font-weight，font-style设置字体大小

<head>
    <style type="text/css">
        #mydiv1{font-size: medium; font-size: xx-large; font-size: large;
        font-weight: bold; font-style: italic;
        }
        
    </style>    
</head>

15、@font-face使用web字体

客户端没有指定字体时使用该字体

<style type="text/css">
        @font-face {
            font-family: "我的字体";
            src: url("http://www.mysite.com/myfont");
            font-weight: bold;
            font-style: italic;
        }
    </style>

心湖中的石子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5权威指南读书笔记13（第22章）--文本控制，对齐，空白，方向，间距，断词，缩进，装饰，转换，阴影，字体，字体大小，粗细，样式，web字体

1、概述2、text-align对齐文本代码略3、text-justify指定文本添加空白的方式4、whitespace属性处理文本空白空格会被保留<head> <style type="text/css"> #mydiv{ white-space: pre-wrap;} </style> </head><body> <div id="mydiv">
复制链接

扫一扫

专栏目录