一. CSS 基础

1. 基本选择器

基本选择器用于选取网页上的 HTML 元素。以下是常用的基本选择器：

  • 元素选择器：选择指定标签的所有元素。
    例如：p { color: red; }
    这段代码将页面中所有 <p> 标签的文字颜色设置为红色。

  • 类选择器：选择指定类名的元素。
    例如：.my-class { font-size: 16px; }
    这段代码将所有类名为 my-class 的元素字体大小设置为 16px。

  • ID选择器：选择指定 ID 的元素。
    例如：#my-id { background-color: blue; }
    这段代码将 ID 为 my-id 的元素背景色设置为蓝色。

2. 复合选择器

复合选择器由多个选择器组合而成，用于更精确地选择元素。

  • 后代选择器：选择一个元素的所有后代元素。
    例如：div p { color: green; }
    这段代码将所有 <div> 标签内的 <p> 标签文字颜色设置为绿色。

  • 并集选择器：将多个选择器用逗号分开，表示同时选中多个元素。
    例如：h1, h2, h3 { margin: 10px; }
    这段代码将 <h1>, <h2>, <h3> 标签的外边距都设置为 10px。

  • 标签指定式：根据标签名选择元素。
    例如：p { line-height: 1.5; }
    这段代码将所有 <p> 标签的行高设置为 1.5。

3. 浮动与清除浮动

浮动（float）是 CSS 中常用的布局技巧。它使元素脱离文档流，向左或向右浮动。

  • 浮动：float: left; 或 float: right;
    使元素向左或右浮动，并允许其他元素环绕它。
    例如：

    css
    .box {
    float: left;
    width: 200px;
    height: 100px;
    background-color: lightblue;
    }

  • 清除浮动：浮动元素的影响会影响到后面的元素，清除浮动可以使其恢复正常流。
    常用清除浮动的方法有：

    • clear: both;
      在浮动元素之后，使用 clear: both; 可以清除左浮动和右浮动。
      例如：

      css
      .clear {
      clear: both;
      }

    • overflow: hidden;
      给父元素加上 overflow: hidden; 也能清除浮动，常用在布局容器中。
      例如：

      css
      .container {
      overflow: hidden;
      }

    • zoom: 1;
      这个方法是针对 IE 浏览器的一种 hack，给父元素加上 zoom: 1; 可以清除浮动。

4. 定位

CSS 定位用于控制元素的位置，常用的有两种：

  • 相对定位：position: relative;
    元素根据原本的位置进行偏移，不脱离文档流。
    例如：

    css
    .relative {
    position: relative;
    top: 10px; /* 向下偏移10px */
    left: 20px; /* 向右偏移20px */
    }

  • 绝对定位：position: absolute;
    元素脱离文档流，定位相对于最近的已定位的父元素。
    例如：

    css
    .absolute {
    position: absolute;
    top: 50px; /* 离顶部50px */
    right: 20px; /* 离右边20px */
    }

5. CSS 精灵

CSS 精灵是将多个小图片合成一张大图，利用 background-position 来显示不同区域的图片，从而减少 HTTP 请求，提高页面加载速度。

例如：如果你有多个按钮图标（如：箭头、加号等），可以将它们合成一个大图，通过改变背景图的位置来显示不同的按钮。

二. 网页的基本元素

  1. 文字：网页中最常见的元素，使用标签 <p>, <h1>, <h2>, <span> 等表示。
  2. 图片：通过 <img> 标签插入，常用属性包括 src（源路径）和 alt（图片无法显示时的文字描述）。
  3. 链接：通过 <a> 标签创建，href 属性指定链接地址。

三. 网站开发流程

  1. 定义站点：明确网站的目的，是展示、博客、商业或其他目的。
  2. 建立网站结构：规划好网站的页面内容和层级关系，绘制网站结构图。
  3. 首页设计与制作：设计网站首页，展示网站的核心内容和功能。
  4. 其他页面设计制作：根据首页设计制作其余页面，保持一致的风格和布局。
  5. 测试、发布和维护：完成网站后，进行功能测试，确认一切正常，再上线发布并进行后期维护。

四. 职业规划

  1. 美工：主要负责淘宝店铺或其他平台的视觉设计，工资大概 4000-5000 元。
  2. UI 设计师：负责应用或网站的用户界面设计，工资 5500-7000 元。
  3. 网页设计师：使用 HTML 和 CSS 设计网页，工资 4000-5500 元。
  4. Web 前端开发工程师：掌握 HTML5、CSS3、JavaScript 等技术，工资 4500-6000 元。
  5. 综合职位（如：项目经理、技术总监等）：薪资根据职位不同而变化。

五. DW 常用面板

  1. 插入面板：Ctrl + F2，可以快速插入常用 HTML 元素。
  2. 属性面板：Ctrl + F3，查看并修改选中元素的属性。
  3. 文件面板：F8，显示当前项目的文件结构，方便管理文件。

六. 创建站点

  1. 建立文件夹并命名：创建项目文件夹，如 images, css。
  2. 打开文件面板：通过 “管理站点” 创建新站点，指定文件夹路径。
  3. 创建网页文件：在站点内创建 HTML 文件，开始网页制作。
  4. 删除文件：右键选择文件进行删除，注意文件一旦删除将无法恢复。
  5. 删除站点：在“管理站点”中选择并删除不需要的站点。
  6. 导出和导入站点：将站点导出为文件或导入其他站点。

七. 链接

  1. 文字链接：<a href="URL">文本</a>
  2. 图片链接：<a href="URL"><img src="image.jpg" alt="Description"></a>
  3. 热点链接：通过 map 标签为图片添加多个点击区域，常用于图像地图。
  4. 锚点链接：在页面内跳转至某个特定位置。
    例如：

    html
    <a href="#section1">跳转到 Section 1</a>
    <div id="section1">这里是 Section 1</div>

八. 图片格式

  1. JPG：适合照片，支持 1670 万种颜色，图片较大但质量高。
  2. GIF：支持动画和透明背景，适合简单图标和小图片，只有 256 种颜色。
  3. PNG：支持透明，但不支持动画，适合图标、按钮等，颜色范围从 256 到 1670 万种。

九. 准备项目流程

  1. 建立项目文件夹：为项目创建文件夹，规范命名。
  2. 建立站点：在开发工具中建立新的站点。
  3. 页面分析：分析页面的结构，确定使用哪些 HTML 和 CSS 元素。
  4. 建立模板：创建一个基础模板，包含 HTML 结构和必要的样式。
  5. 创建 CSS 文件并引入：创建 styles.css 文件，并在 HTML 文件中通过 <link> 标签引入。
  6. 创建可编辑区域：使用 DW 插件创建可编辑区域，允许在模板中动态修改内容。
  7. 删除可编辑区域：删除不需要的可编辑区域。

十. 元素类型

  1. 行内元素：如 <span>, <a>，这些元素不会独占一行，宽高不能设置。
  2. 块元素：如 <div>, <h1>，这些元素独占一行，能设置宽高。

十一. 转换元素类型

  1. display: inline;：将元素转换为行内元素，不独占一行，宽高不能设置。
  2. display: block;：将元素转换为块级元素，独占一行，可以设置宽高。
  3. display: inline-block;：将元素转换为行内块级元素，可以在一行显示，但仍然能设置宽高。