一、DIV+CSS简介
（一）DIV+CSS简介
1、DIV：DIV是层叠样式表中的’定位技术’’,称DIVision，即为划分。有时可以称其为图层。 DIV元素是用来为HTML（标准通用标记语言下的一个应用）文档内大块（blocklevel）的内容提供结构和背景的元素。
注意：div必须和css配合使用，必须利用css的样式，div才能起作用
2、CSS:层叠样式表(英文全称：Cascading StyleSheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以
配合各种脚本语言动态地对网页各元素进行格式化。
作用：美化网页
3、CSS引入方式:
（1）行内样式：在标签的开头标记中直接通过style属性设置样式效果
<p style="font-size: 40px; color: blue;"> 1
（2）内部样式（内嵌样式）：在head标签中通过style标签书写样式
（3）外部样式（外链式）：先定义一个外部样式文件，再head标签中通过link标签引入到页面中
<link href="css/css.css" type="text/css" rel="stylesheet" />
引入优先级:就近原则：行内样式—>内嵌式/外链式 （谁距离标签
近，就使用谁）
使用规则：
1：当页面中只有少量的标签时，使用行内样式（一次性）
2：当页面中有多个标签，具有相同的样式时，使用内嵌式
3：当多个页面中，多个标签具有相同样式时，使用外链式
4、CSS的语法规则
（一）语法规则：
选择器{
样式1:样式值1；
样式2:样式值2；
样式3:样式值3；
…
}
（二）CSS选择器
选择器作用：获取页面中要操作的元素（html标签）对象。
三种常用的选择器：
1、标签选择器:以标签的名字，作为选择器的名称
标签名{
样式规则…
}
h2{
color: red;
}
p{
color: blue;
}
body{
color: green;
}
<h2>静夜思</h2>
<p>
床前明月光，疑是地上霜。
</p>
<p>
举头望明月，低头思故乡。
</p>
2、类选择器
类选择器 ：不同标签具有相同样式使用
语法
.class名{
样式规则…
}
.p1{
color: red;
font-size: 40px;
font-family: "楷体";
}
<h2 class="p1">静夜思</h2>
<p class="p1">
床前明月光，疑是地上霜。
</p>
<p class="p1">
举头望明月，低头思故乡。
</p>
最常用的选择器
3、ID选择器
id选择器：相同标签具有不同样式
语法
# id名{ 样式规则 }
注意：id不能重名，一个页面中只能出现1个id，class可以有多个
#p1{
font-size: 20px;
color: red;
}
#p2{
font-size: 30px;
color: blue;
}
<h2>静夜思</h2>
<p id="p1">
床前明月光，疑是地上霜。
</p>
<p id="p1">
举头望明月，低头思故乡。
</p>
选择器的优先级
id>class>标签
样式是可以叠加的，也可以覆盖
优先级高的覆盖优先级低
不同选择器中具有不同样式时，样式会叠加
二、常用CSS样式
（一）字体样式font
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
font-size: 100px; /* 字体大小 */
font-weight: bold; /* 字体粗细 */
font-family: "楷体"; /* 字体类型 */
font-style: italic; /* 字体风格 普通和斜体 */
color: red; /* 颜色 */
}
</style>
</head>
<body>
<p>我是一段文本</p>
</body>
</html>
（二）文本样式 text
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
font-size: 14px; /* 整个页面文字都是14px */
}
a {
color: red;
font-size: 50px;
text-decoration: none;
/* 下划线 none:去除下划线*/
}
p{
text-indent: 28px; /* 文本的首行缩进 2*14 */
}
div{
border: 1px solid;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px; /* 行高和高度一致,可以达到垂直居中效果 */
letter-spacing: 10px; /* 字间距 文字 */
word-spacing: 50px; /* 词间距 单词 */
}
</style>
</head>
<body>
<p>
与此同时，拜登、哈里斯团队公布了第一批内阁成员提名名单，主要涉及国家安全和外交事务，
具体为：安东尼·布林肯（Antony Blinken）任国务卿，马约卡斯（Alejandro
Mayorkas）任国土安全部部长，艾薇儿·海恩斯（Avril Haines）任国家情报总监，琳达·托马斯-格林菲尔德（Linda Thomas-Greenfield）任美国常驻联合国代表，杰克·沙利文（Jack
Sullivan）任白宫国家安全顾问，前国务卿约翰·克里（John Kerry）任总统气候特使。
</p>
<p>
与此同时，拜登、哈里斯团队公布了第一批内阁成员提名名单，主要涉及国家安全和外交事务，
具体为：安东尼·布林肯（Antony Blinken）任国务卿，马约卡斯（Alejandro
Mayorkas）任国土安全部部长，艾薇儿·海恩斯（Avril Haines）任国家情报总监，琳达·托马斯-格林菲尔德（Linda Thomas-Greenfield）任美国常驻联合国代表，杰克·沙利文（Jack
Sullivan）任白宫国家安全顾问，前国务卿约翰·克里（John Kerry）任总统气候特使。
</p>
<a href="http://www.baidu.com">百度</a>
<div>
我要居中对齐，how are you
</div>
</body>
</html>
（三）超链接伪类样式 a:
定义这四个伪类，必须按照“link、visited、hover、active”的顺序进行，不然浏览器可能无法正常显示这4种样式。请记住，这4种样式定义顺序不能改变！
<style type="text/css">
/* 未访问之前的 */
a:link{
text-decoration: none;
}
/* 访问之后的 */
a:visited{
color: red;
}
/* 鼠标悬停 */
a:hover{
color: blue;
font-size: 50px;
}
/* 鼠标点击时 */
a:active{
color: #008000;
}
img:link{
width: 200px;
height: 200px;
}
img:hover{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<img src="img/学校.png" >
</body>
（四）边框样式 border
边框属性
border:1px solid red; 复合属性 相当于下面3个样式
border-width: 1px;
border-style: solid;
border-color: red;
border-top:1px solid red; 复合属性 ，其它方向写法一致
border-top-width: 1px;
border-top-style: solid;
border-top-color: red;
圆角属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
width: 300px;
height: 300px;
border: 1px solid;
/* border-radius: 50px 50px 50px 50px; */ /* 左上 右上 右下 左下 */
/* border-radius: 50px; */ /* 同时给四个方向设置 */
/* border-radius: 50px 100px */; /* 第一个给左上和右下,第二个给右上和左下 */
border-radius: 50%; /* 圆角表格 设置宽高的一半 */
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
附加常用的圆角
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#id1{
width: 200px;
height: 100px;
border: 5px solid;
color: red;
border-radius: 30px 30px 30px 30px;// 圆角矩形
}
#id1_1{
color: blue;
position: absolute;
top: 50px;
left: 80px;
}
#id2{
width: 200px;
height: 100px;
border: 5px solid;
color: red;
margin-left: 400px;
margin-top: -110px;
border-radius: 100px 100px 0 0//半圆
}
#id2_2{
color: blue;
position: absolute;
top: 50px;
left: 500px;
}
#id3{
width: 200px;
height: 200px;
border: 5px solid;
border-top-color: #0000FF;
border-top-style: groove;
border-left-color: blueviolet;
border-left-style: dotted;
border-bottom-color:forestgreen;
border-bottom-style: dashed;
border-right-color:gold;
border-right-style:double;
border-radius: 50%;//圆
}
#id3_3{
color: blue;
position: absolute;
top: 230px;
left: 100px;
}
#id4{
width: 200px;
height: 100px;
border: 5px solid;
color: red;
border-radius: 200px/100px//椭圆
}
#id4_4{
color: blue;
position: absolute;
top: 400px;
left: 100px;
}
#id5{
width: 100px;
height: 100px;
border: 5px solid;
color: red;
border-radius: 100px 0 0 0;//扇形
margin-left: 400px;
margin-top: -300px;
}
#id5_5{
color: blue;
position: absolute;
top: 230px;
left: 450px;
}
</style>
</head>
<body>
<div id="id1">
<div id="id1_1">
圆角矩形
</div>
</div>
<div id="id2">
<div id="id2_2">
半圆
</div>
</div>
<p><div id="id3">
<div id="id3_3">
圆
</div>
</div></p>
<p><div id="id4">
<div id="id4_4">
椭圆
</div>
</div></p>
<div id="id5">
<div id="id5_5">
扇形
</div>
</div>
</body>
</html>
圆角矩形：border-radius: 30px 30px 30px 30px;
半圆：border-radius: 100px 100px 0 0
圆：border-radius: 50%;
椭圆： border-radius: 200px/100px
扇形：border-radius: 100px 0 0 0;
（五）背景样式 background
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
/* background: #ffaaff;*/
background: url(img/美女.jpg);
/* background: url(img/学校.png); *//* 背景图片默认以平铺的方式 */
background-repeat: no-repeat; 背景不重复
width: 500px;
height: 400px; /* 背景图片不能设置大小 css2的样式规则 */
/* background-size: 500px 500px; */
/* background-size: 100%; */
background-size: cover; css3新特性 图片填充满整个网页
background-attachment: fixed; /* 文字在背景上漂浮,背景不动 */
font-size: 40px;
color: red;
}
</style>
</head>
<body>
<marquee onmouseover="this.stop()" onmouseleave="this.start()">我是弹幕</marquee>
你好吗<br>
你好吗<br>
你好吗<br>
你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>
你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>
你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>
你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>
你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>
你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>
你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>你好吗<br>
你好吗<br>你好吗<br>你好吗<br>你好吗<br>
你好吗<br>你好吗<br>你好吗<br>你好吗<br>
</body>
</html>
1、注意：背景图片原则是不允许设置大小的，css3新特性background-size:cover 设置大小
2、img标签可以设置大小，图片处于背景的上方
（六）盒子模型 div
有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
外边距：margin 两个盒子之间的距离
边框：border 盒子本身的边框
内边距:padding 内容距盒子的距离
内容：width+height 元素本身的大小
1：一个盒子，研究他的内部结构
1.1：盒子内容大小不会变化，变化的是边距和填充以及边框
盒子的实际宽度 = 左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距
margingLeft+borderLeft+paddingLeft+width+paddingRight+borderRight+marginRight
盒子的实际高度 =上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距
margingTop+borderTop+paddingTop+height+paddingBottom+borderBottom+marginBottom
2：多个盒子，研究他们之间的相互关系
2.1:盒子的上下外边距，只能获取一个外边距，按照最大值来获取
2.2:多个盒子的内边距，不会相互受影响
案例：导航菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 50px;
border: 1px solid;
text-align: center;
line-height: 50px;
}
#div0{
margin-left: 557.5px;
}
#div2{
margin-left: 101px;
margin-top: -52px;
}
#div3{
margin-left: 202px;
margin-top: -52px;
}
#div4{
margin-left: 303px;
margin-top: -52px;
}
</style>
</head>
<body>
<div id="div0">
<div id="div1">
音乐
</div>
<div id="div2">
视频
</div>
<div id="div3">
知道
</div>
<div id="div4">
图片
</div>
</div>
</body>
</html>
（七）布局样式
1：浮动布局 float
1.1：正常文档流
html的元素按照默认的位置在页面上排列
1.2：非正常文档流
打乱了html元素的默认位置，按照一定浮动或者定位改变位置了
float:left/right 左浮动
clear:both；清除浮动
2：定位布局 绝对+相对
定位的方法有很多种
固定定位（fixed）
相对定位（relative） 以左上角的原点为起始位置
绝对定位（absolute）
静态定位（static）。
- position：absolute
- left:距父元素左边框的距离
- top:距父元素上边框的距离
- z-index: 数字 数字越大，层级越高，反之越低
- 定位布局比浮动布局使用更加广泛
- div嵌套布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div0{
width: 800px;
height: 600px;
border: 1px solid;
position: absolute;
left: 360px;
top: 50px;
}
#div1{
width: 600px;
height: 200px;
border: 1px solid;
position: absolute;
left: 100px;
top: 50px;
}
#div2{
width: 600px;
height: 200px;
border: 1px solid;
position: absolute;
left: 100px;
top: 350px;
}
#div1_1{
width: 200px;
height: 150px;
border: 1px solid;
position: absolute;
left: 50px;
top: 25px;
}
#div1_2{
width: 200px;
height: 150px;
border: 1px solid;
position: absolute;
left: 300px;
top: 25px;
}
#div2_1{
width: 200px;
height: 150px;
border: 1px solid;
position: absolute;
left: 50px;
top: 25px;
}
#div2_2{
width: 200px;
height: 150px;
border: 1px solid;
position: absolute;
left: 300px;
top: 25px;
}
</style>
</head>
<body>
<div id="div0">
<div id="div1">
<div id="div1_1">
</div>
<div id="div1_2">
</div>
</div>
<div id="div2">
<div id="div2_1">
</div>
<div id="div2_2">
</div>
</div>
</div>
</body>
</html>
相对定位：相对于上一个元素，会保留元素位置
子绝父相：父元素使用相对定位，会保留位置，布局不会打乱，儿子元素使用绝对定位，计算方便
position: relative;
left: 100px;
top: 100px;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div0{
width: 600px;
height: 650px;
border: 1px solid;
position: relative;
left: 460px;
top: 50px;
}
#div1{
width: 500px;
height: 150px;
border: 1px solid;
position: absolute;
left: 250px;
top: 50px;
}
#div2{
width: 500px;
height: 150px;
border: 1px solid;
position: absolute;
left: 50px;
top: 250px;
}
#div3{
width: 500px;
height: 150px;
border: 1px solid;
position: absolute;
left: 50px;
top: 450px;
}
</style>
</head>
<body>
<div id="div0">
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
</div>
</body>
</html>
(八）转换样式与列表样式 display
html标签分类
1：行级元素：多个标签处于同一行，不能设置宽高，不会自动换行
a, b ,i ,span
2：块级元素：每个标签独占一行，可以设置宽高
div,p,ul,ol,table,
3：行内块元素:多个标签处于同一行，可以设置宽高
img，input
4：元素之间的样式相互转换
display 样式转换
1：block 块级
2：inline:行级
3：inline-block 行内块
4：none 不存在
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#span1{
display: block;
border: 1px solid;
width: 200px;
height: 200px;
}
#div1{
display: inline;
border: 1px solid;
width: 200px;
height: 200px;
}
#div2{
display: inline-block;
border: 1px solid;
width: 200px;
height: 200px;
}
#div3{
display: none;
border: 1px solid;
background-color: red;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<span id="span1">我是行级元素1</span>
<span id="span2">我是行级元素2</span>
<div id="div1">
我是块级元素
</div>
<div id="div2">
我是块级元素
</div>
<div id="div3">
我是块级元素
</div>
<button type="button" onclick="show()">显示</button>
<button type="button" onclick="hidden1()">隐藏</button>
</body>
</html>
<script type="text/javascript">
function show(){
var div3 = document.getElementById("div3");
div3.style.display = "block";
}
function hidden1(){
var div3 = document.getElementById("div3");
div3.style.display = "none";
}
</script>
扫一扫
3352
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
