CSS：层叠样式表（持续更新中）

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情

本文介绍对 CSS 的一些介绍：层叠样式表（给页面中的HTML标签设置格式）

一、基础认知

语法规则

• 内嵌式（CSS 写在style标签中）

<style>
    p{
        color:blue
    }
</style>

• 外联式（CSS 写在一个单独的.css文件中）

link标签 <link rel="stylesheet" href="路径选择">

• 行内式（CSS 写在标签的style属性中）

<p style="color:green">绿色</p>

二、基础选择器

• 标签选择器

  标签名 { css属性名：属性值； } p{color:blue; }

• 类选择器

  .类名 { css属性名：属性值； }

• id选择器

  #id属性值 { css属性名：属性值； }

• 通配符选择器

  *{ css属性名：属性值； }

三、字体和文本样式

字体样式

1.1.字体大小：font-size

数字+px

1.2.字体粗细：font-weight

normal：正常 bold：加粗

•纯数字：100~900的整百数：

1.3.字体样式：font-style

normal：正常 italic：倾斜

无衬线字体（sans-serif） 黑体、Arial

衬线字体（serif） 宋体、Times New Roman-

等宽字体（monospace） Consolas、fira code

1.4.字体类型：font-family

• 常见取值：具体字体1,具体字体2,具体字体3,具体字体4,...,字体系列

• 具体字体："Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等……

• 字体系列：sans-serif、serif、monospace等……

1.5.字体类型：font属性连写

font : style weight size family;

2.1.文本缩进

• 属性名：text-indent

  •数字+px

​ •数字+em（推荐：1em = 当前标签的font-size的大小）

2.2.文本水平对齐

• 属性名：text-align

• 取值：

2.3.文本修饰

• 属性名：text-decoration

• 取值：

纵向居中：heigth：100px； line-heigth：100px；

3.1.行高

• 属性名：line-height

  •数字+px

  •倍数（当前标签font-size的倍数）

  连写•font : style weight size/line-height family ;

四、Chrome调试工具

按F12可打开调试工具，查看样式

五、颜色常见取值

1. 关键词

   •red：红色

   •green：绿色

   •blue：蓝色

   •yellow：黄色

   •orange：橘色

   •skyblue：天蓝色

   •pink：粉色

2. rgb表示法（三原色）

   •rgb ( 255 , 0 , 0 ) ：红色

   •rgb ( 0 , 255 , 0 ) ：绿色

   •rgb ( 0 , 0 , 255 ) ：蓝色

   •rgb ( 0 , 0 , 0 ) ：黑色

   •rgb ( 255 , 255 , 255 ) ：白色

3. rgba表示法

   a：表示透明度 0~1

   •1：完全不透明

   •0：完全透明

4. 十六进制表示法

   •#fff ：白色

   •#000 ：黑色