📚详见 W3scholl,本篇只做快速思维索引。
概述
CSS 是一种描述 HTML 文档样式的语言。
有三种插入样式表的方法:
- 外部 CSS
- 内部 CSS
- 行内 CSS
📅 外部 CSS
外部样式表存储在.css
文件中。HTML 页面必须在 head 部分的<link>
元素内包含对外部样式表文件的引用。通过使用外部样式表文件,您只需更改一个文件即可更改整个网站的外观!
HTML:
<!DOCTYPE html>
<html><head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head><body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body></html>
mystyle.css:
body {background-color: lightblue;
}h1 {color: navy;margin-left: 20px;
}
📅 内部 CSS
内部样式是在 head 部分的<style>
元素中进行定义。
HTML:
<!DOCTYPE html>
<html><head>
<style>
body {background-color: linen;
}h1 {color: maroon;margin-left: 40px;
}
</style>
</head><body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body></html>
📅 行内 CSS
行内样式(也称内联样式)可用于为单个元素应用唯一的样式。
<!DOCTYPE html>
<html><body>
<h1 style="color:blue; text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body></html>
⚠️注:如果在不同样式表中为同一选择器(元素)定义了一些属性,优先级
为:行内样式 > 外部和内部样式表(取决于在 head 中声明的位置)
CSS 语法
CSS 规则集(rule-set)由选择器
和声明块
组成:
- 选择器:指向您需要设置样式的 HTML 元素。
- 声明块:每条声明都包含一个 CSS 属性名称和一个值,以冒号
:
分隔。多条 CSS 声明用分号;
分隔,声明块用花括号{}
括起来。
p {color: red;text-align: center;
}
p
是 CSS 中的选择器(它指向要设置样式的 HTML 元素:<p>)。color
是属性名,red
是属性值。text-align
是属性名,center
是属性值。
CSS 选择器
CSS 选择器分为五类:
- 简单选择器(根据名称、id、类来选取元素)
- 组合器选择器(根据它们之间的特定关系来选取元素)
- 伪类选择器(根据特定状态选取元素)
- 伪元素选择器(选取元素的一部分并设置其样式)
- 属性选择器(根据属性或属性值来选取元素)
实例内容详见 📖 CSS 选择器
简单选择器
分为元素选择器、id 选择器、类选择器、通用选择器、分组选择器
CSS 元素选择器
p {text-align: center;color: red;
}
页面上的所有 <p> 元素都将居中对齐,并带有红色文本颜色。
CSS id 选择器
元素的 id 在页面中是唯一的,因此 id 选择器用于选择唯一的元素。
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {text-align: center;color: red;
}
</style>
</head><body>
<p id="para1">Hello World!</p>
<p>本段不受样式的影响。</p>
</body></html>
页面上的 id="para1"
的 <p> 元素将居中对齐,并带有红色文本颜色。
CSS 类选择器
📌 类选择器选择有特定 class 属性的 HTML 元素。.
后面跟类名。
<!DOCTYPE html>
<html>
<head>
<style>
.center {text-align: center;color: red;
}
</style>
</head><body>
<h1 class="center">居中的红色标题</h1>
<p class="center">居中的红色段落。</p>
</body></html>
所有带有 class="center"
的 HTML 元素将为红色且居中对齐
📌 还可以指定只有特定的 HTML 元素会受类的影响。
p.center {text-align: center;color: red;
}
只有具有 class="center"
的 <p> 元素会居中对齐
📌 HTML 元素也可以引用多个类。
<p class="center large">这个段落引用两个类。</p>
<p> 元素将根据 class="center"
和 class="large"
进行样式设置
CSS 通用选择器
通用选择器 *
选择页面上的所有的 HTML 元素。
* {text-align: center;color: blue;
}
上面的 CSS 规则会影响页面上的每个 HTML 元素
CSS 分组选择器
对选择器进行分组,以最大程度地缩减代码。如需对选择器进行分组,请用逗号来分隔每个选择器。
h1, h2, p {text-align: center;color: red;
}
组合选择器
组合器是解释选择器之间关系的某种机制。分为:
- 后代选择器 (空格)
- 子选择器 (>)
- 相邻兄弟选择器 (+)
- 通用兄弟选择器 (~)
后代选择器
后代选择器匹配属于指定元素后代的所有元素。
div p {background-color: yellow;
}
选择 <div>
元素内的所有 <p>
元素
子选择器
子选择器匹配属于指定元素子元素的所有元素。
div > p {background-color: yellow;
}
选择属于 <div>
元素子元素的所有 <p>
元素
⚠️注:子选择器和后代选择器区别在于,子选择器匹配指定元素的子元素,而后代选择器匹配指定元素的所有元素(包括子、孙、重孙…)
<div><p>div 中的段落 1。</p><p>div 中的段落 2。</p><section><p>div 中的段落 3。</p></section>
</div>
如果是后代选择器,div 中的段落 3。
会黄底,但子选择器不会黄底。
相邻兄弟选择器
相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。兄弟(同级)元素必须具有相同的父元素,而且只作用其后一个元素。
div + p {background-color: yellow;
}
通用兄弟选择器
通用兄弟选择器匹配属于指定元素的同级元素的所有元素。
div ~ p {background-color: yellow;
}
伪类选择器
伪类用于定义元素的特殊状态。用于设置鼠标悬停在元素上时的样式
、设置元素获得焦点时的样式
/* 未访问的链接 */
a:link {color: #FF0000;
}/* 已访问的链接 */
:visited {color: #00FF00;
}/* 鼠标悬停链接 */
a:hover {color: #FF00FF;
}/* 已选择的链接 */
a:active {color: #0000FF;
}
设置链接 <a> 不同状态下的样式
div:hover {background-color: blue;
}
在 <div> 元素上使用 :hover
伪类的实例
伪元素选择器
CSS 伪元素用于设置元素指定部分的样式。
p::first-letter {color: #ff0000;font-size: xx-large;
}
::first-letter
伪元素用于向文本的首字母添加特殊样式。例子设置所有 <p> 元素中文本的首字母格式。
属性选择器
用于设置带有 特定属性 或 属性值 的 HTML 元素的样式。
a[target] {background-color: yellow;
}
选择所有带有 target
属性的 <a> 元素
a[target="_blank"] { background-color: yellow;
}
选取所有带有 target="_blank"
属性的 <a> 元素
input[type="text"] {width: 150px;display: block;margin-bottom: 10px;background-color: yellow;
}input[type="button"] {width: 120px;margin-left: 35px;display: block;
}
设置表单不同 type 元素的样式