最简单详细好入门的css笔记

CSS 是一种用来描述网页样式并布局的语言，它可以使我们的网页更加生动和美观。以下是一些简单易懂的 CSS 注释和代码示例，可以作为学习 CSS 的起点。

1. 注释：

CSS 注释是用来在 CSS 代码中解释说明的，它们可以帮助开发者理解代码的功能，也可以在调试时临时隐藏代码。CSS 注释的语法是 /* 注释内容 */。

/* 这是一个注释，它不会被浏览器执行 */

2. 选择器：

CSS 的选择器用来选择页面上的元素，然后应用样式。最常见的选择器有标签选择器、类选择器和 ID 选择器。

/* 标签选择器 */
p {
  color: blue;
}
 
/* 类选择器，以 . 开头 */
.my-class {
  color: red;
}
 
/* ID 选择器，以 # 开头 */
#my-id {
  color: green;
}

3. 属性和值：

CSS 属性和值组合起来定义了元素的样式。例如，color 属性和颜色值定义了文本颜色。

p {
  color: blue; /* 设置段落文本为蓝色 */
  font-size: 16px; /* 设置字体大小为16像素 */
}

4. 链接样式：

CSS 可以用来定义链接在不同状态下的样式，例如：link, visited, hover, active。

/* 未访问的链接 */
a:link {
  color: blue;
}
 
/* 访问过的链接 */
a:visited {
  color: purple;
}
 
/* 鼠标悬停时的链接 */
a:hover {
  color: red;
}
 
/* 选中的链接 */
a:active {
  color: green;
}

5. CSS 的优先级：

当多个选择器选中同一个元素，并且都定义了相同的属性时，将会应用哪个选择器的规则呢？CSS 有一个优先级的概念，通常情况下，更具体的选择器优先级更高。

/* 类选择器将会优先于标签选择器 */
p {
  color: red;
}
 
.my-class {
  color: blue;
}

6. 嵌套规则：

CSS 可以用来定义父元素和子元素的样式，这种方式称为嵌套规则。

/* 为所有的段落定义了蓝色的文本 */
p {
  color: blue;
 
  /* 为段落内的 strong 元素定义了红色的文本 */
  strong {
    color: red;
  }
}

7. 导入 CSS：

可以通过 @import 规则在 CSS 文件中导入其他 CSS 文件。

/* 导入其他 CSS 文件 */
@import url('other-styles.css');

8. CSS 布局：

CSS 可以用来创建各种布局，例如浮动布局、flexbox 布局、grid 布局等。

/* 浮动布局示例 */
.float-left {
  float: left;
  margin-right: 10px;
}
 
.float-right {
  float: right;
  margin-left: 10px;
}
 
/* Flexbox 布局示例 */
.flex-container {
  display: flex;
}