HTML小白入门基础_5

写在前面

本期的内容标题是应用视觉设计，主要对网页页面进行美化，话不多说，让我们进入正题吧。

正文

第一个内容是实现文本的对齐，我们用到的属性是 text-align，它的属性值有left center right，默认是左对齐。

<style>
	.zhong{
	text-align:center;
	}
	.moren{
	text-align;
	}
</style>
<h2 class="zhong">标题</h2>
<h1 class="moren">blblblblbl</h1>

在文本中，可以通过加粗来实现强调作用，实现强调需要使用 strong 标签。

<p>这里有一段文字，里面有<strong>很粗</strong>的字体</p>

也可以通过添加下划线来使文本变得令人注意，运用的是 u 标签。

<p>这里有一段文字，里面有<u>下划线</u>的字体。</p>

在英文中某些特殊的单词常用斜体，在网页里可以用 em 实现。

<p>这里有一段文字，里面有<em>斜体</em>的文字。</p>

还有一个 s 标签，可以划掉文本。

<p>这里有一段文字，里面有被<s>划掉</s>的文字。</p>

下一个标签的作用是添加一条水平线，是 hr 标签。

<h1>线上面的文字</h1>
<hr>
<h1>线下面的文字</h1>

下一个介绍背景透明度，之前介绍过 rgb 方式表示颜色，现在在 rgb 的基础上加一个 a ，也就是 rgba 。透明度的范围从0~1,0是没有，1是全在。

<style>
  .fcolor{
    background-color:rgba(45,45,45,0.1);
  }
  .scolor{
    background-color:rgba(45,45,45,0.5);
  }
</style>
<h1 class="fcolor">我的透明度高</h1>
<hr>
<h1 class="scolor">我的透明度低</h1>

之前可能介绍过了 font-size 属性，这里在介绍一次，这个是用来更改字体大小的，可以强制更改字体大小，使 h1 的字体大过 h2 的字体。

<style>
	h1{
	font-size:70px;
	}
</style>
<h1>111</h2>
<h2>222</h2>

下面我们创建一个框，并对其添加一个框阴影。使用的属性是 box-shadow，它的赋值顺序是 水平位置 垂直位置 模糊度 延伸宽度 颜色，多个阴影框之间可以使用逗号隔开。

<style>
	.card{
	width: 245px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px 5px;
    padding: 4px;
	}
	#card{
	box-shadow: 0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);
	}
</style>
<div class="card" id="card">
	<ul>
	<li>这是第一个
	<li>这是第二个
	</ul>
</div>

下一个内容是单独使用一个属性来控制透明度，opacity。赋值范围从0到1之间。

<style>
	h1{
	opacity:0.5;
	}
</style>
<h1>我的半透明的</h1>
<br>
<h2>我是不透明的</h2>

下一个内容是将文本内容全部大写或者全部小写或者不做改变。属性名为text-transform，赋值选项如下。
lowercase 全部小写
uppercase 全部大写
capitalize 首字母大写
initial 使用默认值
inherit 使用父元素的价值text-transform
none 使用默认值

<style>
	h1{
	text-transform:lowercase;
	}
	h2{
	text-transform:uppercase;
	}
	h3{
	text-transform:none;
	}
</style>
<h1>xiaoxie</h1>
<br>
<h2>daxie</h2>
<br>
<h3>yuanshi</h3>

之间讲过怎么设置字体大小，下面来介绍调整字体的粗细，使用的是
font-weight 属性；

<style>
	h1{
	font-size:50px;
	}
	h2{
	font-size:50px;
	font-weight:10;
	}
</style>
<h1>看看我</h1>
<br>
<h2>再看看我</h2>

下一个属性用来设置行间距，line-height；

<style>
	.p1{
	line-height:50px;
	}
	.p2{
	}
</style>
<p class="p1">这是乱打的一串文字把收不到卡舍不得空间爱上你的看见爱上布狄卡斯巴达克节哀顺变的框架萨达纳睡觉了</p>
<br>
<p class="p2">这是乱打的一串文字把收不到卡舍不得空间爱上你的看见爱上布狄卡斯巴达克节哀顺变的框架萨达纳睡觉了</p>

下一个内容实现的是当鼠标放在一个带有超链接的文本上使之变色，使用的是伪类，及在原始的类之上加 ：hover；

<style>
	a{
	color:black;
	}
	a:hover{
	color:red;
	}
</style>
<a href=#>点这个变色</a>

HTML有自己的布局方式但使用CSS可以覆盖这种默认布局。使用下面这种格式可以在不改变页面其他属性的前提下更改单独的内容。

<style>
	p{
	  position: relative;
	  top: 50px;
	}
</style>
<p>看我在线上吗</p>
<hr>

正常来说应该按照标签出现的顺序来出现，现在被改变了，p 标签的内容显示在了线之后。出了top还有left right botton三个属性。

还有一种是将标签固定在相对于上一个标签的固定位置，这种会删除原标签将其固定在一个位置，出现重叠的话会显示在原页面之上。

<style>
	#h11{
	position:absolute;
	top:40px;
	right:30px;
	}
</style>
<h1>我是标志标签</h1>
<h1 id="h11">我是被改变的标签</h1>

当然也可以将标签固定在一个相对屏幕相对静止的地方，也就是不论怎么拖拉页面，它始终在那一个固定的位置。

<style>
	.static{
	position:fixed;
	top:20px;
	right:20px;
	}
</style>
<from action="#" class="static">
Input:
<input type="text">
<input type="submit" value="提交">
</form>

这个输入框是不会根据页面变化而改变位置的。

结语

本期内容到这里就结束了，本章节后半部分内容之后更新，笔者也是第一次学习，如若发现错误，还望大佬在评论批评指正。