CSS入门教程2

四、文本属性

4.1.color 文本颜色

color 属性用于定义文本的颜色

div {
  /* color: deeppink; */
  /* color: rgb(252, 209, 209); */
            color: #71ee94;

4.2.text-align 文本对齐

text-align 属性用于设置元素内文本内容的水平对齐方式。

h1 {
  /* text-align: center; */
  /* text-align: right; */
  text-align: left;
        }

4.3.text-decoration修饰文本

div {
  /* 下划线 */
  /* text-decoration: underline; */
  /* 删除线 */
  text-decoration: line-through;
  /* 上划线 */
  text-decoration: overlines;
        }

4.4.text-indent 文本缩进

em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。

div { 
        text-indent：20px；
    }
    div { 
        text-indent：2em；
    }

4.5.line-height 行高

line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离

div {
       line-height: 16px;
        }

五、CSS样式表

5.1.行内样式表 很少使用

行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式.

<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>

5.2.内部样式表 使用还行

内部样式表（内嵌样式表）是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个

<style>
          div {
               color: red;
               font-size: 12px;
                }
 </style>

5.3.外部样式表 最多使用

实际开发都是外部样式表. 适合于样式比较多的情况. 核心是:样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中使用.

引入外部样式表分为两步：

1. 新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。
2. 在 HTML 页面中，使用 标签引入这个文件。

<link rel="stylesheet"  href="css文件路径">

六、Chrome调试工具

1. Ctrl+滚轮 可以放大开发者工具代码大小。
2. 左边是 HTML 元素结构，右边是 CSS 样式。
3. 右边 CSS 样式可以改动数值（左右箭头或者直接输入）和查看颜色。
4. Ctrl + 0 复原浏览器大小。
5. 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。
6. 如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误。

七、emmet语法

7.1.emmet语法简介

Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法。

7.2.快速生成HTML结构语法

• 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成
• 如果想要生成多个相同标签 加上 就可以了 比如 div3 就可以快速生成3个div
• 如果有父子级关系的标签，可以用 > 比如 ul > li就可以了
• 如果有兄弟关系的标签，用 + 就可以了 比如 div+p
• 如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键就可以了
• 如果生成的div 类名是有顺序的， 可以用 自增符号 $
• 如果想要在生成的标签内部写内容可以用 { } 表示

7.3.快速生成CSS样式语法

CSS 基本采取简写形式即可

• 比如 w200 按tab 可以 生成 width: 200px;
• 比如 lh26px 按tab 可以生成 line-height: 26px;

7.4.快速格式化代码

Vscode 快速格式化代码: shift+alt+f

也可以设置 当我们 保存页面的时候自动格式化代码:

1. 文件 ------.>【首选项】---------->【设置】；
2. 搜索emmet.include;
3. 在settings.json下的【工作区设置】中添加以下语句：

    "editor.formatOnType": true,

​    "editor.formatOnSave": true