CSS 基础 - Ke.ke

🤖AI 摘要

文章全面介绍 CSS 基础：

作用与概念：CSS 用于为 HTML 元素指定样式，与 HTML、JavaScript 协作，分别负责页面结构、样式与交互动态效果。
语法结构：由选择器指定应用样式的元素，属性确定样式种类，值设定属性具体内容。
选择器：涵盖基本选择器（类型、类、ID）、组合选择器（后代、子元素等）、伪类选择器（:hover等）及伪元素选择器（::before等）。
常见属性：
- 文本与字体：包括font-family等设置字体相关样式。
- 背景与图片：如background-color设置背景颜色。
- 边框与间距：像border设置边框，padding和margin处理内外边距。
- 布局：涉及盒模型（box-sizing等）与定位（position等）。
- Flexbox 布局：通过display: flex等属性实现。
- 响应式设计：借助媒体查询@media适配不同屏幕。
  - 动画与过渡：过渡可平滑改变样式，动画能实现关键帧间变化。

此内容根据文章生成，不代表个人观点，仅用于文章内容的解释与总结

1. CSS 的作用和基本概念#

CSS（Cascading Style Sheets）是用于为网页中的 HTML 元素指定样式的技术。CSS 使我们能够控制网页内容的排版、颜色、字体、背景、边框等。

CSS 是前端开发中不可或缺的一部分，通常和 HTML 和 JavaScript 一起使用。HTML 负责页面结构，CSS 负责页面样式，JavaScript 则负责交互和动态效果。

2. CSS 的语法结构#

CSS 规则的基本结构由 选择器、属性和值三部分组成：

1
selector {
2
  property: value;
3
}

选择器（Selector）：指定要应用样式的 HTML 元素或一组元素。
属性（Property）：指定样式的种类（例如颜色、大小、字体等）。
值（Value）：指定该属性的具体值（例如颜色值、尺寸值等）。

示例：

1
h1 {
2
  color: red;  /* 设置 h1 元素的文本颜色为红色 */
3
  font-size: 24px;  /* 设置字体大小为24像素 */
4
}

3. CSS 选择器详解#

选择器用于选择 HTML 元素并对其应用样式。以下是 CSS 常用的选择器类型：

3.1 基本选择器#

类型选择器（Type Selector）：通过 HTML 标签名选择元素。

1
p {
2
  color: blue;
3
}

类选择器（Class Selector）：通过类名选择元素。类选择器前缀为 .。

1
.btn {
2
  background-color: green;
3
}

ID 选择器（ID Selector）：通过 ID 选择元素。ID 选择器前缀为 #。

1
#header {
2
  background-color: red;
3
}

3.2 组合选择器#

后代选择器（Descendant Selector）：选择某元素的后代元素。

1
div p {
2
  color: purple;
3
}

子元素选择器（Child Selector）：选择直接子元素。

1
ul > li {
2
  color: green;
3
}

相邻兄弟选择器（Adjacent Sibling Selector）：选择紧跟在某元素后的元素。

1
h1 + p {
2
  font-weight: bold;
3
}

通用选择器（Universal Selector）：选择所有元素。

1
* {
2
  margin: 0;
3
  padding: 0;
4
}

属性选择器（Attribute Selector）：选择具有特定属性的元素。

1
input[type="text"] {
2
  border: 1px solid black;
3
}

3.3 伪类选择器（Pseudo-class Selector）#

:hover：当元素被鼠标悬停时应用样式。

1
a:hover {
2
  color: red;
3
}

:nth-child(n)：选择父元素的第 n 个子元素。

1
li:nth-child(odd) {
2
  background-color: #f0f0f0;
3
}

:first-child、:last-child：选择父元素的第一个或最后一个子元素。

1
p:first-child {
2
  color: blue;
3
}

:not(selector)：选择不符合条件的元素。

1
div:not(.active) {
2
  background-color: gray;
3
}

3.4 伪元素选择器（Pseudo-element Selector）#

::before：在元素内容前插入内容。

1
p::before {
2
  content: "前缀：";
3
}

::after：在元素内容后插入内容。

1
p::after {
2
  content: "后缀";
3
}

4. 常见 CSS 属性详解#

好的！以下是 CSS 属性和方法的超详细汇总，覆盖所有常用属性以及高级用法，帮助你从基础到进阶全面掌握 CSS。

1. 文本与字体（Text & Font）#

1.1 字体#

font-family 设置字体系列，允许指定多个字体，浏览器会选择第一个可用的字体。

1
p {
2
  font-family: "Arial", sans-serif;
3
}

font-size 设置字体的大小，常用单位包括 px, em, rem, % 等。

1
p {
2
  font-size: 16px;
3
}

font-weight 设置字体的粗细。常用值：normal、bold、lighter、bolder，或者具体数值（100到900）。

1
p {
2
  font-weight: bold;
3
}

font-style 设置字体样式。常用值：normal、italic、oblique。

1
p {
2
  font-style: italic;
3
}

font-variant 设置小型大写字母（small-caps）等字体变体。

1
p {
2
  font-variant: small-caps;
3
}

line-height 设置行高。可以使用数字、em、px等单位，通常设置为字体大小的1.2倍到1.5倍。

1
p {
2
  line-height: 1.5;
3
}

letter-spacing 设置字母间距，单位可以是 px, em, rem 等。

1
p {
2
  letter-spacing: 1px;
3
}

text-transform 设置文本的大小写转换方式。常用值：uppercase、lowercase、capitalize。

1
p {
2
  text-transform: uppercase;
3
}

text-align 设置文本的水平对齐方式。常用值：left、right、center、justify。

1
p {
2
  text-align: center;
3
}

text-decoration 设置文本装饰。常用值：underline、line-through、overline。

1
p {
2
  text-decoration: underline;
3
}

text-shadow 设置文本的阴影效果。

1
p {
2
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
3
}

2. 背景与图片（Background & Images）#

2.1 背景#

background-color 设置元素的背景颜色。

1
div {
2
  background-color: #f0f0f0;
3
}

background-image 设置元素的背景图片。

1
div {
2
  background-image: url('image.jpg');
3
}

background-size 设置背景图片的尺寸。常用值：cover（覆盖）、contain（包含）。

1
div {
2
  background-size: cover;
3
}

background-position 设置背景图片的位置。可以使用 px、% 或关键字（如 center）。

1
div {
2
  background-position: center center;
3
}

background-repeat 设置背景图片的重复方式。常用值：no-repeat（不重复）、repeat-x（水平重复）、repeat-y（垂直重复）。

1
div {
2
  background-repeat: no-repeat;
3
}

background-attachment 设置背景图片的固定或滚动行为。常用值：scroll（滚动）和 fixed（固定）。

1
div {
2
  background-attachment: fixed;
3
}

background-clip 设置背景是否应该扩展到元素的边框区域。

1
div {
2
  background-clip: content-box;
3
}

3. 边框与间距（Borders & Spacing）#

3.1 边框#

border 设置元素的所有边框。格式为 border: <宽度> <样式> <颜色>。

1
div {
2
  border: 2px solid #000;
3
}

border-radius 设置元素的圆角，单位可以为 px 或 %。

1
div {
2
  border-radius: 10px;
3
}

border-top, border-right, border-bottom, border-left 设置元素的单独边框。

1
div {
2
  border-top: 1px solid red;
3
}

border-style 设置边框的样式，常用值：solid、dashed、dotted、double。

1
div {
2
  border-style: dashed;
3
}

border-width 设置边框的宽度。

1
div {
2
  border-width: 3px;
3
}

border-color 设置边框的颜色。

1
div {
2
  border-color: #333;
3
}

3.2 内外边距#

padding 设置元素内容与边框之间的内边距。

1
div {
2
  padding: 10px;
3
}

margin 设置元素与其他元素之间的外边距。

1
div {
2
  margin: 20px;
3
}

margin-top, margin-right, margin-bottom, margin-left 设置单独的外边距。

1
div {
2
  margin-top: 10px;
3
}

padding-top, padding-right, padding-bottom, padding-left 设置单独的内边距。

1
div {
2
  padding-left: 15px;
3
}

4. 布局（Layout）#

4.1 盒模型#

box-sizing 设置盒子模型的计算方式。常用值：content-box（默认）、border-box（包括内边距和边框）。

1
div {
2
  box-sizing: border-box;
3
}

width, height 设置元素的宽度和高度。

1
div {
2
  width: 200px;
3
  height: 100px;
4
}

4.2 定位#

position 设置元素的定位方式。常用值：static（默认）、relative、absolute、fixed、sticky。

1
div {
2
  position: relative;
3
  top: 10px;
4
  left: 20px;
5
}

top, right, bottom, left 设置元素的定位偏移量。

1
div {
2
  position: absolute;
3
  top: 50px;
4
  left: 100px;
5
}

z-index 设置元素的堆叠顺序。值越大，元素越靠前。

1
div {
2
  z-index: 10;
3
}

5. Flexbox 布局#

5.1 Flexbox 基本属性#

display: flex 启用弹性布局。

1
div {
2
  display: flex;
3
}

flex-direction 设置主轴的方向。常用值：row（水平，默认）、column（竖直）、row-reverse、column-reverse。

1
div {
2
  flex-direction: column;
3
}

justify-content 设置主轴上的对齐方式。常用值：flex-start（默认）、center、space-between、space-around、space-evenly。

1
div {
2
  justify-content: center;
3
}

align-items 设置交叉轴（垂直方向）上的对齐方式。常用值

：flex-start、center、flex-end、stretch（默认）。

1
div {
2
  align-items: center;
3
}

align-self 设置单个元素在交叉轴上的对齐方式。

1
div {
2
  align-self: flex-end;
3
}

flex-wrap 控制元素是否换行。常用值：nowrap（默认，不换行）、wrap（换行）。

1
div {
2
  flex-wrap: wrap;
3
}

flex 设置项目的伸缩比例，格式为：flex: <flex-grow> <flex-shrink> <flex-basis>。

1
div {
2
  flex: 1;
3
}

6. 响应式设计#

6.1 媒体查询（Media Queries）#

@media 根据不同的屏幕尺寸应用不同的样式。

1
@media (max-width: 768px) {
2
  div {
3
    background-color: blue;
4
  }
5
}

7. CSS 动画与过渡#

7.1 过渡（Transition）#

CSS 过渡允许在特定时间内平滑地从一个样式变化到另一个样式。

1
div {
2
  transition: all 0.3s ease-in-out;  /* 所有属性变化，在0.3秒内过渡 */
3
}
4

5
div:hover {
6
  background-color: #ff6347;  /* 悬停时背景颜色变为番茄色 */
7
}

7.2 动画（Animation）#

CSS 动画可以让元素在多个关键帧之间变化。

1
@keyframes slide {
2
  0% {
3
    transform: translateX(0);
4
  }
5
  100% {
6
    transform: translateX(100px);
7
  }
8
}
9

10
div {
11
  animation: slide 2s infinite;  /* 动画持续2秒，循环播放 */
12
}