CSS 层叠样式表学习笔记

发布时间：2024-12-03 23:50:18

CSS 层叠样式表学习笔记

CSS概述

CSS (Cascading Style Sheets)：层叠样式表，用于美化网页。 内容与表现分离：通过CSS定义HTML元素的显示方式。

CSS发展历史

1994年：首次提出CSS概念。 1996年：CSS1 发布。 1998年：CSS2 发布。 2011年：CSS2.1 修正版本。 CSS3：模块化标准，目前常用的新特性如动画、渐变等。

CSS引入方式

外部样式表

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

内部样式表

<style>
  p { color: red; }
</style>

行内样式

<p style="color: red;">这是红色文本</p>

CSS语法

选择器：用于指定要应用样式的HTML元素。 声明块：由花括号包裹的样式声明。 样式声明：由属性和值对组成。

示例：

p {
  color: blue;
  font-size: 16px;
}

CSS选择器

基础选择器

标签选择器：p {} 类选择器：.class {} ID选择器：#id {} 通配符选择器：* {}

组合选择器

后代选择器：div p {} 子元素选择器：div > p {} 相邻兄弟选择器：div + p {} 通用兄弟选择器：div ~ p {}

CSS文本样式

文本颜色

color: red;

文本对齐

text-align: center;
vertical-align: middle;

文本装饰

text-decoration: underline;

字体样式

font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;

行高与字符间距

line-height: 1.5;
letter-spacing: 2px;

CSS盒模型

元素边框与内外边距

margin: 外边距 padding: 内边距 border: 边框

示例：

p {
  margin: 20px;
  padding: 10px;
  border: 1px solid black;
}

盒模型计算方式

box-sizing: content-box（默认，仅计算内容区域） box-sizing: border-box（包括内边距和边框）

CSS布局

Flexbox布局

display: flex;
justify-content: space-between;
align-items: center;

Grid布局

display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;

CSS动画与过渡

过渡效果

div {
  transition: all 0.3s ease;
}

动画

@keyframes slide-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

div {
  animation: slide-in 1s forwards;
}

总结

掌握了CSS的基本概念与语法。 了解了三种CSS引入方式。 熟悉了常用的文本样式与盒模型。 学习了Flexbox与Grid布局基础。 了解了CSS过渡与动画的基本用法。

评论数：0