CSS总结

最新推荐文章于 2024-09-28 15:35:33 发布

薛定谔的～猫

最新推荐文章于 2024-09-28 15:35:33 发布

阅读量136

点赞数

文章标签： css web

本文链接：https://blog.csdn.net/Ovdoeslier/article/details/118060850

版权

CSS总结

1.CSS简介

CSS 指层叠样式表 (Cascading Style Sheets)，是一种用来表现 HTML 文档样式的语言，样式定义如何显示 HTML 元素，是能够真正做到网页表现与结构分离的一种样式设计语言。样式通常存储在样式表中，外部样式表通常存储在 CSS 文件中，多个样式定义可层叠为一。

HTML 标签被设计为用于定义文档内容，也就是文档结构，为了增强代码的可读性，实现网页结构与表现相分离的原则，万维网联盟（W3C），肩负起了 HTML 标准化的使命，并在 HTML4 之外创造出样式（Style）。CSS 目前最新版本是 CSS3，相对于传统 HTML 的表现而言，CSS 能够对网页中对象的位置排版进行像素级的精确控制，拥有对网页对象编辑的能力，易于维护和改版，提高页面浏览速度，使用 CSS 布局页面更符合 W3C 标准，他是目前基于文本展示最优秀的表现设计语言。

CSS 样式表极大地提高了工作效率：样式通常保存在外部的 .css 文件中，通过仅仅编辑一个简单的 CSS 文档，外部样式表有能力同时改变站点中所有页面的布局和外观。

2. CSS 语法

一条CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明:

说明：

选择器是您需要改变样式的对象。
每条声明由一个属性和一个值组成。（无论是一条或多条声明，都需要用{}包裹，且声明用;分割）
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

2.1 选择器

一个页面上的元素众多，选择器就用于在页面中找到/选择需要应用这个样式的对象。
除我们前示的元素选择器外，还有id和class选择器。其中class选择器使用非常普遍。

2.1.1 id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，id 属性和身份证一样具有唯一性。HTML元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以 “#” 来定义。注意： id 属性不能以数字开头。

2.1.2 class 选择器

class 选择器用于描述一组元素的样式，也叫做类选择器，class 选择器有别于 id 选择器，class 可以在多个元素中使用，并且一个元素也可以指定多个类名。class 选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点 “.” 号来定义。可以设置所有带有指定 class 的 HTML 元素，也可以指定特定的 HTML 元素使用 class。注意：类名的第一个字符也不能使用数字。

3. CSS 如何生效

上节我们学习了如何定义 CSS样式，那么如何让这些规则对页面生效？

我们一般有三种方法：外部样式表，内部样式表，内联样式

3.1 外部样式表

外部样式也叫做外联样式，即使用标签链接到外部样式表，当样式需要应用于很多页面时，外部样式表将是理想的选择，在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表，浏览器会从文件 style.css 中读到样式声明，并根据它来格式化文档。注意：标签中 rel=“stylesheet” type=“text/css” 是固定代码格式，不可更改。

外部样式表可以在任何文本编辑器中进行编辑，样式文件不能包含任何的 HTML 标签，样式表以 .css 扩展名进行保存。注意：不要在属性值与单位之间留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，那么它在不同的浏览器中可能无法正常工作，导致意向不到的结果。

3.2 内部样式表

内部样式也叫内嵌样式，即在文档中创建内嵌的样式表，需要使用

3.3 内联样式

内联样式也叫行内样式或者行间样式，即在相关标签内使用样式（style）属性定义。由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。因此需要慎用这种方法，例如当样式仅需要在一个元素上应用一次时，可以使用内联样式。要使用内联样式，需要在相关的标签内使用样式属性定义，style 属性可以包含任何 CSS 属性。

3.4 级联的优先级

样式的优先级问题，从高到低分别是：

内联样式
内部样式表或外部样式表
浏览器缺省样式

4. 颜色, 尺寸, 对齐

4.1 颜色

颜色在网页中的重要性不言而喻。
我们可以采用颜色名称也可以使用颜色RGB16进制值，来设定前景或背景的颜色。如：

4.2 尺寸

我们可以用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %等。
新建如下 HTML 文件：

4.3 对齐

对于元素中的文本，我们可以简单的设置text-align属性为left, center, right即可。

5. 盒子模型

盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的，如下图所示：

说明：

Content 盒子的内容，如文本、图片等
Padding 填充，也叫内边距，即内容和边框之间的区域
Border 边框，默认不显示
Margin 外边距，边框以外与其它元素的区域

6. 边框与边距

无论边框、内边距还是外边距，它们都有上下左右四个方向。

6.1 边框

试一试如下的代码：

<p class="example-1">I have black borders on all sides.</p>
<p class="example-2">I have a blue bottom border.</p>
<p class="example-3">I have rounded grey borders.</p>
<p class="example-4">I have a purple left border.</p>
.example-1 {
  border: 1px dotted black; /* 上下左右都相同 */
}
.example-2 {
  border-bottom: 1px solid blue; /* 只设置底部边框 */
}
.example-3 {
  border: 1px solid grey;
  border-radius: 15px; /* 边框圆角 */
}
.example-4 {
  border-left: 5px solid purple;
}

6.2 边距

下面样式说明了内边距的设置：

padding: 20px; /* 上下左右都相同 */
padding-top: 20px;
padding-bottom: 100px;
padding-right: 50px;
padding-left: 80px;
padding: 25px 50px 75px 100px; /* 简写形式，按上，右，下，左顺序设置 */
padding: 25px 10px; /* 简写形式，上下为25px，左右为10px */

外边距与此类似。

position属性用于对元素进行定位。该属性有以下一些值：