HTML---CSS美化网页元素

文章目录

前言
一、pandas是什么？
二、使用步骤
- 1.引入库
- 2.读入数据
总结

一.div 标签：

<div>是HTML中的一个常用标签，用于定义HTML文档中的一个区块（或一个容器）。它可以包含其他HTML元素，如文本、图像、表格、链接等。

语法：

<div>这是一个div区块</div>
#可以通过CSS样式为<div>标签设置宽度、高度、背景色、边框等样式属性，从而美化和定位页面中的内容。
<div style="width: 200px; height: 200px; background-color: red; border: 1px solid black;">这是一个红色的div区块</div>

案例

<body><div><h1>京东商城的全部商品分类</h1><h2>图书 音响 电子书刊</h2><p><span>电子书刊</span>电子书 网络原创 数字杂志<br/><span>音响</span>音乐 影视 教育视频<br/><span>经管励志</span>经济 管理 励志<br/></p><h2>家用电器</h2><p> <span>大家电</span>平板 空调 冰箱<br/><span>生活电器</span>净化器 电风扇 饮水机<br/></p>
</body>

二.字体样式

font-family

此处演示第一种，剩余几种参考上图。

语法：

font-family: font1, font2, font3,...;

案例：

<head><meta charset="utf-8"><title></title><style> <!--匹配所有body内元素应用CSS样式-->body{font-family:"华文行楷";}</style>
</head>

font-style

语法：

font-style：属性值

font-style中的属性值
normal	使用默认的字体样式
italic	使用斜体字体样式。
oblique	使用倾斜字体样式。

font-weight

font-weight属性值
normal	默认值，表示正常粗细
bold	表示粗体
bolder	比normal更粗的粗体。
ighter	比normal更细的粗体

三.文本样式

语法：

color：CSS样式;
text-align：CSS样式;
text-indent:20px;
line-height:25px;
text-decoration:CSS样式；

案例：

<style type="text/css">h1{color: red;font: oblique bold 20px "华为楷体";text-align: center;/**设置文本居中对齐*/}p{text-align: left;text-indent: 2em;/**设置文本首行缩进2字符**/text-decoration: underline;/**添加下划线**/line-height: 50px;/**设置行高**/}
</style>

text-align

text-align 属性值
left	左对齐文本
right	右对齐文本
center	居中对齐文本
justify	两端对齐文本，行末不留空。
initial	将text-align属性重置为默认值。
inherit	继承父元素的text-align属性值

text-ident

text-ident 属性值
像素值（px）	正数表示向右缩进，负数表示向左缩进。
百分比（%）	相对于包含块的宽度进行缩进，正数表示向右缩进，负数表示向左缩进。
em	相对于当前元素的字体大小进行缩进，正数表示向右缩进，负数表示向左缩进。
rem	相对于根元素的字体大小进行缩进，正数表示向右缩进，负数表示向左缩进。
浮点数(-10px)	相对于包含块的宽度进行缩进，正数表示向右缩进，负数表示向左缩进。
inherit	继承父元素的text-indent属性值。

text-decoration:

text-decoration:
underline	设置下划线
none	移除下划线

四.垂直对齐方式

在HTML中，垂直对齐是指将元素的内容在垂直方向上对齐到指定的位置

语法：

<style type="text/css">/**需要同时设置图片和文本居中**/img,span{vertical-align: middle;}/**文本需要图片作为参照物**/
</style><p><img src="index1.png" alt="高管团队" width="176px" height="108px"><span>电子书刊</span>电子书 网络原创 数字杂志<br/>