CSS 学习（1）：语法、引入方式、选择器、字体与背景

🔥keyipatience:个人主页

🎬作者简介：C/C++后端开发学习者

🌟专栏传送门：《c++》《linux》《c++高阶数据结构》《c++数据结构与算法》《前端学习》

⭐️patience is key in life

什么是CSS有什么用？

CSS = 层叠样式表，用来给 HTML 网页 "化妆" 。 HTML 负责写内容（文字、图片、列表） ，CSS 负责外观（颜色、大小、位置、布局）。

CSS 基本语法拆解

公式：选择器 {一条 / 多条声明；}

p {
  /* 设置字体颜色 */
  color: red;
  /* 设置字体大小 */
  font-size: 30px;
}

• 选择器 p ：找谁 → 选中页面所有 <p> 标签
• 声明块 { ... }：大括号里面写要改的样式
• 声明 color: red; ：干什么
  • color：属性（键），要修改的样式项目
  • red：属性值，这个样式改成什么
  • : 分隔属性和值；; 分隔多条声明（分号不能丢）

CSS 的 3 种引入方式

方式	写法	优点	缺点	使用场景
行内样式（内联）	直接写在标签 style 属性里	简单，快速改单个元素	结构和样式混在一起，不好维护	临时测试、极少修改的地方
内部样式（内嵌）	在 <head> 里写 <style> 标签	样式和 HTML 放同一个文件，方便单页调试	只能当前页面生效，多页面不能复用	写单页 demo、课堂练习
外部样式（外联，最推荐）	单独 .css 文件，用 <link> 引入	HTML 和 CSS 完全分离，多页面共用，好维护	需要新建文件	正式项目、网站开发

1. 行内样式示例

<div style="color:blue; font-size:20px;">我是行内样式</div>

2. 内部样式示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>内部样式</title>
    <style>
        div {
            color: green;
        }
    </style>
</head>
<body>
    <div>我是内部样式</div>
</body>
</html>

3. 外部样式示例

1.新建文件 style.css

div {
    color: orange;
}

2.html 文件里用 link 引入

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>外部引入样式</title>
    <link rel="stylesheet" href="style.css">
   
</head>
<body>
    <div>我是外部引入样式</div>
</body>
</html>

优先级（从高到低）

行内样式 > 内部样式 = 外部样式

内部样式、外部样式，优先级一样；哪个代码写在页面靠后的位置，就会覆盖前面的，优先级更高。

CSS 4 个基础选择器

选择器就是用来 "挑标签"，给挑出来的标签加样式

选择器	写法	选中谁	特点
标签选择器	xxx{}	页面所有这个标签	批量选中同一种标签
类选择器	.box {}	所有 class="box" 的标签	最常用；一个类可以给多个标签，一个标签可以加多个类
id 选择器	#box {}	id="box" 的标签	一个页面id 只能写一次，唯一
通配符选择器	* {}	页面全部所有标签	一般用来全局初始化样式

1. 标签选择器（p,div,h1,h2.......)

div {
  color:red;
}

选中页面全部 <div>，全部改成红色

2. 类选择器（. 点开头）

类名 hot 在页面重复使用，写一次 CSS，多个标签共用，不用重复写样式。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>class复用例子</title>
    <style>
        /* 类选择器 .hot ，可以给任意标签使用 */
        .hot {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <!-- p标签用这个类 -->
    <p class="hot">热门新闻</p>
    <!-- div标签也用同一个类 -->
    <div class="hot">热门商品</div>
    <!-- span标签同样可以用 -->
    <span class="hot">热门推荐</span>
</body>
</html>

一个标签还可以同时加多个类，空格隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .hot{color:red;}
        .big{font-size:30px;}
    </style>

</head>
<body>
    <p class="hot big">文字</p>
</body>
</html>

3.. id 选择器（#开头）

同一个 id，整个页面只能出现 1 次，不能重复。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       #title{
        font-size:30px;
       }
    </style>

</head>
<body>
   <h2 id="title">标题</h2>
</body>
</html>

4. 通配符 *

* 就是选中页面里全部标签（div、p、span、h1、ul、li...... 所有）。一般用来清除默认边距。

* {
  margin:0;
  padding:0;
}

//margin:0：外边距清零（标签和外面元素之间的距离）
//padding:0：内边距清零（标签内部，内容和边框之间的距离）

为什么要写这个？

浏览器自带默认边距： 比如 <p>、<h1>、<ul> 天生自带外边距，<ul> 自带左边内边距，会让页面排版乱掉。 写 * {margin:0;padding:0;} 一次性把所有标签自带的默认边距全部删掉，方便我们自己控制布局。

复合选择器（把基础选择器组合起来，精准挑选元素）

名称	符号	含义	简单例子
后代选择器	空格	选中所有后代（儿子、孙子、重孙子全部）	.box p 选中.box 里面所有 p
子选择器	>	只选亲儿子，孙子辈不算	.box>p 只选.box 直接子元素 p
并集选择器	, 逗号	同时选中多个不同选择器，共用一套样式	div,p,.title 同时选中 div、p、类名为 title 的
伪类选择器	:	选中元素的某个状态（鼠标悬浮、点击等）	a:hover 鼠标放链接上的时候

1.后代选择器（空格，所有后代）和子选择器

后代选择器 空格 只要在这个盒子里面 ，不管隔多少层，全都选中。 语法：父 子 { } 中间空格

子选择器 > 只选直接亲儿子 ，隔一层（孙子）就不选！ 语法：父 > 子 { }

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>后代 vs 子选择器</title>
    <style>
        /* 后代选择器 【空格】：里面所有p，儿子、孙子都选中 */
        .box p {
            color: red;
        }

        /* 子选择器 【>】：只选直接子p，孙子不生效 */
        /* .box > p {
            color: blue;
        } */
    </style>
</head>
<body>
    <div class="box">
        <p>我是box的亲儿子p</p>
        <div>
            <p>我是孙子p（在div里面）</p>
        </div>
    </div>
</body>
</html>

开启.box p（后代，空格）

两个 p全部变红，不管隔几层。

② 注释掉上面，打开 .box > p（子选择器 >）

只有第一个亲儿子 p 变蓝色；孙子 p 不受影响，不变色。

2.并集选择器：逗号 ,

语法：h1, p, .txt

逗号 =和，一次性给好几个东西设置一样样式，少写代码

h1,p{color:green;}

3. 伪类选择器：冒号 :

鼠标悬浮这种状态

a标签的顺序不能乱！ 必须按：link → visited → hover → active

别的伪类（无强制顺序）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>链接伪类测试 LVHA</title>
    <style>
        /* 1. link：未访问的链接 */
        a:link {
            color: black;
        }
        /* 2. visited：访问过后的链接 */
        a:visited {
            color: gray;
        }
        /* 3. hover：鼠标悬浮在链接上 */
        a:hover {
            color: red;
        }
        /* 4. active：鼠标按住不放的时候 */
        a:active {
            color: green;
        }
    </style>
</head>
<body>
    <a href="#">点我测试</a>
</body>
</html>

• 默认（未点击）：黑色
• 鼠标悬浮：红
• 按住不放：绿
• 点击访问后：灰色

CSS 字体属性

1. font-size 字体大小

font-size: 20px;

单位：px（像素，最常用）

数字越大，字越大

2. font-family 字体

font-family: "Microsoft Yahei", sans-serif;

• 写多个字体：优先用第一个，找不到就换下一个
• 有空格的字体名要加引号 "Microsoft Yahei"（微软雅黑）
• sans-serif：无衬线字体，兜底（所有电脑都有

3. font-weight 字体粗细

font-weight: bold;  /* 加粗 */
font-weight: normal;/* 默认正常 */
/* 也可以写数字：400=normal，700=bold */
font-weight: 700;

4. font-style 字体是否倾斜

font-style: italic;  /* 斜体 */
font-style: normal;  /* 正常，不倾斜 */

5.color 文字颜色

使用 R (red), G (green), B (blue) 的方式表示颜色(色光三原色). 三种颜色按照不同的比例搭配, 就能 混合出各种五彩斑斓的效果.

3 种写法

1. 英文单词：color:red;

2. rgb：color:rgb(255,0,0); 红，绿，蓝，数值 0~255，越大越亮

3. 十六进制（最常用）：color:#ff0000;共3组每一组内部两个数字一样就可以压缩成 3 位。

   #ff0000 → #f00（红色） #000000 → #000（黑色） #ffffff → #fff（白色）

   红色（英文单词 red）

   红色（rgb写法 rgb(255,0,0)）

   红色（十六进制 #ff0000）

   红色（简写 #f00）

6.text-align 文本水平对齐

不光能控制文本对齐, 也能控制图片等元素居中或者靠右

text-align: left;    /* 默认，靠左 */
text-align: center;  /* 居中（最常用） */
text-align: right;   /* 靠右 */

例子顺带看一下后代选择器用法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 大盒子.text-align 里面，class=one 的盒子 */
        .text-align .one {
            text-align: left;
            /* 文字靠左 */
        }

        /* 大盒子.text-align 里面，class=two 的盒子 */
        .text-align .two {
            text-align: right;
            /* 文字靠右 */
        }

        /* 大盒子.text-align 里面，class=three 的盒子 */
        .text-align .three {
            text-align: center;
            /* 文字居中 */
        }
    </style>
</head>

<body>
    <div class="text-align">
        <div class="one">左对齐</div>
        <div class="two">右对齐</div>
        <div class="three">居中对齐</div>
        <div class="three">
             <!-- 这里换成任意图片地址，图片就会水平居中 -->
             <img src="https://picsum.photos/100/100">
        </div>
    </div>
</body>

</html>

7.text-decoration 文本装饰

4 个值：

• none：没有线（最常用！给 a 链接去掉默认下划线）
• underline：下划线
• overline：上划线
• line-through：删除线（中间划一道）

例子：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文本装饰</title>
<style>
.text-decorate .one {
    text-decoration: none;
}
.text-decorate .two {
    text-decoration: underline;
}
.text-decorate .three {
    text-decoration: overline;
}
.text-decorate .four {
    text-decoration: line-through;
}
</style>
</head>
<body>
<div class="text-decorate">
    <div class="one">啥都没有</div>
    <div class="two">下划线</div>
    <div class="three">上划线</div>
    <div class="four">删除线</div>
</div>
</body>
</html>

<a>链接默认自带下划线，写 a{text-decoration:none;} 就能去掉下划线。

8.text-indent 文本缩进

作用：段落首行空几格（就像作文开头空 2 个字）其他行不影响

单位：px 或者 em （推荐 em） 1em = 当前文字1 个字的宽度

如果是负数，文字往左跑，向外突出（反向缩进）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文本缩进</title>
<style>
.text-indent .one {
    text-indent: 2em;
}
.text-indent .two {
    text-indent: -2em;
}
</style>
</head>
<body>
<div class="text-indent">
    <div class="one">正常缩进</div>
    <div class="two">反向缩进</div>
</div>
</body>
</html>

9.line-height 行高

作用：控制一行文字占的高度，改变两行文字之间的距离

写法

line-height: 24px;  /* 固定像素 */
line-height: 1.5;   /* 无单位，推荐！=字体大小 ×1.5 */
line-height: normal

例子：单行文字垂直居中

盒子高 60px，行高 60px，文字就能上下居中

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>行高</title>
<style>
p{
    font-size:16px;
    line-height: 1.5;
}
.box{
    width:200px;
    height:60px;
    background:#ccc;
    line-height:60px;
    text-align:center;
}
</style>
</head>
<body>
    <p>测试文字测试文字测试文字测试文字测试文字</p>
    <div class="box">文字垂直居中</div>
</body>
</html>

CSS 背景属性

1. background-color 背景颜色

给盒子填充背景色。

.box{
  background-color: #ccc;
}

2. background-image 背景图片

.box{
  background-image: url("图片地址");
}

3. background-position 背景位置

控制图片在盒子里放哪里 写法： background-position: 水平 垂直;

可选值： left center right / top center bottom

一段代码看出6个方位：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>背景图片位置</title>
<style>
div{
  width:200px;
  height:80px;
  border:2px solid #333;
  margin-bottom:10px;
  /* 统一设置：背景图、大小、不平铺 */
  background-image:url("https://img95.699pic.com/photo/50059/8720.jpg_wh860.jpg");
  background-size:80px 50px;  
  background-repeat:no-repeat;
}
/* 左上 */
.p1{
  background-position: left top;
}
/* 右上 */
.p2{
  background-position: right top;
}
/* 左下 */
.p3{
  background-position: left bottom;
}
/* 右下 */
.p4{
  background-position: right bottom;
}
/* 正中间 */
.p5{
  background-position: center center;
}
/* 水平居中，靠顶部 */
.p6{
  background-position: center top;
}
</style>
</head>
<body>
<div class="p1">left top 左上角</div>
<div class="p2">right top 右上角</div>
<div class="p3">left bottom 左下角</div>
<div class="p4">right bottom 右下角</div>
<div class="p5">center center 正中间</div>
<div class="p6">center top 中上</div>
</body>
</html>

4. background-size 背景大小

控制背景图片大小

① 写两个 px 值 ：background-size: 宽 高;

background-size:80px 50px;

② 只写 1 个值

background-size:100px;

只写宽度，高度自动等比例跟着缩放，不会拉伸变形。

③ contain （包含）

background-size: contain;

图片完整显示，整张图全部塞进盒子里面。

④ cover （覆盖，最常用）

background-size: cover;

图片铺满整个盒子，不留空白。 图片会按比例放大，超出盒子的部分直接裁掉

注意：

• width / height ：是盒子本身的宽高（黑色边框围起来的这个方框多大）
• background-size ：是盒子里面那张背景图片的宽高（图片本身缩放到多大）

6. background-repeat 控制是否平铺

• repeat：默认，x、y 都重复
• no-repeat：不平铺，只显示 1 张（最常用）
• repeat-x：水平重复
• repeat-y：垂直重复

一段代码看出4种区别：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>background-repeat四种平铺效果</title>
<style>
/* 所有div共用样式 */
div{
  width:320px;   /* 盒子宽320像素 */
  height:160px;  /* 盒子高160像素 */
  background-image:url("https://img95.699pic.com/photo/50059/8720.jpg_wh860.jpg"); /* 设置背景图片 */
  background-size:80px 50px;        /* 把图片缩小：宽80 高50，小图才能看出平铺 */
  border:2px solid #333; /* 给盒子加黑色边框，方便看清盒子范围 */
  margin-bottom:15px; /* 每个盒子下面空15px，盒子之间隔开 */
  color:red;    /* 文字颜色红色 #fff */
}

/* 第1个盒子：r1 */
.r1{
  
  background-repeat:repeat;         /* repeat：横向、纵向 一起重复铺满盒子 */
}

/* 第2个盒子：r2 */
.r2{
 
  background-repeat:repeat-x;        /* repeat-x：只水平（左右）重复 */
}

/* 第3个盒子：r3 */
.r3{
 
  background-repeat:repeat-y;        /* repeat-y：只垂直（上下）重复 */
}

/* 第4个盒子：r4 */
.r4{
  
  background-repeat:no-repeat;       /* no-repeat：不重复，只显示1张图片 */
}
</style>
</head>
<body>
<!-- 页面上放4个盒子 -->
<div class="r1">repeat 双向平铺（默认）</div>
<div class="r2">repeat-x 仅水平平铺</div>
<div class="r3">repeat-y 仅垂直平铺</div>
<div class="r4">no-repeat 不平铺，只一张图</div>
</body>
</html>

7.background 是复合属性

一次性控制背景全套东西：

1. background-color 背景颜色
2. background-image 背景图片
3. background-repeat 是否平铺（no-repeat不平铺）
4. background-position 图片位置（左上、居中）
5. background-size 背景图片大小

简写语法（把一堆写一行）

顺序不用严格固定，常用顺序：

background: 颜色 图片 平铺 位置 / 大小;

eg：

background: #ccc url("图片地址") no-repeat center / 80px 50px;

8.border-radius 圆角矩形

作用：给盒子四个角变圆

1.写 1 个值：四个角一样圆

border-radius:10px;

2.写 4 个值：左上 右上 右下 左下（顺时针）

border-radius:10px 20px 30px 40px;

3.小技巧：border-radius:50% → 正方形盒子直接变成圆形

一句话：数值越大，角越圆；0 就是直角。