CSS 基础教程：从入门到精通

斯陀含

于 2024-06-17 22:09:44 发布

阅读量767

点赞数 20

文章标签： css 前端

本文链接：https://blog.csdn.net/u011464172/article/details/139755873

版权

CSS 基础教程：从入门到精通

CSS（层叠样式表）是用来控制网页外观的语言，它决定了网站的排版、颜色、字体、图像等元素的样式。学习 CSS 是网页设计和开发必不可少的技能，以下教程将带你从基础开始，深入了解 CSS 的各个方面。

一、选择器

选择器是 CSS 的核心，它决定了哪些 HTML 元素会被应用样式。

1.1 基本选择器

元素选择器： 选择所有匹配指定元素的标签，例如： p { color: blue; } 将所有段落文字颜色设置为蓝色。
类选择器： 选择所有带有特定 class 属性的元素，例如： <p class="intro">...</p> 可以用 .intro { font-weight: bold; } 将所有 class 为 intro 的段落设置为粗体。
ID 选择器： 选择拥有唯一 ID 的元素，例如： <h1 id="title">...</h1 可以用 #title { text-align: center; } 将 ID 为 title 的标题居中。
通用选择器： 选择所有元素，例如： * { margin: 0; } 将所有元素的边距设置为 0。

1.2 组合选择器

后代选择器： 选择所有匹配特定元素的后代元素，例如： div p { font-size: 16px; } 将所有 div 元素内部的 p 元素字体大小设置为 16 像素。
子选择器： 选择所有匹配特定元素的直接子元素，例如： div > p { font-size: 16px; } 将所有 div 元素直接包含的 p 元素字体大小设置为 16 像素。
相邻兄弟选择器： 选择紧接在特定元素之后的兄弟元素，例如： h2 + p { font-style: italic; } 将所有紧接在 h2 元素之后的 p 元素设置为斜体。
通用兄弟选择器： 选择所有匹配特定元素之后的兄弟元素，例如： h2 ~ p { font-style: italic; } 将所有在 h2 元素之后的 p 元素设置为斜体。

1.3 属性选择器

属性选择器： 选择所有包含特定属性的元素，例如： [title] { color: red; } 将所有包含 title 属性的元素颜色设置为红色。
属性值选择器： 选择所有属性值为特定值的元素，例如： [title="标题"] { color: red; } 将所有 title 属性值为 “标题” 的元素颜色设置为红色。

二、布局

CSS 提供了多种布局方式，帮助你创建结构清晰、美观的用户界面。

2.1 块级元素和行内元素

块级元素： 独占一行，可以设置宽高，例如： <h1>, <p>, <div>。
行内元素： 不独占一行，无法设置宽高，例如： <strong>, <span>, <a>。

2.2 盒模型

每个 HTML 元素都被视为一个盒子，盒子模型由内容、内边距、边框和外边距组成。

内容： 元素本身的内容。
内边距： 内容与边框之间的区域。
边框： 元素周围的边框。
外边距： 元素与其他元素之间的区域。

2.3 常用布局方式

浮动布局： 利用浮动属性将元素向左或向右浮动，从而实现左右排列或环绕效果。
定位布局： 利用定位属性将元素固定在特定位置，例如： position: static, position: relative, position: absolute, position: fixed。
Flex 布局： 利用 flexbox 属性，可以轻松实现元素的排列、对齐、伸缩等功能。
Grid 布局： 利用 grid 属性，可以将网页划分成行和列，实现更灵活的布局。

三、样式属性

CSS 提供了丰富的属性，用于控制网页元素的样式。

3.1 文本样式

字体属性： font-family, font-size, font-weight, font-style, text-align, line-height 等。
颜色属性： color, background-color 等。
文本装饰属性： text-decoration, text-transform 等。

3.2 视觉样式

边框属性： border, border-width, border-color, border-style 等。
阴影属性： box-shadow, text-shadow 等。
圆角属性： border-radius 等。
背景属性： background-color, background-image, background-repeat, background-size 等。

3.3 尺寸和定位

尺寸属性： width, height, max-width, min-width, max-height, min-height 等。
定位属性： position, top, right, bottom, left, z-index 等。
间距属性： margin, padding 等。

四、实例

1. 创建一个简单网页：

<!DOCTYPE html>
<html>
<head>
  <title>CSS 教程</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
    }

    h1 {
      color: #333;
      font-size: 2em;
      text-align: center;
    }

    p {
      font-size: 1.2em;
      line-height: 1.5;
      color: #666;
    }
  </style>
</head>
<body>

  <h1>CSS 教程</h1>

  <p>这是一个简单的 CSS 教程，演示了基础的选择器、布局和样式属性的使用。</p>

</body>
</html>

2. 使用 Flex 布局实现元素的左右排列：

<!DOCTYPE html>
<html>
<head>
  <title>Flex 布局</title>
  <style>
    .container {
      display: flex;
      justify-content: space-between;
    }

    .item {
      width: 45%;
      padding: 20px;
      border: 1px solid #ddd;
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="item">
      <h2>内容 1</h2>
      <p>这是内容 1 的描述。</p>
    </div>
    <div class="item">
      <h2>内容 2</h2>
      <p>这是内容 2 的描述。</p>
    </div>
  </div>

</body>
</html>

3. 使用 Grid 布局实现图片网格：

<!DOCTYPE html>
<html>
<head>
  <title>Grid 布局</title>
  <style>
    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .image {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }
  </style>
</head>
<body>

  <div class="grid">
    <img class="image" src="image1.jpg" alt="图片 1">
    <img class="image" src="image2.jpg" alt="图片 2">
    <img class="image" src="image3.jpg" alt="图片 3">
    <img class="image" src="image4.jpg" alt="图片 4">
    <img class="image" src="image5.jpg" alt="图片 5">
    <img class="image" src="image6.jpg" alt="图片 6">
  </div>

</body>
</html>