-
有效传递页面信息
-
美化网页
-
凸显页面主题
-
提高用户体验
<div>
和 <span>
标签
- HTML
<div>
元素是块级元素,它是可用于组合其他 HTML 元素的容器。
<div>
元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。
如果与 CSS 一同使用,<div>
元素可用于对大的内容块设置样式属性。
<div>
元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table>
元素进行文档布局不是表格的正确用法。<table>
元素的作用是显示表格化的数据。
- HTML
<span>
元素是内联元素,可用作文本的容器。
<span>
元素也没有特定的含义。
当与 CSS 一同使用时,<span>
元素可用于为部分文本设置样式属性。
Java
其实,标签名"span"可以自定义为任何名,但是约定俗成用span标签
3.2字体样式
样例:
故事介绍
《长津湖》是由陈凯歌、徐克、林超贤联合执导,吴京、易烊千玺领衔主演,段奕宏、欧豪特别出演,朱亚文、李晨、胡军、韩东君等主演的抗美援朝电影 ,该片于2021年9月30日在中国大陆上映 。
该片以抗美援朝战争第二次战役中的长津湖战役为背景,讲述了一段波澜壮阔的历史,在极寒严酷环境下,中国人民志愿军东线作战部队凭着钢铁意志和英勇无畏的战斗精神,扭转战场态势,为长津湖战役胜利作出重要贡献的故事 。
常用Font 特性
| 值 | 描述 |
| — | — |
| font-style | 规定字体样式。 |
| font-variant | 规定字体异体。 |
| font-weight | 规定字体粗细。 |
| font-size/line-height | 规定字体尺寸和行高。 |
| font-family | 规定字体系列。 |
3.3文本样式
3.3.1颜色
3.3.1.1文本颜色
color
属性用于设置文本的颜色。颜色由以下值指定:
1、颜色名 - 比如 “red”
2、十六进制值 - 比如 “#ff0000”
3、RGB 值 - 比如 “rgb(255,0,0)”
页面的默认文本颜色是在 body 选择器中定义的。
body {
color: blue;
}
h1 {
color: green;
}
3.3.1.2文本颜色和背景色
在本例中,我们定义了 background-color
属性和 color
属性:
例:
body {
background-color: lightgrey;
color: blue;
}
h1 {
background-color: black;
color: white;
}
3.3.2文本对齐方式
1、text-align
属性用于设置文本的水平对齐方式。
文本可以左对齐或右对齐,或居中对齐。
例:
h1 {
/居中对齐/
text-align: center;
}
h2 {
/左对齐/
text-align: left;
}
h3 {
/右对齐/
text-align: right;
}
当 text-align
属性设置为 “justify” 后,将拉伸每一行,以使每一行具有相等的宽度,并且左右边距是直的(就像在杂志和报纸中):
div {
text-align: justify;
}
2、垂直对齐
vertical-align
属性设置元素的垂直对齐方式。
如,设置文本中图像的垂直对齐方式:
img.top {
vertical-align: top;
}
img.middle {
vertical-align: middle;
}
img.bottom {
vertical-align: bottom;
}
3、首行缩进:
h3 {
/首行缩进/
text-indent: 2em;
}
4、行高:
h3 {
/行高/
line-height: 20px;
}
5、划线:
h1 {
/下划线/
text-decoration: underline;
}
h2 {
/中划线/
text-decoration: line-through;
}
h3 {
/上划线/
text-decoration: overline;
}
3.4阴影
/text-shadow:阴影颜色,水平偏移,垂直偏移,阴影半径/
#price{
text-shadow:#3cc7f5 10px -10px 2px;
}
3.5列表
引例:
全部商品分类
- 图书 音像 数字商品
- 家用电器 手机 数码
- 电脑 办公
- 家居 家装 厨具
- 服饰鞋帽 个护化妆
- 礼品箱包 钟表 珠宝
- 食品饮料 保健食品
默认效果:
现在,我们想更改一下样式
#nav{
width: 300px;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
background: red;
}
ul{
background: #cbc9c9;
}
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 16px;
color: #000;
}
a:hover{
color: rgb(255,80,0);
text-decoration: underline;
}
其中
list-style:设置列表属性
list-style:none;去掉圆点
list-style:circle;空心圆
list-style:decimal;数字
list-style:square;正方形
3.6背景
引例1:
Title 默认是全部平铺的
添加代码: