CSS入门
什么是CSS
css全称为Cascading Style Sheets,翻译为层叠样式表。
样式定义如何显示HTML元素,样式通常存储在样式表中。css是能够真正做到网页表现与内容分离的一种样式设计语言。
相对于传统HTML表现而言,css能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。
CSS发展历程
早在 1994 年哈坤·利提出了 CSS 的最初建议。伯特·波斯(Bert Bos) 当时正在设计一个叫做“Argo”的浏览器,他们决定一起合作设计 CSS。
哈坤于 1994 年在芝加哥的一次会议上第一次展示了 CSS 的建议,1995 年他与波斯一起再次展示这个建议。当时 W3C 组织刚刚创建,W3C 对 CSS 的发展很感兴趣,它为此组织了一次讨论会。哈坤、波斯和其他一些人(比如微软的托马斯·雷尔登)是这个项目的主要技术负责人。1996 年底,CSS 已经完成。1996 年 12 月 CSS 要求的第一版本被出版。
1997 年初,W3C 内部组织了专门管理 CSS 的工作组,其负责人是克里斯·里雷。这个工作组开始讨论第一版中没有涉及到的问题,其结果是 1998 年 5 月出版的第二版要求。
目前,CSS 的最新版本已经更新到了第三版。CSS3 融入在了 HTML5 新版本的特性里面。
怎么使用CSS
CSS样式分为三种:内联样式,内嵌样式表,外联样式表。
内联样式
<div style="color: lightcoral;">这是测试内容.</div>
缺点:只能对当前元素有效,CSS代码出现冗余。
内嵌样式表
<style type="text/css">
p {
color: lightcoral;
font-size: 24px;
}
</style>
通过style元素进行设置,旧版本需要设置type属性值为"text/css"。
优点:可以通过css选择器定位HTML页面中一个或一类元素。
缺点:将css代码内嵌到HTML页面中,只能对当前页面有效。
- 编码的风格不符合编码原则中的低耦合
- 导致css代码可能冗余
外联样式表
<link rel="stylesheet" href="style/demo.css">
使
- 用外联样式前先创建一个css文件,用来存储css样式内容。
- 在HTML页面中通过<link>元素引入外部指定的css文件。
<link>元素:
- 作用:用来引入HTML页面外部资源。
- 属性:
- rel属性:用来设置外部资源与当前HTML页面的关系。
- href属性:用来设置引入外部资源的路径。
相对路径:目标文件相对于当前文件的路径。(推荐使用)
绝对历经:目标文件相对于根目录的路径。
优点:相对于内嵌样式表和内联样式表。
- 将css样式与HTML页面进行分离(低耦合)
- 不会出现内嵌样式表或内联样式产生的代码冗余。
缺点:可能会对HTML页面的加载造成负担,导致性能下降。
使用css样式
在一个HTML页面中同时使用内联样式,内嵌样式表和外联样式表:
- 内联样式的优先级别是最高的。
- 内嵌样式表和外联样式表与编写顺序有关:最后的是优先级别更高。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>优先级</title>
<link rel="stylesheet" href="style.css">
<style>
p{
color: aqua;
}
</style>
</head>
<body>
<p style="color: aquamarine;">19级启嘉班</p>
</body>
</html>
style.css文件内容。
p {
color: blue;
}
语法结构
选择器{
属性名称:属性值;
属性名称:属性值;
···
}
语法特点:
- css声明总是以键值对(key\value)形式存在。
- css声明总是以分号(;)结束。
- 声明组以大括号({})括起来。
- 为了让css可读性更强,每行只描述一个属性。
CSS注释
注释是用来解释你的代码,并且可以随意编辑它,浏览器会忽略它。css注释以/*
开始以*/
结束。
<style>
/* 代码注释 */
p{
/* 代码注释 */
color: aqua;
}
</style>