CSS 入门

1. CSS

1.1 概念

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

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

1.2 基本语法规范

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

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

tip：

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

1.3 引入方式

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

对比：

• 1. 内部样式会出现大量的代码冗余，不方便后期的维护，所以不常用
• 2. 行内样式，只适合于写简单样式，只针对某个标签生效
• 3. 外部样式，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 设置字体颜色

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

颜色的几种表达方式：

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

1.6.2 font-size 字体大小

.text1 {
    font-size: 32px;
}

1.6.3 border 边框

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

.text1 {
    border: 1px solid purple;
}

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

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

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

.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