行内： <div style="color:red;"></div>
内嵌<style>div{background-color:red;}</style>
外部引用
<link rel="stylesheet"(样式表) href="./xxx.css">
xxx.css文件： div{color:red}
CSS文字属性
color : #999999; /*文字颜色*/
font-family : 宋体,sans-serif; /*文字字体*/
font-size : 9pt; /*文字大小*/
font-style:itelic; /*文字斜体*/
font-variant:small-caps; /*小字体*/
letter-spacing : 1pt; /*字间距离*/
line-height : 200%; /*设置行高*/
font-weight:bold; /*文字粗体*/
vertical-align:sub; /*下标字*/
vertical-align:super; /*上标字*/
text-decoration:line-through; /*加删除线*/
text-decoration: overline; /*加顶线*/
text-decoration:underline; /*加下划线*/
text-decoration:none; /*无修饰线*/
text-transform : capitalize; /*首字大写*/
text-transform : uppercase; /*英文大写*/
text-transform : lowercase; /*英文小写*/
text-align:right; /*文字右对齐*/
text-align:left; /*文字左对齐*/
text-align:center; /*内部元素居中*/
text-align:justify; /*文字分散对齐*/
vertical-align:top; /*垂直对齐该行元素内的最大元素顶部/
vertical-align:bottom; /*垂直对齐该行元素内的最大元素的底部*/
vertical-align:middle; /*垂直居中对齐*/
vertical-align:text-top; /*垂直对齐父元素的顶部*/
vertical-align:text-bottom; /*垂直对齐父元素的底部*/
top、bottom、text-top、text-bottom区别：
<p style="font-size: 15px; text-decoration: overline ;">一个
<top>top对齐</top>
<span style="font-size: 30px; text-decoration: overline;">方式</span>
</p>
<p style="font-size: 15px; text-decoration: overline ;">一个
<ttop>text-top对齐</ttop>
<span style="font-size: 30px; text-decoration: overline;">方式</span>
</p>
<p style="font-size: 15px; text-decoration: overline ;">一个
<bottom>bottom对齐</bottom>
<span style="font-size: 30px; text-decoration: overline;">方式</span>
</p>
<p style="font-size: 15px; text-decoration: overline ;">一个
<tbottom>text-bottom对齐</tbottom>
<span style="font-size: 30px; text-decoration: overline;">方式</span>
</p>
运行结果：
overflow:hidden;//隐藏文本溢出部分。
white-space:nowrap;//对文本不换行。
text-overflow:ellipsis;//溢出部分用省略表示(基于前两个属性都有的情况下)
text-overflow:clip;//剪切。
text-overflow:".....";//自定义格式。
position:absolute;//设置文档的位置为绝对定位，relative表示相对定位。
right:50px;//表示该元素距离右边元素的距离为50px，使用该元素必需设置position元素。
z-index；/*指定元素的堆叠顺序*/
clip：rect(top,right,bottom,left);/*剪切图形*/
flex//flex布局,在使用flex布局的时候，需要将父容器的flex的display设置为“display:flex;”。
title:"提示信息“ title元素用在指定的元素上，会出现提示信息。
原文地址：https://www.cnblogs.com/mengmengi/p/10137056.html