HTML-CSS-JS Prettify 插件是 Sublime Text 3 的一个格式化插件，可以用于格式化 HTML、CSS 和 JS 代码。

安装方法：

1. 打开 Sublime Text 3。
2. 按下 Ctrl+Shift+P 打开命令面板。
3. 输入 install package 并选择它。
4. 等待加载包列表，然后输入 HTML-CSS-JS Prettify 并选择它。
5. 等待插件安装完成。

使用方法：

1. 打开你想要格式化的 HTML、CSS 或 JS 文件。
2. 选中你想要格式化的代码。
3. 按下 Ctrl+Alt+H 来格式化 HTML，或者 Ctrl+Alt+C 来格式化 CSS 和 JavaScript。

注意：如果你的 Sublime Text 3 无法找到这些快捷键，可能是因为你的操作系统是 MacOS 或者你的快捷键设置与默认设置不同。你可以通过 Preferences > Key Bindings 查看或修改快捷键绑定。

如果你想要自定义快捷键，可以在你的 Sublime Text 3 的用户快捷键配置文件中添加如下内容：

{
    "keys": ["your_shortcut"], "command": "html_css_js_prettify",
    "args": {
        "selection_only": false,
        "use_tabs": false,
        "tab_size": 4,
        "indent_with_tabs": true,
        "space_in_empty_paren": true,
        "space_in_paren": true,
        "jslint": false,
        "space_after_anon_function": true,
        "space_after_named_function": true,
        "brace_style": "collapse",
        "unindent_chained_methods": true,
        "break_chained_methods": false,
        "keep_array_indentation": false,
        "keep_function_indentation": false,
        "eval_code": false,
        "space_before_conditional": true,
        "unescape_strings": false,
        "wrap_line_length": 0,
        "end_with_newline": false,
        "comma_first": false,
        "operator_position": "before-newline",
        "indent_empty_lines": false
    }
}

请将 "your_shortcut" 替换为你想要设置的快捷键，并根据需要调整其他参数。

CSS中设置背景的7个属性包括：

1. background-color：设置背景颜色。
2. background-image：设置背景图片。
3. background-repeat：设置背景图片是否和如何重复。
4. background-position：设置背景图片的位置。
5. background-size：设置背景图片的大小。
6. background-clip：设置背景的裁剪区域。
7. background-origin：设置背景图片的定位原点。

简写属性background可以同时设置这些属性，例如：

background: #ff0000 url(image.jpg) no-repeat left top / cover content-box content-box;

简写时的顺序为：

background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] [background-size] [background-clip] [background-origin];

注意点：

• 简写时，如果不设置某个值，其默认值将会应用（例如repeat、scroll、top left、auto等）。
• background-size 和 background-position 可以使用 / 分隔，background-position 在 / 前设置表示背景图片的定位，在 / 后设置表示背景图片的大小。
• 如果只设置 background-size 而不设置 background-position，则 background-position 默认为 center。
• 如果省略 background-repeat，则默认为 repeat。

PostCSS 插件 postcss-px-to-viewport 可以帮助你将 CSS 中的 px 单位转换成 vw 和 vh 单位。以下是如何使用该插件的示例代码：

首先，安装 postcss-px-to-viewport：

npm install postcss-px-to-viewport --save-dev

然后，在你的 PostCSS 配置文件中引入并使用这个插件：

// postcss.config.js
 
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      unitToConvert: 'px', // 要转换的单位
      viewportWidth: 750, // 设计稿宽度
      unitPrecision: 5, // 单位转换后保留的精度
      propList: ['*'], // 指定转换那些属性，* 表示全部
      viewportUnit: 'vw', // 希望使用的视口单位
      fontViewportUnit: 'vw', // 字体使用的视口单位
      selectorBlackList: [], // 过滤掉那些不进行转换的CSS选择器
      minPixelValue: 1, // 小于或等于`1px`不转换
      mediaQuery: false, // 是否在媒体查询中也转换`px`
      replace: true, // 是否直接更换原来的单位
      exclude: [/node_modules/], // 忽略那些文件
      landscape: false // 是否添加landscape视口宽度
    }
  }
};

在你的 CSS 文件中，你可以这样写：

/* input */
.element {
  width: 375px;
  height: 200px;
  font-size: 14px;
}

postcss-px-to-viewport 会转换成：

/* output */
.element {
  width: 100vw;
  height: 13.33333vw;
  font-size: 4.26667vw;
}

这样，你的样式表就会根据设计稿的宽度自动转换成对应的 vw 和 vh 单位。

以下是一个简单的示例，演示了如何使用CSS创建一个动态的勾选多选框效果。

HTML:

<label class="checkbox">
  <input type="checkbox" />
  <span class="checkmark"></span>
  Option 1
</label>

CSS:

/* 多选框容器样式 */
.checkbox {
  display: inline-block;
  cursor: pointer;
  user-select: none;
}
 
/* 实际的多选框样式 */
.checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
 
/* 勾选/选中标记样式 */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
  border-radius: 50%;
  transition: background-color 0.3s;
}
 
/* 当多选框被选中时的标记样式 */
.checkbox input:checked + .checkmark {
  background-color: #2196F3;
}
 
/* 位于勾选标记内的文本样式 */
.checkbox span.checkmark::after {
  content: "";
  position: absolute;
  display: none;
}
 
/* 当多选框被选中时显示勾选标记内的对勾 */
.checkbox input:checked + .checkmark::after {
  display: block;
  content: "✔";
  color: white;
  font-size: 16px;
  font-weight: bold;
  line-height: 20px;
  text-align: center;
}

这个示例中，我们创建了一个带有隐藏多选框的标签，并在其上方覆盖了一个圆形的标记。当多选框被选中时，圆形背景色改变，并在其中显示一个对勾符号。CSS中使用了+兄弟选择器来选择紧跟在多选框后面的勾选标记，并在其中添加了文本内容。这个简单的例子演示了如何使用CSS创建交互式UI元素，并且不需要JavaScript。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式与优先级示例</title>
    <style>
        p {
            font-family: "Times New Roman", Times, serif; /* 设置段落文本的字体 */
            font-size: 16px; /* 设置字体大小 */
            line-height: 1.5; /* 设置行高 */
            font-weight: bold; /* 设置字体为粗体 */
            color: blue; /* 设置字体颜色 */
        }
        span {
            font-style: italic; /* 设置<span>元素内的文本为斜体 */
        }
    </style>
</head>
<body>
    <p>
        这是一个<span>示例</span>段落，其中一部分文本是斜体。
    </p>
</body>
</html>

这段代码在<head>标签内包含了一个内部样式表，定义了一个段落的字体样式和颜色，以及如何将斜体应用于段落中的一部分文本。在<style>标签中，使用了CSS的font-family、font-size、line-height、font-weight和color属性来设置字体样式，并使用font-style属性将特定文本设置为斜体。这样的代码可以教导开发者如何使用CSS来控制网页中文本的显示，并且展示了CSS样式优先级的基本原则。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式布局示例</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .header {
            background-color: #92a8d1;
            padding: 10px;
            color: white;
            text-align: center;
        }
        .nav {
            float: left;
            width: 20%;
            background: #87ceeb;
            padding: 15px 0;
            text-align: center;
        }
        .nav a {
            color: inherit;
            text-decoration: none;
            display: block;
            padding: 5px;
        }
        .nav a:hover {
            background-color: #778899;
        }
        .content {
            float: right;
            width: 80%;
            padding: 15px;
        }
        @media screen and (max-width: 799px) {
            .nav, .content {
                float: none;
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>响应式布局示例</h1>
    </div>
    <div class="nav">
        <a href="#">主页</a>
        <a href="#">关于我们</a>
        <a href="#">产品</a>
        <a href="#">联系方式</a>
    </div>
    <div class="content">
        <h2>内容</h2>
        <p>这里是内容区域，可以根据屏幕大小自适应调整。</p>
    </div>
</body>
</html>

这个示例代码展示了如何使用CSS媒体查询（Media Queries）来创建一个基本的响应式布局。当屏幕宽度小于799像素时，导航栏和内容区将不再浮动，并占满屏幕宽度。这样就能确保不论在平板电脑、手机还是大屏幕设备上查看网页时，布局都能保持良好的可读性和可用性。

在CSS中，line-height属性用于设置行间距，即行与行之间的垂直距离。这个属性可以影响行框的高度，以及元素的高度和行高四周的空间。

line-height可以接受多种类型的值：

1. 数字：不带单位，与当前字体大小的倍数。
2. 长度单位：如px, em, 等，直接指定行高的具体大小。
3. 百分比：基于当前字体大小的百分比来设置行高。
4. normal：浏览器默认的行高。

示例代码：

p {
  line-height: 1.5; /* 数字，相对于当前字体大小的1.5倍 */
}
 
p {
  line-height: 24px; /* 长度单位，具体的行高为24像素 */
}
 
p {
  line-height: 150%; /* 百分比，相对于当前字体大小的150% */
}
 
p {
  line-height: normal; /* 默认的行高 */
}

行高对于文本的排版非常重要，它影响文本的可读性和视觉效果。在设计网页时，合理地调整行高可以使文本内容看起来更加整洁、舒服。

要实现单行文本溢出显示为省略号，可以使用CSS的text-overflow属性结合white-space和overflow属性。以下是实现该效果的CSS代码示例：

.ellipsis {
  white-space: nowrap;      /* 确保文本在一行内显示 */
  overflow: hidden;         /* 超出容器部分隐藏 */
  text-overflow: ellipsis;  /* 使用省略号表示文本溢出 */
}

接下来，将这个类应用到你的HTML元素上：

<div class="ellipsis">这是一段很长的文本，需要在单行内显示并且超出部分用省略号表示</div>

这样，当文本内容超出其容器宽度时，会在末尾显示省略号。

/* 定义一个简单的动画，用于展示如何为列表项添加展开/折叠动画 */
@keyframes listItemExpand {
    from {
        max-height: 0;
        opacity: 0;
    }
    to {
        max-height: 1000px; /* 根据实际内容设置一个足够大的最大高度 */
        opacity: 1;
    }
}
 
/* 应用动画到具有.expand类的元素上 */
.expand {
    animation: listItemExpand 0.5s ease-out;
}
 
/* 应用动画延迟，用于折叠动画 */
.collapse {
    animation: listItemExpand 0.5s ease-out forwards;
}
 
/* 动画延迟后的最大高度设置为0，确保元素在展开后被折叠 */
.collapse.after {
    max-height: 0;
    opacity: 0;
}

这个代码示例展示了如何使用CSS动画来实现一个可折叠列表的展开和折叠动画。.expand类用于触发元素的展开动画，而.collapse类用于触发折叠动画，并且可以通过添加.after类来设置动画延迟之后的状态。这个例子简单明了，有助于理解和学习CSS动画的应用。

以下是一个简单的HTML和CSS代码示例，用于实现百叶窗动画效果：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百叶窗动画</title>
<style>
  .blind {
    width: 200px;
    height: 150px;
    background-color: #f0f0f0;
    position: relative;
    margin: 50px;
  }
  .blind::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: white;
    transition: all 0.5s ease;
  }
  .blind:hover::before {
    top: 50%;
  }
</style>
</head>
<body>
 
<div class="blind"></div>
 
</body>
</html>

这段代码创建了一个.blind类，它在鼠标悬停时显示出百叶窗动画效果。.blind::before伪元素用于创建百叶窗的上半部分，并且通过CSS的transition属性实现平滑的动画效果。当鼠标悬停在.blind元素上时，::before伪元素的top属性从0变为50%，从而实现百叶窗从上到下关闭的效果。