本文最后更新于 317 天前，其中的信息可能已经有所发展或是发生改变。
CSS简介以及导入方式
CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言
html相当于划好房子的结构,而CSS相当于给房子做装修
CSS语法
选择器{
属性1:属性值1;
属性2:属性值2:
}
示例
p{
color:blue;
font-size:16px;
}
CSS三种导入方式
下面是三种常见的CSS导入方式:
- 内联样式表(Inline Styles)
- 内部样式表(Internal Stylesheet)
- 外部样式表(External Stylesheet)
三种导入方式的优先级:内联样式>内部样式表>外部样式表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/style.css">链接css文件
<style>
p {
color: blue;
font-size: 35px;/*可以打fs快速输入font-size*/
}
h2{
color:green;
}
</style>
</head>
<body>
<p>应用了CSS样式</p>
<h1 style="color:red">内联样式</h1>
<h2>内部样式</h2>
</body>
</html>
CSS选择器
选择器
选择器是CSS中的关键部分,它允许你针对特定元素或一组元素定义样式
- 元素选择器
- 类选择器
- ID选择器
- 通用选择器
- 子元素选择器
- 后代选择器(包含选择器)
- 并集选择器(兄弟选择器)
- 伪类选择器
优先级ID>类>标签名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* 类选择器 */
h3.highlight{
color: green;
}
.highlight{
color: blue;
}
/* ID选择器 */
#exmple{
color: red;
}
/* 通用选择器 */
*{
}
/* 子元素选择器 */
.father > .son{
color: chocolate;
}/* .son 优先级比 p 高*/
/* 后代选择器 */
.father > p{
color: yellowgreen;
font-size: 30px;
font-family: KaiTi;
}/* 这里没生效的原因是因为 p 相当于 div.father 的后代,而不是子代 */
.father p{
color: aqua;
}
/* 相邻元素选择器 */
h4 + p{
background-color: brown;
}/* 紧跟选中元素之后的第一个 p */
/* 伪类选择器 */
/* 可以用来检测鼠标悬停之类的操作 */
#elem:hover{
background-color: chartreuse;
}
/*
选择第一个子元素:first-child
nth-child()
active
*/
/*
伪元素选择器
::after
::before
*/
</style>
<body>
<h2 class="highlight">hi</h2>
<h3 class="highlight">hi</h3>
<h3 id="exmple">hi</h3>
<div class="father">
<p class="son">子元素选择器示例</p><!-- p相对于div来说就是一个子元素 -->
<div>
<p class="grandson">后代元素选择器示例</p>
</div>
</div><!-- 可以直接输入.father来创建div标签 -->
<p>普通的p</p>
<h4>相邻兄弟选择器示例</h4>
<p>普通的p</p>
<h3 id="elem">伪类选择器示例</h3>
</body>
</html>
CSS一些属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.block{
background-color: yellowgreen;
width: 100px;
height: 150px;
}
.inline{
background-color: aqua;
}
.inlineBlock{
width: 100px;
}
</style>
<body>
<h1 style="font: bolder 50px Kaiti;">这是一个 font 复合属性示例</h1>
<p style="line-height: 40px;">这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本</p>
<div class="block">这是一个块级元素</div>
<div class="block">这是一个块级元素</div>
<span class="inline">这是一个行内元素</span>
<img src="./example.png" alt="" class="inlineBlock">
<img src="./example.png" alt="" class="inlineBlock">
<div style="display: inline;">这是一个转换成行内元素的div</div>
</body>
</html>
盒子模型
| 属性名 | 说明 |
|---|---|
| 内容(Content) | 盒子包含的实际内容,比如文本,图片等 |
| 内边距(Padding) | 围绕在内容的内部,是内容与边框之间的空间.可以使用padding属性来设置 |
| 边框(Border) | 围绕在内边距的外部,是盒子的边界.可以使用border属性来设置 |
| 外边距(Margin) | 围绕在边框的外部,是盒子与其他元素之间的空间.可以使用margin属性来设置 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.demo{
background-color: green;
display: inline-block;/* 这样默认宽度就变成了文本的宽度*/
border: 5px solid orange;/* border也是个复合属性 */
padding: 50px;
}
.border{
background-color: orange;
width: 300px;
height: 200px;
border-style: solid dashed dotted double;
border-width: 10px 20px 40px 60px;/* 上右下左 */
border-color: black olivedrab brown aquamarine;
/* 上面这些border-xxx也是复合属性 */
}
</style>
<body>
<div class="demo">Test</div>
<div class="border">边框示例</div>
</body>
</html>
浮动
传统网页布局方式
在学习浮动之前,先了解传统的网页布局方式
网页布局方式有以下五种:
- 标准流(普通流,文档流):网页按照元素的书写顺序依次排列
- 浮动
- 定位
Flexbox和Grid(自适应布局)
标准流是由块级元素和行内元素按照默认规定的方式来排列,块级就是占一行,行内元素一行放好多个元素
浮动
元素脱离文档流,根据开发者的意愿漂浮到网页的任意方向
浮动属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘,这样即可使得元素进行浮动
语法:
选择器[
float:left/right/none;
]
注意:浮动是相对于父元素浮动,只会在父元素的内部移动
浮动的三大特性
- 脱标:脱离标准流
- 一行显示,顶部对齐
- 具备行内块元素特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.father {
background-color: palegreen;
height: 100px;
}
.left {
width: 100px;
height: 100px;
background-color: chocolate;
float: left;
}
.right {
width: 100px;
height: 100px;
background-color: rgb(79, 178, 224);
float: right;
}
</style>
<body>
<div class="father">
<div class="left">左浮动</div>
<div class="left">左浮动</div>
<div class="left">左浮动</div>
<div class="left">左浮动</div>
<div class="left">左浮动</div>
<div class="right">右浮动</div>
<div class="right">右浮动</div>
<div class="right">右浮动</div>
</div>
</body>
</html>
清除浮动
overflow
overflow: hidden;
定位
定位布局可以精准定位,但缺乏灵活性
定位方式:
相对定位(realtive):相对于元素在文档流中的正常位置进行定位绝对定位(absolute):相对于其最近的已定位祖先元素进行固定定位(fixed):相对于浏览器窗口进行定位.不占据文档流,固定在屏幕上的位置,不随滚动而移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.box1{
height: 400px;
background-color: rgb(94, 141, 204);
}
.box2{
height: 400px;
background-color: rgb(88, 166, 255);
}
.boxNormal{
height: 100px;
width: 100px;
background-color: palegreen;
}
.boxRelative{
height: 100px;
width: 100px;
background-color: pink;
position: relative;
left: 20px;
}
.boxAbsolute{
height: 100px;
width: 100px;
background-color: palevioletred;
position: absolute;
left: 120px;
}
.boxFixed{
width: 100px;
height: 100px;
background-color: pink;
position: fixed;
right: 0;
top: 300px;
}
</style>
<body>
<h1>相对定位</h1>
<div class="box1">
<div class="boxNormal"></div>
<div class="boxRelative"></div>
<div class="boxNormal"></div>
</div>
<h1>绝对定位</h1>
<div class="box2">
<div class="boxNormal"></div>
<div class="boxAbsolute"></div>
<div class="boxNormal"></div>
</div>
<h1>固定定位</h1><!-- 固定定位是相对于浏览器窗口进行定位 -->
<div class="boxFixed"></div>
</body>
</html>
