前端学习笔记(三) - 文本及列表标签、css基本长度颜色单位及文本和字体样式

---

1. 文本标签：

   标签	作用(语义)
   	表示一段内容中的着重点,常为语气上的强调，显示为斜体
   	表示内容的强调，显示为粗体
   	没有语义上的强调，显示斜体
   	没有语义的强调，显示粗体
   	表示一些细则一类的内容，显示字号略小
   	表示参考的内容，例如书名,《html基础》
   	表示一个短的引用
   	表示一个块引用，是一个块元素
   	表示上标，例如 22
   	表示下标，例如H2O
   	表示删除的内容，会添加一个删除线
   	表示添加的内容，会添加下划线
   	表示一个顶格式标签，会将代码中的格式保留下来，不会忽略多个空格
   	表示一段代码

2. 列表标签：

   标签	作用(语义)
   	块元素，用来创建一个无序列表，通过属性type可以改变项目符号
   	块元素，用来创建一个有序列表，同 ,可通过属性type可以改变项目符号
   	块元素，用来在 和 内创建列表项
   	块元素，定义列表，用来对一些词汇或内容进行定义， 有两个子标签， 表是被定义的内容， 表示对定义内容的描述

   列表之间可以相互嵌套

3. css长度单位：

   类型	解释
   px	像素，一个像素就是屏幕中的一个实际的像素点
   %	百分比，表示相对于父元素的百分比
   em	和百分比类似，但是是相对于当前元素的字体大小计算的，当设置字体相关样式的时候经常使用

4. css颜色单位：

   类型	解释
   颜色单词	red,blue可以使用表示颜色的单词直接设置颜色
   RGB值	rgb(红色浓度，绿色浓度，蓝色浓度)，浓度在0-255之间，也可用百分数表示，red：rgb(255,0,0)
   十六进制RGB	#红色绿色蓝色，00-ff,red:#ff0000,两位重复的颜色可以简写为一个如red:#f00

5. 网页字体分类：

   • serif (衬线字体)
   • sans-serif (非衬线字体)
   • monospace (等宽字体)
   • cursive (草书)
   • fantasy (虚幻字体)

   可以讲字体设置为这些写大的分类，当设置为大的分类之后，浏览器会自动选择指定的字体并应用样式，一般会将字体的大分类设置为font-family中的最后一个字体

6. css行高：在css中不能直接设置行间距，通过行高调整行间距，行高属性line-height,文字会默认在行高中垂直居中，行间距 = 行高 - 字体大小，line-height的值可以设置为px，%,数值(表示为字体大小的相应倍数)，实用技巧：可以使用行高与父元素相同而实现文本在父元素中居中

7. css字体样式：

       .p1{
           
           color:blue;
           
           
           font-size:30px;
           
           
           font-family: 微软雅黑；
           
           
           font-family: arial, 微软雅黑, sans-serif；
           
           
           font-weight: bold;
           
           
           font-variant: small-caps;
       }
   

   可通过以上方式设置字体样式，还可以如下

       .p2{
           
           font: italic bold samll-caps 60px/80px "微软雅黑";
       }
   

8. css文本样式：

       .p2{
           
           
           text-transform: capitalize;
   
           
           
           text-decoration:underline；
   
           
           letter-spacing:5px;
   
           
           word-spacing:10px;
   
           
           
           text-align:justify;
   
           
           text-indent:2em;
       }   
   

   ---