html 与css 文档,HTML与CSS中的文本个人分享

文本

标题元素

注意: 在一个HTML页面中最好只使用一个

标题

因为浏览器只会抓取一个多了没用

示例代码:

一花一世界

一叶一孤城

娃哈哈

爽歪歪

加多宝

王老吉

段落元素

示例代码:

一花一世界,一叶一孤城,阿里路亚,哈哈哈哈哈哈哈,个嘎嘎嘎嘎嘎嘎嘎嘎

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.

效果分析图:

其他语义化元素

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

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

上标与下标元素

< sup >上标元素

< sub >下标元素

< hr >元素 - 表示水平线 -> 目前多被CSS替代

示例代码:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim fuga fugiat illo repellat totam?

这就是上标元素 E=MC²公式。

这就是下标元素 H₂O。

---

效果示例图:

换行元素

< br> 表示换行

空元素 - 只有开始元素,灭有结束元素

< br> 是html5版本的写法

< br /> 是html4的写法 - 不推荐使用

空白

注意:

浏览器对空个的处理 - 又称空白折叠

如果空格的数量是一个的话 - 那么浏览器会自动识别

如果空格的数量大于一个或多个的话 - 浏览器只会识别一个

总结: 空格多了没用,浏览器默认识别一个

示例代码:

一 花 一 世 界

效果显示图:

语义化元素

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

示例代码:

一花一世界

一叶一孤城

这个就是传说中的缩进效果

说明：这个就是传说中的添加双引号。

这是传说中的斜体那里是斜体这里不是

还是斜体还是那里是斜体

黑龙江在这里

地址：这里是地址

内容修改

用法:

< del >表示删除线

< ins >改正线

示例代码:

马上出错了,删除在这里,改正在这里,完美

效果图:

字体系列

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

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

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

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

示例代码:

h1, p{

/*

字体系列 - font-family

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

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

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

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

*/

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

}

一花一世界

一叶一孤城

字体大小

字体大小分两个值:

像素值

百分比值 - 相对于浏览器页面默认字体大小(16px)

注意: 一般不建议使用相对值,因为不知道相对值的大小 - 无法确定字体到底是多大!

字体加粗

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

font属性

font属性 - 必须是按顺序排列否则无效

顺序是:

font-style(字的斜体) - font-weight(字体加粗) - font-size(字体大小) - font-family(字体类型)

font: bold italic large serif ;

文本装饰

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;*/

}

一花一世界

行间距

行间距就是设置每行之间的距离

也可以称之为行高 - 可以实现垂直居中

示例代码:

span{

line-height: 100px;

}

/*

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

*/

一花一世界

一花一世界

效果图分析:

字母间距和单词间距

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

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

示例代码:

#d1{

/* 调整字母间距 */

letter-spacing: 20px;

}

#d2{

/* 调整单词间距 */

word-spacing: 20px;

}

#d3{

/*

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

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

*/

letter-spacing: 20px;

}

woshidashuaige

one static style

亚古兽变身

效果显示图:

水平方向对齐方式

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

示例代码:

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

#p1 {

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

text-align: right;

}

#p2 {

/* 水平居中对齐 */

text-align: center;

}

#p3 {

/* 两边对齐 */

text-align: justify;

}

花花世界

一花一世界

一叶一孤城

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?

效果显示图:

垂直方向对齐方式

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

示例代码:

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

img {

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

vertical-align: top;

}

/*

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

*/

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

效果显示图:

文本缩进

text-indent(文本缩进)

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

示例代码:

p{

/*

text-indent(文本缩进)

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

*/

text-indent: 40px;

}

效果显示图:

文本阴影

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

示例代码:

h1{

/*

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

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

* 向左偏移 - 为负值

* 向右偏移 - 为正值

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

* 向上偏移 - 为负值

* 向下偏移 - 为正值

* 模糊程度

* 阴影的颜色

注意：

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

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

设置文本阴影的值顺序

1.水平方向偏移量

2.垂直方向偏移量

3.模糊程度

4.阴影颜色

*/

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

}

一花一世界

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

示例代码:

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

效果显示图:

文本换行

word-break:break-all - 是强行将单词进行拆分

注意: 这个属性只对英文有效

示例代码:

p {

/* 为了测试效果 */

width: 100px;

height: 100px;

background-color: yellowgreen;

/*

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

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

*/

overflow-wrap: break-word;

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

word-break: break-all;

}

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

效果显示图:

嵌入Web字体

CSS3新增引入Web字体

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

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

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

示例代码:

/*

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;

}

yihuayishijie

代码分析图: