您的位置:

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 框架。掌握了这些知识,可以快速地创建优美、响应式的网页。