1、打开开发工具，新建一个HTML文件。
2、使用font-family属性设置，字体代码：.demo1{font-family: "microsoft yahei"}。
3、使用font-size属性设置字体的大小代码：.demo1{font-size: 20px}。
4、使用font-style 属性设置字体风格：normal - 文本正常显示italic - 文本斜体显示oblique - 文本倾斜显示。
5、使用font-weight属性设置字体的粗细代码：.demo2{font-weight: 600}。
6、使用color设置字体颜色代码：.demo1{color: #FF0000}。就完成了。
学习导航
1、css中的长度与颜色
2、css中的文字属性
3、css中的文本属性
1、文字样式属性
font-family 字体属性
作用：元素内文字以什么字体来显示
语法：font-family:[字体1],[字体2],[......]
说明：含空格字体名和中文，用英文引号（"）括起；多个字体用英文逗号隔开；引号嵌套，外使用双引号，内使用单引号。
font-size 文字大小
作用：元素内文字大小
语法：font-size:绝对单单位，相相对单位
color 文字颜色
语法：颜色名|十六进制|RGB
font-weight 文字粗细
语法：font-weight:normal 正常 | bold 加粗 | bolder 加粗 | lighter 细体 | 100-900
说明：默认值：normal 400等同于normal,而700等同于bold
font-style 文字样式
作用：为元素内文字设置样式
语法：font-style:normal 正常显示 | italic 文字倾斜 | oblique 文字倾斜（基本不用）
font-variant 字体变形
作用：设置元素中文本为小型大写字母
语法：font-variant:normal 正常显示| small-caps 将英文大小写字母调成为同宽
font 属性简写
语法：font:font-style font-variant font-weight font-size/line-height font-family
说明：值之间空格隔开，注意书写顺序。
2、CSS文本样式
text-align
作用：设置元素内文本的水平对齐方式
语法：tex-align:left 左对齐 | right 右对齐 | center 居中对齐 | justify 两端对齐
注意：该属性对块级元素设置有效
line-height
作用：设置元素中文本行高
语法：line-height:长度值 | 百分比
说明：一行文字的高度，行高指文本行的基线间的距离
文字基线
注意：基线并不是汉字文字的下沿，看图理解自行理解
行高和行距
行高：基线到基线的距离
行距：底线到顶线的距离
注意：看图自行理解
行框和行内框
注意：看图自行理解
vertical-align
作用：设置元素内容的垂直方式
语法：vertical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom | 长度 | 百分比
注意：看图自行理解
text-indent 首行缩进
3、文本样式属性
text-transform: capitzlize 首字母大写 | uppercase 字母大写 | lowercase 字母小写 | none 正常
text-decoration: underline 下划线 | overline 上划线 | line-through 删除线 | none 正常
综合实操案例
如果您觉得有用，记得在下方点赞、关注、留言，我会定期奉 上更多的惊喜哦，您的打赏支持才是我继续努力的动力，么么哒。
每日分享在学习过程中总结的学习经验，学习笔记，笔试题，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以学习为目的，每天阅读一篇文章，了解身边的技术。陪有梦想的人一起成长！
1.</?font[^><]*>这个只却掉font标签的, 保留除font以外的所有标签, 如<img><p>等等. 同样的你需要去掉其他标签, 只需要将里面的font换你要去掉的；
2.</?[^/?(img)|(p)][^><]*>这个保留(这里我写的保留了img, p这两个标签)你指定的标签,其他的(包括font)全去掉, 如果你还有其他的标签想保留, 直接在里面加一个 |(xxx)；
3.</?[a-zA-Z]+[^><]*>这个表达式可以去掉所有HTML的标签；
4.JAVA代码可以这样写:
public static String delTagsFContent(String content){
String patternTag = "</?[a-zA-Z]+[^><]*>"
String patternBlank = "(^\\s*)|(\\s*$)"
return content.replaceAll(patternTag, "").replaceAll(patternBlank, "")
}
清除所有默认样式的css代码：
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code，
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
初始化代码（清除CSS代码）：
ul,li{ padding:0margin:0list-style:none}
解析清除ul li样式代码：
相等于分别对ul和li设置padding:0margin:0list-style:none；
padding:0 —— 设置内补白（对象内间距）为0
margin:0 —— 设置对象外间距为0
list-style:none —— 去除自带无序圆点
HTML/javascript
引用外部文件中的js脚本,
<script type="text/javascript" src="ext.js"></script>也可以象下面这样写，language不是必要的，但是推荐上面的写法；
<script language="javascript" type="text/javascript" src="ext.js"></script>
页面内引用：
<script type="text/javascript">//<![CDATA[var x = 0function fn(args) { //...} //]]></script>加上“//<![CDATA[” 和 “//]]>”是为了兼容XHTML，是推荐的写法，HTML时代一般用“<!--”和“//-->”
在一些HTML控件的事件属性中使用（一般事件为onxxx，如onmouseover,onclick,onchange）
<body onload="alert('loaded')"><input type="text" name="username" onclick="alert(this.value)" />在一些HTML控件的非事件属性中使用（注意：一定要加javascript:）
<a href="javascript:void(0)" onclick="alert(this.innerText)">my blog:http://blog.csdn.net/kimsoft</a>
