当前位置：迷你小窝窝/网页制作/Dreamweaver网页制作/认识CSS样式  
 

一、关于 CSS样式

　　CSS就是Cascading Style Sheets，中文翻译为“层叠样式表”，简称样式表，它是一种制作网页的新技术。　

　　CSS是一种样式表语言，用于为HTML文档定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。HTML可以用于为网站添加布局效果，但有可能被误用。而CSS则提供了更多选择，而且更为精确、完善。现在所有浏览器都支持CSS。

  
 

二、基本CSS语法

　　举个例子，比如说，我们要以红色作为网页背景，看看CSS要怎么写。

　　方法一：行内样式表,如下例中的红色代码行

<html>
<head>
<title>例子</title>
</head>
<body style="background-color: #FF0000;">
<p>这个页面是红色的</p>
</body>
</html>

直接在页面元素后加Style（样式），这只用在少量使用该样式的元素

　　方法二：内部样式表（style元素），如下面的红色代码行

<html>
<head>
<title>例子</title>
<style type="text/css">
  body {background-color: #FF0000;}
</style>
</head>
<body>
<p>这个页面是红色的</p>
</body>
</html>

注意区别，这些代码行要放在<head>与</head>

　　方法三：外部样式表（引用一个样式表文件），这个样式表文件专门用于存放CSS样式，代码要加在页头代码中，下例红色代码行表示调用style文件夹的style.css样式文件

<html>
<head>
<title>我的文档</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
......

使用专门的样式表文件，可以节省大量的工作，新建的网页就不必重复定义相同的页面文本格式了。


  
 

三、动手创建CSS样式（以内部样式表为例）

  1. 创建和使用CSS样式
    • 选择右边的CSS面板，单击CSS样式面板右上角的下三角形按钮，从弹出的菜单中选择"新建(N)…"（或者点面板下广播加号图标），出现下图的对话框：

    • 输入样式表名称，名称一般以点开头;
    • "定义在"的选项如果选择第1项，则建立一个外部样式表文件（如前面谈到的方法三），存放定义的CSS样式，如果选择第2项则CSS样式不另存文件，直接存储在该网页文档中。
    • 例如选择第2项，并且定义名称为.sb（上标）和.xb（下标）两个CSS样式，写出下面的方程式，之后选择a后面的2在下方属性面板的类，使用.xb，同理处理3个平方数，选择H后面的数字2，选择类为.xb，这样上下标的定义就应用到下面的方程中了。
      • a2+b2=c2
      • 2H2+O2=2H2O

    2. 说明：上下标样式不同于其他样式，编辑中看不到效果，需要在浏览时才能看到，本页中上下标的定义如下

    <style type="text/css">
    .textblue {
    font-family: "宋体";
    font-size: 14px;
    color: #00F;
    }
    .sb {
    font-family: "宋体";
    font-size: 12px;
    vertical-align: super;
    }
    .xb {
    font-size: 12px;
    vertical-align: sub;
    }
    .title1 {
    font-family: "宋体";
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    }
    .txtred {
    font-family: "宋体";
    font-size: 14px;
    color: #F00;
    }
    body {
    font-family: "宋体";
    font-size: 14px;
    }
    </style>

  2. 编辑和删除现有样式

如果对已有的样式不满意，可以对样式进行修改（编辑）和删除，方法如下：

    • 在右边的CSS面板选中需要编辑的CSS样式，单击下方的"编辑样式…"（笔形图标）
    • 在右边的CSS面板选中需要删除的CSS样式，单击下方的"删除CSS规则"按钮。

 

  
 

四、导出CSS样式和运用CSS样式文件

　　如果其他网页也要用该文档中的CSS样式，可以将该样式导出到一个单独的CSS样式文档中。

    1. 导出CSS样式文件
      • 选择"文件->导出->层出CSS样式"命令，
      • 或选择"文本->CSS样式->导出(X)…"，可导出该文档中的CSS样式到CSS样式文本中。
    2. 运用CSS样式文件
      • 选择"文本->CSS样式->附加样式表"，或CSS窗口下方的附加样式表按钮，会弹出下面的窗口。
      • 通过浏览选取CSS文件，以链接或导入的方式可以使用已有的CSS样式文件中的样式。