前端---HTML5中CSS简介

Cascading Style Sheet(级联样式单),缩写为CSS,也被称为CSS,也被称为层叠样式单,主要用于网页风格设计,包括字体大小,颜色,以及元素的精确定位等.在传统的Web网页设计里,使用CSS样式但能让原来单调的HTML网页更富表现力.

 

          在正式介绍CSS选择器之前,我们先介绍一下在CSS样式单定义之前的样式单.

样式单(Style Sheet)是一种专门描述结构文档的表现方式的文档,它既可以描述这些文档如何在屏幕显示,也可以描述它们的打印效果,甚至声音效果.样式单一般不包含在结构化文档的内部,而以独立的文档方式存在.与HTML描述数据显示方式的传统方法相比,样式单有许多突出的优点:

• 表达效果更加丰富
• 文档体积小
• 便于信息检索
• 可读性好

正是上述优点,W3C组织大力推荐使用样式单描述结构文档的显示效果,迄今为止W3C给出了两种样式单标准,一种是级联样式单CSS,另一种是可扩展样式单语言XSL.

---

CSS概述 

级联样式单是一系列格式规则,这些规则用于控制网页内容的外观:从精准的布局定位到特定的字体和样式,CSS样式都可以一样表现出色,甚至对于一些网页特效,也可借助于CSS实现.CSS样式单除了可用于控制HTML文档的显示之外,也可用于控制XML文档的显示格式.

 

 

CSS样式单可以将数据逻辑和显示逻辑分离,从而提高文件的可读性.CSS主要提供以下两个功能:

• 对网页的字体,颜色控制更加细腻,让页面内容更富表现力,CSS的表现效果远超出传统HTML页面的color,bgcolor等属性的表现力.
• 通过CSS样式单可以同时控制整个站点所有页面的风格,如果整个站点所有的页面效果都需要改变,则可直接通过CSS样式单控制,避免逐个修改每个页面文件.
  
  
  
   

CSS样式单基本的使用:

• 链接外部样式文件:
  HTML文档中使用<link.../>元素来引入外部样式文件,引入外部样式文件应在<head.../>元素中增加如下<link.../>子元素:
   

 

<link type="text/css" rel="stylesheet" href="CSS样式文件的URL">

 

• 导入外部样式样式文件:
  导入外部样式单的功能与链接外部样式单的功能差不多,只是语法上存在差别.导入外部样式单需要在<style.../>元素中使用@import来执行导入.

  <style type="text/css">
      @import "outer.css";
      @import url("mycss.css");
  <style>

   

• 使用内部定义样式定义: 
  通常不建议使用内部CSS样式,因为这种做法需要在HTML文档内嵌入CSS样式定义,这样内部CSS样式缺点太多

  <style type="text/css">
  /*
  **********
  */
  </style>

   

• 使用行内样式:
  行内CSS样式只对单个标签有效,它甚至不会影响整个文件.行内样式定义可以精确控制某个HTML元素的外观表现,并且允许通过JavaScript动态修改XHTML元素的CSS样式.

style="property1:value1;property2:value2;......"