HTML---CSS美化网页元素

 一.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/>


总结

相关推荐

  1. html知识】html中常用的表单元素+css格式美化

    2023-12-19 10:00:07       32 阅读
  2. 编程笔记 html5&css&js 053 CSS元素

    2023-12-19 10:00:07       52 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-19 10:00:07       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-19 10:00:07       106 阅读
  3. 在Django里面运行非项目文件

    2023-12-19 10:00:07       87 阅读
  4. Python语言-面向对象

    2023-12-19 10:00:07       96 阅读

热门阅读

  1. 怎么有效防护服务器被入侵

    2023-12-19 10:00:07       53 阅读
  2. 第二百一十四回

    2023-12-19 10:00:07       58 阅读
  3. React中渲染html结构---dangerouslySetInnerHTML

    2023-12-19 10:00:07       70 阅读
  4. Linux中命令添加-r的作用

    2023-12-19 10:00:07       66 阅读
  5. 理解并实现C语言中的strcpy函数

    2023-12-19 10:00:07       59 阅读
  6. Docker容器与JVM比较

    2023-12-19 10:00:07       77 阅读
  7. 华为数通试题

    2023-12-19 10:00:07       51 阅读
  8. LeetCode算法练习top100:(9)栈和堆

    2023-12-19 10:00:07       59 阅读
  9. 【无标题】

    2023-12-19 10:00:07       54 阅读
  10. 高德地图路线规划途径点vue3

    2023-12-19 10:00:07       67 阅读
  11. Flink 数据类型 & TypeInformation信息

    2023-12-19 10:00:07       54 阅读