HTML+CSS 语义化+文本相关属性

最新推荐文章于 2023-07-08 10:46:36 发布

玖商

最新推荐文章于 2023-07-08 10:46:36 发布

阅读量144

点赞数

分类专栏： HTML # css3 文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_58139900/article/details/120338957

版权

HTML 同时被 2 个专栏收录

52 篇文章 0 订阅

订阅专栏

css3

39 篇文章 0 订阅

订阅专栏

HTML语义化（谈谈你对HTML语义化理解-从以下两方面阐述）

垂直对齐属性(图文对齐上)vertical-align

HTML语义化（谈谈你对HTML语义化理解-从以下两方面阐述）

标签：div,span ul,ol,h1,em,strong,ins ,del

什么是语义化

语义化是指用合理的HTML标记以及其特有的属性去格式化文档内容。（例如标题用 h1-h6、段落用 p 标签，合理得给图片添加alt属性等）

语义化的好处（为什么要语义化）

在没有 CSS 的情况下，页面也能呈现出很好地内容结构。
使代码更具【可读性】，便于团队开发和维护。
有利于 SEO搜索引擎优化（和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息。爬虫依赖于语义化标签来确定上下文和各个关键字的权重）。
有利于【用户体验】（例如：title、label 标签、alt属性的灵活运用）

css字体，文本属性

学习目标

熟练掌握css常用文本属性
熟练掌握css常用字体属性
能够说出颜色的常用表示方法

font-family

作用：设置文本的字体系列
语法：
font-family:字体名称

常用值：

一个字体名称或系列名称（介绍常用字体名称、字体系列）

微软雅黑 Microsoft YaHei
宋体 simsun
黑体 HeiTi
楷体 KaiTi

多个字体名称

逗号分开如果浏览器不支持第一个字体，则会尝试下一个（回退机制）

.box{
   /*font-family:"微软雅黑","宋体";*/
    /*font-family:"宋体","微软雅黑"; *//*与上一个相比产生的效果不同，谁在前使用哪一个*/
    font-family:"微软雅黑abc","宋体";  /*第一个任意改写一个系统不存在的字体，会按照第二个字体显示*/
}

注意如果字体名称包含空格、汉字、特殊字符，必须加引号。

.box{font-family: "Microsoft YaHei";}

 字体类型 
         font-family:'Microsoft YaHei',"5b8b4f53",'黑体','楷体';
         规则： 
            1. 包含中英文字体 英文字体在前，中文字体写在后面
            2. 多个字体以逗号隔开 中英文字体都提供几个 备选项
            3. 中文字体 那么字体名字不要写中文！！ 会乱码 
            写字体的英文名称或者是字体的编码名称
            4. 字体类型是有两个英文单词或者编码呈现时要加"" or ''

sans-serif不是字体类型它是字体系列

字体两个系列：衬线serif 无衬线 sans-serif

字体大小font-size

作用：设置字体的大小

语法：font-size:值

常用值：
- 长度值（通常是像素px）
- 百分比（相对于父元素计算）

em
- 相对单位
- 如果用于字号，相当于父元素字号计算，如果用于其它属性，相对于当前元素的字号
大多数浏览器的默认值字号：16px

   网页单位

          绝对单位: px

          相对单位: % / rem /em

          % ：

           宽高的% 参考的是父盒子宽高的值

           行高的% 参考的是字体大小的值

          rem: 相对于html根元素的字体大小值

参考的是自身的字体大小或者是父盒子继承下来的字体大小