核心思想

在 VS2010 中，你主要通过以下两种方式使用 CSS：

vs2010网页使用css
（图片来源网络，侵删）
  1. 内部样式表：将 CSS 代码直接写在 HTML 文件的 <style> 标签内，适合小型、单个页面的快速测试。
  2. 外部样式表：创建一个独立的 .css 文件，然后在 HTML 文件中通过 <link> 标签引入，这是最推荐、最专业的做法，可以实现内容与样式的分离,便于维护和复用。

使用内部样式表

这种方法最简单,适合初学者或快速原型设计。

步骤：

  1. 创建或打开一个 HTML 项目/文件

    • 打开 VS2010。
    • 选择 文件 -> 新建 -> 网站...。
    • 在模板中，选择 ASP.NET 空 Web 网站（或者如果你只想做一个静态页面，也可以选择 HTML 网站），点击 确定。
    • 在“解决方案资源管理器”中，右键点击项目名称，选择 添加 -> 新建项。
    • 选择 HTML 页，命名为 Default.html，然后点击 添加。

  2. 在 HTML 文件中添加 <style>

    • 打开 Default.html 文件，你会看到默认的 HTML 代码。
    • 在 <head> 和 </head> 标签之间，添加 <style type="text/css"> 和 </style> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>我的第一个CSS页面</title>
    <!-- 在这里添加CSS -->
    <style type="text/css">
        /* CSS代码将写在这里 */
    </style>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个段落。</p>
</body>
</html>

  3. 编写 CSS 代码

    vs2010网页使用css
    （图片来源网络，侵删）
    • 在 <style> 标签内，编写你的 CSS 规则，我们想让标题变成红色,段落有边距。
    <style type="text/css">
    h1 {
        color: red;
        font-family: Arial, sans-serif;
    }
    p {
        border: 1px solid blue;
        padding: 10px;
        margin: 20px;
    }
</style>

  4. 查看效果

    • 按 F5 键启动调试，或者右键点击 HTML 文件，选择 在浏览器中查看，你将看到标题是红色的,段落有一个蓝色边框和一些内边距与外边距。

使用外部样式表（推荐）

这是 Web 开发的标准做法，它让你的 HTML 文件只关心内容，而 CSS 文件只负责样式。

步骤：

  1. 创建 HTML 文件

    • 和方法一一样，创建一个名为 Default.html 的 HTML 页面。

  2. 创建 CSS 文件

    vs2010网页使用css
    （图片来源网络，侵删）

    • 在“解决方案资源管理器”中,右键点击你的项目名称。

    • 选择 添加 -> 样式表。

    • 将文件命名为 styles.css，然后点击 添加。

    • VS2010 会自动创建一个 styles.css 文件，并可能已经包含一些默认的 CSS 重置代码，你可以清空它,或者保留。

  3. 在 HTML 文件中链接 CSS 文件

    • 打开 Default.html 文件。
    • 在 <head> 标签内，添加 <link> 标签来引入你刚刚创建的 CSS 文件。
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>使用外部CSS</title>
    <!-- 链接到外部的CSS文件 -->
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个段落。</p>
</body>
</html>
    • rel="stylesheet"：表明这是一个样式表。
    • type="text/css"：指定文件类型。
    • href="styles.css"：指定 CSS 文件的路径，因为 styles.css 和 Default.html 在同一个目录下,所以直接写文件名即可。

  4. 在 CSS 文件中编写样式

    • 打开 styles.css 文件。
    • 编写你的 CSS 代码,和方法一中的代码一样。
    /* styles.css 文件内容 */
h1 {
    color: red;
    font-family: Arial, sans-serif;
}
p {
    border: 1px solid blue;
    padding: 10px;
    margin: 20px;
}

  5. 查看效果

    • 按 F5 启动调试，或者在浏览器中查看 Default.html，效果和方法一完全一样,但现在你的结构更清晰了。

VS2010 中 CSS 的一些高级功能

VS2010 提供了一些基础的 CSS 编辑辅助功能，虽然比不上现代工具,但仍然很有用：

  1. 智能感知

    • 当你在 HTML 文件的 <style> 标签内或 .css 文件中编写 CSS 时，VS2010 会提供代码提示。
    • 你输入 c，它会提示 color、cursor 等。
    • 你输入一个属性后，按 空格,它可能会提示常用的值。

  2. 属性窗口

    • 选中 HTML 文件中的某个元素（如 <h1>）。
    • 在 VS2010 右侧，找到 属性 窗口。
    • 在 属性 窗口中，你可以直接为这个元素设置 style 属性（即内联样式），你可以直接在这里设置 Font-Color 为 Red。

  3. 管理器

    • 对于更复杂的项目，你可能需要管理多个 CSS 文件。
    • 在“解决方案资源管理器”中，右键点击你的网站项目（不是单个文件），选择 ASP.NET 配置。
    • 在弹出的窗口中，切换到 管理 选项卡，可以管理各种文件，包括 CSS 文件的位置和顺序。

总结与注意事项

特性 内部样式表 外部样式表
优点 简单快速，无需额外文件 内容与样式分离，易于维护和复用，浏览器可缓存
缺点 HTML 文件臃肿，样式无法复用 需要额外文件，首次加载需额外请求
适用场景 单页测试、邮件模板 几乎所有网站开发项目

给 VS2010 用户的最后建议：

  • 优先使用外部样式表：养成好习惯，从一开始就使用 .css 文件。
  • 熟悉智能感知：它能大大提高你的编码效率,减少拼写错误。
  • 不要过分依赖属性窗口：属性窗口生成的是内联样式，不利于样式的统一管理，它偶尔用于快速调试单个元素，但最终样式应该放在外部 CSS 文件中。
  • 注意文件路径：如果你的 HTML 文件和 CSS 文件不在同一目录下，href 属性的值需要相应调整，href="css/styles.css"。

希望这个详细的指南能帮助你在 VS2010 中顺利地使用 CSS！