HTML/CSS代码快速编写技巧

Joseph365

于 2023-02-08 14:32:56 发布

阅读量177

点赞数

分类专栏： css 文章标签： css html 前端

原文链接：https://www.cnblogs.com/lykblog/p/4714954.html

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

一、Emmet

Emmet的前身是Zen Coding，它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度，由两个核心组件组成：一个缩写扩展器（缩写为像CSS一样的选择器）和上下文无关的HTML标签对匹配器。

二、快速编写HTML代码

1.初始化

HTML包含一些固定的标签，比如,,等，利用Emmet可以1秒完成这些标签的输入

/*  比如：输入“!”或“html:5”,然后按Tab键，就能生成
 *  html:5 或者 ！：用于生成HTNL5文档类型
 */ 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   
</body>
</html>

2.轻松的添加类，id，文本和属性

连续输入元素名称和ID，Emmet会自动不全，比如：输入p#foo, 就能生成

<p id="foo"></p>

连续输入类和id，比如：p.bar#foo，会自动生成：

<p class="bar" id="foo"></p>

定义元素内容: h1{ 标题内容 }

<h1>标题内容</h1>

3.嵌套

利用Emmet只需要一行代码就可以实现标签的嵌套

>: 子元素符号，表示嵌套的元素
+: 表示同级标签符号
^: 可以使用该符号前的标签提升一行

<!-- p>span -->
<p><span></span></p>

<!-- h1+h2 -->
<h1></h1><h2></h2>

<!-- p>span^p -->
<p><span></span></p><p></p>

4.分组

利用Emmet可以通过嵌套和括号快速生成一些代码块，比如：输入(.foo>h1)+(#bar>h2)，会自动生成：

<div class="foo">
    <h1></h1>
</div>
<div id="bar">
    <h2></h2>
</div>

5.隐式标签

声明一个带类的标签，如输入div.item, 就会自动生成

<div class="item"></div>

6.定义多个元素

要定义多个元素，可以使用符号 * ，比如：ul>li*5:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

7.定义多个带属性的元素

输入ul>li.item$*3, 将会自动生成

<ul>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
</ul>

三、Css缩写

1.值

比如要定义元素的宽度，除了px，还可以生成其他单位，如下

// w100
width:100px;

// h10p+m5e`,
height: 10%;
margin: 5em;

单位别名列表

p：表示%
e：表示em
x：表示ex

2.模糊匹配

如果有些缩写拿不准，会有最匹配的语法，比如输入：ov:h、ov-h、ovh都会生成overflow: hidden;

3.供应商前缀

如果输入非W3C标准的CSS属性，会自动的加上前缀

-webkit-transition: prop time;
-moz-transition: prop time;
-ms-transition: prop time;
-o-transition: prop time;
transition: prop time;

如果不希望加上所有的前缀，也可以使用缩写来指定，比如输入：-wm-trf，表示只加上-webkit和-moz前缀：

-webkit-transform: ;
-moz-transform: ;
transform: ;

4.渐变

输入lg(left, #fff 50%, #000)，会自动生成

background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000)); 
background-image: -webkit-linear-gradient(left, #fff 50%, #000); 
background-image: -moz-linear-gradient(left, #fff 50%, #000); 
background-image: -o-linear-gradient(left, #fff 50%, #000); 
background-image: linear-gradient(left, #fff 50%, #000);