css学习笔记

1. CSS基础

什么是CSS？

• 定义：CSS（层叠样式表）是一种用于描述HTML或XML文档的表现形式的语言。
• 作用：用于设置字体、颜色、布局等视觉效果，以及动画和过渡等交互效果。

CSS的作用域

• 内联样式：直接在HTML元素的style属性中写样式，优先级最高。
• 内部样式：在HTML文档的<style>标签中写样式，作用于同一个文档。
• 外部样式：在外部.css文件中写样式，可以通过<link>标签引入到HTML文档中。

2. 选择器

基本选择器

• 元素选择器：根据元素类型选择元素，例如p会选择所有的<p>标签。
• 类选择器：使用.后跟类名选择元素，例如.className会选择所有具有class="className"的元素。
• ID选择器：使用#后跟ID名选择元素，例如#idName会选择id="idName"的元素。

组合选择器

• 后代选择器：使用空格分隔，例如div p会选择所有在<div>元素内的<p>元素。
• 子代选择器：使用>分隔，例如ul > li会选择所有直接在<ul>元素内的<li>元素。
• 相邻兄弟选择器：使用+分隔，例如h1 + p会选择紧跟在<h1>元素后的<p>元素。
• 通用兄弟选择器：使用~分隔，例如h1 ~ p会选择所有在<h1>元素后的<p>元素。

3. 属性

字体和颜色

• font-family：设置字体。
• color：设置文本颜色。
• background-color：设置背景颜色。

布局

• width：设置元素的宽度。
• height：设置元素的高度。
• margin：设置元素的外边距。
• padding：设置元素的内边距。

边框

• border：设置边框的宽度、样式和颜色。
• border-radius：设置边框的圆角。

4. 定位

定位属性

• position：设置元素的定位方式，如static、relative、absolute、fixed、sticky。
• top、right、bottom、left：设置元素相对于其正常位置或父元素的位置。

浮动

• float：设置元素的浮动方式，如left、right、none。
• clear：设置元素不允许与浮动元素相邻。

5. 响应式设计

媒体查询

• 使用@media规则来根据不同的屏幕尺寸和设备特性应用不同的样式。

弹性盒子（Flexbox）

• 一种新的布局模式，用于在不同屏幕尺寸上创建灵活的布局。

6. 动画和过渡

过渡（Transitions）

• transition属性用于创建平滑的动画效果，可以设置过渡的属性、持续时间和时序函数。

动画（Animations）

• @keyframes规则用于创建复杂的动画效果，可以控制动画的各个阶段。