【前端】一文带你了解 CSS

在这里插入图片描述

文章目录

1. CSS 是什么
2. CSS 引入方式
- 2.1 内部样式
- 2.2 外部样式
- 2.3 内联样式
3. CSS 常见选择器
- 3.1 基础选择器
- - 3.1.1 标签选择器
  - 3.1.2 类选择器
  - 3.1.3 id 选择器
  - 3.1.4 通配符选择器
- 3.2 复合选择器
- - 3.2.1 后代选择器
4. CSS 常用属性
- 4.1 字体相关
- 4.2 文本相关
- 4.3 背景相关
- 4.4 设置圆角矩形
5. 块级元素与行内元素
- 5.1 定义
- 5.2 区别
6. CSS 盒子模型
6.1 边框属性
6.2 内边距
- 6.3 外边距
7. 弹性布局

1. CSS 是什么

【CSS 含义】层叠样式表，英文全称 —— Cascading Style Sheets

层叠式样表听起来比较高大上，我们对此进行拆分理解：
1）层叠：指的是针对一个 html 的元素或者标签，可以同时应用多组 CSS 样式，多组样式叠加在一起
2）样式：大小、位置、间距、颜色、字体、边框、背景等等，统称为"样式"，描述了一个网页长的样子

【CSS 作用】CSS 能够对网页中元素的位置进行排版，对像素级精准控制，实现美化页面的效果，能够做到页面的样式和结构分离

上期内容我们学习了 HTML 的基本用法，可以实现简单的页面，但是不是很好看，有很多细节可以去调整，使页面变得"漂亮"起来，这时，CSS 闪亮登场啦，它就起到美化页面的效果！

2. CSS 引入方式

CSS 和 HTML 类似，也是在浏览器中运行的，在编写代码的时候，CSS 有多种引入方式，如下：

2.1 内部样式

【内部样式】直接把 CSS 嵌入到 HTML 中，放在 style 标签里面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <style>
        div {
            font-size: 50px;
            color: green;
        }
        </style>
</head>
<body>
 <div>
        hello
    </div>
</body>
</html>

效果如下：

在这里插入图片描述
图解说明：

在这里插入图片描述
【优点】能够使样式和页面结构分离
【缺点】但是分离的还不够彻底，尤其是 CSS 内容多的时候

2.2 外部样式

【外部样式】把 CSS 写成一个单独的 .css 文件，由 html 文件通过 link 标签引入

创建一个 css 文件
使用 link 标签引入 css 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
       <link rel="stylesheet" href = "style.css">
</head>
<body>
    <div>
        hello
    </div>    
</body>
</html>

style.css 文件内容如下：

div {
    font-size: 100px;
    color:red;
}

效果如下：

在这里插入图片描述
图解说明：

在这里插入图片描述
【优点】样式和页面结构彻底分离
【缺点】但是受到浏览器缓存影响，修改之后不一定立刻生效(可能需要一定的时间)

2.3 内联样式

【内联样式】直接把 CSS 属性写到元素的 style 属性内

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
</head>
<body>
    <div style="color: blueviolet; font-size: 200px;">hello</div>
</body>
</html>

效果如下：

在这里插入图片描述
图解说明：

在这里插入图片描述
【优点】写法简单
【缺点】只适合于写简单样式，只针对某个标签生效！即不能写太复杂的样式

上述三种写法，在实际开发中都十分常见，在本期内容，主要使用内部样式来介绍 CSS

3. CSS 常见选择器

【选择器含义】针对页面中指定的标签元素生效，先要选中元素，才能设置元素的属性
【选择器种类】选择器有很多种，分为：
1）基础选择器：由单个选择器构成
2）复合选择器：由多种基础选择器构成

CSS 选择器种类非常多，用法也是十分丰富，本期内容仅介绍 5 种选择器，如下：

3.1 基础选择器

3.1.1 标签选择器

【特点】使用标签名，把页面中所有同名标签的元素都选中，即能快速为同一类型的标签都选择出来
【缺点】难以针对某个元素进行个性化定制，即不能差异化选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <style>
        div {
            font-size: 50px;
            color: green;
        }
        </style>
</head>
<body>
    <div>hello1</div>
    <div>hello2</div>
    <div>hello3</div>

</body>
</html>

效果如下：

在这里插入图片描述
图解说明：

在这里插入图片描述

3.1.2 类选择器

【特点】CSS中创建一个"类名"，这个类名对应一组 CSS 属性，让指定的 html 元素应用这个类名即可使用
【优点】能够差异化表示不同的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
</head>
<body>
   <div class="one">hello1</div>
   <div class="two">hello2</div>

    <style>
        .one {
            color: red;
            font-size: 100px;
        }

        .two {
            color: green;
            font-size: 100px;
        }
</body>
</html>

效果如下：

在这里插入图片描述
图解说明：

【注意】这里的"类"和 Java 中的类完全没有任何联系~ 这里的一个类名是可以被多个标签引用！同时，一个标签还可以引入多个类名，使用多组属性，多个类名之间使用空格分隔

3.1.3 id 选择器

【特点】一个 html 标签，可以有一个 id 属性，id 是唯一的，这个 id 属性的值作为标签的"身份标识"，因此，同样可以通过 id 选择器把这个指定的元素给获取到！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
</head>
<body>
   <div id = "mydiv">hello</div>

    <style>
        #mydiv {
            color:rebeccapurple;
            font-style:100px;
        }
        </style>   
</body>
</html>

效果如下：
在这里插入图片描述
图解说明：

在这里插入图片描述
【注意】因为 id 是唯一的，即不能被多个标签使用 (这也是类选择器最大的区别)!!!

3.1.4 通配符选择器

【特点】选择所有的标签，页面的所有内容均修改，无需被页面结构调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
</head>
<body>
   <div>hello</div>
   <h2>hh<h2>

    <style>
         * {
            color: red;
         }
        </style>
</body>
</html>

效果如下：

在这里插入图片描述

图解说明：

在这里插入图片描述

3.2 复合选择器

在本期内容中，仅介绍一种复合选择器，后代选择器

3.2.1 后代选择器

【特点】后代选择器的效果就是把上述的三种基础选择器进行组合，同时能够体现出"标签的层次结构"
【优点】如果有一个页面特别复杂，就可以使用后代选择器，非常针对性地修改某元素，并不影响其它部分内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
</head>
<body>
   <div class="one">
    <h3>hello1<h3>
    </div>
   <div class="two">
    <h3>hello2<h3>
    </div>
   <div class="one">
    <h2>hello3<h2>
    </div>

    <style>
        .one h3{
            color: red;
        }
        .two h3{
            color: green;
        }
        </style>
</body>
</html>

效果如下：

在这里插入图片描述
图解说明：

【关于优先级】
CSS里面有一套优先级规则，但是比较麻烦，需要进行计算，我们作为了解，在这里不进行介绍
1）引用样式：可以简单地理解，内联样式这种优先级比其它两种更高，会覆盖其他的样式
2）类选择器：针对同样的样式属性，设置不同的值，使用类选择器的优先级高于标签选择器

4. CSS 常用属性

CSS中有非常多的属性，这里仅介绍常用的属性，详情可以参考：CSS参考手册

4.1 字体相关

1）字体家族：font-family
2）字体大小：font-size
3）字体粗细：font-weight
4）设置文字倾斜：font-style

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
</head>
<body>
    <div class="one">hello</div>

    <style>
        .one {
            font-family: '宋体';
            /*字体大小*/
            font-size: 100px;
           /*字体粗细*/
            font-weight: 900;
             /*设置文字倾斜*/
            font-style: italic;
        }
    </style>
</body>
</html>

效果如下：
在这里插入图片描述

4.2 文本相关

1）文本颜色：color

【注意】color 属性的值有很多种写法

直接写一些表示颜色的单词，日常用到的颜色这里都有，如：color:red;
使用 rgb 的方式表示，如：color:rgb(255,0,0)
使用十六进制方式表示，本质上仍然是 RGB，如：color： #ff0000;
通过上述的操作，可以调出一些很好看的颜色啦~

2）文本对齐方式：text-align
其中，左对齐为 left，右对齐为 right，居中对齐：center

3）文本装饰(加个下划线等)：text-decoration
加下划线设置为 underline，比如这个链接你不想加下划线，该属性的值可以设置为 none；

4）行间距(行高)：line-height

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
</head>
<body>
    <div class="one">hello</div>

    <style>
        .one {
            font-size: 100px;
            /* 文本颜色 */
            color: #ff0000;
            /* 文本对齐 左对齐left 右对齐right 居中对齐center */
            text-align: center;
            /* 文本装饰 加个下划线等 */
            text-decoration: underline;
            /* 文本缩进 首行缩进多少空间 */
            text-indent: 20px;
            /* 行高 行间距*/
            line-height: 100px;
        }
    </style>
</body>
</html>

效果如下：

在这里插入图片描述

4.3 背景相关

1）背景颜色：background-color
2）背景图片：background-image: url(图片地址);
3）背景平铺方式：background-repeat
4）背景位置：background-position
5）背景大小：background-size

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
</head>
<body>
    <div class="one">hello</div>

    <style>
        .one {
            font-size: 100px;
            background-color: #ff0000;
            /* 设置图片的宽与高 */
            width: 600px;
            height: 300px;
            background-image: url(dog.jpg);
            background-repeat: no-repeat;
            background-position: center center;
            /* 与图片背景颜色大小一致，所以没有看到背景颜色 */
            background-size: 600px,300px;
        }
    </style>
</body>
</html>

效果如下：

在这里插入图片描述

4.4 设置圆角矩形

圆角矩阵：border-radius

效果如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
</head>
<body>
    <div class="one">hello</div>

    <style>
        .one {
            width: 600px;
            height: 300px;
            background-color: gray;
            border-radius: 50px;
            text-align: center;
        }
    </style>
</body>
</html>

效果如下：

在这里插入图片描述
如果想要得到一个圆形呢？可以做到吗！
即在正方形中，将 border-radius 的长度设置为正方形边长的一半即可

width: 400px;
height: 400px;
border-radius: 200px;

效果如下：

在这里插入图片描述

5. 块级元素与行内元素

5.1 定义

【块级元素】矩形的盒子
【行内元素】一段文本

每个 html 元素均可以通过 CSS 设置 display 属性

display:block; 块级元素
display:inline; 行内元素

上期前端专栏介绍的 html 标签，在不显示指定 display 的时候，均有默认的 display 的值！
其中，默认为 block(块级元素) 的标签有：h1-h6，p，ul，ol，li，table，div等等
默认为 inline(行内元素) 的标签有：a，span，b

5.2 区别

块级元素与行内元素的区别有很多方面，主要了解两个方面：

块级元素默认独占一行，行内元素默认不独占一行
块级元素可以设置尺寸，比如可以设置 width、height 的值，而行内元素不可以!

可以通过 display:block，将 span 标签设置为块级元素，因为 span 标签默认是行内元素，改为块级元素后 span 标签也可以设置尺寸了

但是一般不会把块级元素变成行内元素~（没啥意义hh）

也可以使用display:none 实现元素隐藏的效果

6. CSS 盒子模型

一个 html 元素，是一个矩形，这个矩形由以下 4 个部分构成：内容 + 内边距 + 边框 + 外边距，如图：
在这里插入图片描述

6.1 边框属性

边框属性：border

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
</head>
<body>
    <div class="one">hello</div>

    <style>
        .one {
            width: 500px;
            height: 300px;
            /* 边框可以分开设置  分成4个方向*/
            border-left: red 20px solid;
            border-right: green 20px dotted;
            border-top: blue 20px dashed;
            border-bottom: orange 20px solid; 
        }
    </style>
</body>
</html>

效果如下：选中该元素，查看信息
在这里插入图片描述
通过上图，发现我们在代码中设置的是 500 * 300，但是这里的尺寸显示的是 540 * 340

这里是因为，边框把元素给撑大了，边框一个是 20px，所以宽与高均增大了 40px

但是在开发的时候，一般不希望见到这种情况，如果需要排列多个元素的时候，此时就不安排了！因此，一般希望边框不要撑大元素，可以使用一个单独的 CSS 属性进行设置：box-sizing: border-box;

此时选择通配符选择器，设置这个属性~ 因为我希望的是所有的边框不要撑大元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
</head>
<body>
    <div class="one">hello</div>

    <style>
        *{
            box-sizing: border-box;
        }
        .one {
            width: 500px;
            height: 300px;
            /* 边框可以分开设置  分成4个方向*/
            border-left: red 20px solid;
            border-right: green 20px dotted;
            border-top: blue 20px dashed;
            border-bottom: orange 20px solid; 
        }
    </style>
</body>
</html>

效果如下：此时元素就没有被边框撑大啦！

在这里插入图片描述

6.2 内边距

内边距属性：padding 即元素和边框之间的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
</head>
<body>
    <div class="one">hello</div>

    <style>
          *{
            box-sizing: border-box;
        }
        .one {
            width: 500px;
            height: 300px;
            /* 边框可以分开设置  分成4个方向*/
            border-left: red 20px solid;
            border-right: green 20px dotted;
            border-top: blue 20px dashed;
            border-bottom: orange 20px solid;
            
             /* padding也是可以分4个方向设置 */
            padding-left: 20px;
            padding-right:20px;
            padding-top: 50px;
            /* 上下设置 30px 左右设置 20px */
            /* padding: 30px 20px; */
            /* 上右下左 顺时针*/
            /* padding: 10px 20px 30px 40px; */
        }
    </style>
</body>
</html>

效果如下：
在这里插入图片描述
【注意】padding 这个本身使用并不复杂，主要是如何设置 padding 比较好看~

6.3 外边距

外边距属性：margin 即边框和其它元素之间的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
</head>
<body>
    <div class="one">hello</div>

    <style>
          *{
            box-sizing: border-box;
        }
        .one {
            width: 500px;
            height: 300px;
            /* 边框可以分开设置  分成4个方向*/
            border-left: red 20px solid;
            border-right: green 20px dotted;
            border-top: blue 20px dashed;
            border-bottom: orange 20px solid;
            
             /* padding也是可以分4个方向设置 */
            padding-left: 20px;
            padding-right:20px;
            padding-top: 50px;
            /* 上下设置 30px 左右设置 20px */
            /* padding: 30px 20px; */
            /* 上右下左 顺时针*/
            /* padding: 10px 20px 30px 40px; */

            margin-top: 50px; 
        }
    </style>
</body>
</html>

效果如下：

在这里插入图片描述
【注意】
将 margin 设置为 auto，可以实现元素水平居中的效果，但是把上下方向设置为 auto 则不能实现垂直居中
即将 margin 设置 auto 可以实现水平居中，但是垂直方向则不行！

在这里插入图片描述
【除浏览器默认样式】
不同浏览器的默认样式存在差别，有的浏览器会给元素加上一些默认的样式，尤其是内外边距，为了保证代码在不同的浏览器上都能按照统一的样式显示，往往我们会去除浏览器默认样式

使用通配符选择器，设置内外边距均为 0，即可完成去除浏览器默认样式，代码如下：

* {
    marign: 0;
    padding: 0;
}

7. 弹性布局

对于块级元素，我们知道，默认是独占一行的，即为垂直方向排列的，有时候想让块级元素能够水平方向排列，如何做呢？

有的小伙伴会想到使用行内元素，这就可以水平排列了，但是行内元素不能设置尺寸呀!!!

这个时候弹性布局闪亮登场!!! 可以让块级元素水平排列

本期内容仅介绍弹性布局最基础的三个属性：

开启弹性布局：display:flex 其中 flex 即为弹性布局，某元素一旦开启了弹性布局，此时内部的子元素，就会按照水平方向排列，但是子元素里面的子元素是不受影响的!!!
设置水平方向排列规则：justify-content，有居中排列，靠左，靠右，分散开等
设置垂直方向排列规则：align-items

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
</head>
<body>
    <div class="one">
        <div class="two">1</div>
        <div class="two">2</div>
        <div class="two">3</div>
        <div class="two">4</div>
        <div class="two">5</div>
    </div>

    <style>
        
          *{
            box-sizing: border-box;
        }
   
        .one {
            width:1000px;
            height: 300px;
            background-color: gray;
            display: flex;
            justify-content:space-around;
            align-items: center;
        }
        .two {
            width: 150px;
            height: 100px;
            background-color: green;
        }
    </style>
</body>
</html>