掌握 css：从基础到中级

css（层叠样式表）是创建具有视觉吸引力的网站的基石技术。它允许开发人员设置 html 元素的样式、控制布局并增强用户体验。本文将指导您了解 css 基础知识和中级概念，确保您可以自信地设计网页样式。

1. css 简介

• 什么是css？

  css 用于设置 html 元素的样式，定义它们的外观（例如颜色、字体、间距）。它将内容 (html) 与演示文稿 (css) 分开。

  示例：设置

  元素的样式：

   <h1 style="color: blue;">hello world</h1> 

• 三种类型的 css

  • 内联 css：使用 style 属性直接应用于元素。 例子：

     <p style="color: red;">this is a red paragraph.</p> 
  • 内部 css：编写在 html 文件的 部分的
    

     <style>      body {        background-color: #f0f0f0;      }    </style>
  • 外部 css：通过 .css 文件链接，以确保多个页面之间的一致性。 例子：

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

2. css 选择器

• 选择器用于针对 html 元素进行样式设置。

  • 通用选择器 (*)：设置所有元素的样式。
  • 类型选择器（元素）：针对特定标签，例如
    

    。

  • 类选择器（.classname）：针对具有特定类的元素。 例子：

     <style>      .highlight { color: yellow; }    </style><p class="highlight">highlighted text</p> 
  • id 选择器 (#id)：针对唯一 id。 例子：

     <style>      #unique { color: green; }    </style><p id="unique">unique text</p> 

3. css 属性和值

• 文本和字体样式

  立即学习“前端免费学习笔记（深入）”；

  • 颜色：设置文本颜色。
  • font-size：定义文本大小。
  • font-family：指定字体。 例子：

     <style>      p { color: navy; font-size: 16px; font-family: arial; }    </style>

• 背景样式

  • 背景颜色：设置背景颜色。
  • 背景图像：添加背景图像。 例子：

     <style>      body { background-color: lightblue; background-image: url('background.jpg'); }    </style>

4. css 盒子模型

盒模型解释了元素的结构：

• content：元素内的实际内容。
• padding：内容和边框之间的空间。
• 边框：包含填充和内容。

• 边距：元素与相邻元素之间的空间。

  示例：

   <style>    div {      width: 200px;      padding: 10px;      border: 2px solid black;      margin: 20px;    }  </style>

5. css 定位和布局

• 定位

  • Static：默认流。
  • 相对：相对于其正常位置定位。
  • 绝对：相对于最近定位的祖先定位。
  • 固定：滚动期间保持在原位。 例子：

     <style>      div { position: absolute; top: 50px; left: 100px; }    </style>

• flexbox

  flexbox 简化了创建灵活且响应式布局的过程。

  示例：

   <style>    .container {      display: flex;      justify-content: center;      align-items: center;      height: 100vh;    }  </style>

• 网格

  css grid 提供了强大的布局系统。

  示例：

   <style>    .grid {      display: grid;      grid-template-columns: 1fr 1fr;    }  </style>

6. css 伪类和伪元素

• 伪类：根据元素的状态设置样式。

  示例：悬停效果

   <style>    a:hover { color: red; }  </style>

• 伪元素：为元素的特定部分设置样式。

  示例：在元素之前添加内容：

   <style>    p::before { content: "note: "; font-weight: bold; }  </style>

7. 带有媒体查询的响应式设计

媒体查询根据屏幕尺寸调整样式。

示例：

   <style>      @media (max-width: 600px) {        body { background-color: lightgray; }      }    </style> 

8. 中级 css 技术

• 转场和动画

  示例：

   <style>    div {      transition: transform 0.5s;    }    div:hover {      transform: scale(1.2);    }  </style>

• css 变量

  示例：

   <style>    :root { --main-color: blue; }    p { color: var(--main-color); }  </style>

9. 结论

css 将纯 html 转换为美观、实用的网页。通过了解基础知识并深入了解中级概念，您将获得创建响应灵敏、具有视觉吸引力的设计的技能。练习设计简单的项目（例如个人作品集）以掌握这些技术。