CSS快速入门

文章目录

• CSS学习

• • 什么是CSS？（what）

• 样式解决了一个很大的问题

• css是如何工作的，仔细体会CSS的用法及智慧

• CSS语法

• CSS注释

• CSS Id和Class选择器

• • 标记选择器

• id 选择器

• class 选择器

• 全局选择器

• 继承选择器

• 伪类

• CSS创建

CSS的学习我选择的是菜鸟教程

在线编辑工具

CSS学习

====================================================================

---

什么是CSS？（what）

---

• CSS指的是层叠样式表

• 样式表定义如何显示HTML元素

• 样式通常存储在样式表中

• 添加样式到HTML，使得样式与内容分离，易于维护

• 外部样式表可以极大提高工作效率

• 外部样式表通常存储在 CSS 文件中

• 多个样式定义可层叠为一个

---

样式解决了一个很大的问题

---

样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。

---

css是如何工作的，仔细体会CSS的用法及智慧

---

CSS如何工作

---

CSS语法

---

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开

CSS声明总是以分号(;)结束，声明总以大括号({})括起来:

为了让CSS可读性更强，你可以每行只描述一个属性:

h1{

color:blue;

font-size:12px;

}

CSS注释

---

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。

CSS注释以 /* 开始, 以 */ 结束

p{

text-align:center;

/这是一个注释/

color:rgb(252, 0, 0);

font-family:arial;

}

---

CSS Id和Class选择器

---

如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"属性。

标记选择器

我是一个段落

通过标记来简单更改样式，有局限，所以就有了class 和 id 选择器

---

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

以下的样式规则应用于元素属性 id=“xigua”:

#xigua

{

text-align:center;

color:red;

}

ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

---

class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

.center {text-align:center;}

你也可以指定特定的HTML元素使用class。在以下实例中, 所有的 p 元素使用 class=“center” 让该元素的文本居中:

p.center {text-align:center;}

类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

---

全局选择器

如若想要HTML中所有标记都使用同一种格式，就可以使用全局选择器。

语法格式：

*{margin:0; padding=0}

其中*表示对所有标记起作用，margin表示属性名称，0表示属性值

这个css表示设置所有标记的外边距和内边距都为0

动漫

斗罗大陆

你收看了吗

---

组合选择器

将多种选择器进行搭配，可以构成一种复合选择器，也成为组合选择器，即将标记，类，ID选择器结合起来使用，标记+类，标记+ID。比如：