HTML---CSS美化网页元素

文章目录

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

 一.div 标签：

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

语法： 

这是一个div区块
#可以通过CSS样式为
标签设置宽度、高度、背景色、边框等样式属性，从而美化和定位页面中的内容。
这是一个红色的div区块

案例 

	

		
京东商城的全部商品分类
		
图书 音响 电子书刊
		
电子书刊电子书 网络原创 数字杂志

			音响音乐 影视 教育视频

			经管励志经济 管理 励志

		
		
家用电器
		
 大家电平板 空调 冰箱

			生活电器净化器 电风扇 饮水机

		

 二.字体样式

font-family 

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

语法：

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

案例：

 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样式；

案例： 

 

 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中，垂直对齐是指将元素的内容在垂直方向上对齐到指定的位置

 语法：

				电子书刊电子书 网络原创 数字杂志

五.文本阴影

语法：

text-shadow:h-shadow v-shadow blur color;(属性值)

text-shadow: 属性值

h-shadow	水平阴影的位置。可以使用负值表示向左移动阴影，正值表示向右移动阴影。
v-shadow	垂直阴影的位置。可以使用负值表示向上移动阴影，正值表示向下移动阴影。
blur	可选项，表示模糊半径。可以为0，表示无模糊效果。
color	可选项，表示阴影的颜色。可以使用颜色的名称、RGB值或十六进制值。

 案例：

    

    
html
	

六.超链接伪类 

 HTML中的超文本伪类是用于为链接添加特殊效果或样式的伪类。

超链接伪类的常用样式

hover	表示鼠标悬停在链接上时的状态，示例：a:hover { color: red; }
active	表示正在点击链接时的状态，示例:a:active { color: green;}

 hover

语法：

a:hover {#CSS样式 }

案例： 

    

    
html
	

• 鼠标不在超链接上的样式

 

•  鼠标在超链接上的样式

七.列表样式 

 语法：

list-style：属性值

 案例：

八.网页背景样式

 背景颜色

 案例：

    
body>
	
/**定义一个HTML边框**/

 背景图像

 案例：

 九.CSS渐变

 语法：

background: linear-gradient(direction, color-stop1, color-stop2, ...);

案例：

十：练习 
 

---

总结