CSS

选择器（Selectors）

  1. 标签选择器

    使用 HTML 标签名称作为选择器，可以选择页面上所有具有该标签名称的元素。

    1
    2
    3
    p {
      color: blue;
    }

  2. 类选择器

    类选择器通过类名选择元素，类名前面加上点号（.）表示。

    1
    2
    3
    .highlight {
      font-weight: bold;
    }

  3. ID 选择器

    ID 选择器通过元素的唯一ID属性进行选择，ID名前面加上井号（#）表示。

    1
    2
    3
    #header {
      background-color: #f2f2f2;
    }

  4. 后代选择器

    后代选择器通过指定元素的后代关系来选择元素，用空格隔开。

    1
    2
    3
    .container p {
      margin-bottom: 10px;
    }

  5. 层次选择器

    1. 后代选择器：在某个元素的后面

      1
      2
      3
      body p {
          backgroud: red;
      }

    2. 子选择器， 一代

    1
    2
    3
    body > p {
        backgroud: red;
    }
    1. 相邻兄弟选择器 同辈
    1
    2
    3
    4
    /*只有一个，相邻（向下）*/
    .active + p {
        backgroud: red;
    }
    1. 通用选择器
    1
    2
    3
    4
    /*当前选中元素的向下的所有兄弟元素*/
    .active ~ p {
        backgroud: red;
    }

  6. 伪类选择器

    伪类选择器用于向某些特殊的元素添加特定的样式，比如链接的不同状态。

    1
    2
    3
    a:hover {
      text-decoration: underline;
    }

盒子模型

CSS 的盒子模型指的是每个 HTML 元素被描绘为一个矩形盒子，它由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。

盒子模型属性

  1. width：设置盒子的宽度。
  2. height：设置盒子的高度。
  3. padding：用于设定元素边框与内容之间的空白区域。可以使用 padding-top、padding-right、padding-bottom、padding-left 分别对上、右、下、左进行设置。
  4. border：用于设定元素的边框样式、宽度和颜色。通常包括 border-width、border-style 和 border-color 属性。
  5. margin：用于设定元素与其他元素之间的空白区域。可以使用 margin-top、margin-right、margin-bottom、margin-left 分别对上、右、下、左进行设置。

盒子模型示例

1
2
3
4
5
6
7
8
.box {
  width: 200px;
  height: 150px;
  padding: 20px;
     
  border: 2px solid #000;
  margin: 10px;
}

在这个示例中，.box 类的元素会具有一个宽度为 200 像素、高度为 150 像素的矩形盒子。它的内容与边框之间有 20 像素的内边距，边框为 2 像素宽的黑色实线，外边距为上下左右各 10 像素。

弹性盒子

弹性盒子模型（Flexbox）是一种用于在容器中布局元素的CSS布局模型。它使得元素能够更加灵活地适应其父容器的大小，并且可以轻松实现水平和垂直居中、对齐等效果。

下面是一个简单的例子，演示了如何使用Flexbox布局：

HTML代码：

1
2
3
4
5
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

CSS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.container {
  display: flex; /* 将容器指定为弹性布局 */
  justify-content: space-around; /* 子项在主轴上均匀分布 */
  align-items: center; /* 在侧轴上居中对齐 */
  height: 200px;
  background-color: #f2f2f2;
}

.item {
  flex: 1; /* 设置子项的占比，使其自动填充剩余空间 */
  text-align: center;
  line-height: 200px;
  font-size: 20px;
  background-color: #3498db;
  color: #ffffff;
  margin: 10px;
}

在这个例子中，父容器使用display: flex指定为弹性布局，子项使用flex: 1来让它们平均分配剩余空间。justify-content规则使得子项在主轴上均匀分布，align-items规则使得子项在侧轴上居中对齐。

通过这些CSS属性，Flexbox布局允许我们轻松地创建具有灵活性和响应性的布局结构。

CSS 字体和文本样式

CSS 中的字体和文本样式属性非常丰富，可以帮助你对网页中的文本进行精细的控制和设计。以下是一些常用的字体和文本样式属性以及它们的作用：

  1. font-family：用于设置文本的字体系列，指定一组优先使用的字体，如果第一个不可用，则使用下一个备选字体。
  2. font-size：控制文本的大小，可以使用像素、em 等单位来指定。
  3. font-weight：指定文本的粗细，可以设置为 normal、bold、bolder、lighter 或者具体的数值，如 100、200、…、900。
  4. font-style：用于控制文本的风格，可设置为 normal（默认）、italic（斜体）或 oblique（倾斜体）。
  5. text-align：设定文本水平对齐方式，可以是 left、right、center 或 justify。
  6. text-decoration：用于添加或删除文本的装饰效果，比如下划线、删除线等。
  7. line-height：控制行高，即一行文本的高度。可以使用像素、百分比或无单位值。
  8. letter-spacing：调整字符间的距离，通过增加或减少空格来改变文字的紧凑度。
  9. text-transform：控制文本大小写，captialize：每个单词开头大写；uppercase：全部大写字母；lowercase：全部小写字母
  10. text-indent：规定文本块中首行文本的缩进

背景和边框（Backgrounds and Borders）

  1. 背景（Background）

    • background-color：设置元素的背景颜色。

      1
      2
      3
      .container {
        background-color: #f2f2f2;
      }

    • background-image：设置元素的背景图像。

      1
      2
      3
      .header {
        background-image: url('header-bg.jpg');
      }

    • background-repeat：控制背景图像的重复方式，可以设置为 repeat、no-repeat、repeat-x 或 repeat-y。

      1
      2
      3
      4
      .section {
        background-image: url('section-bg.jpg');
        background-repeat: no-repeat;
      }

  2. 边框（Borders）

    • border-width：设置边框的宽度，可以单独设置上、右、下、左四个方向的宽度。

      1
      2
      3
      .box {
        border: 2px solid #000;
      }

    • border-style：定义边框的样式，比如 solid、dashed、dotted 等。

      1
      2
      3
      .image-frame {
        border-style: dashed;
      }

    • border-collapse:设置表格的边框是否被折叠成一个单一的边框或隔开，border-collapse：collapse

    • border-color：设置边框的颜色。

      1
      2
      3
      .sidebar {
        border: 1px solid #ccc;
      }

布局（Layout）

布局是前端开发中的关键部分，它涉及到如何有效地安排和组织页面上的元素以及定义它们的位置和尺寸。以下是布局中常用的一些技术：

  1. 浮动（Float）

    通过浮动属性，可以让元素向左或向右移动，其他内容会围绕着浮动元素进行排列。这在创建多列布局时非常有用。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .left-column {
      float: left;
      width: 30%;
    }

    .right-column {
      float: right;
      width: 70%;
    }

  2. 清除浮动

    清除浮动是指在使用浮动布局时，为了确保父元素能够包含所有子浮动元素并正确显示的技术。以下是一些清除浮动的方法：

    1. 使用空元素清除浮动

    HTML:

    1
    2
    3
    4
    5
    <div class="clearfix">
      <div class="float-left">左浮动元素</div>
      <div class="float-right">右浮动元素</div>
      <div class="clear"></div>
    </div>

    CSS:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .clearfix:after {
      content: "";
      display: table;
      clear: both;
    }
    .float-left {
      float: left;
    }
    .float-right {
      float: right;
    }
    1. 使用overflow属性清除浮动

    HTML:

    1
    2
    3
    4
    <div class="parent">
      <div class="float-left">左浮动元素</div>
      <div class="float-right">右浮动元素</div>
    </div>

    CSS:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .parent {
      overflow: hidden;
        clear: both;
    }
    .float-left {
      float: left;
    }
    .float-right {
      float: right;
    }
    1. 使用伪元素清除浮动

    CSS:

    1
    2
    3
    4
    5
    .parent::after {
      content: "";
      display: block;
      clear: both;
    }

    这三种方法都可以用来清除浮动，选择其中一种取决于实际情况和个人偏好。

  3. 定位（Positioning）

    使用绝对定位（absolute positioning）或相对定位（relative positioning），可以精确控制元素在页面上的位置。

    1
    2
    3
    4
    5
    .absolute-positioned {
      position: absolute;
      top: 50px;
      left: 100px;
    }

  4. 弹性布局（Flexbox Layout）

    弹性盒子布局是一种灵活的布局方式，能够以更简单、更有效的方式对齐、居中和分布元素。

    1
    2
    3
    4
    .flex-container {
      display: flex;
      justify-content: space-between;
    }

  5. 网格布局（Grid Layout）

    CSS 网格布局系统允许开发者创建复杂的网格式布局，利用行和列来放置元素。

    1
    2
    3
    4
    5
    .grid-container {
      display: grid;
      grid-template-columns: 100px 100px 100px;
      grid-gap: 10px;
    }

css3新特性

CSS3引入了许多新特性，包括选择器、盒模型、背景和边框、文本效果、2D/3D 转换与过渡、动画等。下面是一些 CSS3 新特性的简要介绍以及相应的实例代码：

1. 边框圆角（Border Radius）

使用 border-radius 属性可以创建元素的圆角。

1
2
3
4
5
6
7
div {
  width: 100px;
  height: 100px;
  background-color: #f2f2f2;
  border: 2px solid #666;
  border-radius: 10px;
}

2. 阴影（Box Shadow）

使用 box-shadow 属性可以向元素添加阴影效果。

1
2
3
4
5
6
div {
  width: 100px;
  height: 100px;
  background-color: #f2f2f2;
  box-shadow: 5px 5px 5px #888888;
}

3. 渐变（Gradient）

使用 linear-gradient 或 radial-gradient 属性可以创建线性渐变或径向渐变背景。

1
2
3
4
5
div {
  width: 200px;
  height: 200px;
  background: linear-gradient(to right, #ff8c00, #ffc34d);
}

4. 过渡（Transition）

使用 transition 属性可以实现元素在状态改变时平滑地过渡效果。

1
2
3
4
5
6
7
8
button {
  background-color: #4CAF50;
  color: white;
  transition: background-color 0.5s ease;
}
button:hover {
  background-color: #555555;
}

5. 2D/3D 转换与动画（Transforms and Animations）

2D 转换（2D Transforms）

使用 transform 属性可以对元素进行平移、旋转、缩放和倾斜等变换。

1
2
3
4
5
6
div {
  width: 100px;
  height: 100px;
  background-color: #f2f2f2;
  transform: rotate(45deg);
}

3D 转换（3D Transforms）

CSS3 允许在三维空间中对元素进行变换，包括旋转、移动和缩放等操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
div {
  width: 100px;
  height: 100px;
  background-color: #f2f2f2;
  transform: perspective(400px) rotateY(45deg);
}

#### 动画（Animations）

使用 `@keyframes` 规则和 `animation` 属性可以创建元素的动画效果。

```css
@keyframes example {
  0% {background-color: red;}
  50% {background-color: yellow;}
  100% {background-color: blue;}
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: example 5s infinite;
}

6. 字体和文本效果（Fonts and Text Effects）

自定义字体（Custom Fonts）

使用 @font-face 规则可以引入自定义字体，从而使得网页能够显示特定的字体样式。

1
2
3
4
5
6
7
8
@font-face {
  font-family: "MyCustomFont";
  src: url("mycustomfont.woff");
}

div {
  font-family: "MyCustomFont", Arial, sans-serif;
}

文本阴影（Text Shadow）

使用 text-shadow 属性可以为文本添加阴影效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
h1 {
  text-shadow: 2px 2px 2px #FF0000;
}

#### 多列布局（Multiple Columns）

使用 `column-count` 和 `column-gap` 等属性可以创建多列布局。

```css
.div {
  column-count: 3;
  column-gap: 20px;
}

7. 媒体查询（Media Queries）

使用媒体查询可以根据设备的特性，如屏幕宽度、高度、方向和分辨率等，为不同的设备定制样式。

1
2
3
4
5
6
/* 当屏幕宽度小于 600px 时应用以下样式 */
@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

  1. 雪碧图

雪碧图（CSS Sprites）是一种将多个小图标、按钮或图片合并到一个图片文件中的技术。通过使用雪碧图，可以减少页面加载所需的 HTTP 请求数量，从而提高网页的性能和加载速度。

下面是一个简单的示例代码来展示如何使用雪碧图：

HTML：

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>雪碧图示例</title>
<link rel="stylesheet" href="sprites.css">
</head>
<body>
<div class="icon icon1"></div>
<div class="icon icon2"></div>
</body>
</html>

CSS（sprites.css）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.icon {
width: 50px;
height: 50px;
display: inline-block;
background-image: url('sprites.png');
}

.icon1 {
background-position: 0 0; /* 指定第一个图标在雪碧图中的位置 */
}

.icon2 {
background-position: -60px 0; /* 指定第二个图标在雪碧图中的位置 */
}

在这个示例中，我们首先创建了一个包含多个图标的雪碧图 sprites.png。然后在 CSS 中，我们定义了每个图标所在的位置，并通过给元素添加不同的类名来显示不同的图标。这样我们就能够通过一个 HTTP 请求加载整个雪碧图，然后利用 CSS 的 background-position 属性来显示需要的图标，从而减少了页面所需的HTTP请求次数。

使用雪碧图有助于减少页面加载时间和提高性能，特别是对于包含大量小图标或按钮的网站。

  1. 字体图标

在CSS3中，可以使用字体图标（Font Icons）来显示矢量图标。字体图标是一种利用特定字体文件中的字符来呈现图标的技术，通常以SVG或图标字体的形式存在。下面是一个示例代码来展示如何使用字体图标：

HTML：

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体图标示例</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
<i class="fas fa-camera"></i>
<i class="fas fa-car"></i>
</body>
</html>

在这个示例中，我们使用了 Font Awesome 这个知名的字体图标库，通过引入其 CSS 文件，可以使用其中定义的图标。每个图标都对应一个特定的 CSS 类，通过给元素添加这些类名，就可以显示相应的图标。

如果要使用自定义的图标字体，需要下载相应的字体文件（通常为 .woff、.woff2、.ttf 或 .otf 格式），然后通过 @font-face 声明来引入字体文件，并在样式中指定相应的字体族名称和 Unicode 编码。

使用字体图标可以使得图标具备可缩放性、颜色可控性以及良好的兼容性，同时也避免了使用传统图片图标所带来的额外 HTTP 请求。