CSS 基础教程：掌握选择器、属性与语法

天天向上

发布： 2025-02-06 23:34:08

原创

728 人浏览过

CSS（层叠样式表）是前端开发的核心部分之一，用于控制网页的视觉呈现，主要负责网页的布局、样式和颜色等。理解 CSS 的基本概念、选择器、语法和常用属性，是掌握前端开发的第一步。

1. 什么是 CSS？

CSS（Cascading Style Sheets），即层叠样式表，是一种用于描述 HTML 文档外观的样式语言。CSS 可以控制网页的布局、颜色、字体、间距等，甚至可以实现动画效果和响应式设计。与 HTML 主要负责网页结构和内容不同，CSS 主要负责网页的视觉效果和用户体验。

CSS 的作用和工作原理：

作用：CSS 使得网页内容更加美观、易用，提供了一种灵活的方式来定制网页的外观。
工作原理：浏览器会将 HTML 和 CSS 文件进行解析，最终渲染出用户看到的网页。CSS 被应用到 HTML 元素上时，浏览器会根据 CSS 规则计算并应用样式。

2. 如何将 CSS 应用于 HTML？

CSS 可以通过以下三种方式应用于 HTML 页面：

1.内联样式（Inline Style）

直接在 HTML 元素的 style 属性中定义样式。

   <p style="color: blue; font-size: 16px;">这是一段内联样式文本。</p>

优点：快速简单，适用于小范围的样式调整。
缺点：不利于样式的重用，难以管理。

2.内部样式（Internal Style）

将 CSS 代码放置在 HTML 文件的 <style> 标签中，通常放在 <head> 部分。

   <style>
     p {
       color: blue;
       font-size: 16px;
     }
   </style>
   <p>这是一段使用内部样式的文本。</p>

优点：适用于单个页面的样式定义，便于集中管理。
缺点：只能作用于当前页面，不利于多个页面共享样式。

3. 外部样式（External Style）

使用外部 .css 文件来定义样式，通过 <link> 标签在 HTML 中引入。

   <link rel="stylesheet" href="styles.css">

优点：适用于多个页面共享同一套样式，便于维护和管理。
缺点：需要额外的 HTTP 请求加载 CSS 文件。

3. CSS 选择器

CSS 选择器是用来选中 HTML 元素并为其应用样式的规则。选择器有多种类型，理解它们是应用 CSS 的基础。

基本选择器：

标签选择器（Type Selector）：通过 HTML 标签名选中元素。
css p { color: red; }
类选择器（Class Selector）：通过元素的类名选中元素，类名前加点（.）。
css .highlight { background-color: yellow; }
ID 选择器（ID Selector）：通过元素的 id 属性选中元素，id 前加井号（#）。
css #header { font-size: 24px; }

2. 组合选择器：

子选择器（Child Selector）：选中某个元素的直接子元素，使用 >。
css div > p { color: blue; }
后代选择器（Descendant Selector）：选中某个元素的所有后代元素。
css div p { color: green; }
相邻兄弟选择器（Adjacent Sibling Selector）：选中紧接在某元素后的兄弟元素，使用 +。
css h2 + p { margin-top: 10px; }
通用选择器（Universal Selector）：选中所有元素，使用星号（*）。 “`css
- {
  margin: 0;
  padding: 0;
  }
  “`

3. 伪类选择器（Pseudo-classes）

用于选择处于特定状态的元素，如鼠标悬停、获取焦点、选择特定子元素等。
常见的伪类：
- :hover：当鼠标悬停在元素上时应用样式。
- :focus：当元素获得焦点时应用样式。
- :nth-child()：选中指定顺序的元素。
  css a:hover { color: red; } p:nth-child(odd) { background-color: lightgray; }

4. 伪元素选择器（Pseudo-elements）

用于选中元素的特定部分，如内容前后、首字母等。
常见的伪元素：
- ::before：选中元素内容前插入内容。
- ::after：选中元素内容后插入内容。
  css p::before { content: ">>> "; } p::after { content: " <<<"; }

4. CSS 语法

CSS 语法由选择器和声明组成，声明包含属性和值。

选择器和声明

CSS 语法格式为：选择器 { 属性: 值; }

   p {
     color: blue;
     font-size: 16px;
   }

2. 属性和值的书写规范

CSS 属性和值必须用冒号分隔，属性和值之间用分号（;）分隔。多个属性可以在同一规则中按顺序写出。
属性名称是固定的，例如 font-size，而值通常是指定具体的数值、颜色或关键字，例如 16px 或 blue。

3. 注释的使用

注释可以帮助解释代码，增强可读性。注释使用 /* 注释内容 */ 的形式。

   /* 这是一个注释 */
   p {
     color: red; /* 设置文本颜色为红色 */
   }

5. 常用的 CSS 属性

文字样式

font-family：设置字体类型。
font-size：设置字体大小。
font-weight：设置字体粗细。
line-height：设置行高。
text-align：设置文本对齐方式。

   p {
     font-family: Arial, sans-serif;
     font-size: 18px;
     font-weight: bold;
     line-height: 1.5;
     text-align: center;
   }

颜色

color：设置文本颜色。
background-color：设置元素的背景色。
opacity：设置透明度，值为 0 到 1 之间。

   p {
     color: #333;
     background-color: #f4f4f4;
     opacity: 0.8;
   }

布局

display：设置元素的显示类型，如 block、inline、flex 等。
position：设置元素的定位方式，如 static、relative、absolute、fixed、sticky。
z-index：设置元素的堆叠顺序。
float：设置元素浮动。
clear：控制元素清除浮动。

   div {
     display: flex;
     position: relative;
     z-index: 10;
   }

尺寸

width 和 height：设置元素的宽度和高度。
padding：设置元素内容区与边框之间的内边距。
margin：设置元素外部与其他元素之间的外边距。
border：设置元素的边框样式、宽度和颜色。

   div {
     width: 100px;
     height: 50px;
     padding: 10px;
     margin: 20px;
     border: 2px solid black;
   }

边框

border-radius：设置圆角边框。
border-style：设置边框的样式（如 solid, dashed, dotted 等）。
**`border-width

`**：设置边框宽度。

   div {
     border-radius: 8px;
     border-style: solid;
     border-width: 3px;
   }

总结

通过掌握以上内容，你可以开始灵活地使用 CSS 来设计网页的视觉效果。随着对 CSS 基础的理解和实践，逐渐深入了解布局、响应式设计、动画等高级技巧，将有助于你在前端开发领域的发展。