CSS 入门 - 技术栈

1. CSS

1.1 概念

CSS（Cascading Style Sheet），层叠样式表，用于控制页面的样式

CSS 能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果，能够做到页面的样式和结构分离（类似于对页面的展示进行 "化妆"）

1.2 基本语法规范

选择器 + {一条 / N 条声明}

选择器决定针对谁修改（找谁）
声明决定修改啥（干啥）
声明的属性是键值对，使用**;**区分键值对，使用 : 区分键和值

tip：

CSS 要写到 style 标签中
style 标签可以放到页面的任意位置，一般放到 head 标签内
CSS 使用 /* */ 作为注释（Ctrl + /）

1.3 引入方式

CSS 有 3 中引入方式，语法如下：

|------|-------------------------------------|-----------------------------------------------|
| 引入方式 | 语法描述 | 示例 |
| 行内样式 | 在标签内使用 style 属性，属性值是 CSS 属性键值对 | <div style="color:green">绿色</div> |
| 内部样式 | 定义 <style> 标签，在标签内部定义 CSS 样式 | <style>h1{...}</style> |
| 外部样式 | 定义<style>标签，通过 href 属性引入外部 CSS 文件 | <link rel="stylesheet" href="[CSS 文件路径]"> |

对比：

1. 内部样式会出现大量的代码冗余，不方便后期的维护，所以不常用
1. 行内样式，只适合于写简单样式，只针对某个标签生效
1. 外部样式，html 和 css 实现了完全分离，企业开发常用方式

1.4 规范

样式大小写：虽然 CSS 不区分大小写，但是推荐开发时统一使用小写字母

空格规范：1. 冒号后面带空格；2. 选择器和 { 之间也有一个空格

1.5 CSS 选择器

CSS 选择器的主要功能就是选中页面指定的标签元素，选中了元素，才可以设置元素的属性

CSS 选择器主要分为以下几种：

1) 标签选择器

2) 类选择器

一个类可以被多个标签使用，一个标签也能使用多个类（多个类名要用空格分隔，这种做法可以让代码更好复用）

3) ID 选择器

4) 通配符选择器

5) 复合选择器

tip：

以上三个标签选择器 ul li a 中的任何一个，都可以替换成类选择器，或者 id 选择器，可以是任意选择器的组合，也可以是任意数量选择器的组合
不一定是相邻的标签，也可以是 "孙子" 标签
如果需要选择多种标签，可以使用 **,分隔，如p, div { }**表示同时选中 p 标签和 div 标签，逗号前后可以是以上任意选择器，也可以是选择器的组合

1.6 常用 CSS

1.6.1 color 设置字体颜色

html 复制代码

    <style>
        .text1 {
            color: red;
        }
    </style>

颜色的几种表达方式：

英文单词，如 red、blue
rgb 代码的颜色，如 rgb(255, 0, 0)
十六进制的颜色，如 #ff00ff

1.6.2 font-size 字体大小

html 复制代码

.text1 {
    font-size: 32px;
}

1.6.3 border 边框

边框是一个复合属性，可以同时设置多个样式，不分前后顺序，浏览器会根据设置的值自动判断

html 复制代码

.text1 {
    border: 1px solid purple;
}

以上 border 属性的对应设置的维度分别为边框粗细，边框样式，边框颜色

也可以拆开来设置，如下：

|--------------|--------|------------------------------------------|
| 样式 | 说明 | 取值 |
| border-width | 设置边框粗细 | 数值 |
| border-style | 设置边框样式 | dotted : 点状 solid：实线 double：双线 dashed：虚线 |
| border-color | 设置边框颜色 | 同 color |

上面的 border: 1px solid purple; 就等同于以下代码

html 复制代码

.text1 {
    border-width: 1px;
    border-style: solid;
    border-color: purple;
}

tip：

1.6.4 width / height（宽度 / 高度）

只有块级元素可以设置宽高

块级元素是 HTML 标签的一种显示模式，对应的还有行内元素

常见块级元素：h1-h6、p、div 等

常见行内元素：a span

块级元素独占一行，可以设置宽高

行内元素不独占一行，不能设置宽高

可使用 display 属性修改元素的显示模式

display：block 改成块级元素（常用）

display：inline 改成行内元素（很少用）

1.6.5 padding 内边距

设置内容和边框之间的距离

内容默认是顶着边框来放置的，用 padding 来控制这个距离

padding 也是一个复合样式，可以对四个方向分开设置

padding-top
padding-right
padding-bottom
padding-left

1.6.6 外边距

设置元素和元素之间的距离

margin 也是一个符合样式，可以给四个方向都加上外边框

margin-top
margin-right
margin-bottom
margin-left