学习目标
学习完本课程后,能够:
- 使用HTML进行网页布局
- 使用CSS3美化网页
- 制作精美的商业网站
一、HTML5基础
1.1 HTML简介
什么是HTML
HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。
中文名 : 超文本标记语言 | 阅读方式 : 网页浏览器 |
外文名 : Hyper Text Markup Language | 外语缩写 : HTML |
类 型 : 标记语言 | 文件扩展名 : html 或 htm |
HTML发展史
HTML历史上有如下版本:
- HTML 1.0:在1993年6月作为互联网工程工作小组(IETF)工作草案发布。
- HTML 2.0:1995年1 1月作为RFC1866发布,于2000年6月发布之后被宣布已经过时。
- HTML 3.2:1997年1月14日,W3C推荐标准。
- HTML4.0:1997年12月18日,W3C推荐标准。
- HTML 4.01(微小改进):1999年12月24日,W3C推荐标准。
- HTML 5:HTML5是公认的下一代Web语言,极大地提升了Web在富媒体、富内容和富应用等方面的能力,被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。
HTML5优势
- 世界知名浏览器厂商对HTML5的支持(微软,Google,苹果)
- 市场的需求
- 跨平台
W3C标准
W3C
World Wide Web Consortium(万维网联盟)
成立于1994年,Web技术领域最权威和具有影响力的国际中立性技术标准机构
http://www.w3.org/
http://www.chinaw3c.org/
W3C标准包括
结构化标准语言(HTML 、XML)
表现标准语言(CSS3)
行为标准(DOM 、ECMAScript)
1.2 HTML基本结构
入门案例
<!doctype html>
<html>
<head>
<title>hello</title>
<meta charset="UTF-8" />
</head>
<body>
hello html ~
</body>
</html>
<title>标签
<meta>标签
注:gb2312 包含全部中文字符
utf-8 包含全世界所有国家需要用到的字符
页面编码应与页面文件保存时的编码一致
1.3 网页基本标签
标题标签
<!doctype html>
<html>
<head>
<title>基本标签</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
段落标签
<!doctype html>
<html>
<head>
<title>基本标签</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>北京欢迎你</h1>
<p>北京欢迎你,有梦想谁都了不起</p>
<p>有勇气就会有奇迹</p>
</body>
</html>
换行标签
<!doctype html>
<html>
<head>
<title>基本标签</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>北京欢迎你</h1>
<p>
北京欢迎你,有梦想谁都了不起 <br />
有勇气就会有奇迹
</p>
</body>
</html>
水平线标签
<!doctype html>
<html>
<head>
<title>基本标签</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>北京欢迎你</h1>
<hr />
<p>
北京欢迎你,有梦想谁都了不起!<br />
有勇气就会有奇迹。
</p>
</body>
</html>
字体样式标签
加粗:<strong>…</strong> 或 <b>…</b>
斜体:<em>…</em> 或 <i>…</i>
<!doctype html>
<html>
<head>
<title>基本标签</title>
<meta charset="UTF-8" />
</head>
<body>
<strong>霍世元简介</strong>
<p>
<em>年龄: </em>24<br />
<em>性别: </em>男<br />
</p>
</body>
</html>
注释和特殊符号
1.4 插入图像标签
常见的图像格式:JPG ,GIF , PNG , BMP
<!doctype html>
<html>
<head>
<title>图像标签</title>
<meta charset="UTF-8" />
</head>
<body>
<!-- img 图像标签
src 图像地址; alt 图像的替代文字; title 鼠标悬停提示文字
width 图像宽度; height 图像高度 -->
<img src="image/hetao.jpg" alt="text" title="哈哈哈" width="300px" height="350px" />
<p>好吃不贵的核桃</p>
<p>10元3斤</p>
</body>
</html>
练习
练习1:使用学过的图像标签、标题标签、水平线标签、斜体标签、加粗标签、段落标签等制作自我介绍。
1.5 超链接标签
超链接基本用法
_blank:新建空白页打开
_self:默认样式,更改当前页面的访问路径,不会打开新的页面
超链接应用场合
- 页面间连接
<!doctype html>
<html>
<head>
<title>页面间链接</title>
<meta charset="UTF-8" />
</head>
<body>
<a href="demo03.html" target="_blank">链接到demo03图像标签案例</a><br/>
<a href="demo04.html" target="_self">
<img src="image/hetao.jpg" alt="核桃图片" title="买核桃吗?走过路过不要错过" />
</a>
</body>
</html>
- 锚链接
<!doctype html>
<html>
<head>
<title>锚链接</title>
<meta charset="UTF-8" />
</head>
<body>
<a name="_top">HTML从入门到精通</a>
<h6>你好HTML</h6>
<h6>你好HTML</h6>
<h6>你好HTML</h6>
<h6>你好HTML</h6>
<h6>你好HTML</h6>
<h6>你好HTML</h6>
<h6>你好HTML</h6>
<h6>你好HTML</h6>
<h6>你好HTML</h6>
<h6>你好HTML</h6>
<h6>你好HTML</h6>
<h6>你好HTML</h6>
<a href="#_top">回到顶部</a><!-- 获取_top的位置,像书签 -->
<br><br><br><br>
</body>
</html>
- 外部链接
<!doctype html>
<html>
<head>
<title>外部链接</title>
<meta charset="UTF-8" />
</head>
<body>
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="http://www.csdn.com" target="_self">CSDN</a>
<a href="mailto:1691655063@qq.com">点击联系我</a>
</body>
</html>
1.6 行内元素和块元素的特性
块元素:无论内容多少,该元素独占一行(p、h1-h6 …)
行内元素:内容撑开宽度,左右都是行内元素的可以排在一行(a,strong,em、img …)
<!-- 行内元素和块元素 -->
<!doctype html>
<html>
<head>
<title>行内元素和块元素</title>
<meta charset="UTF-8" />
</head>
<body>
<p>我是P元素</p>
<h1>我是标题1</h1>
<a href="#">我是超链接a元素</a>
<strong>我是strong元素--加粗</strong>
<em>我是em元素--斜体</em>
</body>
</html>
练习
练习2:超链接
二、列表、表格与媒体元素
2.1 列表
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能更快捷地获得相应的信息。
无序列表
<!doctype html>
<html>
<head>
<title>列表</title>
<meta charset="UTF-8" />
</head>
<body>
<!-- ul:声明无序列表 li:声明列表项 type : 符号样式
disc:默认实心圆 circle:空心圆
square: 方块 none:没有-->
<ul type="disc">
<li>山西省</li>
<li>河北省</li>
<li>山东省</li>
<li>陕西省</li>
<li>......</li>
</ul>
</body>
</html>
一般用于无序类型的列表,如导航,侧边栏新闻、有规律的图文组合模块等
有序列表
<!doctype html>
<html>
<head>
<title>列表</title>
<meta charset="UTF-8" />
</head>
<body>
<!-- ol:声明有序列表 li:声明列表项
type="" 1(默认数字排序) a(小写字母排序) A(大写字母排序)
start="" 列表项排序起始值 属性值只能为数字-->
<ol type="1" start="1">
<li>太原市</li>
<li>长治市</li>
<li>晋城市</li>
<li>运城市</li>
<li>......</li>
</ol>
</body>
</html>
一般用于排序类型的列表,如试卷、问卷选项等
定义列表
<!doctype html>
<html>
<head>
<title>列表</title>
<meta charset="UTF-8" />
</head>
<body>
<!-- dl :声明定义列表 dt :声明列表项 dd :声明列表项内容 -->
<dl>
<dt>山西省</dt>
<dd>太原市</dd>
<dd>长治市</dd>
<dd>晋城市</dd>
<dd>......</dd>
<dt>河北省</dt>
<dd>石家庄市</dd>
<dd>邢台市</dd>
<dd>邯郸市</dd>
<dd>......</dd>
</dl>
</body>
</html>
一般用于一个标题下有一个或多个列表项的情况
小结
练习
练习1:热门活动
练习2:制作音乐排行榜
2.2 表格
表格基本使用方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
</head>
<body>
<!--table表格标签
tr 表格里的行
td 表格里的列 -->
<table border="1px">
<tr>
<td> 11 </td>
<td> 12 </td>
<td> 13 </td>
</tr>
<tr>
<td> 21 </td>
<td> 22 </td>
<td> 23 </td>
</tr>
<tr>
<td> 31 </td>
<td> 32 </td>
<td> 33 </td>
</tr>
</table>
</body>
</html>
跨行、跨列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
</head>
<body>
<table border="1px">
<tr>
<td colspan="2">11</td> <!-- colspan是列合并,合并2列-->
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td rowspan="2">23</td> <!-- rowspan是行合并,合并2行 -->
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
</table>
</body>
</html>
练习
练习3:学生成绩表
2.3 媒体元素
视频元素
<!doctype html>
<html>
<head>
<title>列表</title>
<meta charset="UTF-8" />
</head>
<body>
<!-- video 视频元素标签 src 视频文件路径
controls 播放、暂停和音量控件
autoplay 自动播放属性 -->
<video src="video/html.mp4" controls></video>
</body>
</html>
音频元素
<!doctype html>
<html>
<head>
<title>音频</title>
<meta charset="UTF-8" />
</head>
<body>
<!-- audio 音频元素标签 src 音频文件路径
controls 播放、暂停和音量控件
autoplay 自动播放属性 -->
<audio src="video/music.mp3" controls></audio>
</body>
</html>
loop属性可以实现视频的循环播放
2.4 结构元素
页面结构
结构元素
<!doctype html>
<html>
<head>
<title>布局</title>
<meta charset="UTF-8" />
<style>
header,
section,
footer {
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体部分</h2>
</section>
<footer>
<h2>网页底部</h2>
</footer>
</body>
</html>
2.5 内联框架的使用
iframe用法
<!doctype html>
<html>
<head>
<title>iframe</title>
<meta charset="UTF-8" />
</head>
<body>
<!-- iframe 内联框架
src 引用页面地址 name 框架标识名 -->
<iframe src="demo04.html" name="mainFrame"></iframe>
</body>
</html>
设置src的属性值为 http://www.bdqn.cn 在这个页面中也可以打开一个线上的网页
<iframe>属性实现页面间的相互跳转
<!doctype html>
<html>
<head>
<title>iframe</title>
<meta charset="UTF-8" />
</head>
<body>
<!-- target 目标窗口属性 希望显示的框架窗口名 -->
<a href="demo04.html" target="mainFrame">下边显示demo04页面</a> <br />
<a href="demo03.html" target="mainFrame">下边显示demo03页面</a> <br />
<a href="demo02.html" target="mainFrame">下边显示demo02页面</a> <br />
<!-- name 框架标识名 -->
<iframe src="demo01.html" name="mainFrame"></iframe>
</body>
</html>
三、表单(重点)
3.1 常用的表单元素
案例1
表单基本结构
<!doctype html>
<html>
<head>
<title>表单</title>
<meta charset="UTF-8" />
</head>
<body>
<!-- form 表单标签
method 提交方式 规定如何发送数据 get(数据都在地址栏里 不安全) post(不显示数据 安全)
action 表单提交的位置,可以是网站,也可以是一个请求处理地址-->
<form method="get" action="#">
<!-- input 输入框标签 name 元素名称
type 元素类型 value 元素初始值-->
名字:<input name="name" type="text" value="霍" /> <br />
密码:<input name="pass" type="password"> <br />
<input type="submit" name="Button" value="提交" />
<input type="reset" name="Reset" value="重填" /> <br />
</form>
</body>
</html>
input 常用属性说明
案例2
常用属性与属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>form表单</title>
</head>
<body>
<form method="post" action="#">
<h3>注册表单</h3>
<!-- size 输入框宽度 maxlength 输入最大字符数 -->
用户名:<input type="text" name="user" size="8" maxlength="8" /> <br />
密码:<input type="password" name="pwd" /> <br />
<!-- 多选框 name必须配 ,提交的值就是1 2 3 -->
爱好:
<input type="checkbox" name="like" value="1" />篮球
<input type="checkbox" name="like" value="2" />足球
<input type="checkbox" name="like" value="3" checked />排球 <br />
<!-- checked 用在单选和多选框中 选中当前选项 -->
性别:
<!-- 单选框 不配name属性,性别是多选!! sex属性的值按照1 2 提交-->
<input type="radio" name="sex" value="1" checked />男
<input type="radio" name="sex" value="2" />女 <br />
<!-- select 列表框 option 列表选项 selected 默认选中项 -->
城市:
<select name="city">
<option value="1">北京</option>
<option value="2" selected>上海</option>
</select> <br />
<!-- 文本域 cols 显示列数 rows 显示行数-->
自我描述:
<textarea name="text" cols="20" rows="3">文本内容</textarea> <br />
<!-- 文件域 -->
头像:
<input type="file" name="path" /> <br />
<!-- 提交按钮 按照form标签action属性值进行提交 -->
<input type="submit" name="butSubmit" value="提交" />
<!-- 清空当前表单已填信息 恢复默认 -->
<input type="reset" name="butReset" value="重填" />
<!-- 普通按钮 -->
<input type="button" name="butButton" value="按钮" /> <br />
<!-- 图片按钮 -->
<input type="image" src="image/login.gif" /> <br />
</form>
</body>
</html>
案例3
输入框格式校验
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>form表单</title>
</head>
<body>
<form method="get" action="#">
<!-- 邮箱 自动验证email地址格式是否正确 -->
邮箱:<input type="email" name="email" /> <br />
<!-- 验证网址格式 -->
输入网址:<input type="url" name="userUrl" /> <br />
<!-- min 允许的最小值 max 允许的最大值 step 合法的数字间隔 -->
输入数字:<input type="number" name="num" min="0" max="100" step="10"> <br />
<!-- type属性值:number(数字) range(滑块) -->
输入数字:<input type="range" name="num" min="0" max="100" step="10"> <br />
<!-- 搜索框 -->
输入关键词:<input type="search" name="sousou" /> <br />
<input type="submit" value="提交" />
</form>
</body>
</html>
练习
练习1:注册表单
3.2 表单的高级应用
案例4
隐藏域 ; 只读 ; 禁用 相关属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>form表单</title>
</head>
<body>
<form method="get">
<!-- type="hidden" 隐藏域 -->
<input type="hidden" value="666" name="userid" /> <br />
<!-- readonly 只读文本框 -->
<input name="name" type="text" value="张三" readonly /> <br />
<!-- disabled 禁用 -->
<input type="button" disabled value="保存" /> <br />
<input type="submit" value="提交" />
</form>
</body>
</html>
案例5
表单元素的标注
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>form表单</title>
</head>
<body>
<form method="get">
<!-- 增强鼠标的可用性 自动将焦点转移到与该标注相关的表单元素上
单机文字 可以选中该选项 -->
性别:
<label for="man">男</label>
<input type="radio" name="sex" id="man" value="1" />
<label for="woman">女</label>
<input type="radio" name="sex" id="woman" value="0" />
</form>
</body>
</html>
练习
练习2要求:
- 邮箱文本框中默认文本为“student@bdqn.cn “ ,且文本框不可修改
- 单击文字“电子邮箱”、“设置密码”、“真实姓名”、“验证”时鼠标的光标焦点移动到对应的文本框里
- 单击“男”选中其对应的单选按钮,单击“女”选中其对应的单选按钮
- 选择身份的下拉列表框被禁止使用
3.3 表单的初级验证
表单验证的好处:减轻服务器的压力;保证数据的可行性和安全性;
案例6
placeholder ;required ; pattern 用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>form表单</title>
</head>
<body>
<form method="get">
<!-- placeholder 文本框输入内容提示
适用于input标签:text search url email password 等类型 -->
搜索:<input type="text" name="name" placeholder="请输入要搜索的关键字" /><br>
<!-- required 文本框内容不能为空,否则不允许用户提交表单
适用于input标签:text search url email password number
checkbox radio file 等类型-->
<input type="text" name="username" required /> <br>
<!-- pattern验证规则 正则表达式 -->
手机号: <input type="text" name="phone" required pattern="1[3578]\d{9}" /><br>
<input type="submit" value="提交" />
</form>
</body>
</html>
四、初识CSS3(重点)
4.1 CSS概念
简介
层叠样式表: 是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
中文名 : 层叠样式表 | 外语缩写 :CSS(也作文件扩展名) |
外文名 : Cascading Style Sheets | 其他称呼 : 级联样式表 |
CSS发展史
css优势
- 内容与表现分离
- 网页的表现统一,容易修改
- 丰富的样式,使得页面布局更加灵活
- 减少网页的代码量,增加网页的浏览速度,节省网络带宽
- 运用独立于页面的CSS,有利于网页被搜索引擎收录
4.2 CSS语法规则
CSS基本语法结构
CSS的最后一条声明后的“;”可写可不写,但是,基于W3C标准规范考虑,建议最后一条声明的结束“;” 都要写上
style标签
4.3 HTML中引入CSS样式
行内样式
<!doctype html>
<html>
<head>
<title>CSS</title>
<meta charset="UTF-8" />
</head>
<body>
<h1 style="color: red;">style属性的应用</h1>
<p style="font-size: 14px; color:green">style行内样式</p>
</body>
</html>
内部样式
<!doctype html>
<html>
<head>
<title>CSS</title>
<meta charset="UTF-8" />
<style>
h1 {
color: red;
}
p {
font-size: 14px;
color: green
}
</style>
</head>
<body>
<h1>style标签的应用</h1>
<p>style内部样式</p>
</body>
</html>
优点:方便在同页面中修改样式
缺点:不利于在多页面间共享复用代码及维护,对内容与样式的分离也不够彻底
外部样式
链接外部样式
<!doctype html>
<html>
<head>
<title>CSS</title>
<meta charset="UTF-8" />
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>link标签引入css样式</h1>
<p>外部样式--链接外部样式</p>
</body>
</html>
导入外部样式表
<!doctype html>
<html>
<head>
<title>CSS</title>
<meta charset="UTF-8" />
<style type="text/css">
@import url("css/style.css");
</style>
</head>
<body>
<h1>style标签引入css样式</h1>
<p>外部样式--导入外部样式</p>
</body>
</html>
链接式与导入式的区别
- 标签属于XHTML,@import是属于CSS2.1
- 使用链接的CSS文件先加载到网页当中,再进行编译显示
- 使用@import导入的CSS文件,客户端显示HTML结构,再把CSS文件加载到网页当中
- @import是属于CSS2.1特有的,对不兼容CSS2.1的浏览器是无效的
3种样式的优先级
就近原则 行内样式>内部样式表/外部样式表(谁后加载使用谁)
4.4 CSS3的选择器
基本选择器
标签选择器 ; 类选择器 ; ID选择器;
<!doctype html>
<html>
<head>
<title>CSS</title>
<meta charset="UTF-8" />
<style type="text/css">
/* 标签选择器:h1 p img a .....
直接应用于HTML标签*/
h2 {
color: blue;
}
/* 类选择器 可在页面中多次使用*/
.name {
color: aqua;
}
/* id选择器 同一个页面中只能使用一次(自觉遵守)*/
#gc {
color: yellow;
}
</style>
</head>
<body>
<h2>童话</h2>
<h3 class="name">光良</h3>
<p id="gc">我愿变成童话里 你爱的那个天使</p>
<p>张开双手 变成翅膀守护你</p>
</body>
</html>
优先级:ID选择器>类选择器>标签选择器
练习
练习一 要求:
- 制作影视简介,标题使用<h2>标签,其他文本均放在段落标签<p>中,超链接使用<a>,图片使用<img>
- 使用外部引入CSS样式的方式为网页设置样式
- 使用标签选择器设置标题h2的字体颜色为#003580
- 使用ID选择器设置p段落的文字,字体为14px,颜色为#000033
- 使用类选择器设置p段落文字中的不同颜色值, 从左到右颜色值分别为#F00、#1F87CC、#FAA53B、#0D7114
- 使用类选择器设置第一张图片的宽度为100px,高度为160px
- 使用类选择器设置最后两张图片的宽度为200px,高度为130px
高级选择器
层次选择器
后代选择器 ;子选择器 ; 相邻兄弟选择器 ;通用兄弟选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>层次选择器</title>
<style type="text/css">
p,
ul {
border: 1px solid red;
/*边框属性*/
}
/*后代选择器*/
/* body p {
background: red;
} */
/*子选择器*/
/* body>p {
background: pink;
} */
/*相邻兄弟选择器 只有一个,相邻(向下)*/
/* .active+p {
background: green;
} */
/* 通用兄弟选择器 */
/* .active~p {
background: yellow;
} */
</style>
</head>
<body>
<p class="active">1</p>
<p>2</p>
<p>3</p>
<ul class="c4">
<li>
<p>4</p>
</li>
<li>
<p>5</p>
</li>
<li>
<p>6</p>
</li>
</ul>
</body>
</html>
结构伪类选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>结构伪类选择器</title>
<style>
/*ul的第一个子元素*/
/* ul li:first-child {
background: red;
} */
/*ul的最后一个子元素*/
/* ul li:last-child {
background: green;
} */
/* 选择当前p元素的父级元素,选中父级元素的第一个,并且是当前元素才生效 顺序*/
/* p:nth-child(1) {
background: yellow;
} */
/*父元素里第2个类型为p的元素 类型*/
/* p:nth-of-type(2) {
background: blue;
} */
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
使用F:nth-child(n)和F:nth-of-type(n)的关键点
- F:nth-child(n)在父级里从一个元素开始查找,不分类型
- F:nth-of-type(n)在父级里先看类型,再看位置
属性选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
.demo a {
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
text-align: center;
background: #aac;
color: blue;
font: bold 20px/50px Arial;
margin-right: 5px;
text-decoration: none;
margin: 5px;
}
/* 存在属性id的元素 */
/* a[id] {
background: yellow;
} */
/* 属性id=first的元素 */
/* a[id=first] {
background: red;
} */
/* 属性class="links"的元素 */
/* a[class="links"] {
background: red;
} */
/* 属性class里包含links字符串的元素 */
/* a[class*=links] {
background: red;
} */
/* 属性href里以http开头的元素 */
/* a[href^=http] {
background: red;
} */
/* 属性href里以png结尾的元素 */
/* a[href$=png] {
background: red;
} */
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first">1</a>
<a href="" class="links active item" title="test website" target="_blank">2</a>
<a href="sites/file/test.html" class="links item">3</a>
<a href="sites/file/test.png" class="links item"> 4</a>
<a href="sites/file/image.jpg" class="links item">5</a>
<a href="efc" class="links item" title="website link">6</a>
<a href="/a.pdf" class="links item">7</a>
<a href="/abc.pdf" class="links item">8</a>
<a href="abcdef.doc" class="links">9</a>
<a href="abd.doc" class="linksitem last" id="last">10</a>
</p>
</body>
</html>
= 绝对等于 *=包含这个元素 ^=以这个开头 $=以这个结尾
五、CSS3美化网页元素(重点)
css优点:
- 有效的传递页面信息
- 使用CSS美化过的页面文本,使页面漂亮、美观,吸引用户
- 可以很好的突出页面的主题内容,使用户第一眼可以看到页面主要内容
- 具有良好的用户体验
5.1 编辑网页文本
<!doctype html>
<html>
<head>
<title>CSS 字体样式</title>
<meta charset="UTF-8" />
<style>
#title1 {
color: aqua;
font-size: 20px;
}
</style>
</head>
<body>
<!-- span标签 行标签 重点要突出的字 -->
我喜欢学习,<span id="title1">学习使我快乐</span>
</body>
</html>
字体样式
<!doctype html>
<html>
<head>
<title>CSS 字体样式</title>
<meta charset="UTF-8" />
<style>
body {
/* 字体类型 Times New Roman*/
font-family: "Times New Roman", "楷体";
}
h1 {
/* 字体大小 px em rem */
font-size: 30px;
}
.p1 {
/* 字体粗细 bold(加粗) bolder(更粗) lighter(更细) normal(默认 标准)*/
font-weight: bold;
/* 字体风格 italic(斜体) normal(默认 正常) oblique(倾斜) */
font-style: oblique;
}
h3 {
/* 斜体 加粗 字号 字体 */
font: italic bold 20px "微软雅黑";
}
</style>
</head>
<body>
<h1>京东商城――全部商品分类</h1>
<h3>图书、音像、电子书刊</h3>
<p class="p1">
电子书刊 电子书 网络原创 数字杂志 多媒体图书目
音像音乐 影视 教育音像
经管励志 经济 金融与投资 管理 励志与成功
</p>
</body>
</html>
文本样式
<!doctype html>
<html>
<head>
<title>CSS 文本样式</title>
<meta charset="UTF-8" />
<style>
body {
/* 文本颜色 十六进制方法表示颜色(红绿蓝)*/
color: blue;
color: #EEFF66;
/* 控制alpha透明度的参数 值0-1 越小越模糊 */
color: rgba(0, 0, 255, 0.5);
}
h1 {
/* 元素水平对齐方式 left right center justify(两端对齐)*/
text-align: right;
}
.p1 {
/* 首行文本缩进 em px */
text-indent: 20px;
/* 文本行高 px */
line-height: 25px;
/* 文本装饰 none(默认) underline(下划线) overline(上划线) */
text-decoration: underline;
}
img,
#align {
/* 垂直对齐方式 middle(中) top(上) bootom(下) */
vertical-align: middle;
}
h3 {
/* text-shadow: 阴影颜色 x轴水平位移量 y轴垂直位移量 模糊半径 */
text-shadow: aqua 10px 10px 10px;
}
</style>
</head>
<body>
<h1>京东商城――全部商品分类</h1>
<h3>图书、音像、电子书刊</h3>
<p class="p1">
电子书刊 电子书 网络原创 数字杂志 多媒体图书目
音像音乐 影视 教育音像
经管励志 经济 金融与投资 管理 励志与成功
</p>
<img src="image/icon.gif" />
<span id="align">
图片与文本垂直对齐方式
</span>
</body>
</html>
练习
练习一:
- 使用外部样式表创建页面样式(链接式引用)
- 标题 18px 、楷体 、加粗显示
- 正文 12px 、行高 20px 、英文字体:Times New Roman 或 Times 中文字体: 宋体
- 序号颜色为 红色
练习二:
- 使用外部样式表创建页面样式
- 标题行距40px,加粗显示
- 正文大小12px,行距20px
- 图片与文本居中对齐
- 标题字体添加文字阴影
- 设置一级标题水平居中对齐
5.2 超链接伪类
<!doctype html>
<html>
<head>
<title>CSS 超链接伪类 </title>
<meta charset="UTF-8" />
<style>
/* 未单击访问时超链接样式 */
a:link {
color: red;
}
/* 单击访问后超链接样式 */
a:visited {
color: yellow;
}
/* 鼠标悬浮其上的超链接样式 */
a:hover {
color: black;
}
/* 鼠标单击未释放的超链接样式 */
a:active {
color: aqua;
}
</style>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">
百度
</a>
</body>
</html>
5.3 列表list-style
<!doctype html>
<html>
<head>
<title>CSS 项目符号 </title>
<meta charset="UTF-8" />
<style>
li {
/* list-style-type 设置项目符号类型
disc:默认实心圆 circle:空心圆
square: 方块 none:没有 */
list-style-type: circle;
}
</style>
</head>
<body>
<h3>喜欢的歌手</h3>
<ul>
<li>薛之谦</li>
<li>周杰伦</li>
<li>邓紫棋</li>
</ul>
</body>
</html>
5.3 背景样式
背景颜色
<!doctype html>
<html>
<head>
<title>CSS 背景颜色 </title>
<meta charset="UTF-8" />
<style>
li {
list-style-type: circle;
}
div {
width: 120px;
/* 背景颜色 */
background-color: aqua;
}
h3 {
width: 120px;
background-color: salmon;
}
</style>
</head>
<body>
<div>
<h3>喜欢的歌手</h3>
<ul>
<li>薛之谦</li>
<li>周杰伦</li>
<li>邓紫棋</li>
</ul>
</div>
</body>
</html>
背景图像
<!doctype html>
<html>
<head>
<title>CSS 背景图像 </title>
<meta charset="UTF-8" />
<style>
div {
width: 400px;
height: 400px;
border: 1px solid red;
/* 设置背景图像 */
background-image: url("image/1.jpg");
}
.div1 {
/* 背景图像重复方式 repeat(沿水平垂直两个方向平铺) no-repeat(不平铺)
repeat-x(只沿水平方向平铺) repeat-y(只沿垂直方向平铺) */
background-repeat: no-repeat;
/* 背景定位 background-position */
/* 1. s y 坐标表示位置 单位px x(水平) y(垂直) */
/* background-position: 10px 30px; */
/* 2. 百分比表示位置 */
/* background-position: 10% 50%; */
/* 3.x y 方向关键词 水平(left center right)
垂直(top center bottom) */
/* background-position: right bottom; */
}
.div2 {
/* background: 背景颜色 背景图像 图像位置 是否重复显示*/
background: #c00 url(image/icon.gif) left center no-repeat;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
背景尺寸
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>背景尺寸</title>
<style>
div {
width: 200px;
height: 130px;
border: 1px solid red;
background: url("image/1.jpg") no-repeat;
/* background-size(背景图片尺寸设置) auto(默认 保持图片原样)*/
/* background-size: auto; */
/* background-size: 120px 60px; */
/* background-size: 120px; */
/* background-size: 50% 80%; */
/* cover(整个背景图片放大填充了整个元素) */
/* background-size: cover; */
/* contain 保持原图像尺寸比例,最大限度显示整张图片 */
background-size: contain;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
5.4 CSS3渐变
线性渐变
颜色沿着一条直线过渡:从左到右,从右到左,从上到下等
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS3线性渐变</title>
<style>
div {
width: 100px;
height: 100px;
/*to top*/
background: linear-gradient(to top, orange, blue);
/* background: -webkit-linear-gradient(to top, orange, blue); */
/*-webkit-*/
/*to bottom*/
/* background: linear-gradient(to bottom, orange, blue); */
/*background: -webkit-linear-gradient(to bottom, orange, blue);*/
/*to left*/
/* background: linear-gradient(to left, orange, blue); */
/*background: -webkit-linear-gradient(to left, orange, blue);*/
/*to right*/
/* background: linear-gradient(to right, orange, blue); */
/*background: -webkit-linear-gradient(to right, orange, blue);*/
/*to top left*/
/* background: linear-gradient(to top left, orange, blue); */
/*background: -webkit-linear-gradient(to top left, orange, blue);*/
/*to top right*/
/* background: linear-gradient(to top right, orange, blue); */
/*background: -webkit-linear-gradient(to top right, orange, blue);*/
/*to bottom left*/
/* background: linear-gradient(to bottom left, orange, blue); */
/*background: -webkit-linear-gradient(to bottom left, orange, blue);*/
/*to bottom right*/
/* background: linear-gradient(to bottom right, orange, blue); */
/*background: -webkit-linear-gradient(to bottom right, orange, blue);*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
径向渐变
圆形或椭圆形渐变,颜色不再沿着一条直线变化,而是从一个起点朝所有方向混合
练习
练习三:
- 页面总宽度300px
- 一级题字体大小为18px、白色、加粗显示、行距为35px,背景使用线性渐变
- 二级标题字体大小为14px、加粗显示、行距为30px,背景使用线性渐变、二级标题超链接字体无下划线、鼠标移入出现下划线
- 内容字体大小为12px、行距为26px、超链接字体颜色为灰色、无下划线、鼠标移入时颜色为棕红色并且显示下划线
练习四:
- 设置页面内容宽度260px
- 设置页面背景渐变颜色(#F9FBCB #F8F8F3)
- 设置标题:16px、缩进1字符、行距30px、字体颜色、绿色背景#518700、设置背景图像
- 无序列表去除项目符号、12px、行距28px、字体颜色(#1a66b3)、缩进2字符
- 超链接无下划线,鼠标悬浮至超链接时显示下划线
- 利用结构伪类选择器设置列表图标
六、盒子模型(重难点)
6.1 盒子模型的使用
边框
border-color(颜色)
border-width(边框宽度):px
border-style(样式):solid(实线);dashed(虚线);double(双线);
dotted(圆点虚线); hidden(隐藏); none(无边框);
border:粗细 样式 颜色
内边距(padding)
外边距(margin)
margin :0
margin:0 auto; 网页居中对齐
margin: 0 1px 上下 左右;
margin:0 1px 2px 3px 上 右 下 左
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>边框</title>
<style>
.box{
width: 298px; /* 盒子宽度298px*/
/* border:粗细 样式 颜色*/
border:1px solid #3a6587; /* 设置盒子边框*/
margin:0 auto; /* 网页元素居中对齐 */
/* margin:0 auto; 居中要求:
块元素,块元素有固定的宽度 */
}
h2{
font-size:16px;
background-color:#3a6587;
height:35px;
line-height:35px;
color:#FFF;
/* margin :0
margin:0 auto; 网页元素居中对齐
margin: 0 1px 上下 左右;
margin:0 1px 2px 3px 上 右 下 左 */
}
form{
background: #c8ece3;
}
div:nth-of-type(1)>input{
border: 3px solid black; /* 第一个div下面的input元素设置边框3px 实线 黑色*/
}
div:nth-of-type(2)>input{
border: 1px dashed red; /* 第二个div下面的input元素设置边框1px 虚线 红色*/
}
div:nth-of-type(3)>input{
border: 2px dotted red; /* 第三个div下面的input元素设置边框2px 点线 红色*/
}
</style>
</head>
<body>
<div class="box">
<h2>会员登录</h2>
<form action="#">
<div>
<strong class="name">姓名:</strong>
<input type="text"/>
</div>
<div>
<strong class="name">邮箱:</strong>
<input type="text"/>
</div>
<div>
<strong class="name">电话:</strong>
<input type="text"/>
</div>
</form>
</div>
</body>
</html>
盒子总尺寸
元素大小=border+padding+margin+内容宽度
6.2 圆角边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圆角边框</title>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
/* 设置圆角边框 四个属性值按顺时针排列 */
/* border-radius: 20px 10px 50px 30px; */
/* 椭圆 水平/垂直 */
/* border-radius: 10px / 30px; */
/* 圆 圆角=半径 */
/* border-radius: 50%; */
/* 半圆 元素的宽度是高度的2倍,而且圆角半径为元素的高度值 */
/* border-radius: 100px 100px 0 0; */
/* 扇形 元素宽度、高度、圆角半径相同 圆角取值位置不同 */
/* border-radius: 100px 0 0 0; */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
6.3 盒子阴影
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阴影</title>
<style>
div{
width: 100px;
height: 100px;
border: 10px solid red;
/* 阴影:类型(内阴影) x轴位移 y轴位移 模糊半径 颜色 */
box-shadow: inset 10px 10px 50px yellow;
/* 不写类型为外阴影 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
七、浮动(重难点)
7.1 标准文档流
指元素根据块元素或行内元素的特性按从上到下,从左到右的方式自然排列。这也是元素默认的排列方式。
标准文档流组成
- 块级元素:独占一行 h1-h6 ; p ; div ; 列表
- 行内元素:不独占一行 span; a ; img ; strong …
行内元素可以被包含在块级元素中。
7.2 display属性
可以改变块级元素与行级元素
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>浮动</title>
<style>
div{
width:100px;
height:100px;
border:1px solid red;
display: inline; /* 将div设置为行内元素 */
}
span{
width:100px;
height:100px;
border:1px solid red;
display:block; /* 将span设置为块元素 */
}
</style>
</head>
<body>
<div>
div 块元素
</div>
<span>
span 行内元素
</span>
</body>
</html>
7.3 float 属性 浮动
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>浮动</title>
<style>
div {
margin:10px;
padding:5px;
}
#father {
border:1px #000 solid;
}
/* float 浮动 left 左浮动 right 右浮动 none 无浮动*/
.layer01 {
border:1px #F00 dashed;
float: right;
}
.layer02 {
border:1px #00F dashed;
float: right;
}
.layer03 {
border:1px #060 dashed;
float: right;
}
.layer04 {
border:1px #666 dashed;
font-size:12px;
line-height:23px;
float: right;
}
</style>
</head>
<body>
<div id="father">
<div class="layer01"><img src="image/hd.jpg" alt="前端"/></div>
<div class="layer02"><img src="image/qd.jpg" alt="后端"/></div>
<div class="layer03"><img src="image/sjk.jpg" alt="数据库"/></div>
<div class="layer04">
浮动的盒子可以向左浮动,也可以向右浮动,直到它的外边缘碰到包含框或另一个浮动盒子为止。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用,根据需要图片所在的div分别向左浮动、向右浮动,或者不浮动。
</div>
</div>
</body>
</html>
7.4 解决父级边框塌陷
clear
/* clear:right; 右侧不允许有浮动元素
clear:left; 左侧不允许有浮动元素
clear:both; 两侧不允许有浮动元素
clear:none;*/
解决方案:
- 增加父级元素的高度
#father {
border:1px solid #000;
height: 600px;
}
- 增加一个空的div标签,清除浮动
<div class="clear"></div>
.clear{
clear: both;
}
- 使用overflow 属性
在父级元素中增加一个 overfow: hidden;
#father {
overflow: hidden;
}
- 父类添加一个伪类:after (推荐使用)
#father:after{
content: '';
display: block;
clear: both;
}
小结:
-
浮动元素后面加空div
简单,空div会造成HTML代码冗余 -
设置父元素的高度
简单,元素固定高会降低扩展性 -
父级添加overflow属性
简单,下拉列表框的场景不能用 -
父级添加伪类after
写法比上面稍微复杂一点,但是没有副作用,推荐使用
7.5 display和float对比
- display : 方向不可控制
- float :浮动起来的话会脱离标准文档流,所以要解决父级边框塌陷的问题
八、定位网页元素(重难点)
8.1 定位
position属性
static (默认值,没有定位);relative (相对定位) ;
absolute (绝对定位) ; fixed (固定定位)
相对定位
position: relative; 相对于原来的位置,进行指定的偏移。相对定位的话,它任然在标准文档流中,原来的位置会被保留
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>相对定位</title>
<!-- 相对定位
相对于自己原来的位置进行偏移-->
<style>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #666;
padding: 0;
}
#first{
border: 1px dashed #b27530;
background-color: #a13d30;
/* 相对定位 */
position: relative;
top: -20px; /* 向上移 */
left: 20px; /* 向右移 */
}
#second{
border: 1px dashed #255066;
background-color: #255066;
}
#third{
border: 1px dashed #1c6615;
background-color: #1c6699;
position: relative;
bottom: -10px; /* 向下移 */
right: 20px; /* 向左移 */
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
练习
- 使用 <div>和<a>布局页面
- 每个超链接宽度和高度都是100px,背景颜色是粉色,鼠标移上去时变为蓝色
- 使用相对定位改变每个超链接的位置
绝对定位
- 没有父级元素定位的前提下,相对于浏览器定位
- 假设父级元素存在定位,我们通常会相对于父级元素进行偏移
- 在父级元素范围内移动
相对于父级或浏览器的位置,进行指定的偏移,绝对定位的话,它不在标准文档流中,原来的位置不会被保留
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #666;
padding: 0;
/* 父级元素 相对定位 */
position: relative;
}
#first{
border: 1px dashed #b27530;
background-color: #a13d30;
}
#second{
border: 1px dashed #255066;
background-color: #255066;
/* 绝对定位 */
position: absolute;
right: 30px;
top:-10px;
}
#third{
border: 1px dashed #1c6615;
background-color: #1c6699;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
固定定位
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>固定定位</title>
<style>
body{
height: 100px;
}
/* 绝对定位;相对于浏览器 */
div:nth-of-type(1){
width: 100px;
height: 100px;
background: red;
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2){
width: 50px;
height: 50px;
background: yellow;
/* 固定定位 */
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
8.2 z-index
调整元素定位时重叠层的上下位置
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>z-index</title>
<style>
#content{
width: 300px;
padding: 0px;
margin: 0px;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px solid #000;
}
ul,li{
padding: 0px;
margin: 0px;
list-style: none;
}
/* 父级元素相对定位 */
#content ul{
position: relative;
}
.tipText, .tipBg{
position: absolute;
width: 300px;
height: 25px;
top: 120px;
}
.tipText{
color: white;
/* 设置层级 数值大的在上面 */
z-index: 2;
}
.tipBg{
background-color: #000;
/* 设置背景透明度 值为0-1 值越小越透明*/
/* opacity: 0.5; */
}
</style>
</head>
<body>
<div id="content">
<ul>
<li><img src="images/hd.jpg" alt=""/></li>
<li class="tipText">html java mysql</li>
<li class="tipBg" ></li>
<li>2022-11-12</li>
<li>yyds_it_huo</li>
</ul>
</div>
</body>
</html>
九、CSS3制作网页动画
浏览器私有前缀
CSS3是CSS(层叠样式表)技术的升级版本。CSS3完全向后兼容,不必改变现有的设计,浏览器将永远支持CSS2。W3C的CSS3规范仍在开发。但是,许多新的CSS3属性已在现代浏览器使用。
内核 | 前缀 | 浏览器 |
---|---|---|
Gecko内核 | -moz- | 火狐 |
Webkit内核(谷歌) | -webkit- | chrom;360;世界之窗等 |
Trident内核 | -ms- | IE |
Presto内核 | -o- | opera |
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>浏览器私有前缀</title>
<style>
div{
font-size: 100px;
-webkit-text-stroke: 1px #f00;
}
</style>
</head>
<body>
<div>哈哈哈</div>
</body>
</html>
在实际使用中通常将所有前缀写一遍后,标准的写在最后
9.1 CSS3变形
CSS3变形是一些效果的集合 如平移、旋转、缩放、倾斜效果
每个效果都可以称为变形(transform),它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化 。
Transform 2D的属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>transform 的使用</title>
<style>
#box1{
width: 200px;
height: 200px;
margin: 100px;
border: 1px solid blue;
background-color: aqua;
}
#box1:hover{
/* 水平和垂直方向移动函数:translate*/
/* 向右移动 */
/* transform: translate(30px); */
/* 向右下角移动 */
/* transform: translate(30px,30px); */
/* 向上移动 */
/* transform: translate(0px,-10px); */
/* 旋转函数:rotate */
/* 顺时针旋转20度 */
/* transform: rotate(20deg); */
/* 缩放函数:scale */
/* 值为1 大小不变 小于1 缩小 大于1 放大
支持两个参数 水平方向和垂直方向的缩放*/
/* transform: scale(0.5); */
/* 倾斜函数:skew */
/* transform: skew(40deg,30deg); */
}
</style>
</head>
<body>
<div id="box1"></div>
</body>
</html>