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

文本标签：

标签	作用(语义)
`<em></em>`	表示一段内容中的着重点,常为语气上的强调，显示为斜体
`<strong>`	表示内容的强调，显示为粗体
`<i></i>`	没有语义上的强调，显示斜体
`<b></b>`	没有语义的强调，显示粗体
`<samll>`	表示一些细则一类的内容，显示字号略小
`<cite>`	表示参考的内容，例如书名,《html基础》
`<q></q>`	表示一个短的引用
`<blockquote>`	表示一个块引用，是一个块元素
`<sup>`	表示上标，例如 2²
`<sub>`	表示下标，例如H₂O
`<del>`	表示删除的内容，会添加一个~~删除线~~
`<ins>`	表示添加的内容，会添加下划线
`<pre>`	表示一个顶格式标签，会将代码中的格式保留下来，不会忽略多个空格
`<code>`	表示一段代码

列表标签：

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

列表之间可以相互嵌套

css长度单位：

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

css颜色单位：

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

网页字体分类：
- serif (衬线字体)
- sans-serif (非衬线字体)
- monospace (等宽字体)
- cursive (草书)
- fantasy (虚幻字体)
可以讲字体设置为这些写大的分类，当设置为大的分类之后，浏览器会自动选择指定的字体并应用样式，一般会将字体的大分类设置为font-family中的最后一个字体
css行高：在css中不能直接设置行间距，通过行高调整行间距，行高属性line-height,文字会默认在行高中垂直居中，行间距 = 行高 - 字体大小，line-height的值可以设置为px，%,数值(表示为字体大小的相应倍数)，实用技巧：可以使用行高与父元素相同而实现文本在父元素中居中

css字体样式：

    .p1{
        <!-- 设置字体颜色 -->
        color:blue;
        
        <!-- 设置文字大小，浏览器默认16px -->
        font-size:30px;
        
        <!-- 指定文字字体，当采用某种字体是，若出现不支持的字符，则使用相关字符的默认字体 -->
        font-family: 微软雅黑；
        
        <!-- 可以使用多个字体，若遇到前一个字体不支持的字符，则后移使用下一个字体 -->
        font-family: arial, 微软雅黑, sans-serif；
        
        <!-- 设置文字是否正常显示，还是斜体(italic)或者倾斜(oblique),一般只使用(italic) --1. **css字体文本样式**：
        font-style: ita1. **css字体文本样式**：;
        
        <!-- 设置文字是否加粗，也可以指定100-900之间的9个值，根据计算机字体库是否有相应1. **css字体文本样式**：的加粗字体 -->
        font-weight: bold;
        
        <!-- 设置文本中小写字母以小型大写字母显示 -->
        font-variant: small-caps;
    }

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

    .p2{
        <!-- 字体类别和大小必须写，且写在最后两个位置，字体大小后的`/`之后表示的是行高,不写则会采用默认值，其它样式写在前边，没有顺序要求 -->
        font: italic bold samll-caps 60px/80px "微软雅黑";
    }

css文本样式：

    .p2{
        <!-- 设置文本的大小写 -->
        <!-- none-默认值，不做任何变化； capitalize-单词的首字母大写； upercase/lowercase-所有字母都大写、小写 -->
        text-transform: capitalize;

        <!-- 设置穿过文字的线条 -->
        <!-- 可选属性：underline，overline，line-through -->
        text-decoration:underline；

        <!-- 设置字符与字符之间的间距 -->
        letter-spacing:5px;

        <!-- 设置单词与单词之间(以空格区分)的间距 -->
        word-spacing:10px;

        <!-- 设置文本对齐方式 -->
        <!-- 可选值：left,right,center(居中对齐),justify(两端对齐) -->
        text-align:justify;

        <!-- 设置首行缩进,正值向左移动，负值向右移动 -->
        text-indent:2em;
    }

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

猜你喜欢