【CSS学习笔记】

css概述

CSS 是一种用于网页样式设计的语言，它可以控制网页中元素的样式、布局、动画等方面。下面是一些基础知识和常用的 CSS 属性。以下内容是我在学习css过程中的一些学习笔记。

一、CSS 基础知识

（一）CSS 选择器

CSS 选择器用于选择要应用样式的 HTML 元素，以下是一些常见的 CSS 选择器：
1、标签选择器：选择指定 HTML 标签的元素，例如 p、h1、div 等。
2、ID 选择器：选择具有指定 ID 属性值的元素，例如 #myId。
3、类选择器：选择具有指定 class 属性值的元素，例如 .myClass。
4、属性选择器：选择具有指定属性的元素，例如 [href]、[type="text"] 等。
5、伪类选择器：选择指定状态的元素，例如 :hover、:active、:visited 等。
6、伪元素选择器：选择指定元素的某个部分，例如 ::before、::after 等。
（二）CSS 属性
CSS 属性用于设置元素的样式、布局、动画等方面。以下是一些常见的 CSS 属性：
color：设置文本颜色。
font-size：设置字体大小。
font-family：设置字体家族。
font-weight：设置字体粗细。
text-align：设置文本对齐方式。
background-color：设置背景颜色。
background-image：设置背景图片。
background-size：设置背景图片大小。
border：设置边框属性。
padding：设置内边距。
margin：设置外边距。
width：设置元素宽度。
height：设置元素高度。
display：设置元素的显示方式。
position：设置元素的定位方式。
top、right、bottom、left：设置元素的位置。
z-index：设置元素的堆叠顺序。
opacity：设置元素的透明度。
transition：设置元素的过渡效果。
（三）CSS 盒模型
CSS 盒模型是一个用于描述网页中元素大小、边框、内边距和外边距的模型。每个 HTML 元素可以看作是一个矩形盒子，它由以下四个部分组成：
1、内容区域（content area）：元素的实际内容。
2、内边距区域（padding area）：内容区域周围的空白区域。
3、边框区域（border area）：内边距区域周围的边框。
4、外边距区域（margin area）：边框区域周围的空白区域。
CSS 盒模型的大小可以由以下属性控制：
1、width：设置元素的宽度（不包括边框和内边距）。
2、height：设置元素的高度（不包括边框和内边距）。
3、padding：设置元素的内边距。
4、border：设置元素的边框。
5、margin：设置元素的外边距。
（四）CSS 实例
以下是一些常见的 CSS 实例：
1、设置文本样式：
（1）设置文本颜色和字体大小

p {
  color: #333;
  font-size: 16px;
}

（2）设置字体家族和粗细

h1 {
  font-family: Arial, sans-serif;
  font-weight: bold;
}

（3）设置背景颜色

body {
  background-color: #f2f2f2;
}

（4）设置背景图片

#header {
  background-image: url("header.jpg");
  background-size: cover;
}

（5）设置边框样式

.box {
  border: 1px solid #ccc;
}/* 设置边框属性 */

.button {
  border-style: solid;
  border-width: 1px;
  border-color: #333;
}设置边框样式 */

（6）设置布局样式

.box {
  width: 200px;
  height: 100px;
}/* 设置元素宽度和高度 */

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}/* 设置元素的显示方式 */

#sidebar {
  position: absolute;
  top: 0;
  left: 0;
}/* 设置元素的定位和位置 */

#popup {
  z-index: 9999;
}/* 设置元素的堆叠顺序 */

（7）设置动画效果

.button:hover {
  background-color: #333;
  color: #fff;
  transition: background-color 0.3s ease, color 0.3s ease;
}/* 设置过渡效果 */

@keyframes spin {
  from {
    transform: rotate(0deg);
  }/* 设置关键帧动画 */
  to {
    transform: rotate(360deg);
  }
}
.spinner {
  animation: spin 2s linear infinite;
}

（五）在 CSS 中常见的单位：
1、像素（px）：绝对单位，基于屏幕分辨率。
2、百分比（%）：相对单位，基于父元素的大小。
3、em：相对单位，基于元素字号的大小。1em 等于元素字号的大小。
4、rem：相对单位，基于根元素字号的大小。1rem 等于根元素字号的大小。
5、vh 和 vw：视窗单位，基于视口的大小。1vh 等于视口高度的 1%，1vw 等于视口宽度的 1%。
6、pt 和 pc：绝对单位，用于打印。
（六）CSS 布局
CSS 可以用来控制网页中元素的布局，以下是一些常见的布局技术：
1、浮动（float）：可以将元素从正常文档流中移动，使其向左或向右浮动。浮动元素可以实现多栏布局、图文混排等效果。
2、定位（position）：可以将元素相对于文档流或其父元素进行定位。定位元素可以实现绝对定位、相对定位、固定定位等效果。
3、弹性盒子（flexbox）：是一种用于网页布局的新技术，可以将容器内的元素自由地进行排列、对齐等操作。
4、网格布局（grid）：是另一种用于网页布局的新技术，可以将容器内的元素划分为网格单元，并自由地进行布局、对齐等操作。
（7）CSS 框架
CSS 框架是一种用于快速开发网页的工具，它提供了一系列预定义的样式和布局，可以让开发者更快地构建出美观、响应式的网页。常用的 CSS 框架包括：
1、Bootstrap：一个流行的前端框架，提供了丰富的 UI 组件和网格系统，可以快速构建响应式网页。
2、Foundation：一个类似 Bootstrap 的前端框架，提供了响应式网页开发所需的工具和组件。
3、Bulma：一个基于 Flexbox 的轻量级 CSS 框架，提供了简洁、灵活的样式和组件。
4、Materialize：一个基于 Google Material Design 的前端框架，提供了丰富的 UI 组件和样式。
使用 CSS 框架可以快速搭建网页原型，减少开发时间和工作量，同时也可以让网页看起来更加美观和专业。