本文介绍了HTML项目创建、块元素与内联元素的区别，详细讲解了CSS的基础概念、选择器、引入方式及常见属性。通过实例展示了如何使用CSS控制文本样式、背景、列表和超链接，以及如何运用盒子模型进行布局。同时，还探讨了浮动、溢出处理和定位等关键概念，为网页设计和开发提供了基础指导。
目录
一、创建HTML项目
- 应用Hbuilder X创建HTML项目，点击第二项会自动创建出css、js、img目录，css目录用于存放css文件，js目录存放js文件，img存放图像
二、块元素和内联元素
1、块元素
- 独占一行
- 可以定义宽度和高度
- 常用块元素 div、p、ul、li
2、内联元素
- 一行排列显示
- 不能定义宽度和高度
- 常用内联元素 span、a、label
3、div标签和span标签
- 最大优点：没有任何默认样式渲染
- 最大区别： <div>标签是块元素，<span>标签是内联元素
- 作用：结构化HTML元素，DIV+CSS网页布局，提高网页加载速度
- <div>和<span>标签可以相互转换（display属性）
- 规范角度而言，<span>标签中不内嵌<div>标签
三、CSS的概念
- Cascading Style Sheet 级联样式表
- 表现HTML或XHTML文件样式的计算机语言 （包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定）
1、CSS的作用
- 能控制页面的样式和布局
- 网页文件与样式文件相分离，提高开发效率
2、CSS语法
（1）style标签
- 语法格式：
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- type属性以css的形式来解释代码 -->
<style type="text/css">
/* 元素(标签)选择器h1{ }找到h1标签 给h1添加样式 */
h1{
/* 改变文字大小的属性 */
font-size: 12px;
/* 文字颜色 */
color: aqua;
}
</style>
</head>- 应写在<head>标签之间，加上type=“text/css”属性
四、CSS选择器
- 语法：
选择器{
声明1;
声明2;
...
}
例如：
h1{
font-size: 12px;
color: aqua;
}- CSS的最后一条声明后的“；”可写可不写，建议都写上
- CSS的多条声明可写在同一行，但开发时便于阅读建议分行写并缩进
1、案例1
- 需求说明：诗标题使用标题标签实现，诗正文使用段落标签实现，诗正文字体颜色为绿色（green），字体大小为14px
- 代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h1{
font-size: 24px;
color: black;
}
p{
font-size: 14px;
color: green;
}
</style>
</head>
<body>
<h1>望庐山瀑布</h1>
<p>
日照香炉生紫烟，<br>
遥看瀑布挂前川。<br>
飞流直下三千尺，<br>
疑是银河落九天。<br>
</p>
</body>
</html>2、标签选择器
- HTML标签作为标签选择器的名称 <h1>...<h6>、<p>、<img/>
- 语法：
标签选择器{
属性font-size:值16px; (声明)
}
例如：
p{
font-size:16px;
}3、类选择器
- 语法：网页中可以给不同标签相同的class（类选择器可在页面中多次使用）
<标签名 class="类名称">标签内容</标签名>.类名称{
属性：值；（声明）
}
例如：
.class{
font-size:16px;
}4、ID选择器
- 语法：网页中标签ID不能重复，唯一存在（同一个页面只能使用一次）
<标签名 id="id名称">标签内容</标签名>#id名称{
属性：值；（声明）
}
例如：
#id{
font-size:16px;
}5、综合案例2
- 代码展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 标签选择器 给所有h1标签添加样式*/
h1{
font-size: 24px;
color: orange;
}
/* 有点为类选择器给指定的元素添加样式 */
.test1{
font-size: 24px;
color: red;
/* border边框 solid为实线边框 边框颜色*/
border: 3px solid;
border-color: #008000;
}
/* 有#代表id选择器 */
#test2{
font-size: 34px;
color: #008000;
/* 边框粗细 实线 颜色 */
border: 3px solid red;
}
/* 并集选择器 给多个元素添加相同样式*/
h3,h2{
color: aqua;
}
</style>
</head>
<body>
<h1>标题1</h1>
<h1>标题2</h1>
<h2>标题3</h2>
<h3>标题4</h3>
<!-- class类选择器 -->
<div class="test1">
春花秋月何时了
</div>
<!-- id选择器 -->
<!-- 找到id为test2的元素并且给他添加样式 -->
<div id="test2">
床前明月光
</div>
</body>
</html>
-
结果展示：
6、综合案例3
- 需求：实现诗歌《如梦令》的网页
- HTML代码结构如下：“如梦令”为<h3>标签且class为title，“译文”为<h3>标签且id为translation，诗歌和翻译段落都是<p>标签，但翻译段落标签的class为second
- 要求："如梦令"和"译文"字体大小为20px，"译文"为蓝色，翻译段落的字体为绿色。
- 代码展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.titlt{
font-size: 20px;
}
#transiation{
font-size: 20px;
color: blue;
}
.second{
color:green;
}
</style>
</head>
<body>
<h3 class="titlt">如梦令</h3><hr />
<p>
昨夜雨疏风骤，浓睡不消残酒。<br>
试问卷帘人，却道海棠依旧。<br>
知否，知否？应是绿肥红瘦！<br>
</p>
<h3 id="transiation">译文</h3>
<p class="second">
昨晚狂风大作，雨却稀疏，心绪如潮，不得入睡，
只有借酒消愁。一觉醒来，天已大亮，突然想起昨夜风雨，
来不及起身更衣便询问起卷帘的侍女窗外的海棠花怎么样了？
侍女无心去看，只是敷衍着随口回道：“海棠花依旧盛开。”
听后嗔叹道:“真的吗，不应是绿叶盛繁，红花凋零吗？”
</p>
</body>
</html>
- 执行结果：
7、CSS复合选择器
（1）并集选择器
p,#id,.class{
font-size:14px;
color:green;
}-
多个选择器之间可以是多个不同或相同类型
-
多个选择器之间必须用英文半角输入法逗号“,”隔开
（2）交集选择器
h3.class{
font-size:14px;
color:red;
}- 格式为：标签+类选择器 或 标签+ID选择器
- 选择器之间不能有空格
（3）后代选择器
p a{
font-size:14px;
color:red;
}- 选择器之间可以是多个不同或者相同类型并有层级关系的；
- 选择器之间用空格隔开
五、CSS的引入方式
2、行内样式
- 使用style属性引入CSS样式
-
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 行内式的添加样式 作用域仅在这个元素 -->
<!-- 行内式会覆盖外部内部式 就近原则 -->
<h1 style="color: #FF0000;font-size: 38px;">标题1</h1>
<p style="color: #0000FF;font-size: 28px;">
春花秋月
</p>
</body>
</html>
- 执行结果：
3、内部样式
- style标签中写CSS代码
4、外部样式
- CSS代码保存在扩展名为.css的样式表中
- HTML文件引用扩展名为.css的样式表
- 方法一：链接式（推荐使用）
- 方法二：导入式（不推荐使用）
- 链接式和导入式的区别：
- <link/>：属于XHTML，优先加载CSS文件到页面
- @import：属于CSS2.1，先加载HTML结构再加载CSS文件
- 案例：创建css文件
h1{
color: red;
font-size: 30px;
}-
创建HTML文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 外部样式表 引用css文件夹下 css样式 -->
<!-- 推荐使用 -->
<link rel="stylesheet" type="text/css" href="css/test1.css"/>
</head>
<body>
<h1>春花秋月何时了</h1>
</body>
</html>
-
执行结果：
5、CSS中的优先级
- 行内样式 > 内部样式 > 外部样式
- ID选择器 > 类选择器 > 标签选择器
六、CSS的属性
1、字体属性
2、文本属性
（1）案例：
- 使用一级标题居中显示，二级分类字体为蓝色，字体为斜体、加粗、16px、楷体，且加上下划线，并让分类之间行高为30px。
- 示例图：
- 代码展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
span{
color: #0000FF;
/* 斜 粗细 大小 字体系列 */
font: italic bold 16px "楷体";
/* 设置文本修饰 underline下划线 */
text-decoration: underline;
}
</style>
</head>
<body>
<!-- text-align文字的对齐方式 -->
<h1 style="text-align: center;">京东商城——全部商品分类</h1>
<h3>图书、音像、电子书刊</h3>
<p>
<span>电子书刊</span>电子书、网络原创、数字杂志、多媒体图书
</p>
<p>
<span>音像</span>音乐、影视、教育音像
</p>
<p>
<span>经管励志</span>经济、金融与投资、管理、励志与成功学
</p>
</body>
</html>3、背景属性
（1）案例
- 需求：使用外部样式表创建页面样式，一级标题为红色背景，主体部分为灰色（#D7D7D7）背景色
- 示例图：
- 代码展示：创建.css文件
.test1{
/* 背景颜色 */
background-color: red;
/* 字体颜色 */
color: white;
}
.test2{
background-color: lightgrey;
/* 设置为none后无序列表的小圆点去掉了 */
list-style-type:none ;
}
/* 给整个网页添加背景 所以需要给body(代表整个网页)加背景 */
body{
/* ..为绝对路径 */
background-image: url(../img/1.jpg);
background-size: 250px;
}
a:link{
color: #000000;
/* 去掉下划线 */
text-decoration: none;
}
a:hover{
color: red;
/* 鼠标悬浮时有下划线且为红色 */
text-decoration: underline;
/* 鼠标悬浮时修改鼠标的样式为可移动状态 */
cursor: move;
}- 创建HTML文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 链接到外部 -->
<link rel="stylesheet" type="text/css" href="css/test2.css"/>
</head>
<!-- body是指整个网页 -->
<body>
<h1 class="test1">全部商品分类</h1>
<!-- 无序列表ul -->
<ul class="test2">
<!-- 无序列表中套入超链接a -->
<li><a href="#">图书、音像、数字商品</a></li>
<li><a href="#">家用电器、手机、数码</a></li>
<li><a href="#">电脑、办公</a></li>
<li><a href="#">家居、家装、厨具</a></li>
</ul>
</body>
</html>
4、列表属性
（1）案例
- 将无序列表的列表项标志修改为正方形
- 示例图：
- 代码展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 无序列表ul -->
<ul>
<!-- 修改列表的序号形式 -->
<!-- 改为方形 -->
<ul style="list-style-type: square;">
<li>图书、音像、数字商品</li>
<li>家用电器、手机、数码</li>
<li>电脑、办公</li>
<li>家居、家装、厨具</li>
</ul>
</ul>
</body>
</html>
5、超链接伪类
- 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后才有效
- 在CSS定义中，a:active必须置于a:hover之后，才有效
（1）案例
- 效果图：
- 代码展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 未访问的链接 */
a:link{
/* 超链接未点击时为黑色 */
color: black;
/* 去掉超链接的下划线 */
text-decoration: none;
}
/* 当有鼠标悬停在链接上 */
a:hover{
color: red;
/* 鼠标悬停在链接上时鼠标的样式 */
cursor: pointer;
}
/* 被选择的链接 点击那一刹那的样式*/
a:active{
color: #FFA500;
/* 点击之后变大 */
font-size: 18px;
}
/* 已访问的链接 */
a:visited{
color: red;
}
</style>
</head>
<body>
<!-- a标签超链接 -->
<a href="#">我是一个超链接</a>
</body>
</html>
6、鼠标形状控制
- cursor属性，其值：
七、盒子模型
- 盒子模型总尺度 = border + padding + margin + 内容尺寸（宽 / 高）
- 块元素才能完全适用于盒子模型
- 使用display属性来相互转换
- none（元素隐藏，不可见）
- block（转为块元素，独占一行）
- inline（转为内联元素，不换行）
- 使用display属性来相互转换
（1）案例
- 代码展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- span内联元素 不换行-->
<!-- display：block将内联元素转换为块元素 -->
<span style="display: block; border: 1px solid #000000;">sp1</span>
<span style="display: block; border: 1px solid #000000;">sp2</span>
<!-- div块元素 独占一行-->
<!-- display: inline由块元素转换为内联元素 -->
<div style="border: 1px solid #000000; display: inline;">dv1</div>
<div style="border: 1px solid #000000; display: inline;">dv2</div>
</body>
</html>
- 效果图：
1、外边距margin
- 外边距可用于网页居中显示当margin-left：auto，margin-right：auto（为居中）
| margin-top |
| margin-right |
| margin-bottom |
| margin-left |
| margin：上 右 下 左（顺时针方向） |
2、边框border
3、内边距
| padding-left |
| padding-right |
| padding-top |
| padding-bottom |
| padding：上 右 下 左；（顺时针方向） |
4、综合案例1
- 示例图：
- 代码展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
/* 设置边框 5个像素 实线 颜色 */
border: 5px solid plum;
/* 内部图片距离div的距离 */
/* padding为填充 */
padding: 20px;
background-color: pink;
float: left;
/* 元素和元素之间的距离 */
margin: 10px;
}
</style>
</head>
<body>
<div>
<img src="img/1.jpg" width="200px">
</div>
<div>
<img src="img/2.jpg" width="200px">
</div>
</body>
</html>
5、综合案例2
- 需求说明：利用盒子模型制作登录页面
- 要求：盒子宽度width为300px，盒子边框颜色为#3a6587；设置标题文字左填充20px，标题文字竖直居中显示；设置表单上下距离30px，左右距离20px，登录页面居中显示
- 示例图：
- 代码展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.test1{
border: 1px solid #3a6587;
/* padding 上右下左 */
padding-left: 20px;
padding-right: 20px;
padding-top: 30px;
padding-bottom: 30px;
text-align: center;
}
.test2{
background-color: #3A6587;
color: white;
padding-left: 20px;
height: 40px;
/* 行高line—height */m
line-height: 40px;
}
</style>
</head>
<body>
<!-- 将网页中的内容居中显示：margin-left:auto; margin-right:auto; -->
<div style="width: 300px; margin-left:auto; margin-right:auto;" >
<div class="test2">会员登陆</div>
<div class="test1">
姓名：<input type="text" size="12" /><br>
邮箱：<input type="text" size="12" /><br>
电话：<input type="text" size="12" /><br>
<input align="center" type="submit" value="登录" />
</div>
</div>
</body>
</html>6、综合案例3
- 需求说明：导航整体居中，宽200px，边框色#aacbee，背景色#f5f9c；使用标题实现课程导航标题；使用无序列表实现课程导航列表，行高为30px，垂直居中显示；“课程导航”（#1f376d）每个课程导航右侧的三角图标使用背景图像的方式实现；课程链接为黑色字体且无下划线，鼠标移至上面时字体为橙色（#FF6215）
- 示例图：
- 代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
hr{
/* 线条粗细 */
height: 1px;
/* 有border才可以设置边框 */
border: 0px;
background-color:#aacbee ;
}
.main-content{
width: 200px;
border: 1px solid #aacbee;
background-color: #f5f9fc;
}
a:link{
color: black;
/* 未访问时去掉下划线 */
text-decoration: none;
}
a:hover{
color:red；
}
</style>
</head>
<body>
<div class="main-content">
<div>
<span style="color: #1f376d; padding-left: 30px;">课程导航</span>
<hr />
<div>
<!-- #链接到本地意思什么都没有 -->
<a href="#" style="padding-left: 10px;">Java软件工程师</a>
<!-- >大于号 float浮动-->
<span style="float: right; padding-right: 10px; color: #aacbee;">></span><br>
<a href="#" style="padding-left: 10px;">测试工程师</a>
<span style="float: right; padding-right: 10px; color: #aacbee;">></span><br>
<a href="#" style="padding-left: 10px;">嵌入式工程师</a>
<span style="float: right; padding-right: 10px; color: #aacbee;">></span><br>
<a href="#" style="padding-left: 10px;">程序员</a>
<span style="float: right; padding-right: 10px; color: #aacbee;">></span><br>
</div>
</div>
</div>
</body>
</html>7、浮动属性float
（1）float属性
- 取值：
- left 左浮动
- right 右浮动
- none 不浮动
- 作用：
- 块元素同行排列显示，一般用于排版、分栏显示
- 设置浮动属性后，脱离文档流向指定的左或右边对齐指定父元素的边界或浮动的元素
- 注意：
- 使用浮动后要及时清除，以免影响其后的网页元素
（2）清除浮动
- 清除浮动的必要性
- 浮动后，脱离了文档流不占网页空间
- 浮动后的网页元素会影响同级元素
- clear属性清除浮动
- 取值：left、right、both、none
- 表明容器框的哪一边不挨着浮动框
8、overflow属性（溢出）
- 作用：定义溢出元素内容区的内容如何处理
- 取值：visible（默认）、auto、hidden、scroll
| 有溢出的部分时添加滚动条 | overflow:scroll; |
| 删除溢出的内容 | overflow: hidden; |
| 根据大小判断是否需要滑动条 | overflow: auto; |
（1）案例
- 示例图：
- 代码展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 100px;
border: 1px solid #000000;
overflow: auto;
/* 对于溢出的添加滚动条overflow:scroll; */
/* 删除溢出的内容overflow: hidden; */
/* 根据大小决定有没有滑动条overflow: auto; */
}
</style>
</head>
<body>
<div>
<!-- 该内容溢出div框 -->
feegawrgethetseghmgjgfdfhdhdfgnfjnfhnf
</div>
</body>
</html>
9、定位属性
（1）position属性
- relative(相对定位)
- 相对它原来的位置，通过指定偏移，到达新的位置
- 仍在标准流中，它对父级盒子和相邻的盒子都没有任何影响
- absolute(绝对定位)
- 相对已设定非static定位属性的父元素计算偏移量
- fixed(相对浏览器固定定位，IE6不支持)
- static(默认)
- 偏移量设置
- X轴(left、right 属性)与Y轴(top、bottom属性)
- 可取值:像素或百分比
（2）定位示例图
（3）案例1
- 代码展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.test1{
width: 100px;
height: 100px;
border: 1px solid #000000;
/* 给div定位 */
/* 根据绝对定位 拖到那里就是哪里*/
position: absolute;
left: 100px;
top: 50px;
}
.test2{
width: 20px;
height: 20px;
border: 1px solid red;
/* 根据相对自己原来的位置偏移 */
position: relative;
left: -40px;
top: -40px;
}
</style>
</head>
<body>
<div class="test1">
<div class="test2">
</div>
</div>
</body>
</html>
- 效果图
（4）案例2
- 效果图（”查看Chapter 4。“相对于浏览器是固定的，浏览器滚动时，其位置不改变）
- 代码展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.test1{
/* 相对于浏览器固定 网页滑动是 该div不改变位置 */
position: fixed;
top: 50px;
left: 500px;
}
</style>
</head>
<body>
<p>
<!-- 当前页面的某一个位置跳转到另一个页面的一个位置 锚链接 -->
<a class="test1" href="demo06.html#C4" target="_blank">查看 Chapter 4。</a>
</p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
4004
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
