CSS学习笔记（初识），2024我对前端-view的3条认识

这篇文章距离上次修改已过200天，其中的内容可能已经有所变动。

CSS（层叠样式表）是一种用来为网页添加样式的语言，可以控制网页的布局、颜色、字体等外观。以下是对前端开发中CSS的3条认识：

内联样式直接在HTML元素上通过style属性来设置样式，适合单个元素的样式定义。




<p style="color: blue;">这是蓝色的文本。</p>

内部样式表在HTML文档的<head>部分通过<style>标签定义，适合单个页面的样式定义。




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

外部样式表是一个独立的CSS文件，通过HTML的<link>标签引入，适合多个页面共享样式的场景。




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

标签选择器根据标签名选择元素。




p { color: green; }

类选择器通过类名选择元素，一个类可以应用于多个元素。




.center { text-align: center; }

ID选择器通过ID名选择元素，ID在文档中应该是唯一的。




#header { background-color: yellow; }

例如，设置文本颜色、字体大小和背景颜色：




p {
  color: #333333; /* 文本颜色 */
  font-size: 16px; /* 字体大小 */
  background-color: #dddddd; /* 背景颜色 */
}

以上是CSS的基础认识，实际应用中还会涉及更多高级特性，如响应式设计、媒体查询、Flexbox、Grid等布局方式，以及动画、变换等效果。