010-HTML-样式

最新推荐文章于 2025-06-04 22:50:20 发布
天又热了
最新推荐文章于 2025-06-04 22:50:20 发布
阅读量136
点赞数
分类专栏： HTML 文章标签： html css css3
本文链接：https://blog.youkuaiyun.com/weixin_43404791/article/details/122864252
版权
HTML 专栏收录该内容
19 篇文章
订阅专栏
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/myStyle.css" type="text/css" />
		<style>
			#div1{
				opacity: 0.5;
				position: absolute;
				left: 50px;
				width: 300px;
				height: 150px;
				background-color: #40B3DF;
			}
			#div2{
				font-family: verdana;
				padding: 20px;
				border-radius: 10px;
				border: 10px solid #EE872A;
			}
			#div3{
				opacity: 0.3;
				position: absolute;
				left: 120px;
				width: 100px;
				height: 200px;
				background-color: #8AC007;
			}
			#div4{
				letter-spacing: 12px;
				
			}
			#div5{
				color: #40B3DF;
			}
			#span1{
				background-color: #B4009E;
				color: #ffffff;
			}
			#div6{
				color: #000000;
			}
			
			#a1{
				text-decoration: none;
			}
			
		</style>
	</head>
	<!--
	HTML样式-CSS
		css(Cascading Style Sheets)用于渲染HTML元素标签的样式
	尝试一下-实例
		HTML使用样式
			本实例演示如何用添加到<he'a'd>部分的样式信息对HTML进行格式化
			h1{
				color: red;
			}
			p{
				color: blue;
			}
		本实例演示如何使用样式属性做一个没有下划线的链接
			如何使用style属性制作一个没有下划线的链接
			#a1{
				text-decoration: none;
			}
		链接到一个外部样式表
			本实例演示如何链接到一个外部样式表
	如何使用CSS
		CSS是在HTML4开始使用的,是为了更好的渲染HTML元素而引入的
		CSS可以通过以下方式添加奥HTML中
		- 内联样式-在HTML元素中使用"style"属性
		- 内部样式表-在HTML文档头部<head>区域使用<style>元素来包含CSS
		- 外部引用-使用外部CSS文件
		最好的方式是通过外部引用CSS文件
		在本站的HTML教程中我们使用了内联CSS样式来介绍实例,
		这是为了简化例子,也使得你能够更容易地在线编辑代码并在线运行实例
	内联样式
		当特殊地样式需要应用到个别地元素时,
		就可以使用内联样式,使用内联样式的方法是在相关的标签中使用样式属性.
		样式属性可以包含任何CSS属性.以下实例显示出如何改变段落的颜色和左外边距
		<p style="color:blue;margin-left:20px;">这是一个段落</p>
	HTML样式实例-背景颜色
		<h2 style="background-color: red;">这是一个标题</h2>
		<p style="background-color: green;">这是一个段落</p>
	HTML样式实例-字体,字体颜色,字体大小
		我们可以使用font-family(字体),color(颜色),和font-size(字体大小)属性来定义字体的样式
		而不是使用<font>标签
		实例:
		<h1 style="font-family: verdana;">这是一个标题</h1>
		<p style="font-family: arial; color: red;font-size: 20px;">一个段落</p>
	HTML样式实例-文本对齐方式
		使用text-align(文字对齐)属性指定文本的水平与垂直对齐方式:
		<h1 style="text-align: center;">居中对齐的标题</h1>
		文本对齐属性text-align取代了旧标签<center>
	内部样式表
		当单个文件需要特别样式时,就可以使用内部样式表,
		你可以在<head>标签定义内部样式表
		<style>
			#div1{
				opacity: 0.5;
				position: absolute;
				left: 50px;
				width: 300px;
				height: 150px;
				background-color: #40B3DF;
			}
		</style>
	外部样式表
		当样式需要被应用到很多页面的时候,外部样式表将是理想的选择,
		使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观
		<head>
			<link rel="stylesheet" type="text/css" href="myStyle.css">
		</head>
	HTML样式标签
		<style>定义文本样式
		<link>定义资源引用地址
	已经弃用标签和属性
		不建议使用的标签: <font>,<center>,<strike>
		不建议使用的属性:color和bgcolor
	-->
	<body style="background-color: yellow;">
		<div id="div1"></div>
		<div id="div2">
		<div id="div3"></div>
		<h3>Look! Styles and Colors</h3>
		<div id="div4">Manipulate Text</div>
		<div id="div5">Colors
			<span id="span1">Boxes</span>
		</div>
		<div id="div6">and more....</div>
		</div>
		<h1>这是一个标题</h1>
		<p>这是一个段落</p>
		<a id = "a1" href="https://www.runoob.com" target="_blank"></a>
		<h1>我使用了外部样式文件来格式化文本</h1>
		<p>我也是!</p>
		<h2 style="background-color: red;">这是一个标题</h2>
		<p style="background-color: green;">这是一个段落</p>
		<h1 style="font-family: verdana;">这是一个标题</h1>
		<p style="font-family: arial; color: red;font-size: 20px;">一个段落</p>
		<h1 style="text-align: center;">居中对齐的标题</h1>
	</body>
</html>