层叠样式表(Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
html只负责文档的结构和内容,表现形式完全交给CSS。
一、CSS
1、css页面引入方法
(1) 外联样式:通过link标签,链接到外部样式表到页面中。
<link rel="stylesheet" type="text/css" href="css/main.css">
(2) 内部样式:通过style标签(在head标签内部),在网页上创建嵌入的样式表。
<style type="text/css">
div{ width:100px; height:100px; color:red }
......
</style>
(3) 内联样式:通过标签的style属性,在标签上直接写样式。
<div style="width:100px; height:100px; color:red ">
This is a paragraph
</div>
二、CSS3
CSS3 是最新的 CSS 标准
1、使用calc() 计算高度和宽度
Viewport viewport:可视窗口,也就是浏览器。
- 1vw 等于viewport宽度的1%
- 1vh 等于viewport高度的1%
设置div元素的高度为当前窗口高度-100px
div{
height: calc(100vh - 100px);
}