小白web进阶(五)

最新推荐文章于 2024-05-15 01:16:41 发布

王子老师

最新推荐文章于 2024-05-15 01:16:41 发布

阅读量80

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/qq_37304462/article/details/100531257

版权

Web 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>9.04</title>

	<style type="text/css">
		/*<!-- css样式:选择符和声明构成
		声明:属性名和属性值; -->*/
		p{

			font-size:20px;
			color:red;
			font-weight:bold;
	</style>
		}

	<style type="text/css">
		span{
			color:black;
			font-size: 40px;
		}
	</style>

</head>
<body>
	<p>王子老师的个人展示</p>
	<textarea rows="10" cols="40">王子是一个机灵、陶气的孩子。他胖乎乎的脸上，长着一对调皮的大眼睛，眼帘忽闪忽闪的，那两颗像黑宝石似的大眼珠只要一转，鬼点子就来了。在他那黝黑的脸上，不论是那鼓鼓的腮帮，还是那薄薄的嘴唇，或者那微微翘起的小鼻尖，都使你感到滑稽逗人。</textarea>
	<form>
		<p>
			<label for="username">用户名:</label>
			<input type="text" id="username">
		</p>

		<p>
			<label for="password">密码:</label>
			<input type="password" id="password">
		</p>

		<input type="reset",value="重置">
	</form>

	<button>重置按钮</button>

	<div>wangzi</div>
	<div>wangzi1</div>
	<div>wangzi2</div>

	<p style="font-size:30px;color: red;front-wseight:bold;">

	王子老师来了,赶紧迎接
	</p>
	<p>
		全体人员集合,准备迎接王子首长!
	</p>
	<p>
		报告<span style="color: orange;font-size:50px;">王子首长</span>,全体人员集合完毕<span style="font-size: 25px;color: blue">请指示</span>!!!
	</p>
	<p>
		亲爱的<span>同志们</span>,你们辛苦了<span >王子看到了</span>!!!
	</p>

</body>
</html>

<!--

在这里插入图片描述

 css的三种引入方式:
    第一种是内联式 报告<span style="color: orange;font-size:50px;">王子首长</span>,全体人员集合完毕<span style="font-size: 25px;color: blue">请指示</span>!!!
    
    第二种是嵌入式  亲爱的<span>同志们</span>,你们辛苦了<span >王子看到了</span>!!!
    
    第三种是外部式 head 中添加 link

    <head>
    	<title>外部式</title>
    	<link rel="stylesheet" type="text/css" href="index.css">
    </head>

    下面是外部式的写法
    p{
    	color: blue;
    	font-size: 30px;
    }

王子老师

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小白web进阶(五)

<!DOCTYPE html><html><head> <title>9.04</title> <style type="text/css"> /**/ p{ font-size:20px; color:red...
复制链接

扫一扫