CSS教程
🍓什么是CSS?🍓
CSS的意思是层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
*：也称级联样式表。
随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。
🪁我们为什么要使用CSS?🪁
在很久很久以前，web中并没有CSS，只有一些html标签，就比如上节中讲的，这些标签都具有特定的含义，以前人们不讲究排版，只要有内容就好了，但用户不一样，他们不是程序员，他们才不管这些。他们只讲究外表，布局等等，讲究个性，当然是越炫酷越好。这样的话仅仅是html已经满足不了人们的日渐需求，所以W3C提出了几个装饰标签比如：font，size等等。
然后程序员们都开始抱怨，结果就这样W3C招致网上程序员的骂声一片。
终于在1994年哈坤·利提出了CSS的最初建议。而当时伯特·波斯（Bert Bos）正在设计一个名为Argo的浏览器，于是他们决定一起设计CSS。
同年，W3C组织（World WideWeb Consortium）成立，CSS的创作成员全部成为了W3C的工作小组并且全力以赴负责研发CSS标准，层叠样式表的开发终于走上正轨。这个装修html的层叠样式表。彻底的解决了程序员提出的三大难题。
🎐CSS 节省了大量工作！🎐
CSS样式可以通过定义保存在外部.css文件中，同时控制多个网页的布局，这意味着开发者不必经历在所有网页上编辑布局的麻烦。CSS 被分为不同等级：CSS1 现已废弃， CSS2.1 是推荐标准， CSS3 分成多个小模块且正在标准化中。
🌼CSS的语法🌼
CSS 规则集（rule-set）由选择器和声明块组成：选择器指向您需要设置样式的 HTML 元素。声明块包含一条或多条用分号分隔的声明。每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。多条 CSS 声明用分号分隔，声明块用花括号括起来。
实例：
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>这个段落是通过 CSS 设置样式的。</p>
</body>
</html>
🍂CSS 选择器🍂
CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。我们可以将 CSS 选择器分为五类：
- 简单选择器（根据名称、id、类来选取元素）
- 组合器选择器（根据它们之间的特定关系来选取元素）
- 伪类选择器（根据特定状态选取元素）
- 伪元素选择器（选取元素的一部分并设置其样式）
- 属性选择器（根据属性或属性值来选取元素）
接下来会讲解最基本的CSS选择器。
🌵CSS 元素选择器🌵
CSS元素选择器根据元素名称来选择 HTML 元素。
实例：
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>每个段落都会受到样式的影响。</p>
<p id="para1">我也是！</p>
<p>还有我！</p>
</body>
</html>
1、而且还能指定特定的 HTML 元素会受类的影响。
实例：
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">这个标题不会受影响</h1>
<p class="center">这个段落是红色居中对齐的。</p>
</body>
</html>
2、当然html元素能引一个类就能引多个类。
实例：
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">这个标题不会受到影响</h1>
<p class="center">这段是红色居中对齐</p>
<p class="center large">这段是红色居中对齐并且使用大字体。</p>
</body>
</html>
注意：类名不能以数字开头！
🍎CSS 通用选择器🍎
使用通用选择器（*）可以选择页面上的所有的 HTML 元素。
实例：
<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>页面所有元素都会受到影响</p>
<p id="para1">这个也是</p>
<p>还有我！</p>
</body>
</html>
🍧CSS 分组选择器🍧
分组选择器会选取具有相同样式定义的html元素。
实例：
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>这是一个大标题</h1>
<h2>小标题</h2>
<p>这里是一个段落。</p>
</body>
</html>
🍇所有简单的CSS选择器🍇
1、.class
例子：.jg
使用：选取所有class="jg"的元素。
2、#id
例子：#jg
使用：选取id="jg"的那个元素。
3、*
例子：*
使用：选取所有元素
4、element
例子：p
使用：选取所有<p>元素。
5、element,element,..
例子：div, p
使用：选取所有<div>元素和所有<p>元素。
🥝如何添加 CSS🥝
🍍三种使用 CSS 的方法🍍
1、外部CSS
通过使用外部样式表，您只需修改一个文件即可改变整个网站的外观！每张 HTML 页面必须在 head 部分的 元素内包含对外部样式表文件的引用。
实例：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<p>这是外部CSS</p>
</body>
</html>
外部样式表可以在任何文本编辑器中编写，但是必须以 .css 扩展名保存。外部 .css 文件不应包含任何html标签。
注意：请勿在属性值和单位之间添加空格。
2、内部CSS
一张html页面拥有唯一的样式，那就可以使用内部样式表。内部样式是在 head 部分的<style>元素中进行定义的。
实例：
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>这里是标题</h1>
<p>这里是段落。</p>
</body>
</html>
3、行内CSS
行内样式（也称内联样式）可以为单个元素应用唯一的样式。如果使用行内样式，请将 style 属性添加到相关元素。style 属性可以包含任何 CSS 属性。
实例：
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">这里是标题</h1>
<p style="color:red;">这里是段落。</p>
</body>
</html>
小提示：行内样式失去了样式表的许多优点（通过将内容与呈现混合在一起）。谨慎使用此方法。
🥑好了，今天的教程就到这里。🥑
生活其实也很简单，喜欢就争取，得到的就珍惜，失去了就忘记。
扫一扫
216
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
