CSS3美化字体样式

1.span标签

span标签是HTML5的行内标签，被用来组合文档中的行内元素。

2.字体样式

font-family:设置字体的类型，常用的字体有宋体、微软雅黑、黑体等，可以设置多个字体中文要记得加英文“”号
font-size：设置字体的大小，常用单位是px还有其他的in，cm，mm等，但并不实用。
font-style：设置字体风格
font-weight：设置字体的粗细
font：用于对字体的综合设置
font-style属性用于设置字体风格如斜体，normal默认值显示标准的字体，italic：显示斜体的字体样式，oblique：显示倾斜体的字体
font-weight属性用于设置字体的粗细，bold定义粗体字符，bolder定义更粗的字符，lighter定义更细的字符，100~900可以自定义粗细
font可以对字体进行综合设置，语法：p{font：font-style font-weight font-size；}各属性之间以空格隔开

3.文本样式

color：设置文本的颜色

1.使用颜色名称来直接定义颜色，如：color：yellow
2.使用十六进制代码指定颜色，如：color：#00F；记住一定要颜色代码前加#号
3.RGB使用红绿蓝这光学三原色，只要设置好这三种颜色，就可以形成各种颜色
4.RGBA：是RGB方法的拓展，只是加了一个alpha属性，要用到有透明度的颜色时，可以用这个属性控制透明度，值为0~1，越小越透明

text-align：设置文本内容水平对齐

left：默认值，左对齐
right：右对齐
center：居中对齐
justify：两端对齐

text-indent：设置首行文本的缩进

每个段落的首行都会空出字符，属性值可以是em和px，2em表示缩进两个字符

line-height：设置文本的行高

行高就是行与行之间的距离，属性单位分别有px，em，和百分比，通常按字体大小的倍数表示，16px行高就可以设置为32px

text-decoration：设置文本的装饰

none:默认值没有装饰
underline：下划线
overline：上划线
line-through：删除线

vertical-align：设置文本内容的垂直对齐

文本垂直居中，属性值有middle，top，bottom

text-shadow：设置文本阴影效果

{text-shadow：10px 8px 5px #999；}分别是设置水平阴影位置，垂直阴影位置，模糊距离，还有阴影的颜色

4.超链接伪类

a：link{ }设置未访问前超链接的状态
a：visited{ }单击访问后的状态
a：hover{ }鼠标指针悬停时的状态
a：active{ }鼠标未释放时的状态
list-style去除列表样式的圆点符号或数字

5.背景样式

background-color：规定背景颜色
background-image：规定要使用的背景图
background-repeat：规定重复的背景图像

repeat：默认，背景会在垂直方向和水平方向重复
repeat-x：水平方向重复
repeat-y：垂直方向重复
no-repeat：背景图像仅显示一次。

background-position：规定背景图像的位置

top顶部 left，right左和右，bottom底部，如果只定义一个值，那第二个值默认为center

background：复合属性，综合设置
background-size：规定背景的尺寸，length设置宽高，percentage以父元素的百分比设置宽高，cover背景图拓展覆盖
contain把图像扩展至最大尺寸，完全适应内容区域
线性渐变
background-image:linear-gradient(方向，颜色1，颜色2)；颜色至少定义两种

CSS3美化字体样式相关推荐

html页面设置平滑字体,HTML5之CSS-网页文本美化-字体样式
做了挺长时间的程序员,逐渐的让我意识到,其实技术是给自己打开了一扇窗户,让自己更好的去了解这个世界. 今天,来了解文字在网页在中,是如何去设置的. 中间来一个小插曲,我想大家应该都用过办公软件,那么办 ...
html5控制字体样式,HTML5之CSS-网页文本美化-字体样式
做了挺长时间的程序员,逐渐的让我意识到,其实技术是给自己打开了一扇窗户,让自己更好的去了解这个世界. 今天,来了解文字在网页在中,是如何去设置的. 中间来一个小插曲,我想大家应该都用过办公软件,那么办 ...
CSS系列之美化网页/span标签和div标签/字体样式/文本样式
CSS系列之美化网页/span标签和div标签/字体样式/文本样式 01 span标签和div标签 span标签的作用能让几个文字或者某个词语凸显出来属于行内元素 div标签属于块级元素程序示 ...
【油猴脚本】改变网页代码块的字体样式/美化LeetCode代码文字显示（CSS；设置@font-face和font-family）
美化网页的代码字体脚本安装地址: 参考:改变网页代码块的字体样式更新日志 V0.1 更新时间:2021年9月20日23:04:41 更新功能: 1.改变LeetCode.CSDN.博客园嵌入的代码 ...
css3-2 CSS3选择器和文本字体样式
css3-2 CSS3选择器和文本字体样式一.总结一句话总结:是要记下来的,记下来可以省很多事. 1.css的基本选择器中的:first-letter和:first-line是什么意思? :f ...
java 字体选择器_常见CSS3选择器和文本字体样式汇总
常见的CSS3选择器包含:常用基本.属性.伪类.层级(组合)选择器,具体使用情况建议先阅读常用的选择器有:标签.id.类.关联(通过父集找到子集)组合选择器,注意html页面中id是唯一的:基本选择 ...
几款CSS3美化的表格样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
CSS——美化网页元素（字体样式，文本样式，阴影，超链接伪类，列表，背景，渐变）
为什么要美化网页 1.1有效的传递页面信息 1.2美化网页,页面漂亮,才能吸引用户 1.3凸显页面主题 1.4提高用户体验 span标签:重点要突出的字使用该标签套起来 <!DOCTYPE ht ...
html表格美化源码,非常酷炫的CSS3表格设计样式源码
资源演示一组非常酷炫的CSS3表格设计样式源码,推荐用来做设计参考. CSS参考代码 /* Table 1 Style */ table.table1{ font-family: "Tre ...