本文详细介绍了CSS的基础知识，包括选择器、语法、颜色、尺寸、对齐等核心概念，深入探讨了盒子模型、边框与边距、定位等高级特性，以及浮动和不透明度的应用。此外，还涵盖了CSS的多种引入方式，帮助读者全面掌握CSS的使用。
css目录
一、css是什么？
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一个
网页的内容是由 HTML的元素构建的，这些元素如何呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。
在 Internet 早期阶段（CSS大量使用之前），页面的内容和样式都由 HTML 来负责，这是一个相当糟糕的问题。
二、css语法
1. 样式举例
一条CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明:
这条规则表明，页面中所有的一级标题都显示为蓝色，字体大小为12像数。
说明
- 选择器是您需要改变样式的对象（上图的规则就一级标题生效）。
- 每条声明由一个属性和一个值组成。（无论是一条或多条声明，都需要用{}包裹，且声明用;分割）
- 属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
/* 这是CSS的注释 */
/* 建议每条申明占一行 */
p {
color:red;
text-align:center;/* 文本居中 */
}
2.css注释
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
CSS注释以 /* 开始, 以 */ 结束, 实例如下:
/*这是个注释*/
p
{
text-align:center;
/*这是另一个注释*/
color:blue;
font-family:arial;
}
3.选择器
一个页面上的元素众多，选择器就用于在页面中找到/选择需要应用这个样式的对象。
除我们前示的元素选择器外，还有id和class选择器。其中class选择器使用非常普遍。
id选择器
/* 注意：id选择器前有 # 号。 */
#flower{
color: red;
}
/*这条规则表明，找到页面上id为flower的那个元素让它呈现红色，如下所示的页面红色的花朵这几个字就将会是红色的。/*
< p id="flower">红色的花朵</p>
- id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
- HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义
- HTML中，元素的id值必须唯一, 所以，id 选择器适用范围只有一个元素
class选择器
/* 注意：class选择器前有 . 号。 */
.center{
text-align: center;
}
.large{
font-size: 30px;
}
.red{
color: red;
}
/*以上代码定义了三条规则，分别应用于页面上对应的元素，如只要页面上某元素的class为red，那么就让它呈现红色。/*
<p class="center">我会居中显示的</p>
<p class="red">我是红色的</p>
<p class="center large red">我又红又大还居中</p>
<p class="red">我也可以是红的</p>
-
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
-
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
-
类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
三、css如何生效
1.外部样式表
新建如下内容的一个 HTML文件（后缀为.html)：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
<link rel="stylesheet" type="text/css" href="mycss.css">
<title>页面标题</title>
</head>
<body>
<h1>我是有样式的</h1>
<hr>
<p class="haha">还是有点丑：)</p>
</body>
</html>
在同一目录新建一个样式表文件mycss.css（注意后缀名为css）如下：
body {
background-color: linen;
text-align: center;
}
h1 {
color: red;
}
.haha {
margin-top: 100px;
color: chocolate;
font-size: 50px;
}
- 一般我们会在项目目录下建一个文件夹如css专门存放样式表文件，如此我们引入样式文件时路径就变为 ./css/mycss.css之类的。
- 引入外部样式表是我们使用样式的主流方式，因为众多的样式规则单独放在一个文件中，与 HTML 内容分开，结构清晰。同时其它页面也可使用，达到复用的目的。
2.内部样式表
我们也可以将样式放在 HTML 文件中，这称为内部样式表。如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
<link rel="stylesheet" type="text/css" href="mycss.css">
<title>页面标题</title>
<style>
body {
background-color: linen;
text-align: center;
}
h1 {
color: red;
}
.haha {
margin-top: 100px;
color: chocolate;
font-size: 50px;
}
</style>
</head>
<body>
<h1>我是有样式的</h1>
<hr>
<p class="haha">还是有点丑：)</p>
</body>
</html>
- 该例子与上述例子一样的效果，但注意在< head>元素中引入了< style>标签，放入了样式。
- 一般而言，只有页面的样式规则较少时可采用这种方式。
3.内联样式
所谓内联样式，就是直接把样式规则直接写到要应用的元素中，如:
<h3 style="color:green;">I am a heading</h3>
内联样式是最不灵活的一种方式，完全将内容和样式合在一起，实际应用中非常少见。
级联的优先级
前面我们学习了三种使用样式的方式，如果某元素如
在外部、内部及内联样式中都被设置color:red;、color:green;、color:blue;，那么到底是什么颜色，也即到底哪个有效呢？
这就涉及样式的优先级问题，从高到低分别是：
1.内联样式
2.内部样式表或外部样式表
3.浏览器缺省样式
其实，一句话可总结为哪个样式定义离元素的距离近，哪个就生效。
四、颜色，尺寸，对齐
1.颜色
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：
- 十六进制值 - 如: ＃FF0000
- 一个RGB值 - 如: RGB(255,0,0)
- 颜色的名称 - 如: red
<!-- 颜色名称 -->
<h3 style="background-color:Tomato;">Tomato</h3>
<h3 style="background-color:Orange;">Orange</h3>
<h3 style="background-color:DodgerBlue;">DodgerBlue</h3>
<h3 style="background-color:MediumSeaGreen;">MediumSeaGreen</h3>
<h3 style="background-color:Gray;">Gray</h3>
<h3 style="background-color:SlateBlue;">SlateBlue</h3>
<h3 style="background-color:Violet;">Violet</h3>
<h3 style="background-color:LightGray;">LightGray</h3>
<hr>
<!-- 颜色值，3个字节分别代表RGB&
最低0.47元/天 解锁文章
298
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
