web前端开发与应用——CSS样式规则

什么是CSS

CSS是Cascading Style Sheets（层叠样式表）的缩写，它是一种对Web文档添加样式的简单机制，是一种表现HTML或XML等文件外观样式的计算机语言，是一种网页排版和布局设计的技术。

CSS的特点

纯CSS布局与结构式HTML相结合能帮助设计师分离外观与结构，和传统的表格布局相比，具有以下特点：

• 网页载入更快
• 降低流量费用
• 修改设计时效率高
• 更容易被搜索引擎收录

浏览器对CSS3的支持及浏览器前缀

CSS3是2010年推出的新标准，在选择器方面，除了IE9以下的浏览器版本，其他浏览器已全部支持CSS3选择器；在属性方面除了CSS的Transforms 3D还没有浏览器支持以外，Chrome和Safari对CSS3的其他属性全部支持，其次支持较好的是Opera和Firefox。 但是，一些CSS3的样式，各家浏览器的语法规则还有差异。为了让设计人员设计的一个效果被各个浏览器识别，通常可在样式代码前添加浏览器前缀。 常用的浏览器前缀如下：

• -ms-：IE浏览器前缀
• -moz-： 火狐 浏览器前缀
• -webkit-:苹果、微软和谷歌浏览器前缀
• -o-：欧朋浏览器前缀

CSS的样式规则

CSS 样式设置由选择器和声明两部分组成：

• 选择器：用于指明样式作用的对象
• 声明：用于定义样式的格式，由属性和值组成，两者以“:”分隔

例如： body{color:blue } 该样式的作用的对象是标签选择器body,定义的样式属性为color，取值为blue

引入CSS样式的方法

在网页中应用CSS样式有内联式、内嵌式、外链式和外导式4种方法。

• 内联式：通过标记的style属性直接把CSS样式添加到HTML的标签中。 例如：<span style="color:red; font-weight:bold;">内联样式</span>

• 内嵌式：将CSS代码集中写在HTML文档的头部标签中。并用<style>标记定义。例如：

  1. <style type="text/css">
  2. span{color:red;
  3. font-weight:bold;}
  4. </style>

• 外链式：将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过标记将外部样式表文件链接到HTML文档中。例如： <link type="text/css" rel="stylesheet" href="style.css" />

• 外导式：将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过@import url(“外部样式表相对路径”)语句将外部样式表文件链接到HTML文档中。例如：

  1. <style type="text/css">
  2. @import url("style.css");
  3. </style> 

• 在标签中添加CSS样式

  在HTML标签中,使用style属性来添加CSS样式，其取值由属性和值组成，两者以冒号“:”分隔，多个属性之间用分号“；”分隔。 示例如下： <span style="color:red;font-weight:bold;">内联样式</span> 常用的文本样式属性有：

• color：设置文本的颜色
• font-family：设置文本的字体
• font-size：设置文本的字号大小
• text-align：文本水平对齐方式
• line-height：设置文本的行间距

在HTML头部添加CSS样式

在HTML标签中,使用style标签来添加CSS样式，其方法是将CSS代码集中写在HTML文档的头部的style标签中。 示例如下：

1. <style type="text/css">
2. body{background-image:url(背景图的路径);
3. background-size:cover;}
4. div{position:fixed;
5. left:500px;
6. top:200px;
7. color:red
8. }
9. </style>

常用的背景样式属性有：

• background-color：设置元素的背景颜色
• background-image：设置元素的背景图像，取值格式为url(背景图像的路径)
• background-size：设置元素的背景图像大小。取值为cover时，会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小；取值为contain时，会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小；取值为长度值，第一个参数设置宽度，第二个参数设置高度，两个参数之间空格分隔。
• background-repeat：设置元素的背景平铺方式。取值为no-repeat表示不平铺；取值为repeat-x表示横向平铺；取值为repeat-y表示纵向平铺；取值为repeat表示双向平铺。

在HTML中链接外部样式表文件

在HTML标签中,使用link标签来链接CSS样式文件。 示例如下：

<link href="CSS文件的路径" type="text/css" rel="stylesheet"/> link标签属性有：

• href：取值为外部样式文件的路径
• type：设置外部文档的类型。取值为text/css时，表示外部文档的类型为CSS样式表；取值为text/javascript时，表示外部文档的类型为javascript脚本
• rel：设置当前文档与引用外部文档的关系。取值为stylesheet，表示定义一个外部样式表。