版权声明:一起学习,一起进步,一起coding https://blog.csdn.net/sunshine2285/article/details/88927546
-
文本标签:
标签 作用(语义) <em></em>
表示一段内容中的着重点,常为语气上的强调,显示为斜体 <strong>
表示内容的强调,显示为粗体 <i></i>
没有语义上的强调,显示斜体 <b></b>
没有语义的强调,显示粗体 <samll>
表示一些细则一类的内容,显示字号略小 <cite>
表示参考的内容,例如书名,《html基础》 <q></q>
表示一个短的 引用
<blockquote>
表示一个块引用,是一个块元素 <sup>
表示上标,例如 22 <sub>
表示下标,例如H2O <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; }