文本

标题元素

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

效果分析图:
图片描述

其他语义化元素

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

效果示例图:
图片描述

换行元素

表示换行
空元素 - 只有开始元素,灭有结束元素
是html5版本的写法
是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中设置文本框颜色发布时间:2021-04-29 15:33:54 来源:亿速云阅读:72 作者:Leah 如何在css中设置文本框颜色?针对这个问题,这篇文章详细介绍了相对应的分析和解 ...
web前端培训：CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
html表格输入框怎么左移动,当我向CSS中的文本框添加边框时，HTML表单输入会移动...
我想在登录表单上的输入字段中添加边框,但是当我添加边框时:1px纯黑色;到#登录表单输入,然后所有的文本框移出位置.当我向CSS中的文本框添加边框时,HTML表单输入会移动当用户输入不正确的凭据到表 ...
html文本阴影水平垂直,CSS中使用文本阴影与元素阴影效果
文本阴影介绍在CSS中使用text-shadow属性设置文本阴影,该属性一共有4个属性值如:水平阴影.垂直阴影.(清晰度或模糊距离).阴影颜色. text-shadow属性值说明,在文本阴影实践中: ...
HTML 与 CSS 中的文本
HTML 与 CSS 中的文本结构化元素结构化元素就是指 HTML 元素中具有明确含义和作用的元素,例如 `` 元素表示段落.相对于 HTML 4.01 版本而言,HTML5 版本新增了一系列结构 ...
css中文本指什么,CSS中的文本属性
本文总结一下CSS中关于文字的相关属性,最后给出实例. CSS基础文字属性文字的基础属性主要包括:字体.颜色和文本.除去颜色color的属性外,字体和文本的相关属性可以权威参考: CSS 文本属性( ...
html中文字空心如何设置,css 中字体文本小诀窍
本篇介绍 css 几种文本修饰的案例. 1.现实中的文字效果 1.1 凸版印刷效果背景知识:text-shadow 凸版印刷需要考虑两种情况:浅底深色字和深色浅底字浅底深色字代码示例凸版印刷效果 ...
css中文本指什么,CSS中的文本属性学习指南
文本缩进 text-indent 值:长度值(正.负均可) 示例:p {text-indent:3em;} 字符间距 letter-spacing 值:任何长度值(正.负值均可). 示例:p {let ...
CSS 中实现文本超出部分省略的效果
CSS 中使用 text overflow: 可以设置文字超出部分的显示效果,其中属性值 ellipsis 可将超出部分的文字显示为省略号. 在 Flex 布局下为弹性盒子设置文字省略效果时需注意以下 ...
CSS进阶（17）—— CSS中的文本处理（上）
CSS能够在众多的布局标准中脱颖而出的制胜手段就是其强大的文本处理能力,比如最"简单"的盒子边缘文字即将超出就自动换行的能力在CSS流的概念里几乎是天生的,并逐渐成为了行业内的&q ...

HTML与CSS中的文本个人分享

文本

标题元素

段落元素

其他语义化元素

换行元素

空白

语义化元素

内容修改

字体系列

字体大小

字体加粗

font属性

文本装饰

行间距

字母间距和单词间距

水平方向对齐方式

垂直方向对齐方式

文本缩进

文本阴影

文本换行

嵌入Web字体

HTML与CSS中的文本个人分享相关推荐

最新文章

热门文章