文本

标题元素

  • 注意: 在一个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. 练习2：python-把excel表格中某张表的内容导入sqlite

    前言:最新需要用到大批量的数据,在excel造好数据之后,存储在数据库库中,方便调用数据,于是就想着用python语言写一下这个过程 python有个openpyxl的模块,可以直接用来对于excel ...

  2. C++实现,拓展中国剩余定理——解同余方程组(理论证明和代码实现)

    拓展中国剩余定理 前言 记得半年前还写过关于拓展中国剩余定理的博客...不过那时对其理解还不是比较深刻,写的也比较乱. 于是趁学校复习之机,再来重温一下拓展中国剩余定理(以下简称ExCRT) 记得半年 ...

  3. 毕业之后de经历

    毕业之后 2016年7月,我大学毕业了.7月3号到7月6号,我陆续用我的小行李箱,在半夜12点左右,把我的生活用品拉出宿舍,大汗淋漓之后,我就在晚上12点多,找个奶茶店买一杯芒果冰沙.白天要去厦门的一 ...

  4. [常用类]Number & Math 类（转载）

    下面的表中列出的是 Number & Math 类常用的一些方法: 序号 方法与描述 1 xxxValue() 将 Number 对象转换为xxx数据类型的值并返回. 2 compareTo( ...

  5. 洛谷 - P4567 - 文本编辑器 - 无旋Treap

    https://www.luogu.org/problem/P4567 事实证明无旋Treap是不是不可能会比Splay快? #include<bits/stdc++.h> using n ...

  6. VISTA Enhancer Browser

    微信公众号:生物信息学起步如果觉得对你有帮助,欢迎关注/转发/分享[1] 内容目录 1.目的2.实验数据2.1 候选增强子识别2.2 转基因小鼠分析2.3 注释3.搜索数据库3.1 概括3.2 高级搜 ...

  7. 手写符合Promise/A+规范的Promise

    const PENDING = "pending"; const RESOLVED = "resolved"; const REJECTED = "r ...

  8. Tomcat支持SSL加密网站

    配置Tomcat,以支持SSL对网站加密,关键性配置如下: 思路:在tomcat服务器web1上做相应配置->客户端测试. 1.创建加密用的私钥和证书文件 [root@web1 ~]# keyt ...

  9. unittest单元测试框架总结（转）

    unittest单元测试框架不仅可以适用于单元测试,还可以适用WEB自动化测试用例的开发与执行,该测试框架可组织执行测试用例,并且提供了丰富的断言方法,判断测试用例是否通过,最终生成测试结果.今天笔者 ...

  10. Springboot aop使用

    package com.jxd.Boot.aspect; import org.aspectj.lang.JoinPoint;import org.aspectj.lang.Signature;imp ...