css有哪几种样式-猿码集

1. 概述

CSS（Cascading Style Sheets，层叠样式表）是一种用于控制网页布局和外观的语言。CSS 包含一系列规则，用于指定将应用于 HTML 或 XML 文档中元素的格式。本文将讲解 CSS 的不同样式，让您掌握不同样式的知识，从而更好地应用在网页开发中。

2. 嵌入式样式

2.1 嵌入式样式的定义

嵌入式样式是指将 CSS 样式直接放置在 HTML 页面的 head 标签中，通过 style 标签定义，每个 style 标签中可以嵌入多种样式。


<head>
  <style type="text/css">
    p {
      color: red;
    }
  </style>
</head>

2.2 嵌入式样式的优缺点

优点：嵌入式样式只应用于当前页面，不会影响到其他页面，具有良好的可维护性。同时，嵌入式样式的优先级高于外部样式，低于内联样式。

缺点：当样式比较多时，嵌入式样式会导致 HTML 代码冗长，不利于维护。

3. 外部样式

3.1 外部样式的定义

外部样式是指将 CSS 样式放置在一个独立的 .css 文件中，在 HTML 页面中通过 link 标签引入外部样式。


<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

3.2 外部样式的优缺点

优点：外部样式与 HTML 代码分离，提高了代码的可维护性。同时，外部样式可以通用于多个页面，减少了代码的冗余，提高了页面的加载速度。

缺点：外部样式不能立即看到效果，需要进行网络请求获取 css 文件。

4. 内联样式

4.1 内联样式的定义

内联样式是指在 HTML 元素上直接定义 CSS 样式，将 CSS 代码直接写在元素的style 属性中。


<p style="color:red;"> This is a paragraph </p>

4.2 内联样式的优缺点

优点：内联样式可以立即看到效果，优先级高于外部和内部样式。

缺点：内联样式会对 HTML 代码进行混淆，不利于代码维护，同时内联样式仅应用于当前元素，而不是整个页面，不利于通用性。

5. CSS 选择器

5.1 元素选择器

元素选择器是指通过 HTML 中元素的名称（如 p、img、div）进行样式规则的定义。


p {
  font-size: 14px;
}

5.2 类选择器

类选择器是指通过 HTML 中元素的 class 属性来定义样式，以 . 开头。


.my-class {
  color: red;
}

5.3 ID 选择器

ID 选择器是指通过 HTML 中元素的 id 属性来定义样式，以 # 开头。


#my-id {
  background-color: yellow;
}

5.4 属性选择器

属性选择器是指通过 HTML 中元素的属性来定义样式。属性选择器包括 [attribute]、[attribute=value]、[attribute~=value]、[attribute|=value]、[attribute^=value]、[attribute$=value]、[attribute*=value] 等。


img[src*="smile"] {
  border: 1px solid red;
}

5.5 伪类选择器

伪类选择器是指在元素无法被普通选择器选中的场景下，能够为元素添加样式的选择器。包括 :hover、:active、:focus、:before、:after、:checked 等。


a:hover {
  color: red;
}

5.6 伪元素选择器

伪元素选择器是指创建一些不在文档中的虚拟元素，并为其添加样式的选择器。包括 ::before、::after、::first-letter、::first-line 等。


p::before {
  content: "Hello";
}

6. CSS 盒子模型

6.1 盒子模型的基本概念

CSS 盒子模型是指将 HTML 元素看作一个矩形的盒子，该盒子包含了元素的内容、内边距、边框和外边距。

内容区：元素中的内容，如文字、图片等。

内边距：围绕内容区域的一块空白区域，可用于设置背景色或其他样式。

边框：与内边距围成的线条，可以设置线条的样式、宽度和颜色等。

外边距：相邻元素之间的距离，与边框之外的空白区域。

6.2 盒子模型的实例


div {
  width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  margin: 20px;
}

说明：该样式定义了一个宽为200像素的 div 元素，内边距为 10 像素，边框为一像素实线，颜色为 #ccc，外边距为 20 像素。

7. CSS 布局方式

7.1 流动布局

流动布局又称文档流或常规流。它是指元素基于父元素自上而下、自左而右依次排列的布局方式，是 HTML 元素默认的布局方式。

7.2 浮动布局

浮动布局指让元素浮动到其容器的左侧或右侧。在浮动布局中，元素的宽度会自动收缩，以适应剩余空间。

7.3 定位布局

定位布局是指将元素相对于其父元素或文档进行绝对定位。在定位布局中，元素的位置可以通过 top、right、bottom、left 属性进行定义。


position: absolute;
top: 20px;
right: 30px;

8. CSS 相关样式

8.1 清除浮动

在浮动布局中，元素的高度会自动收缩，导致容器高度无法正常显示。这时，可以添加一个样式，调整容器的高度，同时清除浮动效果。


.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
.clearfix {
  *zoom:1;
}

8.2 盒子阴影

box-shadow 属性可以为元素增加一层虚拟层，使元素产生一个阴影效果。


box-shadow: 10px 10px 10px #888888;

8.3 文本溢出

当一个元素内包含的文本内容过多时，可以根据设定的宽度截断文本并添加省略号。


text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

9. 总结

本文讲述了 CSS 的不同样式，包括嵌入式样式、外部样式和内联样式三种样式，讲解了 CSS 样式需要使用的选择器，介绍了 CSS 盒子模型和布局方式，最后列举了一些常用的 CSS 相关样式。相信通过本文的学习，您已经掌握 CSS 的一些关键基础知识，能够更好地应用于网页开发中。

css有哪几种样式