HTML与CSS中的文本个人分享

MartinHan 发布于2019-08-29 16:32 / 726人阅读

摘要：文本标题元素注意在一个页面中最好只使用一个标题因为浏览器只会抓取一个多了没用示例代码标题元素元素默认效果是显示最大显示最小默认效果是由浏览器自带样式提供可以通过进行修改每个标题元素是独占一行并且是垂直排列在实际开发中常用的标题元素最

文本 标题元素

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

效果分析图:

其他语义化元素

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

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

上标与下标元素

上标元素

下标元素

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

示例代码:

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

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

这就是下标元素 H₂O。

效果示例图:

换行元素

表示换行

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

是html5版本的写法

是html4的写法 - 不推荐使用

空白

注意:

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

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

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

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

示例代码:

一花一世界

效果显示图:

语义化元素

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

示例代码:

一花一世界一叶一孤城

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

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

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

还是斜体还是那里是斜体

黑龙江在这里

地址：这里是地址

内容修改

用法:

< del >表示删除线

< ins >改正线

示例代码:

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

效果图:

字体系列

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

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

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

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

示例代码:

一花一世界

一叶一孤城

字体大小

字体大小分两个值:

像素值

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

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

字体加粗

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

font属性

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

顺序是:

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

font: bold italic large serif ;

文本装饰

一花一世界

行间距

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

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

示例代码:

    


一花一世界


一花一世界

效果图分析:

字母间距和单词间距

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

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

示例代码:

 


woshidashuaige
one static style
亚古兽变身

效果显示图:

水平方向对齐方式

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

示例代码:

花花世界

一花一世界

一叶一孤城

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?

效果显示图:

垂直方向对齐方式

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

示例代码:

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

效果显示图:

文本缩进

text-indent(文本缩进)

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

示例代码:

效果显示图:

文本阴影

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




一花一世界

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

示例代码:

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

效果显示图:

文本换行

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

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

示例代码:

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

效果显示图:

嵌入Web字体

CSS3新增引入Web字体

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

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

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

示例代码:




yihuayishijie

代码分析图:

云服务器 GPU云服务器 html文本中的空格 css与html html与css html与css区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113816.html

HTML与CSS中的文本个人分享

摘要：文本标题元素注意在一个页面中最好只使用一个标题因为浏览器只会抓取一个多了没用示例代码标题元素元素默认效果是显示最大显示最小默认效果是由浏览器自带样式提供可以通过进行修改每个标题元素是独占一行并且是垂直排列在实际开发中常用的标题元素最文本标题元素注意: 在一个HTML页面中最好只使用一个标题因为浏览器只会抓取一个多了没用示例代码: 一花一世界一叶一孤城娃哈哈爽歪歪...

iliyaku 2019-08-02 11:21 评论0 收藏0
HTML与CSS中的,链接与图像个人分享

摘要：链接与图像链接元素元素表示链接元素作用从当前页面跳转到指定页面属性设置指定跳转页面的路径路径分类相对路径相对于当前页面的路径绝对路径访问的路径地址不变化示例代码相对路径的链接文本阴影案例他是链接绝对路径的链接他也链接与图像链接元素 < a >元素 - 表示链接元素作用 - 从当前html页面跳转到指定html页面属性 href - 设置指定跳转html页面的路径 ...

cocopeak 2019-08-29 16:34 评论0 收藏0
HTML与CSS中的,链接与图像个人分享

摘要：链接与图像链接元素元素表示链接元素作用从当前页面跳转到指定页面属性设置指定跳转页面的路径路径分类相对路径相对于当前页面的路径绝对路径访问的路径地址不变化示例代码相对路径的链接文本阴影案例他是链接绝对路径的链接他也链接与图像链接元素 < a >元素 - 表示链接元素作用 - 从当前html页面跳转到指定html页面属性 href - 设置指定跳转html页面的路径 ...

elisa.yang 2019-08-02 11:21 评论0 收藏0
HTML-CSS-JS

摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

mikasa 2019-08-01 18:18 评论0 收藏0
HTML-CSS-JS

摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

李世赞 2019-08-29 14:08 评论0 收藏0