文章目录
CSS 发展历史
CSS 的发展可以追溯到 1996 年,当时 CSS 1.0 规范发布。自那时以来,CSS 逐渐成为 Web 开发中必备的技术之一。目前最新的 CSS 规范是 CSS3,它由多个模块组成,涵盖了各种样式和布局方案。
CSS 的作用
CSS 用于控制网页的外观和布局,通过为 HTML 元素添加样式规则,可以实现如下功能:
改变文字的颜色、字体、大小等属性;
改变网页中各个元素的位置、大小、形状等属性;
添加背景图像、颜色等;
实现动画效果、过渡效果等。
CSS 的引用方式
可以通过以下三种方式引入 CSS 样式:
选择器
简单选择器
-
元素选择器
<元素名>{}
-
id选择器,类选择器
#id{} ; .class{}
-
通用选择器
*{}
-
组合选择器
h1,p,h2{}
组合器选择器
后代关系,父子关系:即包含关系,被包含为子为后。
兄弟关系:即并列关系。
- 后代选择器
div p {
background-color: yellow;
}
- 子选择器
div > p {
background-color: yellow;
}
- 相邻兄弟选择器
div + p {
background-color: yellow;
}
- 通用兄弟选择器
div ~ p {
background-color: yellow;
}
伪类选择器
- 以按钮为例,演示hover(悬停),active(点击)效果(链接还有visited)
正常:
悬停:
点击:
- child类
child,可直接理解为孩子,如div p:first-child就是div里第一个p孩子(同样还有nth-child),下面请看效果:
伪元素选择器
用法: 如要单独设置< p>的首字母相关样式(其它也以此类推):
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
CSS 是层叠样式表(Cascading Style Sheets)的缩写,是一种用来描述网页(HTML 或 XML 等文档的)样式和布局的语言。CSS 发展至今已经成为 Web 开发中不可或缺的重要技术。
1. 外部样式表
使用外部样式表可以将 CSS 代码单独保存到一个文件中,这样可以方便地对网站的整体样式进行管理。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>这是一个段落</p>
</body>
</html>
style.css 文件中的样式规则:
p {
color: red;
font-size: 16px;
}
2. 内部样式表
内部样式表是将 CSS 代码放在 HTML 文件的 head 标签中,适用于仅针对特定页面或特定部分的样式。
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
font-size: 16px;
}
</style>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>
3. 内联样式
内联样式是将 CSS 代码直接放在 HTML 标签的 style 属性中,适用于仅需要对一个元素应用样式的情况。
<!DOCTYPE html>
<html>
<body>
<p style="color: red; font-size: 16px;">这是一个段落</p>
</body>
</html>
CSS 的三大特性
CSS 有三大特性,即层叠性、继承性和优先级。
1. 层叠性
当多个选择器的样式规则冲突时,CSS 会按照一定的规则来确定哪个样式规则应用于元素。
CSS 样式规则的层叠顺序由低到高分别是:浏览器默认样式 < 外部样式表 < 内部样式表 < 内联样式表。如果同一个元素上有多个选择器的样式规则,那么优先级高的样式规则会覆盖优先级低的样式规则。
2. 继承性
当一个元素没有指定某个属性的值时,它会继承它的父元素的相应属性的值。比如,如果父元素的字体颜色为红色,那么子元素默认的字体颜色也是红色。
不是所有属性都具有继承性,一般来说,与文本样式相关的属性(如 font-family、font-size、color 等)具有继承性,而与布局相关的属性(如 width、height、margin 等)则不具有继承性。
3. 优先级
CSS 样式规则有不同的优先级,优先级高的样式规则会覆盖优先级低的样式规则。CSS 样式规则的优先级由以下几个因素决定:
!important:样式规则中加上 !important 标记的优先级最高;
内联样式表:样式规则直接写在元素的 style 属性中,优先级仅次于 !important;
ID 选择器:样式规则应用于 ID 选择器所匹配的元素,优先级仅次于内联样式表;
类选择器、属性选择器、伪类选择器:样式规则应用于类选择器、属性选择器或伪类选择器所匹配的元素,优先级仅次于 ID 选择器;
元素选择器、伪元素选择器:样式规则应用于元素选择器或伪元素选择器所匹配的元素,优先级最低。
常用 CSS 属性
以下是一些常用的 CSS 属性及其用法:
1. color
设置文本的颜色。
p {
color: red;
}
2. font-family
设置文本的字体。
p {
font-family: Arial, sans-serif;
}
3. font-size
设置文本的字体大小。
p {
font-size: 16px;
}
4. background-color
设置元素的背景颜色。
p {
background-color: #f5f5f5;
}
5. width、height
设置元素的宽度和高度。
div {
width: 200px;
height: 100px;
}
6. margin、padding
设置元素的外边距和内边距。
div {
margin: 10px;
padding: 5px;
}
7. border
设置元素的边框
8. text-align
设置文本的水平对齐方式。
p {
text-align: center;
}
9. display
设置元素的显示方式。
div {
display: block;
}
10. position、top、left、right、bottom
设置元素的定位方式和位置。
div {
position: absolute;
top: 10px;
left: 20px;
}