CSS 学习笔记

前言

CSS 是一种用于描述网页样式的语言，有助于将 HTML 呈现为可读性更高、更有吸引力的文档。在本学习笔记中，将介绍 CSS 的基础知识，包括语法、选择器、属性等内容。

CSS 简介

什么是 CSS？

CSS（层叠样式表）用于为网页添加样式和布局。使用 CSS，可以控制网页的各个元素的外观，包括颜色、大小、字体等。

为什么使用 CSS？

使网页更易于阅读和理解
提高网站的可访问性
降低网站开发的成本和复杂度

CSS 语法

选择器

选择器用于选择要应用样式的 HTML 元素。

元素选择器

元素选择器是通过 HTML 元素名来选择元素的。例如，以下样式将应用于所有段落元素：

cssCopy Code
p {
  color: red;
}

类选择器

类选择器是以点号（.）开头的选择器。例如，以下样式将应用于所有 class 属性为 "example" 的元素：

cssCopy Code
.example {
  color: blue;
}

ID 选择器

ID 选择器是以井号（#）开头的选择器。例如，以下样式将应用于 ID 为 "myHeading" 的元素：

cssCopy Code
#myHeading {
  font-size: 32px;
}

属性选择器

属性选择器是通过 HTML 元素属性来选择元素的。例如，以下样式将应用于所有带有 title 属性的 img 标签：

cssCopy Code
img[title] {
  border: 1px solid black;
}

伪类选择器

伪类选择器用于根据元素的状态选择元素。例如，以下样式将应用于所有鼠标悬停在链接上的元素：

cssCopy Code
a:hover {
  color: green;
}

伪元素选择器

伪元素选择器用于将样式应用到元素的特定部分，例如首字母、第一行或最后一行。例如，以下样式将用于第一个字母：

cssCopy Code
p:first-letter {
  font-size: 24px;
}

CSS 属性

CSS 属性用于设置元素的样式。

颜色属性

颜色属性用于设置元素的颜色，包括文字颜色、背景颜色等。常用的颜色属性包括：

color：设置文字颜色
background-color：设置背景颜色

背景属性

背景属性用于设置元素的背景，包括背景图像、颜色等。常用的背景属性包括：

background-image：设置背景图像
background-color：设置背景颜色

文本属性

文本属性用于设置文字的样式，包括字体、大小、颜色等。常用的文本属性包括：

font-family：设置字体
font-size：设置字体大小
color：设置文字颜色

边框属性

边框属性用于设置元素的边框样式，包括宽度、颜色等。常用的边框属性包括：

border-width：设置边框宽度
border-style：设置边框样式
border-color：设置边框颜色

盒模型属性

盒模型属性用于设置元素的尺寸、边距、内边距等。常用的盒模型属性包括：

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

实例

实例 1：添加背景图像和颜色

以下样式将为 ID 为 "myDiv" 的元素添加背景图像和颜色：

cssCopy Code
#myDiv {
  background-image: url("example.jpg");
  background-color: #fff;
}

实例 2：改变字体大小和颜色

以下样式将为 class 属性为 "example" 的所有元素改变字体大小和颜色：

cssCopy Code
.example {
  font-size: 16px;
  color: #000;
}

实例 3：创建响应式网页设计

以下样式将为所有类名为 "responsive" 的元素创建响应式设计：

cssCopy Code
.responsive {
  width: 100%;
  max-width: 1200px;
}

以上就是 CSS 学习笔记的内容，希望对大家的学习有所帮助！