CSS美化页面（字体样式、文本样式、文本阴影、超链接伪类、列表样式、网页背景、CSS3渐变）

CSS美化页面

一、span 和 div

• span标签

  行内元素，能让某几个文字或者某个词语凸显出来，内容显示在同一行

• div标签

  块级标签，默认占一行,自动换行

  
  
  
      
      
  
  
      
  Hello
      
  CSS
      Hello
      CSS
  
  
  

  运行结果：
  

二、字体样式

• font-family 设置字体类型
• font-size 设置字体大小
• font-style 设置字体风格
• font-weight 设置字体的粗细
• font 在一个声明中设置所有字体属性

    
    
    



CSS font-family
这一段的字体是 Times New Roman 
这一段的字体是 隶书
字体大小
字体粗细

运行结果：

三、文本样式

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

    
    
    


这是标题 1
这是一个普通的段落。请注意,本文是红色的。页面中定义默认的文本颜色选择器。
这是一个类为"ex"的段落。这个文本是蓝色的。
“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”

运行结果：

四、文本阴影

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

 
 




Text-shadow effect!

注意: Internet Explorer 9 以及更早版本的浏览器不支持 text-shadow属性.

运行结果：

五、超链接伪类

• a:link 未单击访问时超链接样式 例：a:link{color:#9ef5f9;}
• a:visited 单击访问后超链接样式 例：a:visited {color:#333;}
• a:hover 鼠标悬浮其上的超链接样式 例：a:hover{color:#ff7300;}
• a:active 鼠标单击未释放的超链接样式 例：a:active {color:#999;}

 
 



这是一个链接
注意： a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。
注意： a:active 必须在 a:hover 之后。

注意：设置伪类的顺序：a:link->a:visited->a:hover->a:active

六、列表样式

• list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
• list-style-image 将图象设置为列表项标志
• list-style-position 设置列表中列表项标志的位置
• list-style-type 设置列表项标志的类型

 
 





Coffee
Tea
Coca Cola

运行结果：

七、网页背景

• background 简写属性，作用是将背景属性设置在一个声明中
• background-attachment 背景图像是否固定或者随着页面的其余部分滚动
• background-color 设置元素的背景颜色
• background-image 把图像设置为背景
• backgrounf-position 设置背景图像的起始位置
• background-repeat 设置背景图像是否及如何重复

 
 





Hello World!
背景图片不重复，设置 position 实例。
背景图片只显示一次，并与文本分开。
实例中还添加了 margin-right 属性用于让文本与图片间隔开。

运行结果：

八、背景尺寸

• background-size
• 属性值
  • auto 默认值，使用背景图片保持原样
  • percentage 当使用百分值时，不是相对于背景的尺寸大小来 计算的，而是相对于元素宽度来计算的
  • cover 整个背景图片放大填充了整个元素
  • contain 让背景图片保持本身的宽高比例，将背景图片缩 放到宽度或者高度正好适应所定义背景的区域

九、CSS3渐变分类及兼容性

• 线性渐变

  颜色沿着一条直线过渡 ： 从左到右、从右到左、从上到下等

• 径向渐变

  圆形或椭圆形渐变 ， 颜色不再沿着一条直线变化， 而是从一个起点朝 所有方向混合

• 浏览器支持

  表中的数字指定了完全支持该属性的第一个浏览器版本

  后边跟 -webkit-、-moz- 或 -o- 的数字指定了需加上前缀才能支持属性的第一个版本

属性	IE	Chrome	Firefox	Safari	Opera
linear-gradient	10.0	26.0 10.0 -webkit-	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.1 -o-
radial-gradient	10.0	26.0 10.0 -webkit-	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.6 -o-
repeating-linear-gradient	10.0	26.0 10.0 -webkit-	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.1 -o-
repeating-radial-gradient	10.0	26.0 10.0 -webkit-	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.6 -o-

十、线性渐变

默认情况下从上到下渐变

 
 




线性渐变 - 从左到右
从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色：



注意： Internet Explorer 9 及之前的版本不支持渐变。

运行结果：