CSS 学习笔记|青训营

GOrgeous
49 阅读3分钟

前端CSS学习笔记

CSS（Cascading Style Sheets）是一种用于控制页面布局和样式的标记语言，它使得网页的外观和格式能够与内容分离。

在学习CSS之前，我们首先需要了解一些基本概念和术语。

  1. 选择器（Selector）：用于选择要应用样式的元素。可以通过元素类型、类名、ID等方式进行选择。

  2. 属性（Property）：用于定义样式的属性。例如，颜色、字体、边框等。

  3. 值（Value）：用于定义属性的具体取值。例如，红色、12px、实线等。

  4. 声明（Declaration）：由属性和值组成，用于定义元素的样式。例如，color: red;表示设置元素的文本颜色为红色。

  5. 样式（Style）：一组声明的集合，用于定义元素的外观和格式。

下面是一些常用的CSS样式属性：

  1. color：定义文本颜色。

  2. font-size：定义文本的字号。

  3. font-weight：定义文本的粗细。

  4. text-align：定义文本的水平对齐方式。

  5. background-color：定义元素的背景颜色。

  6. width：定义元素的宽度。

  7. height：定义元素的高度。

  8. border：定义元素的边框样式。

  9. margin：定义元素的外边距。

  10. padding：定义元素的内边距。

CSS样式可以通过三种方式应用到HTML文档中的元素上：

  1. 内联样式（Inline Style）：直接在HTML标签中使用style属性来定义元素的样式。例如：

    Hello World!
    。

  2. 内部样式表（Internal Style Sheet）：在HTML文档的标签中使用标签来定义一组样式。例如： 

<head>
  <style>
    div {
      color: red;
    }
  </style>
</head>
  1. 外部样式表（External Style Sheet）：将样式定义在一个独立的.CSS文件中， 然后在HTML文档的标签中使用标签将样式表文件引入。例如：
<head>
  <link rel="stylesheet" href="style.css">
</head>

在学习CSS时，我们需要注意以下几个方面：

  1. CSS盒子模型：每个HTML元素都可以被看作是一个矩形的盒子，包含了内容、内边距、边框和外边距。了解盒子模型的概念和相关属性（如width、height、margin和padding）是非常重要的。

  2. CSS选择器：选择器用于选择要应用样式的元素。了解不同类型的选择器（如元素选择器、类选择器、ID选择器和伪类选择器）以及它们的用法是非常重要的。

  3. CSS布局：了解如何使用CSS来控制页面的布局和格式是非常重要的。学习Flexbox布局和Grid布局是非常有帮助的。

  4. CSS优先级：当多个样式规则应用到同一个元素上时，会存在优先级的问题。了解CSS样式的优先级规则以及如何提高或降低样式的优先级是非常重要的。

  5. CSS响应式设计：考虑到不同设备和屏幕尺寸的需求，学习如何使用CSS来实现响应式设计是非常重要的。

总结起来，学习CSS需要掌握基本概念和术语、常用样式属性、样式的应用方式以及一些关键技巧。同时，通过实践和实例练习可以更好地掌握和应用CSS。

avatar
文章
阅读
粉丝