CSS笔记02
美化网页元素
为什么要美化网页
- 目的：
- 有效的传递页面信息
- 美化网页、页面漂亮、才能吸引用户
- 突显页面的主题
- 提高用户的体验
span标签
-
span标签是短语内容的通用行内容器，它本身并没有任何特殊语义。 -
通常我们使用
span标签来把我们想要重点要突出的行内内容套起来，再通过使用类或者Id等选择器给其添加我们想要实现的某些样式。 -
span标签与div标签很相似，但div是一个块元素，而span则是一个行内元素 。 -
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
/* id选择器 */
#test {
font-size: 50px;
}
</style>
<body>
<!-- span标签的使用 -->
欢迎学习<span id="test">Java</span>
</body>
</html>
- 查看网页效果：
字体样式
- 常用的修饰字体样式的 CSS 属性：
- 字体：
font-family - 字体大小：
font-size - 字体粗细：
font-weight
- 字体：
- 下面我们通过写代码的方式来学习如何美化字体样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!-- 字体样式
font-family: 字体(中英文的字体都可以定义，还能定义字体风格)
font-size: 字体大小
font-weight: 字体粗细
color: 字体颜色
-->
<style>
body {
font-family: "Arial Black", "楷体", serif;
color: chocolate;
}
h1 {
font-size: 50px;
}
.p1 {
font-weight: bold;
}
</style>
<body>
<h1>作品简介：</h1>
<p class="p1">
《肖申克的救赎》是美国作家斯蒂芬·埃德温·金的中篇小说，也是其代表作。收录于小说合集《四季奇谭》中，副标题为“春天的希望”。
</p>
<p>
该作讲述银行家安迪，被当作杀害妻子的凶手送上法庭。妻子的不忠、律师的奸诈、法官的误判、狱警的凶暴、典狱长的贪心与卑鄙，将正处在而立之年的安迪一下子从人生的巅峰推向了人间地狱。安迪在狱中在忍受了多年的磨难之后，终于在一个雷电交加的夜晚，越狱而出，重获自由。当翌日典狱长打开安迪的牢门时，发现他已不翼而飞，预感到末日来临的典狱长在检察人员收到安迪投寄的罪证之前，畏罪自杀。
</p>
<p>
监狱作为故事背景带有寓意性，以安迪、典狱长、狱警和囚犯们所构成的这个世界，本身就是错谬、混乱的。安迪是一个无罪的好人，却被关进监狱接受改造。肖申克的几任典狱长没有一个是清白的，但他们却在那里颐指气使，教化训导着无罪的安迪。在这样一个错谬、黑白颠倒的世界，现代派作家笔下的人物通常会自甘堕落或精神崩溃，而斯蒂芬·金塑造的安迪却像一只浴火后重生的火凤凰，健康自信地飞出了炼狱的火坑。这样的结果同样寄托着作者要使荒原上的人们坚守善良人性并“振奋”起来的创作主旨。
</p>
<h1>英文诗歌：</h1>
<p>
I offer you lean streets, desperate sunsets, the moon of the jagged suburbs.
</p>
<p>
I offer you the bitterness of a man who has looked long and long at the lonely moon.
</p>
<p>
I offer you my ancestors, my dead men, the ghosts that living men have honoured in marble: my father's father killed in the frontier of Buenos Aires, two bullets through his lungs, bearded and dead, wrapped by his soldiers in the hide of a cow;
</p>
<p>
my mother's grandfather -just twenty four- heading a charge of three hundred men in Perú, now ghosts on vanished horses. I offer you whatever insight my books may hold. whatever manliness or humour my life.
</p>
</body>
</html>
- 查看网页效果：
- 补充：
font- 可以用来作为以上 CSS 属性的简写
- 在实际的网页设计开发中，我们通常不会像上面的代码中那样将字体样式写得那么分散，我们通常直接使用
font一次定义多个字体样式的属性，如下面代码所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
font: oblique bold 20px "楷体"; /* 风格 粗细 大小 字体 */
}
</style>
</head>
<body>
<p>
《肖申克的救赎》是美国作家斯蒂芬·埃德温·金的中篇小说，也是其代表作。收录于小说合集《四季奇谭》中，副标题为“春天的希望”。
</p>
<p>
该作讲述银行家安迪，被当作杀害妻子的凶手送上法庭。妻子的不忠、律师的奸诈、法官的误判、狱警的凶暴、典狱长的贪心与卑鄙，将正处在而立之年的安迪一下子从人生的巅峰推向了人间地狱。安迪在狱中在忍受了多年的磨难之后，终于在一个雷电交加的夜晚，越狱而出，重获自由。当翌日典狱长打开安迪的牢门时，发现他已不翼而飞，预感到末日来临的典狱长在检察人员收到安迪投寄的罪证之前，畏罪自杀。
</p>
<p>
监狱作为故事背景带有寓意性，以安迪、典狱长、狱警和囚犯们所构成的这个世界，本身就是错谬、混乱的。安迪是一个无罪的好人，却被关进监狱接受改造。肖申克的几任典狱长没有一个是清白的，但他们却在那里颐指气使，教化训导着无罪的安迪。在这样一个错谬、黑白颠倒的世界，现代派作家笔下的人物通常会自甘堕落或精神崩溃，而斯蒂芬·金塑造的安迪却像一只浴火后重生的火凤凰，健康自信地飞出了炼狱的火坑。这样的结果同样寄托着作者要使荒原上的人们坚守善良人性并“振奋”起来的创作主旨。
</p>
</body>
</html>
- 查看网页效果：
文本样式
-
常用的修饰文本样式的 CSS 属性：
- 文本颜色：
color - 文本对齐方式：
text-align - 段落首行缩进：
text-indent - 文本装饰性线条：
text-decoration
- 文本颜色：
-
下面我们通过写代码的方式来学习如何美化文本样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
颜色 - color:
1.直接用 单词 表示颜色，例如 color: blue;
2.使用 #号 + 十六进制符号(0 ~ F) 或者 rgb()函数 来表示RGB颜色，例如 color: #0000FF; / color: rgb(0,0,255)
3.补充: 还可以使用rgba()函数来给我们的文本颜色加上透明度
对齐方式 - text-align:
center/left/right -- 居中/居左/居右
段落首行缩进 - text-indent:
em 与 px -- 1em表示一个字符的宽度，而1px表示一个像素格的宽度
行高 - line-height:
当 行高 与 块 的高度相同时，就可以实现上下居中
装饰性线条 - text-decoration:
underline/line-through/overline/none -- 下划线/中划线/上划线/去除装饰性线条
-->
<style>
h1 {
color: rgba(0,0,255,50%);
text-align: center;
}
.p1 {
text-indent: 2em;
}
.p3 {
background: skyblue;
height: 150px;
line-height: 150px;
}
.li1 {
text-decoration: underline;
}
.li2 {
text-decoration: line-through;
}
.li3 {
text-decoration: overline;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<!-- a标签默认样式是有下划线的 -->
<a href="">abc123456</a>
<p class="li1">abc123456</p>
<p class="li2">abc123456</p>
<p class="li3">abc123456</p>
<h1>作品简介：</h1>
<p class="p1">
《肖申克的救赎》是美国作家斯蒂芬·埃德温·金的中篇小说，也是其代表作。收录于小说合集《四季奇谭》中，副标题为“春天的希望”。
</p>
<p>
该作讲述银行家安迪，被当作杀害妻子的凶手送上法庭。妻子的不忠、律师的奸诈、法官的误判、狱警的凶暴、典狱长的贪心与卑鄙，将正处在而立之年的安迪一下子从人生的巅峰推向了人间地狱。安迪在狱中在忍受了多年的磨难之后，终于在一个雷电交加的夜晚，越狱而出，重获自由。当翌日典狱长打开安迪的牢门时，发现他已不翼而飞，预感到末日来临的典狱长在检察人员收到安迪投寄的罪证之前，畏罪自杀。
</p>
<p class="p3">
监狱作为故事背景带有寓意性，以安迪、典狱长、狱警和囚犯们所构成的这个世界，本身就是错谬、混乱的。安迪是一个无罪的好人，却被关进监狱接受改造。肖申克的几任典狱长没有一个是清白的，但他们却在那里颐指气使，教化训导着无罪的安迪。在这样一个错谬、黑白颠倒的世界，现代派作家笔下的人物通常会自甘堕落或精神崩溃，而斯蒂芬·金塑造的安迪却像一只浴火后重生的火凤凰，健康自信地飞出了炼狱的火坑。这样的结果同样寄托着作者要使荒原上的人们坚守善良人性并“振奋”起来的创作主旨。
</p>
</body>
</html>
- 查看网页效果：
- 补充：垂直居中对齐行内元素（文本、图片等）：
- 首先我们准备一张图片：
cat.jpg
- 然后我们让与该图片处在同一行的文字与它垂直居中对齐：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!-- 垂直对齐行内的图片或者文字 - vertical-align: middle; -->
<style>
img,span {
vertical-align: middle;
}
</style>
<body>
<p>
<img src="images/cat.png" alt="cat">
<span>这是一只可爱的小猫</span>
</p>
</body>
</html>
- 查看网页效果：
超链接伪类
-
下面是一些超链接伪类：
:hover- 用户将光标（鼠标指针）悬停在元素上时生效【常用】:active- 用户使用鼠标按下按键到松开按键之间这段时间内生效【不常用】:linK- 元素尚未被用户访问时生效【不常用，不做演示】:visited- 在用户访问链接后生效【不常用，不做演示】
-
下面我们通过写代码的方式来学习如何使用超链接伪类：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
a {
text-decoration: none;
color: black; /* a标签中默认的文本颜色为黑色 */
font-size: 17px; /* a标签中默认的文本大小为17px */
}
/* a标签的伪类 */
/* :hover -- 鼠标悬停在a标签中的文本上时的状态 */
a:hover {
color: orange; /* 鼠标悬停在a标签中的文本上时字体变为橘色 */
font-size: 20px; /* 鼠标悬停在a标签中的文本上时字体放大为20px */
}
/* :active -- 鼠标按住a标签中的文本且未释放时的状态 */
a:active {
color: red; /* 鼠标按住a标签中的文本且未释放时字体变为红色 */
}
</style>
<body>
<a href="#">
<img src="images/book.jpg" alt="book">
</a>
<p>
<a href="#">码出高效：Java开发手册</a>
</p>
<p>
<a href="#">作者：杨冠宝 / 高海慧</a>
</p>
<p>
￥99.0
</p>
</body>
</html>
- 查看默认网页效果：
- 鼠标悬停在
a标签中的文本上时的网页效果：
- 鼠标按住
a标签中的文本且未释放时时的网页效果：
文本的阴影效果【拓展】
-
为文字添加阴影：
text-shadow -
下面我们通过写代码的方式来学习如何实现文本的阴影效果：
- 给上一个网页中的文本
￥99.0添加一个阴影效果：
- 给上一个网页中的文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
a {
text-decoration: none;
color: black;
font-size: 17px;
}
a:hover {
color: orange;
font-size: 20px;
}
a:active {
color: red;
}
/* 文本的阴影效果 -- text-shadow: 水平偏移量 垂直偏移量 阴影模糊半径 阴影颜色 */
#price {
text-shadow: 3px 3px 3px red;
}
</style>
<body>
<a href="#">
<img src="images/book.jpg" alt="book">
</a>
<p>
<a href="#">码出高效：Java开发手册</a>
</p>
<p>
<a href="#">作者：杨冠宝 / 高海慧</a>
</p>
<p id="price">
￥99.0
</p>
</body>
</html>
- 查看网页效果：
- 以上面的网页为例，关于阴影的偏移量和模糊半径的理解可以参照下图：
列表样式练习
- 下面是一个购物网站首页侧边的列表部分的 HTML 代码：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2 class="title">全部商品分类</h2>
<ul>
<li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a></li>
<li><a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a></li>
<li><a href="#">电脑</a> <a href="#">办公</a></li>
<li><a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a></li>
<li><a href="#">服饰鞋帽</a> <a href="#">个性化妆</a></li>
<li><a href="#">礼品箱包</a> <a href="#">钟表</a> <a href="#">珠宝</a></li>
<li><a href="#">食品饮料</a> <a href="#">保健食品</a></li>
<li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a></li>
</ul>
</body>
</html>
- 查看默认网页效果：
- 下面我们运用先前学习的知识来给上面的页面添加一些样式，让他看起来更像一个真正的购物网站首页侧边的列表：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<!-- div标签定义网页中的一个分隔区块或者一个区域部分 -->
<!-- div标签常用于组合块级元素，以便通过CSS来对这些元素进行格式化 -->
<div id="nav">
<h2 class="title">全部商品分类</h2>
<ul>
<li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a></li>
<li><a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a></li>
<li><a href="#">电脑</a> <a href="#">办公</a></li>
<li><a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a></li>
<li><a href="#">服饰鞋帽</a> <a href="#">个性化妆</a></li>
<li><a href="#">礼品箱包</a> <a href="#">钟表</a> <a href="#">珠宝</a></li>
<li><a href="#">食品饮料</a> <a href="#">保健食品</a></li>
<li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a></li>
</ul>
</div>
</body>
</html>
style.css
#nav {
width: 300px;
background: lightgrey;
}
.title {
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
background: darkorange;
}
/*
list-style:
none - 去除列表元素的标记(比如圆点、符号、或者自定义计数器样式等)
disc - 实心圆点(li标签默认)
circle - 空心圆点
decimal - 自定义计数器(1. 2. 3. ...)
square - 实心正方形
*/
ul li {
height: 30px;
list-style: none; /* 去除列表前的实心圆点 */
text-indent: 1em;
}
a {
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover {
color: darkorange;
text-decoration: underline;
}
- 查看此时的网页效果：
背景
-
背景颜色：
- 设置背景颜色：
background-color
- 设置背景颜色：
-
背景图片：
- 设置背景图片：
background-image - 设置背景图片的重复方式：
background-repeat
- 设置背景图片：
-
补充：以上三种设置背景的 CSS 属性都可以直接用
background简写 -
示例：
-
首先准备一张图片：
dog.jpg
- 然后我们编写一个网页，练习如何将上图设置成网页中块元素的背景图片，以及如何设置我们想要的图片重复方式：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 1000px;
height: 700px;
border: 2px solid red;
/* 背景图片默认是重复铺满整个div的 - background-repeat: repeat */
background-image: url("images/dog.jpg");
}
.div2 {
/* 设置背景图片不重复 */
background-repeat: no-repeat;
}
.div3 {
/* 设置背景图片在水平方向上重复 */
background-repeat: repeat-x;
}
.div4 {
/* 设置背景图片在垂直方向上重复 */
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>
</html>
- 查看网页效果：
列表样式练习【补充】
- 学习了如何设置背景图片之后，下面我们继续完善我们之前写的列表颜色练习中的页面，给我们的列表上添加箭头图标：
- 首先准备两张透明背景的箭头的图片：
- 然后我们补充之前列表样式练习的 CSS 代码：
style.css
#nav {
width: 300px;
background: lightgrey;
}
.title {
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
/* background: 背景颜色 背景图片地址 背景图片位置(x y) 背景图片重复方式 */
background: darkorange url("../images/DownArrow.png") 265px 12px no-repeat;
}
ul li {
height: 30px;
list-style: none;
text-indent: 1em;
/* background-image: 背景图片地址 */
background-image: url("../images/RightArrow.png");
/* background-repeat: 背景图片重复方式 */
background-repeat: no-repeat;
/* background-position: 背景图片位置(x y) */
background-position: 230px 2px;
}
a {
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover {
color: darkorange;
text-decoration: underline;
}
- 查看网页效果：
渐变【拓展】
- 渐变效果的实现我们仅作为了解即可，这里推荐一个开源网站：Grabient 。此网站提供了多样且免费的 CSS 渐变效果，我们可以直接复制这个网站上的 CSS 代码到我们自己的网站上以达到我们想要实现的渐变效果：
- 示例：
- 在 Grabient 上选择我们想要实现的渐变效果，复制 CSS 代码：
- 粘贴到我们自己网页的代码中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 径向渐变，圆形渐变 -->
<style>
body {
/*background-color: #0093E9;*/
background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}
</style>
</head>
<body>
</body>
</html>
- 查看网页效果：
