前端基础 —— B / CSS基础

一、CSS 基础概述

定义：层叠样式表（Cascading Style Sheets）

作用：美化页面、实现样式与结构分离

二、CSS 基本语法与引入方式

1. 语法规范

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

选择器决定针对谁修改 (找谁)
声明决定修改啥. (干啥)

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

写在 `<style>` 标签中，通常放在 `<head>`

2. 引入方式

内部样式表：写在 HTML 的 `<style>` 标签中

行内样式表：通过元素的 `style` 属性设置

外部样式表：通过 `<link>` 标签引入 `.css` 文件（推荐）

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

<link rel="stylesheet" href="[CSS文件路径]">

创建 demo.html

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外部样式</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>上帝为你关上一扇门, 然后就去睡觉了</div>
</body>

创建 style.css

div {
color: red;
}

注意: 不要忘记 link 标签调用 CSS, 否则不生效.

三、代码风格

格式风格：展开风格（推荐）、紧凑风格

紧凑风格
p { color: red; font-size: 30px;}展开风格
p {
color: red;
font-size: 30px;
}

大小写：统一小写

空格规范：冒号后加空格，选择器与 `{` 之间加空格

四、选择器

1. 基础选择器

标签选择器

选中所有同名标签，能快速为同一类型的标签都选择出来.但是不能差异化选择

<style>
p {
color: red;
}
div {
color: green;
}
</style>
<p>咬人猫</p>
<p>咬人猫</p>
<p>咬人猫</p>
<div>阿叶君</div>
<div>阿叶君</div>
<div>阿叶君</div>

类选择器

可复用，差异化选择

<style>
.blue {
color: blue;
}
</style>
<div class="blue">咬人猫</div>
<div>咬人猫</div>

语法细节:
类名用 . 开头的
下方的标签使用 class 属性来调用.
一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让
代码更好复用)
如果是长的类名, 可以使用 - 分割.
不要使用纯数字, 或者中文, 以及标签名来命名类名

<style>
.box {
width: 200px;
height: 150px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
</style>
<div class="box red"></div>
<div class="box green"></div>
<div class="box red"></div>

ID 选择器

唯一，不能重复

CSS 中使用 # 开头表示 id 选择器
id 选择器的值和 html 中某个元素的 id 值相同
html 的元素 id 不必带 #
id 是唯一的, 不能被多个标签使用 (是和类选择器最大的区别)

<style>
#ha {
color: red;
}
</style>
<div id="ha">蛤蛤蛤</div>

通配符选择器

选中所有元素页面的所有内容都会被改成红色 .不需要被页面结构调用

* {
color: red;
}

2. 复合选择器

后代选择器：`父子`

元素 1 和元素 2 要使用空格分割
元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1

代码示例1: 把 ol 中的 li 修改颜色, 不影响 ul

<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
<ol>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
</ol>
ol li {
color: red;
}

代码示例2: 元素 2 不一定非是儿子, 也可以是孙子

<ul>
<li>aaa</li>
<li>bbb</li>
<li><a href="#">ccc</a></li>
</ul>
ul li a {
color: yellow;
}
或者
ul a {
color: yellow;
}

代码示例3: 可以是任意基础选择器的组合. (包括类选择器, id 选择器)

<ol class="one">
<li>ddd</li>
<li>eee</li>
<li><a href="#">fff</a></li>
<li><a href="#">fff</a></li>
<li><a href="#">fff</a></li>
</ol>.one li a {
color: green;
}

子选择器：`父 > 子`

元素1>元素2 { 样式声明 }

使用大于号分割
只选亲儿子, 不选孙子元素

1. 把以下代码中的 "小猫" 改成红色

<div class="cat">
<ul>
<li><a href="#">小猫</a></li>
<li><a href="#">小猫</a></li>
<li><a href="#">小猫</a></li>
</ul>
</div>

CSS 结果:

.cat ul li a {
color: red;
}

2. 把以下代码中的 "小猫" 改成红色

<div class="cat">
<a href="#">小猫</a>
<ul>
<li><a href="#">小狗</a></li>
<li><a href="#">小狗</a></li>
</ul>
</div>

.cat>a {
color: red;
}

并集选择器：`元素1, 元素2`

伪类选择器：

链接伪类：`:link`, `:visited`, `:hover`, `:active`

焦点伪类：`:focus`

五、常用属性

1. 字体属性

font-family：字体类型

body {
font-family: '微软雅黑';
font-family: 'Microsoft YaHei';
}

<style>
.font-family .one {
font-family: 'Microsoft YaHei';
}
.font-family .two {
font-family: '宋体';
}
</style>
<div class="font-family">
<div class="one">
这是微软雅黑
</div>
<div class="two">
这是宋体
</div>
</div>

font-size：字体大小

p {
font-size: 20px;
}

<style>
.font-size .one {
font-size: 40px;
}
.font-size .two {
font-size: 20px;
}
</style>
<div class="font-size">
<div class="one">
大大大
</div>
<div class="two">
小小小
</div>
</div>

font-weight：字体粗细

p {
font-weight: bold;
font-weight: 700;
}

可以使用数字表示粗细.
700 == bold, 400 是不变粗, == normal
取值范围是 100 -> 900

<style>
.font-weight .one {
font-weight: 900;
}
.font-weight .two {
font-weight: 100;
}
</style>
<div class="font-weight">
<div class="one">
粗粗粗
</div>
<div class="two">
细细细
</div>
</div>

font-style：斜体/正常

/* 设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;

<style>
.font-style em {
font-style: normal;
}
.font-style div {
font-style: italic;
}
</style>
<div class="font-style">
<em>
放假啦
</em>
<div class="one">
听说要加班
</div>
</div>

2. 文本属性

color：颜色

color: red;
color: #ff0000;
color: rgb(255, 0, 0);

RGB、十六进制、预定义色，鼠标悬停在 vscode 的颜色上, 会出现颜色选择器, 可以手动调整颜色.十六进制形式表示颜色, 如果两两相同, 就可以用一个来表示.#ff00ff => #f0f

<style>
.color {
color: red;
/* color: rgb(255, 0, 0); */
/* color: #ff0000; */
}
</style>
<div class="color">这是一段话</div>

text-align：水平对齐

控制文字水平方向的对齐.不光能控制文本对齐, 也能控制图片等元素居中或者靠右

<style>
.text-align .one {
text-align: left;
}
.text-align .two {
text-align: right;
}
.text-align .three {
text-align: center;
}
</style>
<div class="text-align">
<div class="one">左对齐</div>
<div class="two">右对齐</div>
<div class="three">居中对齐</div>
</div>

text-decoration：下划线、删除线

text-decoration: [值];

underline 下划线. [常用]
none 啥都没有. 可以给 a 标签去掉下划线.
overline 上划线. [不常用]
line-through 删除线 [不常用]

<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>
<div class="text-decorate">
<div class="one">啥都没有</div>
<div class="two">下划线</div>
<div class="three">上划线</div>
<div class="four">删除线</div>
</div>

text-indent：首行缩进

text-indent: [值];

单位可以使用 px 或者 em.
使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小.
缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了)

<style>
.text-indent .one {
text-indent: 2em;
}
.text-indent .two {
text-indent: -2em;
}
</style>
<div class="text-indent">
<div class="one">正常缩进</div>
<div class="two">反向缩进</div>
</div>

line-height：行高

3. 背景属性

background-color：背景颜色

background-image：背景图片

background-repeat：平铺方式

background-position：背景位置

background-size：背景尺寸（contain/cover）

六、圆角与边框

border-radius：圆角矩形、圆形

复合写法：四个角分别设置

border` 简写：宽度、样式、颜色

七、元素显示模式

类型   特点描述
块级元素   独占一行，可设宽高，如 div、p、h1h6
行内元素   不独占一行，不能设宽高，如 span、a
行内块元素   可设宽高且不独占一行，如 img、input

- `display` 属性可改变显示模式：
- `block` / `inline` / `inline-block`

八、盒模型

组成：`content + padding + border + margin`
- `box-sizing: border-box`：防止 padding/border 撑大盒子
- `margin: 0 auto`：块级元素水平居中
- 清除默认样式：`* { margin: 0; padding: 0; }`