前端三剑客（二）：CSS

目录

1. CSS 基础

1.1 什么是 CSS

1.2 语法格式

1.3 引入方式

1.3.1 行内样式

1.3.2 内部样式

1.3.3 外部样式

1.4 CSS 编码规范

2. 选择器

2.1 标签选择器

2.2 id 选择器

2.3 class 选择器(类选择器)

2.4 复合选择器

2.5 通配符选择器

3. 常用 CSS 样式

3.1 color

3.2 font-size

3.5 height / width

3.4 border

3.5 边距

3.5.1 内边距 - padding

3.5.2 外边距 - margin

1. CSS 基础

1.1 什么是 CSS

CSS(Cascading Style Sheets), 层叠样式表, 是用来表示 HTML 的一种计算机语言.

CSS负责网页的视觉表现，它定义了网页元素的布局、颜色、字体、间距等样式属性。

通俗来说, CSS 就是对页面进行 "化妆".

简而言之，HTML定义了网页的结构，CSS负责网页的外观和布局，而JavaScript则负责让网页"动起来"(能够让网页动态变化)。三者共同工作，创造出功能丰富、用户友好的网页和网络应用。

1.2 语法格式

选择器 + {声明}

1. 选择器决定修改谁
2. 声明决定要修改的内容
3. 声明的属性是键值对.(属性(键): 属性值(值))
4. 多个键值对间使用 ; 进行分割

1.3 引入方式

1.3.1 行内样式

直接在标签中使用 style 属性, 引入 CSS 属性的键值对:

这种方式的缺点是代码冗余, 若想全部更改 div 标签中内容的颜色, 则需要一个一个的填写代码:

1.3.2 内部样式

定义 <style> 标签, 在标签中定义 CSS (指定选择器):

• 选择器中所有的内容, 都会被修改为声明中的内容.
• style 标签通常定义在 head 标签中

需要注意的是, 使用内部样式引入 css 的同时, 若存在 div 标签在内部引入 css 的情况下(行内样式), 则采取就近原则的方式进行格式的修改:

1.3.3 外部样式

定义 <link> 标签，通过 href 属性引入外部 css 文件:

这张方式的优点是, 实现了 HTML 代码和 CSS 代码分离, 实现解耦, 代码的可维护性高.

1.4 CSS 编码规范

CSS 不区分大小写, 但统一规范使用小写字母.

空格规范:

1. 冒号后面跟一个空格
2. 选择器和 { 之间留一个空格

2. 选择器

CSS 中的选择器, 可以指定选中的页面中的元素, 并对这个元素中内容进行统一的修改(颜色, 字体, 边框....).

选择器主要有以下几种:

1. 标签选择器
2. id 选择器
3. class 选择器(类选择器)
4. 复合选择器
5. 通配符选择器

2.1 标签选择器

所有被标签选择器选中的元素, 标签中内容的属性都会被统一修改为选择器中设置的属性.

但是, 若选择器选中的标签中, 嵌套了一个 a 标签, 那么设置的属性值将不会生效, 因为 a 标签中也对内容进行了默认的属性设置, 标签中的内容将采取就近原则的方式跟随 a 标签默认设置的属性(内容离 a 标签最近).

如果要修改, 需要额外使用选择器选择 a 标签来进行修改:

也就是说, 选择器需要选中离内容最近的标签, 才会对内容的样式修改成功.

   /* 标签选择器 */
        div {
            color: red;
        }
        span {
            color: blue;
        }
        a {
            color: red;
        } 

2.2 id 选择器

id, 和我们之前所学的数据库中的 id 是相同的概念. 

页面中, 每个元素的 id 都是唯一的, 我们可以通过 id 选择器, 选中页面中某一元素的 id , 对该元素的样式进行细致的设置.

在使用 id 选择器时, 使用 # 对 id 进行选择:

 /* id 选择器 */
        #div1 {
            color: red;
        } 

2.3 class 选择器(类选择器)

每个元素可以设置唯一的 id 外, 还可以设置 class 值, 但是多个元素的 class 值可以是相同的.

具有相同 class 值的元素, 可以认为是同一组的, 使用 class 选择器则可以对这一组中所有的元素进行样式的设置.

使用 class 选择器时, 使用 . 对 class 进行选择:

        /* class 选择器 */
        .class1 {
            color: red;
        } 

2.4 复合选择器

复合选择器由多个单选择器构成, 单选择器可以是任意选择器, 可以是标签选择器, id 选择器, class 选择器 .... (但是不能是通配符选择器)

• 复合选择器可以由具有嵌套关系的选择器构成(选择器间使用空格分割):
• 复合选择器也可以由不同种类的选择器构成, 但是不同的标签间要使用 , (逗号)分割, 如:

其中,

1. ol 标签(order list)为有序的列表标签
2. ul 标签(unordered list)为无序的列表标签
3. list 为列表标签

/* 复合选择器 */
        #div1, #div2 {
            color: purple;
        } 

        ol li a{
            color: red;
            font-size: 20px;
        } 

2.5 通配符选择器

* 代表通配符, 通配符选择器选中的是页面中所有的元素(所有元素, 包含所有的嵌套标签).

使用通配符选择器可以对页面中所有的元素进行统一的修改.

/* 通配符选择器 */
        * {
            color: yellow;
        }

3. 常用 CSS 样式

3.1 color

color, 就是设置字体的颜色. 我们可以在选择器中指定 color 的属性值, 来指定字体的颜色.

color 属性值的设置有以下几种方式:

1. 英文单词
2. 手动设置三原色(红绿蓝)的比例, 如: rgb(xxx, xxx, xxx) (取值0~255)
3. 使用16进制设置三原色的比例:

3.2 font-size

font-size: 设置字体的大小 

        /* 字体 */
        #div1 {
            font-size: 20px;
        }

3.5 height / width

我们知道, 像 div 这样的标签, 其实可以视为一个 "盒子". 而我们就可以对 "盒子" 来设置宽高.

需要注意的是: 只有块级标签才可以设置宽和高

height: 设置高

width: 设置宽

1. 常见块级元素/块级标签: div , h1-h6 (带换行的)
2. 常见行内元素/行内标签: span, a, img (不带换行的)

若对 span 这样的行内标签设置宽高是不起作用的:

但是, 我们也可以修改 display 的属性值将行内标签设置为块级标签:

• 行内标签 => 块级标签: display: block;

也可以修改 display 将块级标签设置为行内标签:

• 块级标签 => 行内标签: display: inline;

3.4 border

当我们设置好高和宽后, 我们可以对边框(border)进行设置(边框是一个复合属性):

1. 设置边框类型(实线, 虚线, ...)
2. 设置边框粗细
3. 设置边框颜色(默认是透明的)

• 我们可以对边框四个方向上的属性分别进行设置(以颜色为例, 粗细和宽度都是可以的):

对方框四个方向的样式分别进行设置时, 还可以将四个方向上的值一次性写到一个 border 中:

(从 top(上) 开始, 顺时针方向填写属性值)

         /* 以下两种写法是相同的 */
         #div1 {
            height: 50px;
            width: 200px;
            border: solid;
            border-top-color: yellow;
            border-right-color: black;
            border-bottom-color: red;
            border-left-color: blue;
         }
         #div1 {
            height: 50px;
            width: 200px;
            border: solid;
            border-color: yellow black red blue;
         }

• 也可以对边框四个方向上的颜色, 粗细, 样式统一进行设置(四个方向上的边框都是相同的):

         /* 边框的四个方向都设置为: 粗细为: 1px, 颜色为: 红色, 样式为: 实线 */
         /* 以下两种写法是相同的 */
         #div1 {
            height: 50px;
            width: 200px;
            border-width: 1px;
            border-color: red;
            border-style: solid;
         }
         #div1 {
            height: 50px;
            width: 200px;
            border: 1px red solid;
         }

3.5 边距

边距分为以下两种:

1. padding: 内边距
2. margin: 外边距

内边距和外边距是两个相对的概念, 需要根据参照物来决定.

我们可以在选择器的声明中, 修改 padding / margin 的值来修改内外边距的距离.

如果以每个 div"盒子" 为参照物:

• 那么每个 div"盒子" 的边框(border)和内容之间的距离就是内边距.(内容和边框之间的距离)
• 每个 div"盒子" 和每个 div"盒子" 之间的距离就是外边距.(页面中, 元素和元素之间的距离)

3.5.1 内边距 - padding

padding: 内边距.

通过修改 padding 的值, 设置内容和边框之间的距离. (内容默认是顶着边框的)

padding 也是一个复合样式, 我们可以分别设置四个方向上的内边距:

1. padding-top (上)
2. padding-bottom (下)
3. padding-left (左)
4. padding-right (右)

当把四个方向的值一次性写到一个 padding 上时, 依旧是顺时针方向依次表示: 上 右 下 左.

3.5.2 外边距 - margin

margin: 外边距

通过修改 margin 的值, 设置盒子和盒子(元素和元素)之间的距离. (内容默认是顶着边框的)

        #div1 {
            padding: 10px;
            margin: 30px;
        }

END