1、当我们没有引入外部css样式表的时候，一般情况下我们会在html里写样式，而又两种方式使我们常见的，第一种：
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>time元素</title>
</head>
<body>
<div style="height:300pxwidth:500pxbackground:#999"></div>
</body>
2、第二种写法：
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>time元素</title>
<style>
.all{
height:300px
width:500px
background:#999}
</style>
</head>
<body>
3、建立一个css样式表文件
4、存储在css文件夹中
5、在html文件中写入链接代码，代码如下：
<link rel="stylesheet" type="text/css" href="css/index.css" />
6、之后可以看到HTML文件的源代码傍边看到我们所连接的css文件，此时就连接成功。
1、使用链接式<link href="style.css" rel="stylesheet" type="text/css" />2、使用导入式<style type="text/css">
图中的代码只是一个编辑时的未展开的HTML结构，你指的是EMMET吧：
EMMET 是一个前端代码编辑器常用插件，它能快速编辑HTML和css文档，只要明确了结构，可以像你图中的代码那样，先写好标签元素先后、嵌套结构，按下tab键就能写出完整的HTML代码了。
它是类似于代码提示、代码自动完成之类的编辑器插件，按下[TAB]键就自动生成规范的HTML代码行。比较快捷的办法就是：你也给自己的编辑器装EMMET插件，把图中的代码粘贴到编辑器，然后按下[TAB]键就可以了。
基本的语法结构例子：
1.元素。a ---<a></a>
2.带样式。
a.item ---<a class="item" href=""></a>
3.带样式和ID
.grid#header ----<div class="grid" id="header"></div>
4. 带属性
img[alt=logo] ----<img src="" alt="logo"/>
4. 具体可以了解EMMET的文档。
