Java开发 - 尚硅谷JavaWeb学习笔记 - Part3_CSS
第二章 HTML&CSS
三、CSS的使用
CSS 层叠样式表(英文全称：(Cascading Style Sheets) 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力 ,简单来说,美化页面
3.1 CSS引入方式
行内式,通过元素开始标签的style属性引入,
- 样式语法为：
style = "样式名:样式值; 样式名:样式值;......" - 代码
border-radius：边线的弧度
<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>
<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样式即可 rel="stylesheet"rel（-relationship）：所链接的资源与当前页面的关系stylesheet：样式表
type="text/css"- 用于指定链接的媒体类型
text/css：类型为CSS文件
<head>
<meta charset="UTF-8">
<link href="css/buttons.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<input type="button" value="按钮1"/>
<input type="button" value="按钮2"/>
<input type="button" value="按钮3"/>
<input type="button" value="按钮4"/>
</body>
- 说明
- CSS样式代码从html文件中剥离,利于代码的维护
- CSS样式文件可以被多个不同的html引入,利于网站风格统一
3.2 CSS选择器
元素选择器
- 代码
line-height：文字与顶部之间的距离
<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"/>
<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具有唯一性。因此所有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中,使用该选择器的情况较多
代码+效果
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
1 元素选择器
语法：标签名{}
缺点：某些同名的元素不希望使用某些样式
2 id选择器
根据标签的id值确定样式的作用元素
一般每个元素都有id属性，但是在一个页面中，id的值不应该相同，id具有唯一性
语法：#id值{}
缺点：id值有唯一性，样式只能作用到一个元素上
3 class选择器
根据元素的class属性值来确定样式的作用元素
元素的class属性值可以重复，而且一个元素的class属性可以有多个值
语法：.class属性值{}
-->
<style>
/* line-height：文字与顶部之间的距离 */
/* 元素选择器 */
input{
width:80px;
height:40px;
background-color:chartreuse;
color: white;
border: 3px solid green;
font-size: 22px;
font-family: '隶书';
line-height: 50px;
border-radius: 5px;
}
/* id选择器 */
#btn4{
width:80px;
height:40px;
background-color:chartreuse;
color: white;
border: 3px solid green;
font-size: 22px;
font-family: '隶书';
line-height: 50px;
border-radius: 5px;
}
/* class选择器 */
.shapeClass{
width:80px;
height:40px;
border-radius: 5px;
}
.colorClass{
background-color: rgb(179,241,85);
color:white;
border:3px solid green;
}
.fontClass{
font-size: 20px;
font-family: '隶书';
line-height: 30px;
}
</style>
</head>
<body>
<input id="btn1" class="shapeClass colorClass" type="button" value="按钮">
<input id="btn2" class="shapeClass fontClass" type="button" value="按钮">
<input id="btn3" class="colorClass fontClass" type="button" value="按钮">
<input id="btn4" type="button" value="按钮">
<button id="btn5" >按钮</button>
</body>
</html>
- 效果
3.4 CSS浮动
CSS 的 Float（浮动）使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。
- 浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷。
- 文档流是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。
浮动原理
- 当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘
- 当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
- 如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
- 如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。
- 如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”
浮动的样式名:float
通过代码感受浮动的效果
代码1+效果
- 代码
display: inlinedisplay- 表现出来的属性block- 块元素inline- 行内元素
<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);
}
.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>
- 效果
代码2+效果
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
display: inline
display-表现出来的属性 block-块元素 inline-行内元素
-->
<style>
.outerDiv{
width: 500px;
height: 300px;
border: 1px solid rgb(112, 126, 112);
background-color: beige;
}
.innerDiv1{
width: 100px;
height: 100px;
border: 1px solid blue;
}
.innerDiv2{
width: 100px;
height: 150px;
border: 1px solid blue;
}
.innerDiv3{
width: 100px;
height: 200px;
border: 1px solid blue;
}
/*
float：浮动属性。
当进行操作的时候会出现释放文档流的现象，有些元素可能会被遮挡，
但是由于设计的初衷是不会挡住文本，因此这些被遮挡的元素里的文本又会在它上涌之前的位置显示出来。
*/
.d1{
background-color: greenyellow;
float: left;
}
.d2{
background-color:rgb(210, 119, 119);
float: left;
}
.d3{
background-color: rgb(142, 236, 229);
float: left;
}
</style>
</head>
<body>
<div class="outerDiv">
<div class="innerDiv1 d1">div1</div>
<div class="innerDiv2 d2">div2</div>
<div class="innerDiv3 d3">div3</div>
</div>
</body>
</html>
- 效果
3.5 CSS定位
position 属性指定了元素的定位类型。
- 这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
- 元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
position：static- 默认值absolute- 绝对定位relative- 相对定位1：相对元素原本的位置来定位 不释放文档流，下面的div2不会涌上来占位fixed- 相对定位2：相对浏览器窗口的位置来定位 释放文档流，下面的div2会涌上来占位
left- 距离页面左端的距离right- 距离页面右端的距离top- 距离页面顶端的距离bottom- 距离页面底端的距离
静态定位
- 说明
- 不设置的时候的默认值就是
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,通过topleftrightbottom指定元素在页面上的固定位置- 定位后元素会让出原来位置,其他元素可以占用
- 代码
<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;
right: 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>
br*100+tab
</body>
- 效果
我自己写的代码+效果
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- display: inline; /* display-表现出来的属性 block-块元素 inline-行内元素*/-->
<style>
.innerDiv1{
width: 100px;
height: 100px;
border: 1px solid blue;
}
.innerDiv2{
width: 100px;
height: 150px;
border: 1px solid blue;
}
.innerDiv3{
width: 100px;
height: 200px;
border: 1px solid blue;
}
.d1{
background-color: greenyellow;
position: fixed;
top: 30px;
left: 30px;
}
.d2{
background-color:rgb(210, 119, 119);
}
.d3{
background-color: rgb(142, 236, 229);
}
</style>
</head>
<body>
<div>
<div class="innerDiv1 d1">div1</div>
<div class="innerDiv2 d2">div2</div>
<div class="innerDiv3 d3">div3</div>
</div>
</body>
</html>
- 效果
3.6 CSS盒子模型
概念
所有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;
background-color: rgb(230, 224, 224);
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: greenyellow;
/* padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px; */
padding: 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>
- 效果
- 在浏览器上,通过F12工具查看盒子模型状态
我自己写的代码+帮助理解的笔记
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 用来调方块与方块之间的缝隙 -->
<style>
.outerDiv{
width: 500px;
height: 300px;
border: 1px solid rgb(112, 136, 112);
background-color: beige;
/*上下外边距为 0像素（=auto），左右外边距的距离自动分配。 最终的结果就是：居中）*/
margin: 0px auto;
}
.innerDiv{
width: 100px;
height: 100px;
border: 1px solid blue;
float: left;
/*
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
*/
/*
上面的四行代码可以简化为以下的一行代码
四个数值对应的位置是按顺时针分布的：内上边距->内右边距->内下边距->内左边距
*/
padding: 40px 30px 20px 10px;
/*padding没有上下左右为auto的设置方式，因此它也不知道居中的东西*/
padding: auto auto;/*没用*/
}
.d1{
background-color: greenyellow;
/*
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
*/
/*
上面的四行代码可以简化为以下的一行代码
四个数值对应的位置是按顺时针分布的：上外边距->右外边距->下外边距->左外边距
*/
margin: 10px 20px 30px 40px;
}
.d2{
background-color:rgb(210, 119, 119);
/*
程序按顺序执行，
如果代码“margin: 10px;”在代码“margin: auto;”下面的话，最终的效果就是-上下左右外边距均为10像素
如果代码“margin: auto;”在代码“margin: 10px;”下面的话，最终的效果就是-上下左右外边距均为自动分配
*/
margin: 10px; /*上下左右外边距均为10像素*/
margin: auto;/*上下左右外边距均进行自动分配*/
}
.d3{
background-color: rgb(142, 236, 229);
/*上外边距为10像素，下外边距为30像素，左右外边距均为20像素*/
margin: 10px 20px 30px;
}
</style>
</head>
<body>
<div class="outerDiv">
<div class="innerDiv d1">div1</div>
<div class="innerDiv d2">div2</div>
<div class="innerDiv d3">div3</div>
</div>
</body>
</html>
- 效果
扫一扫
664
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
