CSS 教程

一、CSS 简介

CSS（Cascading Style Sheets）是一种用于描述 HTML 页面样式的语言。在 Web 开发中，CSS 通常用于控制网页的布局、字体、颜色和大小等方面。

CSS 分为内部样式表、外部样式表和行内样式表。内部样式表是将样式写在 HTML 页面的 head 标签中，外部样式表是单独创建一个 CSS 文件，而行内样式表直接写在 HTML 元素内

CSS 是层叠的，就是说一个属性可以有多个定义，最终生效的是处于优先级最高的定义。CSS 的优先级是：!important > 行内样式 > ID 选择器 > 类选择器和伪类选择器 > 元素选择器 > 通配符选择器和组合选择器。

二、基础语法

CSS 语法由选择器和声明块组成。选择器用于选择要应用样式的 HTML 元素，而声明块则包含一些属性和值，用分号分隔。

例如：

h1 {
    color: red;
    font-size: 36px;
}

上面的例子中，h1 是选择器，color 和 font-size 是属性，red 和 36px 是属性的取值。

三、选择器

CSS 选择器用于选择要应用样式的 HTML 元素。常见的选择器有：

• 元素选择器：针对 HTML 元素的类型进行选择，如 div、p、a 等。
• ID 选择器：选取具有特定 ID 属性值的元素，如 #header。
• 类选择器：选取具有特定类名的元素，如 .intro。
• 后代选择器：选取某个元素内部的另一个元素，如 ul li。
• 伪类选择器：选取特定状态下的元素，如 :hover、:visited、:first-child。

四、常用属性

CSS 有很多属性可供使用，这里介绍几个常用的属性。

1. color

color 属性用于设置文本颜色。可以使用颜色名称、RGB 值、十六进制值等来表示颜色。

h1 {
    color: red; /*使用颜色名称*/
    color: rgb(255, 0, 0); /*使用 RGB 值*/
    color: #ff0000; /*使用十六进制值*/
}

2. font-size

font-size 属性用于设置字体大小。

p {
    font-size: 18px;
}

3. background

background 属性用于设置背景颜色或背景图片。可以同时设置多个属性值，以逗号分隔。

body {
    background-color: #f0f0f0; /*设置背景颜色*/
    background-image: url(bg.jpg); /*设置背景图片*/
}

4. margin 和 padding

margin 和 padding 属性用于设置元素的外边框和内边框。它们可以设置四个方向的值（上、右、下、左），也可以分开设置。

p {
    margin: 20px; /*四个方向都设置为 20px*/
    padding-top: 10px; /*上边距为 10px，其他方向为默认值（0）*/
    padding: 10px 20px; /*上下边距为 10px，左右边距为 20px*/
    padding: 10px 20px 30px 40px; /*分别设置上右下左边距*/
}

五、响应式布局

响应式布局是指网页可以根据不同的设备和屏幕尺寸自适应地显示。在 CSS 中，可以使用 @media 查询来实现响应式布局。

例如：

@media screen and (max-width: 768px) {
    /*当屏幕宽度小于 768px 时*/
    body {
        font-size: 16px; /*设置字体大小为 16px*/
    }
    .wrapper {
        width: 90%; /*设置宽度为 90%*/
    }
}

六、CSS 预处理器

CSS 预处理器是指将类似于编程语言的语法，如变量、函数、条件语句等，引入到 CSS 中。常见的 CSS 预处理器有 Sass、Less 和 Stylus 等。

例如，使用 Sass 来定义变量：

$primary-color: #337ab7;
$secondary-color: #5cb85c;

h1 {
  color: $primary-color;
}

p {
  color: $secondary-color;
}

七、CSS 框架

CSS 框架是指封装好的 CSS 样式库，可以快速搭建网页布局和样式。常见的 CSS 框架有 Bootstrap、Foundation 和 Bulma 等。

例如，使用 Bootstrap 创建导航栏：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

八、总结

本篇文章介绍了 CSS 的基础语法、选择器、常用属性、响应式布局、CSS 预处理器和 CSS 框架。掌握了这些知识，可以快速地创建优美、响应式的网页。