CSS 基础开发

在本文中我将介绍以下几点：

CSS介绍
使用方法
选择器
常用属性

1 CSS 介绍

期初网页上的内容可以通过 html 进行展示和渲染，但是我们可以看到相对来说比较朴素，这时候就需要我们对其做一些适当的修饰和美化，这时候就需要使用到我们的 CSS

CSS：是一种用于修饰网页的文本样式语言，还可以配合 Javascript 脚本语言动态对网页各标签名操作。

2 CSS 使用方式

1、内联方式（行内样式），直接在标签中指定 style 来设置 CSS 样式属性

<p style="color:red">在HTML中如何使用css样式</p>

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试css</title>
</head>
<body>
<!-- 继承上面 style 中 div 指定的红色 -->
    <div style="color: green">
        <p>这是第一个段落</p>
        <p>这是第一个段落</p>
        <p>这是第一个段落</p>
    </div>
</body>
</html>

字体为绿色

2、内部方式（内嵌样式），在 head 标签中使用，这种方式使用相对较多

<style type="text/css">
    p {
    color:red;
    }
</style>

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试css</title>
<!-- 对 head 中的 div 指定颜色为红色，常用方法 -->
    <style>
        div {
           color: red;
        }
    </style>
</head>
<body>
<!-- 继承上面 style 中 div 指定的红色 -->
    <div>
        <p>这是第一个段落</p>
        <p>这是第一个段落</p>
        <p>这是第一个段落</p>
    </div>
</body>
</html>

可以字体看到已经为红色

3、外部导入方式（推荐），在head标签中使用

<link href="main.css" type="text/css" rel="stylesheet"/>

2.1 选择器

所谓的选择器也就是说，如何在 html 中的多个代码块中如何指定一个我们想要改变样式的代码块

选择器的目的就是让 css 找到我们想要改变样式的那个 html 标签名，如 form、div 等这类标签

选择器：指定需要改变样式的HTML标签名（标签）

常见选择器：标签选择器、类选择器、ID选择器、派生选择器

格式： 选择器{属性:值;属性:值;属性:值;….}

我们学 css 主要就是两点：

找那块标签字段
对找到后的字段需要进行什么操作

2.1.1 选择器：标签名

标签名选择器：使用html标签作为选择器，为指定标签设置样式。

示例1：h1标签名设置样式

h1 {
    color: red; 
    font-size: 14;
}

范例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试css</title>
    <style>
        /* 对 head 中的 div 指定颜色为红色 */
        div {
           color: red;
        }
        /* 指定 h1 为紫色 */
        h1{
            color: blueviolet;
        }
    </style>
</head>
<body>
    <h1>你好前端！</h1>

    <!-- 继承上面 style 中 div 指定的红色 -->
    <div style="color: green">
        <p>这是第一个段落</p>
        <p>这是第一个段落</p>
        <p>这是第一个段落</p>
    </div>
</body>
</html>

示例2：多个标签名设置样式，这里是对 h1,h2,h3,h4,h5,h6 标签里的内容都设置为绿色

h1,h2,h3,h4,h5,h6 {
    color: green;
}

示例3：子标签名会继承最高级标签名所有属性

body {
    color: #000;
    font-family: Verdana, serif; /*字体*/ 
}

2.1.2 选择器：ID

上面的例子中我们可以看到覆盖的范围都很大，生效都是一大块的生效，那么有什么方式可以只修改特定的标签，这时候就需要通过 id 选择器的方式来实现，这是一种相对使用较多的方案

id 选择器：使用 “id” 作为选择器，为指定 id 设置样式。

使用格式：#id名{样式...}

特点：

每个id名称只能在HTML文档中出现一次
在实际开发中，id一般预留JavaScript使用

第一步：给标签指定id

<p id="t">...</p>

第二步：针对 id 设置样式

#t {
    color: red;
}

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试css</title>
    <style>
        h1{
            color: blueviolet;
        }
        /*指定 id t 选择器为红色*/
        #t{
          color: red;
        }
        /*指定 id tp 选择器为蓝色，会覆盖父属性，前提属性一样*/
        #tp {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>你好前端！</h1>
    <h1>你好css！</h1>
    <div>
        <p>这是第一个段落</p>
        <p>这是第一个段落</p>
        <p>这是第一个段落</p>
    </div>
<!-- 引用 id=t 的选择器 -->
    <div id="t">
        <!-- 引用 id=tp 的选择器 -->
        <p id="tp">这是第2个段落</p>
        <p>这是第2个段落</p>
        <p>这是第2个段落</p>
    </div>
</body>
</html>

可以看到第二个 div 的内容为红色，而第一个 p 标签的内容为蓝色

可以看到通过这种指定 id 的方式从而实现了不同标签的单独赋值，这种方式可以针对性的对每一个标签进行管理

2.1.3 选择器：class

ID 选择器在 css 中使用较少，而我们常用的则是 class 选择器

类选择器：使用“类名”作为选择器，为指定类设置样式。

class 选择器与 ID 选择器的区别：

class 选择器在 html 代码中能够出现多次，而 id 选择器只能够出现一次
class 选择器是具有可复用性

使用格式：.类名{样式…}

第一步：给标签指定类

<p class="c">...</p>

第二步：针对类设置样式

.c {
    color: red;
}

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试css</title>
    <style>
        /* 指定 h1 标签为 紫色 */
        h1{
            color: blueviolet;
        }
        /* 指定 .c 类型为 red */
        .c{
            color: red;
        }
        /* 指定 .p 类型为 green */
        .p{
            color: green;
        }
    </style>
</head>
<body>
    <h1>你好前端！</h1>
    <h1>你好css！</h1>
    <!-- 引用 style 中 .c 类型指定的红色 -->
    <div class="c">
        <p>这是第一个段落</p>
        <p>这是第一个段落</p>
        <!-- 引用 style 中 .p 类型指定的绿色 -->
        <p class="p">这是第一个段落</p>
    </div>
    <div>
        <p>这是第2个段落</p>
        <p>这是第2个段落</p>
        <p>这是第2个段落</p>
    </div>
</body>
</html>

可以看到第一个 div 中已经赋值了红色，然后 class="p" 选择器的就为绿色

2.1.4 选择器：派生

派生选择器：依据标签名在其位置的上下文关系来定义样式。

如上图：

在一个 html 中类似于像树形结构一样的关系，可以看到顶级就是 html，而接着就是 head、body，第三级则是一些常用的 h1、div 等标签。

所以能够看出 html 中是有对应的结构，而我们就能够通过这种结构来找到对应的标签

示例：

<style type="text/css">
    .c p {
        color: red;
    }
</style>

<div class="c">
    <h1>一号标题</h1>
    <p>这是一个段落</p>
</div>

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试css</title>
    <style>
        /* 定义 .c 的 class 然后 h3 标签指定为红色 */
        .c h3{
            color: red;
        }
    </style>
</head>
<body>
    <h1>你好前端！</h1>
    <h1>你好css！</h1>
    <!-- 引用 style 中 .c 类型指定的红色 -->
    <div class="c">
        <h3>派生选择器</h3>
        <p>这是第一个段落</p>
        <p>这是第一个段落</p>
    </div>
    <div>
        <p>这是第2个段落</p>
        <p>这是第2个段落</p>
        <p>这是第2个段落</p>
    </div>
</body>
</html>

h3 中的派生选择器已经为红色

3 CSS 常用属性

在第二章节中，我们已经实现了对标签的寻找，但是只是简单修改颜色，接下来我们就看看其他几个常见的功能

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试css</title>
    <style>
        /* 分别给 cc1 和 cc2 的 class 选择器设置两个不同的背景 */
        .cc1 {
            background:palegreen;
        }
        .cc2 {
            background: aquamarine;
        }
    </style>
</head>
<body>
    <h1>你好前端！</h1>
    <h1>你好css！</h1>
    <!-- 引用 style 中 .c 类型指定的红色 -->
    <div class="cc1">
        <p>这是第一个段落</p>
        <p>这是第一个段落</p>
        <p>这是第一个段落</p>
    </div>
    <div class="cc2">
        <p>这是第2个段落</p>
        <p>这是第2个段落</p>
        <p>这是第2个段落</p>
    </div>
</body>
</html>

当我们访问浏览器的时候可以发现现在有两个背景，但是正常情况下我们会给这两个背景调试一定的距离，所以当 div 布局完之后我们会给他定义长度和宽度

所以我这里将其代码进行修改，并设置了宽和高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试css</title>
    <style>
        /* 分别给 cc1 和 cc2 的 class 选择器设置两个不同的背景 */
        .cc1 {
            background:palegreen;
            /* 设置宽度和高度为 200px ，正常情况下 div 都需要设置宽和高 */
            width: 200px;
            height: 200px;
        }
        .cc2 {
            background: aquamarine;
            /* 设置宽度和高度为 200px */
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <h1>你好前端！</h1>
    <h1>你好css！</h1>
    <!-- 引用 style 中 .c 类型指定的红色 -->
    <div class="cc1">
        <p>这是第一个段落</p>
        <p>这是第一个段落</p>
        <p>这是第一个段落</p>
    </div>
    <div class="cc2">
        <p>这是第2个段落</p>
        <p>这是第2个段落</p>
        <p>这是第2个段落</p>
    </div>
</body>
</html>

这次就可以看到对应的高度和宽度

虽然设置了高度和宽度，但是有的时候希望将 div 放到一个我们自己想放的一个位置，所以接下来我们就需要学习如何来控制 div 的一个位置

3.1 CSS常用属性：内边距和外边距

padding（内边距）：钻戒到盒子内边框的距离
margin（外边距）：钻戒盒子距离桌子边缘的距离，假设将戒指放到桌子上，也就是钻戒盒子到桌子边框的这么一个距离，所以我们可以将桌子想象成一个 html 的这么一个文档，然后将 div 想象成一个钻戒盒子，然后在这个 div 中也会放其他的元素这就表示钻戒。
border：钻戒盒子边框宽度

padding：用于调整内边距，也就是相当于上面钻戒到盒子边缘的这么一个距离

margin：用于调整外边距，相当于上面钻戒到桌面边缘的这么一个距离

示例：

padding: 10px 5px 15px 20px # 上右下左

padding: 10px 5px 15px # 上右下

padding: 10px 5px # 上右

padding: 10px # 四边都是10px

3.1.1 代码示例

这里我就在百度上找一个钻戒的图片用来举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试css</title>
    <style>
/* 桌子宽高 300px 背景为灰色 */
        .zuozi{
            width: 300px;
            height: 300px;
            background: gray;
        }
/* 盒子宽高 100px 背景为红色 */
        .hezi{
            width: 100px;
            height: 100px;
            background: red;
        }
        /* 通过派生方式查找 img */
        .hezi img{
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
<!-- 定义一个桌子 -->
    <div class="zuozi">
        <!-- 定义一个钻戒盒子 -->
        <div class="hezi">
            <!-- 导入钻戒图片 -->
            <img src="images/钻戒.jpg" alt="" >
        </div>
    </div>
</body>
</html>

但是现在这个图片可以看到都是默认在靠左边，那么我们该如何移动到桌子的中央来。

修改代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试css</title>
    <style>
/* 桌子宽高 300px 背景为灰色 */
        .zuozi{
            width: 300px;
            height: 300px;
            background: gray;
        /* 添加边框用来锁定布局，以实现盒子能够正常移动 */
            border: 1px dashed gray;
        }
/* 盒子宽高 100px 背景为红色 */
        .hezi{
            width: 100px;
            height: 100px;
            background: red;
            /* margin-left 和 margin-top 将上外边距和左外边距设置为 100px */
            /* 因为本身盒子的高宽为 100px 而桌子则为 300px 所以让左外和上外边距分别设置为 100 px 这样盒子就会在中间 */
            margin-left: 100px; /* 盒子向右移动 100px */
            margin-top: 100px; /* 盒子向下移动 100px */
        }
        /* 通过派生方式查找 img */
        .hezi img{
            width: 50px;
            height: 50px;
            /* 因为戒子的高宽为 50px 而盒子则为 100px 所以让左外和上外边距分别设置为 25 px 这样戒子就会在中间 */
            margin-left: 25px; /* 钻戒向右移动 25*/
            margin-top: 25px;  /* 钻戒向下移动 25*/
        }
    </style>
</head>
<body>
<!-- 定义一个桌子 -->
    <div class="zuozi">
        <!-- 定义一个盒子 -->
        <div class="hezi">
            <!-- 导入钻戒图片 -->
            <img src="images/钻戒.jpg" alt="" >
        </div>
    </div>
</body>
</html>

可以看到钻戒就跑到了中间

3.2 CSS常用属性：字体 font-*

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试css</title>
    <style>
        .cc{
            color: red;
            /* 设置字体大小 16像素 */
            font-size:16px;
            /* 字体加粗 */
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="cc" >
        <p>这是一个段落</p>
        <p>这是一个段落</p>
        <p>这是一个段落</p>
    </div>
</body>
</html>

3.3 CSS 常用属性：文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试css</title>
    <style>
        .cc{
            color: red;
            /* 设置字体大小 16像素 */
            font-size:16px;
            /* 字体加粗 */
            font-weight: bold;
            /* 设置宽度和高度 */
            width: 200px;
            height: 200px;
            /* 设置背景为灰色 */
            background: gray;
            /* 设置字体居中 */
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="cc" >
        <p>这是一个段落</p>
        <p>这是一个段落</p>
        <p>这是一个段落</p>
    </div>
</body>
</html>

3.3.1 去掉超链接下划线

如下图可以看到默认情况下是有超链接的

那么如何去掉超链接中的下划线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试css</title>
</head>
<body>
    <!-- style="text-decoration:none" 可以去除超链接中的下划线 -->
    <a href="www.baidu.com" style="text-decoration:none " >百度</a>
</body>
</html>

3.4 CSS常用属性：边框 border-*

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试css</title>
    <style>
        .cc{
            width: 300px;
            height: 300px;
            background: coral;
            /* 添加边框 5px像素并且是实心蓝色的 */
            border: 5px solid blue ;
            /* 将边框四个角边圆 */
            border-radius: 10px;
            /* 给边框添加阴影 */
            box-shadow: 1px 2px 3px 1px #c2c2c2;
        }
    </style>
</head>
<body>
    <div class="cc" >
        <p>这是一个段落</p>
        <p>这是一个段落</p>
        <p>这是一个段落</p>
    </div>
</body>
</html>

可以看到这里就已经有圆边框和阴影等样式

3.4.1 如何实现卡片效果

我们可以通过 box-shadow 这种方式实现卡片效果，而常用的有以下两种

示例一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试css</title>
    <style>
        .cc{
            width: 300px;
            height: 300px;
            /* 将边框四个角边圆 */
            border-radius: 10px;
            /* 给边框添加阴影 */
            box-shadow: 1px 2px 3px 1px #c2c2c2;
        }
    </style>
</head>
<body>
    <div class="cc" >
        <p>这是一个段落</p>
        <p>这是一个段落</p>
        <p>这是一个段落</p>
    </div>
</body>
</html>

可以看到已经有类似于卡片效果了

示例二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试css</title>
    <style>
        .cc{
            width: 300px;
            height: 300px;
            /* 将边框四个角边圆 */
            border-radius: 10px;
            /* 给边框添加阴影 */
            box-shadow: 0 5px 20px 0 #e8e8e8;
        }
    </style>
</head>
<body>
    <div class="cc" >
        <p>这是一个段落</p>
        <p>这是一个段落</p>
        <p>这是一个段落</p>
    </div>
</body>
</html>

3.5 CSS常用属性：背景 background-*

3.5.1 图片相关处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试css</title>
    <style>
        .cc {
            width: 300px;
            height: 300px;
            /*通过 background-image: url("./images/钻戒.jpg") 导出本地 /images/钻戒.jpg 图片*/
            background-image: url("./images/钻戒.jpg");
            /* 通过 background-size: 300px 300px 设置图片高宽分别都为 100px，因为有的图片比我设置的 div 高宽要多就会导致图片溢出 */
            background-size: 300px 300px;
            /* 只让图片显示一次*/
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div class="cc" >

    </div>
</body>
</html>

可以看到现在该图片就已经将 div 填充满了

3.6 CSS常用属性：Flex弹性布局

在之前要控制HTML元素的布局，会用到 padding、margin、postion、float 等方法，经过反反复复调试才能实现效果。

自从 Flex 弹性布局出现，一切似乎豁然开朗！

启用 Flex 布局，只需要在外部元素设置 display: flex 属性

如上图，假如一个个绿色小方框就是对应的 div ，Flex布局有一个隐式的坐标空间，水平方向有一条主轴，垂直方向有一条交叉轴：

我们可以基于交叉轴和主轴来改变里面这三个 div 的布局

改变主轴（横向）的布局：

justify-content:

flex-end：右对齐
center：居中对齐
space-evenly：平分空间
space-between：两端对齐

改变交叉轴（竖向）的布局：

align-items

flex-end：靠下对齐
center：居中对齐

调整空间占比（子元素宽度）：

例如第一个元素三分之一，第二个元素占三分之二，第三个元素占三

分之一：flex:1;flex2;flex1

3.6.1 默认布局范例演示

1 这里我先写一个演示代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试css</title>
    <style>
        .flex{

        }
        /*红色*/
        .flex1{
            background: red;
        }
        /*绿色*/
        .flex2{
            background: green;
        }
        /*橙色*/
        .flex3{
            background: orange;
        }
    </style>
</head>
<body>
    <div class="flex" >
            <!-- 分别在三个不同的 div 中引用对应的 flex1 -->
            <div class="flex1">DIV1</div>
            <div class="flex2">DIV2</div>
            <div class="flex3">DIV3</div>
    </div>
</body>
</html>

可以看到当前是采用了 html 的默认布局

3.6.2 启用 flex 布局

现在我就准备启用 flex 布局，启用 flex 布局只能在父元素进行定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试css</title>
    <style>
        /* 给父元素 div 进行布局 */
        .flex{
            /* 添加灰色边框为 3 像素 */
            border: 3px gray solid ;
        }
        /*红色*/
        .flex1{
            background: red;
        }
        /*绿色*/
        .flex2{
            background: green;
        }
        /*橙色*/
        .flex3{
            background: orange;
        }
    </style>
</head>
<body>
    <div class="flex" >
            <!-- 分别在三个不同的 div 中引用对应的 flex1 -->
            <div class="flex1">DIV1</div>
            <div class="flex2">DIV2</div>
            <div class="flex3">DIV3</div>
    </div>
</body>
</html>

可以看到现在整个都被灰色的边框所包裹

3.6.3 定义宽度和高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试css</title>
    <style>
        /* 给父元素 div 进行布局 */
        .flex{
            /* 添加灰色边框为 3 像素 */
            border: 3px gray solid ;
        }
        /*红色*/
        .flex1{
            width: 300px;
            height: 300px;
            background: red;
        }
        /*绿色*/
        .flex2{
            width: 300px;
            height: 300px;
            background: green;
        }
        /*橙色*/
        .flex3{
            width: 300px;
            height: 300px;
            background: orange;
        }
    </style>
</head>
<body>
    <div class="flex" >
            <!-- 分别在三个不同的 div 中引用对应的 flex1 -->
            <div class="flex1">DIV1</div>
            <div class="flex2">DIV2</div>
            <div class="flex3">DIV3</div>
    </div>
</body>
</html>

但是现在可以看到还是采用的 html 默认布局，但是现在我想让他排列，就需要使用到改变主轴(横向)的布局：

justify-content：

flex-end：右对齐
center：居中对齐
space-evenly：平分空间
space-between：两端对齐

3.6.4 主轴使用案例

只需在 style 中的第一个父元素 div 下启用 flex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试css</title>
    <style>
        /* 给父元素 div 进行布局 */
        .flex{
            /* 添加灰色边框为 3 像素 */
            border: 3px gray solid ;
            /* 启用 flex ，默认就会变成一行 */
            display: flex;
        }
        /*红色*/
        .flex1{
            width: 300px;
            height: 300px;
            background: red;
        }
        /*绿色*/
        .flex2{
            width: 300px;
            height: 300px;
            background: green;
        }
        /*橙色*/
        .flex3{
            width: 300px;
            height: 300px;
            background: orange;
        }
    </style>
</head>
<body>
    <div class="flex" >
            <!-- 分别在三个不同的 div 中引用对应的 flex1 -->
            <div class="flex1">DIV1</div>
            <div class="flex2">DIV2</div>
            <div class="flex3">DIV3</div>
    </div>
</body>
</html>

通过 justify-content: flex-end; 实现右对齐