文本

标题元素

  • 注意: 在一个HTML页面中最好只使用一个<h1>标题
  • 因为浏览器只会抓取一个多了没用

示例代码:

<body>

<!--

    标题元素 - <h1> ~ <h6>元素

     * 默认效果是 <h1>显示最大 <h6>显示最小

        * 默认效果是由浏览器自带样式提供 可以通过CSS进行修改

     * <h1> ~ <h6> 每个标题元素是独占一行 并且是垂直排列

     * 在实际开发中 - 常用的标题元素 <h1> <h2> <h3>

     * 最重要的是 <h1> - 表示一级标题

        * 作用: 是有利于搜索引擎抓取 - 顺序是 <title> -关键字 - <h1>

        * 注意: 在一个HTML页面中最好只出现一个 <h1> 标题 (多了没用)

-->

<h1>一花一世界</h1>

<h2>一叶一孤城</h2>

<h3>娃哈哈</h3>

<h4>爽歪歪</h4>

<h5>加多宝</h5>

<h6>王老吉</h6>

</body>

段落元素

示例代码:

<body>

<p>一花一世界,一叶一孤城,阿里路亚,哈哈哈哈哈哈哈,个嘎嘎嘎嘎嘎嘎嘎嘎</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad aperiam asperiores consectetur ea, ex exercitationem explicabo harum illum laboriosam laudantium, libero necessitatibus, nulla provident quae quidem rerum soluta totam.</p>

</body>

效果分析图:

其他语义化元素

  1. < b >元素 - 表示粗体，指的是效果加粗 -> 目前多被CSS替代
  2. < i >元素 - 表示斜体，指的是效果倾斜 -> 目前多被CSS替代

  3. 上标与下标元素

    • < sup >上标元素
    • < sub >下标元素
  4. < hr >元素 - 表示水平线 -> 目前多被CSS替代

示例代码:

<body>

<p>Lorem ipsum <b>dolor sit amet</b>, consectetur adipisicing elit. Enim fuga <i>fugiat illo</i> repellat totam?</p>

<p>这就是上标元素 E=MC<sup>2</sup>公式。</p>

<p>这就是下标元素 H<sub>2</sub>O。</p>

<hr>

</body>

效果示例图:

换行元素

  • < br> 表示换行
  • 空元素 - 只有开始元素,灭有结束元素
  • < br> 是html5版本的写法
  • < br /> 是html4的写法 - 不推荐使用

空白

  • 注意:

    • 浏览器对空个的处理 - 又称空白折叠
    • 如果空格的数量是一个的话 - 那么浏览器会自动识别
    • 如果空格的数量大于一个或多个的话 - 浏览器只会识别一个
  • 总结: 空格多了没用,浏览器默认识别一个

示例代码:

<p>一          花 一 世 界</p>

效果显示图:

语义化元素

  • 备注: 不是太常用 - 因为在CSS中可以实现这些效果

示例代码:

<body>

<!-- <strong>元素 - 加粗元素(css替代) -->

<strong>一花</strong>一世界

<!-- <em>元素 - 强调元素(css替代) -->

<em>一叶</em>一孤城

<br>

<!-- <blockquote>引用元素 - 缩进效果 -->

<blockquote>

    <p>这个就是传说中的缩进效果</p>

</blockquote>

<!-- <q>引用元素 - 添加双引号 -->

<p>说明：<q>这个就是传说中的添加双引号。</q></p>

<br>

<!-- <cite>引文元素 - 斜体效果 -->

<p><cite>这是传说中的斜体</cite>那里是斜体这里不是</p>

<br>

<p><dfn>还是斜体</dfn>还是那里是斜体</p>

<br>

<address>

    <p>黑龙江在这里</p>

    <p>地址：这里是地址</p>

</address>

</body>

内容修改

  • 用法:
  • < del >表示删除线
  • < ins >改正线

示例代码:

<p>马上出错了,<del>删除在这里</del>,<ins>改正在这里</ins>,完美</p>

效果图:

字体系列

  • 备选字体系列 - 用户电脑中已安装的字体
  • 问题 - 必须选择使用用户电脑中存在的字体系列
  • 问题 - 一般存在的字体可选数量不多
  • 解决: 可以一次性指定多个字体系列 - 中间使用逗号分隔

示例代码:

<style>

        h1, p{

            /*

                字体系列 - font-family

                * 备选字体系列 - 用户电脑中已安装的字体

                  * 问题 - 必须选择使用用户电脑中存在的字体系列

                  * 问题 - 一般存在的字体可选数量不多

                * 解决: 可以一次性指定多个字体系列 - 中间使用逗号分隔

             */

            font-family: Consolas, "Comic Sans MS","Calibri Light";

        }

    </style>

</head>

<body>

<h1>一花一世界</h1>

<p>一叶一孤城</p>

</body>

字体大小

  • 字体大小分两个值:
  • 像素值
  • 百分比值 - 相对于浏览器页面默认字体大小(16px)
  • 注意: 一般不建议使用相对值,因为不知道相对值的大小 - 无法确定字体到底是多大!

字体加粗

  • 字体加粗 - 建议使用数字值 (原因跟字体大小相似)

font属性

  • font属性 - 必须是按顺序排列否则无效
  • 顺序是:
  • font-style(字的斜体) - font-weight(字体加粗) - font-size(字体大小) - font-family(字体类型)
font: bold italic large serif ;

文本装饰

<style>

        p {

           /* !* text-decoration提供下划线、上划线及删除线 */

            text-decoration: line-through lightcoral dashed;

            /*

                备注:

                 * 简写属性最好按顺序写

                 添加线的位置 - 线的颜色 - 线的样式

            !*

                text-decoration-line: 表示提供的下划线、上划线及删除线

                text-decoration-color: 表示线的颜色

                text-decoration-style: 表示线的样式

             *!*/

            /*

                下划线

            text-decoration-line: underline;

                线的颜色

            text-decoration-color: lightcoral;

                线的样式

            text-decoration-style: dashed;*/

        }

    </style>

</head>

<body>

<p>一花一世界</p>

</body>

行间距

  • 行间距就是设置每行之间的距离
  • 也可以称之为行高 - 可以实现垂直居中

示例代码:

    <style>

        span{

            line-height: 100px;

        }

        /*

            行间距可以说是行高 - 可以实现垂直居中

         */

    </style>

</head>

<body>

<span>一花一世界</span>

<br>

<span>一花一世界</span>

</body>

效果图分析:

字母间距和单词间距

  • 备注: 调整字母间距允许设置汉字之间的间距
  • 因为浏览器会把汉字默认成为字母

示例代码:

 <style>

        #d1{

            /* 调整字母间距 */

            letter-spacing: 20px;

        }

        #d2{

            /* 调整单词间距 */

            word-spacing: 20px;

        }

        #d3{

            /*

                注意: 调整字母间距允许设置汉字之间的间距

                 * 因为浏览器会把汉字默认成为字母

             */

            letter-spacing: 20px;

        }

    </style>

</head>

<body>

<p id="d1">woshidashuaige</p>

<p id="d2">one static style</p>

<p id="d3">亚古兽变身</p>

</body>

效果显示图:

水平方向对齐方式

  • 注意: 浏览器默认向左对齐

示例代码:

<style>

        /* 水平方向对齐方式默认 - 左对齐 */

        #p1 {

            /* 水平方向 - 向右对齐 */

            text-align: right;

        }

        #p2 {

            /* 水平居中对齐 */

            text-align: center;

        }

        #p3 {

            /* 两边对齐 */

            text-align: justify;

        }

    </style>

</head>

<body>

<p>花花世界</p>

<p id="p1">一花一世界</p>

<p id="p2">一叶一孤城</p>

<p id="p3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aperiam aut facere fugit ipsa iste laboriosam natus nulla, sapiente sint soluta tenetur voluptas voluptatem? Assumenda cupiditate ipsa laborum minus modi?</p>

</body>

效果显示图:

垂直方向对齐方式

  • 注意: 垂直方向对齐 - 是指图片的某个位置与文本对齐

示例代码:

    <style>

        /* 垂直方向对齐方式默认 - 底部对齐 */

        img {

            /* 设置图片以什么方式与文字对齐 */

            vertical-align: top;

        }

        /*

            垂直方向对齐 - 是指图片的某个位置与文本对齐

         */

    </style>

</head>

<body>

<p>Lorem ipsum <img src="imgs/frame_image.svg"> dolor sit amet, consectetur adipisicing elit. </p>

</body>

效果显示图:

文本缩进

  • text-indent(文本缩进)
  • 文本缩进效果只控制首行 - 使用像素值控制

示例代码:

<style>

        p{

            /*

                text-indent(文本缩进)

                 * 文本缩进效果只控制首行 - 使用像素值控制

             */

            text-indent: 40px;

        }

    </style>

效果显示图:

文本阴影

-注意: 文本阴影设置偏移量时需要水平和垂直同时设置否则无效
示例代码:

<style>

        h1{

            /*

                 设置文本阴影效果 - 关键参数

                 * 水平方向的偏移量 - 左和右

                   * 向左偏移 - 为负值

                   * 向右偏移 - 为正值

                 * 垂直方向的偏移量 - 上和下

                   * 向上偏移 - 为负值

                   * 向下偏移 - 为正值

                 * 模糊程度

                 * 阴影的颜色

                 注意：

                 * 要么不设置水平方向和垂直方向的偏移量

                 * 要么同时设置水平方向和垂直方向的偏移量

                 设置文本阴影的值顺序

                 1.水平方向偏移量

                 2.垂直方向偏移量

                 3.模糊程度

                 4.阴影颜色

              */

            text-shadow: 5px 5px 3px #00ffff;

        }

    </style>

</head>

<body>

<h1>一花一世界</h1>

</body>
  • 注意: 当需要多个阴影效果时中间用逗号隔开

示例代码:

text-shadow: 5px 5px #00FFFF,-5px -5px #33FF33;

效果显示图:

文本换行

  • word-break:break-all - 是强行将单词进行拆分
  • 注意: 这个属性只对英文有效

示例代码:

<style>

        p {

            /* 为了测试效果 */

            width: 100px;

            height: 100px;

            background-color: yellowgreen;

            /*

                * HTML的换行元素<br> - 人为换行(并不拆分单词)

                * CSS的overflow-wrap - 强行将单词进行拆分

             */

            overflow-wrap: break-word;

            /* 也表示强行换行(将单词进行拆分) */

            word-break: break-all;

        }

    </style>

</head>

<body>

<!--<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br> Alias id illum in labore laborum magni, modi non quod repudiandae tempora ullam unde! Cupiditate id ipsum maxime minus ratione? Minima, voluptates.</p>-->

<p>http://www.chinanews.com/gn/2018/07-18/8570713.shtml</p>

</body>

效果显示图:

嵌入Web字体

  • CSS3新增引入Web字体

    • 在当前工程中，导入指定字体文件
    • 当用户访问HTML页面时，加载指定的字体文件
    • 可以在HTML页面使用指定字体系列

示例代码:

<style>

        /*

            CSS3新增引入Web字体

            * 在当前工程中，导入指定字体文件

            * 当用户访问HTML页面时，加载指定的字体文件

            * 可以在HTML页面使用指定字体系列

         */

        /*

            @font-face是CSS的一种规则

            * 作用 - 用于引入Web(在线)字体

            * 语法结构

              @font-face {

                font-family: 指定当前Web字体系列的名称

                src: 指定当前Web字体文件的路径

              }

            不同浏览器识别的Web字体文件不同 - 全部提供

            * 问题：如何同时引入多个字体文件

            * 解决：多个字体文件路径之间使用逗号分隔

         */

        /* 只是引入和设置名称 - 不能直接用 */

        @font-face {

            /* 给当前Web字体设置名称 - 尽量不用中文 - 不要和系统字体名称重复 */

            font-family: FELIXTI;

            /* 引入Web字体路径 - 如果引入多个时可以省略一个引入路径 */

            src: url("font/FELIXTI.eot");

            /* 引入多个字体文件时之间用逗号隔开 */

            src: url("font/FELIXTI.eot") format("embedded-opentype"), url("font/FELIXTI.ttf") format("woff"), url("font/FELIXTI.woff") format("truetype"), url("font/FELIXTI.svg") format("svg");

        }

        h1 {

            /* 使用上面引入的Web字体 */

            font-family: FELIXTI;

        }

    </style>

</head>

<body>

<h1>yihuayishijie</h1>

</body>

代码分析图:

HTML与CSS中的文本个人分享的更多相关文章

  1. CSS中的文本属性

    本文总结一下CSS中关于文字的相关属性,最后给出实例. CSS基础文字属性 文字的基础属性主要包括:字体.颜色和文本.除去颜色color的属性外,字体和文本的相关属性可以权威参考: CSS 文本属性( ...

  2. CSS中使用文本阴影与元素阴影

    文本阴影介绍 在CSS中使用text-shadow属性设置文本阴影,该属性一共有4个属性值如:水平阴影.垂直阴影.(清晰度或模糊距离).阴影颜色. text-shadow属性值说明,在文本阴影实践中: ...

  3. CSS中链接文本为图片时的问题（塌陷、对应的图片建立倒角的问题）

    我在做Javascript DOM编程艺术的时候,在12章自己做练习时遇到了一个问题,<a>的内容<img>从<a>的盒子中溢出.代码如下: <a href= ...

  4. HTML与CSS中的定位个人分享

    定位 static - 默认值 (几乎不用,了解就可以) absolute - 绝对定位,不为元素预留空间,脱离文档流: 如果当前元素的父级元素是<body>元素的话 -> 是相对于 ...

  5. css中一些文本属性的用法

    代码 /* text-transform用法 */ .p1 { /* 默认值 */ text-transform: none; } .p2 { /* 每个单词的首字母大写 */ text-transf ...

  6. 14 ,CSS 文字与文本

    1.CSS 中长度与颜色 2.CSS 中的文字属性 3.CSS 中的文本属性 14.1 CSS 中长度与颜色 长度单位 说明 in 英寸 cm 公分 mm 公里 cm 以目前字体高度为单位 ex 以小 ...

  7. 【CSS学习】--- 文本样式

    一.前言 CSS文本属性可以定义文本的外观.通过文本属性,可以定义文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. CSS常用的文本属性目录: text-align 文本对齐属性 te ...

  8. CSS中常见的6种文本样式

    前面的话 CSS文本样式是相对于内容进行的样式修饰.由于在层叠关系中,内容要高于背景.所以文本样式相对而言更加重要.有些人对文本和字体样式之间的不同不太了解,简单地讲,文本是内容,而字体则用于显示这个 ...

  9. css中的字体及文本相关属性

    css中的字体及文本相关属性 1.字体相关属性 字体主要可以设置color.font-family.font-size.font-size-adjust.font-stretch.font-style ...

随机推荐

  1. django中orm多表查询，减少数据库查询操作

    .select_related()   的使用

  2. js 获取屏幕宽高

    网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offset ...

  3. 20191103 《Spring5高级编程》笔记-第4章

    第4章 详述Spring配置和Spring Boot 4.2 管理bean生命周期 通常,有两个生命周期事件与bean特别相关:post-initialization和pre-destruction. ...

  4. Leveldb源码分析--1

    coming from http://blog.csdn.net/sparkliang/article/details/8567602 [前言:看了一点oceanbase,没有意志力继续坚持下去了,暂 ...

  5. DB2创建库 数据恢复

    例:数据库:PRODB2用户 :DB2ADMIN/DB2ADMIN备份库路径:D:/bank 一.恢复数据库1.启动数据库运行->db2cmd->db2Db2=>start db m ...

  6. Java学习day8面向对象编程2-类的属性和方法

    一.类的属性 1.语法格式 修饰符 类型 属性名 = 初值 说明:修饰符private:该属性只能由该类的方法使用.在同一类内可见.使用对象:变量.方法. 注意:不能修饰类(外部类)    修饰符pu ...

  7. Python学习-第三天-面向对象编程基础

    Python学习-第三天-面向对象编程基础 类和对象 简单的说,类是对象的蓝图和模板,而对象是类的实例.这个解释虽然有点像用概念在解释概念,但是从这句话我们至少可以看出,类是抽象的概念,而对象是具体的 ...

  8. 洛谷 P1108 低价购买（LIS，统计方案数）

    传送门 解题思路 看第一个要求,很显然是求最长下降子序列,和LIS几乎一样,很简单,再看第二个问号,求最长下降子序列的方案数??这怎么求? 注意:当二种方案“看起来一样”时(就是说它们构成的价格队列一 ...

  9. spark浅谈(1):RDD

    一.弹性分布式数据集 1.弹性分布式数据集(RDD)是spark数据结构的基础.它是一个不可变的分布式对象的集合,RDD中的每个数据集都被划分为一个个逻辑分区,每个分区可以在集群上的不同节点上进行计算 ...

  10. 帝国CMS自定义页面的添加与目录式链接的处理

    需求: 1.将某一本地前端自定义页面模板,导入到帝国系统,应用到网站 2.将导入的页面在站点中打开为目录式链接 www.abc.com/softlink/ 环境: 1.windows服务器 2.帝国C ...