CSS系列之美化网页/span标签和div标签/字体样式/文本样式

CSS系列之美化网页/span标签和div标签/字体样式/文本样式

01 span标签和div标签

• span标签的作用
  • 能让几个文字或者某个词语凸显出来
  • 属于行内元素
• div标签
  • 属于块级元素

---

• 程序示例：

    
    

    






     你要批评指点四周风景， 你首先要爬上屋顶


不以物喜，不以己悲

• 运行结果
  

---

02 字体样式

• 常用字体样式设置

属性名	含义	举例
font-family	设置字体类型	font-family:“隶书”;
font-size	设置字体大小	font-size:12px;
font-style	设置字体风格	font-style:italic;
font-weight	设置字体的粗细	font-weight:bold;
font	在一个声明中设置所有字体	font:italic bold 36px “宋体”;

---

03 文本样式

• 常用文本样式设置

属性	含义	举例
color	设置文本颜色	color:#00C;
text-align	设置元素水平对齐方式	text-align:right;
text-indent	设置首行文本的缩进	text-indent:20px;
text-decoration	设置文本的装饰	text-decoration:underline;
vertical-align	设置文本对齐	vertical-align ：middle；
line-height	设置文本的行高	line-height:25px;

---

04 文本阴影

• text-shadow属性在CSS2.0中出现，但迟迟未被各大浏览器所支持，因此在
  CSS2.1中被废弃，如今在CSS3中得到了各大浏览器的支持

• 格式：

  text-shadow：color（阴影颜色）x-offset(阴影水平位移) y-offset(阴影垂直位移) blur-radius(阴影模糊半径)

---

程序示例

    
    

    








    1
    2
    3
    4
    5
    6
    7
    8
    9

• 运行结果
  

---