文本

标题元素

注意: 在一个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>

效果分析图:

其他语义化元素

< b >元素 - 表示粗体，指的是效果加粗 -> 目前多被CSS替代
< i >元素 - 表示斜体，指的是效果倾斜 -> 目前多被CSS替代
上标与下标元素
- < sup >上标元素
- < sub >下标元素
< 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>

字体加粗

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

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中的文本个人分享的更多相关文章

CSS中的文本属性
本文总结一下CSS中关于文字的相关属性,最后给出实例. CSS基础文字属性文字的基础属性主要包括:字体.颜色和文本.除去颜色color的属性外,字体和文本的相关属性可以权威参考: CSS 文本属性( ...
CSS中使用文本阴影与元素阴影
文本阴影介绍在CSS中使用text-shadow属性设置文本阴影,该属性一共有4个属性值如:水平阴影.垂直阴影.(清晰度或模糊距离).阴影颜色. text-shadow属性值说明,在文本阴影实践中: ...
CSS中链接文本为图片时的问题（塌陷、对应的图片建立倒角的问题）
我在做Javascript DOM编程艺术的时候,在12章自己做练习时遇到了一个问题,<a>的内容<img>从<a>的盒子中溢出.代码如下: <a href= ...
HTML与CSS中的定位个人分享
定位 static - 默认值 (几乎不用,了解就可以) absolute - 绝对定位,不为元素预留空间,脱离文档流: 如果当前元素的父级元素是<body>元素的话 -> 是相对于 ...
css中一些文本属性的用法
代码 /* text-transform用法 */ .p1 { /* 默认值 */ text-transform: none; } .p2 { /* 每个单词的首字母大写 */ text-transf ...
14 ,CSS 文字与文本
1.CSS 中长度与颜色 2.CSS 中的文字属性 3.CSS 中的文本属性 14.1 CSS 中长度与颜色长度单位说明 in 英寸 cm 公分 mm 公里 cm 以目前字体高度为单位 ex 以小 ...
【CSS学习】--- 文本样式
一.前言 CSS文本属性可以定义文本的外观.通过文本属性,可以定义文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. CSS常用的文本属性目录: text-align 文本对齐属性 te ...
CSS中常见的6种文本样式
前面的话 CSS文本样式是相对于内容进行的样式修饰.由于在层叠关系中,内容要高于背景.所以文本样式相对而言更加重要.有些人对文本和字体样式之间的不同不太了解,简单地讲,文本是内容,而字体则用于显示这个 ...
css中的字体及文本相关属性
css中的字体及文本相关属性 1.字体相关属性字体主要可以设置color.font-family.font-size.font-size-adjust.font-stretch.font-style ...

随机推荐

Java课堂笔记（三）：抽象类和接口
在面向对象一文中,我们说了多态的一个功能是将“做什么”和“怎么做”分离开来,所采用的方法是将不同的具体实现放在不同的子类中,然后向接口中传入一个父类对象的引用.而本篇博客要说的内容则为接口(此处&qu ...
Policy Improvement and Policy Iteration
From the last post, we know how to evaluate a policy. But that's not enough, because the purpose of ...
web 前端2 CSS
CSS CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 一 css的四种引入方式 1.行内式 ...
vue项目多文件上传并显示在页面上
<template> <label for="file" class=" btn btn-default" style="borde ...
TCP通信 - 服务器开启多线程与read()导致服务器阻塞问题
TCP通信的文件上传案例本地流:客户端和服务器和本地硬盘进行读写,需要使用自己创建的字节流网络流:客户端和服务器之间读写,必须使用Socket中提供的字节流对象客户端工作:读取本地文件,上传到服 ...
exsi中使用vSphere客户端复制克隆虚拟机
免费的VMWare ESXi5.5非常强大,使用ESXi经常会遇到这样的问题,我需要建立多个虚拟机,系统一个一个安装很麻烦.VMware ESXi.VMware vCenter Server 和 vS ...
Java集合概括总结及集合选用
Collection 1. List ArrayList :Object数组,是一个数组队列,相当于动态数组.它由数组实现,随机访问效率高,随机插入.随机删除效率低. LinkedList :是一个双 ...
1.Dockerfile
1.docker build docker build 这个动作有一个context 上下文的概念 docker build -f /path/to/a/Dockerfile .这个动作通过 -f ...
在a标签中使用了onclick修改样式之后a:hover失效
是因为优先级的原因造成,使用!important修改优先级. 如修改成: .button1:hover { color: #FFF !important; ...
采用pacemaker+corosync实现postgresql双机热备、高可用方案
环境说明参照上章已完成postgresql流复制配置,并关闭postgres服务. su - postgres pg_ctl -D /data/postgresql/data/ stop -m fa ...

HTML与CSS中的文本个人分享

文本

标题元素

段落元素

其他语义化元素

换行元素

空白

语义化元素

内容修改

字体系列

字体大小

字体加粗

font属性

文本装饰

行间距

字母间距和单词间距

水平方向对齐方式

垂直方向对齐方式

文本缩进

文本阴影

文本换行

嵌入Web字体

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

随机推荐

热门专题