CSS 样式
一. CSS
CSS 层叠样式表(Cascading Style Sheets)：能够对网页中元素的排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，简单来说，美化页面
二. CSS的引入方式
- 行内式：通过元素开始标签的 style 属性注入，语法为 style="样式名：样式值;样式名：样式值;"
<input
type="button"
value="按钮"
style="
display: block; width: 60px;
height: 40px; background-color: rgb(140, 235, 100);
color: white; border: 3px solid green;
font-size: 22px; font-family: '隶书';
line-height: 30px; border-radius: 5px;
"/>
- 缺点
- html 代码和 css 样式代码交织在一起，增加阅读难度和维护成本
- css 样式代码仅对当前元素有效，代码重复量高，复用度低
- 内嵌式：在 head 标签中通过 style 标签引入，这里要使用选择器确定样式的作用位置
<head>
<meta charset="UTF-8">
<style>
/*选择器*/
input {
display: block; width: 80px;
height: 40px; background-color: rgb(140, 235, 100);
color: white; border: 3px solid green;
font-size: 22px; font-family: '隶书';
line-height: 30px; border-radius: 5px;
}
</style>
</head>
<body>
<input type="button" value="按钮1"/>
<input type="button" value="按钮2"/>
<input type="button" value="按钮3"/>
<input type="button" value="按钮4"/>
</body>
- 内嵌式样式需要在 head 标签中，通过一对 style 标签定义 CSS 样式
- CSS 样式的作用范围控制要依赖选择器
- CSS 的样式代码中注释方式为 /* */
- 缺点
- 内嵌式虽然对样式代码做了抽取，但是 CSS 代码仍然在 HTML 文件中
- 内嵌样式仅仅能作用于当前文件，代码复用度还是不够，不利于网站风格的统一
- 连接式 / 外部样式表：将 CSS 代码单独放入 css 样式文件， 在 head 标签中通过 link 标签引入外部样式表
- 可以在项目中单独创建 css 样式文件，专门用来存放 css 样式代码
- 在 head 标签中，通过 link 标签引入外部 CSS 样式即可
<head>
<meta charset="UTF-8">
<link href="css样表/css1.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<input type="button" value="按钮1"/>
<input type="button" value="按钮2"/>
</body>
- CSS 样式代码从 html 文件中剥离，有利于代码的维护
- CSS 样式文件可以被多个不同的 html 引入，有利于网站风格的统一
三. CSS选择器
- 元素选择器
<head>
<meta charset="UTF-8">
<style>
input {
display: block; width: 80px;
height: 40px; background-color: rgb(140, 235, 100);
color: white; border: 3px solid green;
font-size: 22px; font-family: '隶书';
line-height: 30px; border-radius: 5px;
}
</style>
</head>
<body>
<input type="button" value="按钮1"/>
<button>按钮5</button>
</body>
- 根据标签名确定样式的作用范围
- 语法为： 元素名{}
- 样式只能作用到同名标签上。其他标签不可用
- 相同的标签未必需要相同的样式，会造成样式的作用范围太大
- id 选择器
<head>
<meta charset="UTF-8">
<style>
#btn1 {
display: block; width: 80px;
height: 40px; background-color: rgb(140, 235, 100);
color: white; border: 3px solid green;
font-size: 22px; font-family: '隶书';
line-height: 30px; border-radius: 5px;
}
</style>
</head>
<body>
<input id="btn1" type="button" value="按钮1"/>
<input id="btn2" type="button" value="按钮2"/>
<input id="btn3" type="button" value="按钮3"/>
<input id="btn4" type="button" value="按钮4"/>
<button id="btn5">按钮5</button>
</body>
- 根据元素 id 属性的值确定样式的作用范围
- 语法为： #id值 {}
- id 属性的值在页面上具有唯一性，所有 id 选择器也只能影响一个元素的样式
- 因为 id 属性值不够灵活，所以使用该选择器的情况较少
- class 选择器
<head>
<meta charset="UTF-8">
<style>
.shapeClass {
display: block;
width: 80px;
height: 40px;
border-radius: 5px;
}
.colorClass{
background-color: rgb(140, 235, 100);
color: white;
border: 3px solid green;
}
.fontClass {
font-size: 22px;
font-family: '隶书';
line-height: 30px;
}
</style>
</head>
<body>
<input class ="shapeClass colorClass fontClass"type="button" value="按钮1"/>
<input class ="shapeClass colorClass" type="button" value="按钮2"/>
<input class ="colorClass fontClass" type="button" value="按钮3"/>
<input class ="fontClass" type="button" value="按钮4"/>
<button class="shapeClass colorClass fontClass" >按钮5</button>
</body>
- 根据元素 class 属性的值确定作用范围
- 语法为 .class值{}
- class 属性值可以有一个，也可以有多个，多个不同的标签也可以是使用相同的 class 值
- 多个选择器的样式可以在同一个元素上进行叠加
- 因为 class 选择器非常灵活，所以在 css 中，使用该选择器的情况较多
四. CSS 浮动
CSS 的 Float（浮动）使元素脱离文档流，按照ܶ定的方向（左或右发ࣿ生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止
- 浮动设计的初衷为了解决文字环绕图片的问题，浮动后一定不会将文字挡住，这是设计初衷
- 文档流是文档中可显示对象在排列时所占用的位置 / 空间，而脱离文档流就是页面中不占位置了
浮动的演示 float 常见值
通过代码感受浮动的效果：
<head>
<meta charset="UTF-8">
<style>
.outerDiv {
width: 500px;
height: 300px;
border: 1px solid green;
background-color: rgb(230, 224, 224);
}
.innerDiv{
width: 100px;
height: 100px;
border: 1px solid blue;
float: left;
}
.d1{
background-color: greenyellow;
/* float: right; */
}
.d2{
background-color: rgb(79, 230, 124);
/* float: right; */
}
.d3{
background-color: rgb(26, 165, 208);
/* float: right; */
}
</style>
</head>
<body>
<div class="outerDiv">
<div class="innerDiv d1">框1</div>
<div class="innerDiv d2">框2</div>
<div class="innerDiv d3">框3</div>
</div>
</body>
五. CSS 定位
position 属性指定了元素的定位类型
静态定位 static，不设置的时候默认值就是 static，静态定位，元素出现在该出现的位置，块级元素垂直排列，行内元素水平排列
<head>
<meta charset="UTF-8">
<style>
.innerDiv{
width: 100px;
height: 100px;
}
.d1{
background-color: rgb(166, 247, 46);
position: static;
}
.d2{
background-color: rgb(79, 230, 124);
}
.d3{
background-color: rgb(26, 165, 208);
}
</style>
</head>
<body>
<div class="innerDiv d1">框1</div>
<div class="innerDiv d2">框2</div>
<div class="innerDiv d3">框3</div>
</body>
绝对定位 absolute，通过 top left bottom right 指定元素在页面上的固定位置，定位后元素会让出原来位置，其他元素可以占用
<head>
<meta charset="UTF-8">
<style>
.innerDiv{
width: 100px;
height: 100px;
}
.d1{
background-color: rgb(166, 247, 46);
position: absolute;
left:300px
top:100px
}
.d2{
background-color: rgb(79, 230, 124);
}
.d3{
background-color: rgb(26, 165, 208);
}
</style>
</head>
<body>
<div class="innerDiv d1">框1</div>
<div class="innerDiv d2">框2</div>
<div class="innerDiv d3">框3</div>
</body>
相对定位 relative，相对于自己原来的位置进行定位，定位后保留原来的站位，其他元素不会移动到该位置
<head>
<meta charset="UTF-8">
<style>
.innerDiv{
width: 100px;
height: 100px;
}
.d1{
background-color: rgb(166, 247, 46);
position: relative;
left:30px
top:30px
}
.d2{
background-color: rgb(79, 230, 124);
}
.d3{
background-color: rgb(26, 165, 208);
}
</style>
</head>
<body>
<div class="innerDiv d1">框1</div>
<div class="innerDiv d2">框2</div>
<div class="innerDiv d3">框3</div>
</body>
固定定位 fixed ，始终在浏览器窗口固定位置，不会随着页面的上下移动而移动，元素定位后会让出原来的位置，其他元素可以占用
<head>
<meta charset="UTF-8">
<style>
.innerDiv{
width: 100px;
height: 100px;
}
.d1{
background-color: rgb(166, 247, 46);
position: fixed;
left:30px
top:30px
}
.d2{
background-color: rgb(79, 230, 124);
}
.d3{
background-color: rgb(26, 165, 208);
}
</style>
</head>
<body>
<div class="innerDiv d1">框1</div>
<div class="innerDiv d2">框2</div>
<div class="innerDiv d3">框3</div>
</body>
六. 盒子模型
所有 html 元素可以看作盒子， 在 CSS 中，" box model " 这一术语是用来设计和布局时使用。 CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素， 它包括：边距（margin），边框（border），填充（padding）和实际内容（content）
- Margin(外边距) - 清除边框外的区域，外边距是透明的
- Border（边框）- 围绕在内边距和内容外的边框
- Padding（内边距）- 清除内容周围的区域，内边距是透明的
- Content（内容）- 盒子的内容，显示文本和图像
<head>
<meta charset="UTF-8">
<style>
.outerDiv{
width: 800px;
height: 300px;
border: 1px solid green;
margin: 0px auto;
}
.innerDiv{
width: 100px;
height: 100px;
border: 1px solid blue;
float: left;
/*margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;*/
margin: 10px 20px 30px 40px;
}
.d1{
background-color: rgb(166, 247, 46);
/*margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;*/
margin: 10px 20px 30px 40px;
}
.d2{
background-color: rgb(79, 230, 124);
}
.d3{
background-color: rgb(26, 165, 208);
}
</style>
</head>
<body>
<div class="outerDiv">
<div class="innerDiv d1">框1</div>
<div class="innerDiv d2">框2</div>
<div class="innerDiv d3">框3</div>
</div>
</body>
