HTML-CSS:vertical-align属性

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML-CSS:vertical-align属性相关的知识,希望对你有一定的参考价值。

参考技术A vertical-align是什么?
设置元素的垂直对齐方式。

注意点:
text-align是设置给需要对齐元素的父元素,
vertical-align是设置给需要对齐的那个元素本身,
vertical-align只对行内元素有效。

/*默认情况下图片和一行文字的基线对齐,
基线就是一行文字中最短那个文字的底部*/
vertrical-align:baseline;

/*图片和父元素的顶部对齐*/
vertrical-align:top;

/*图片和父元素的底部对齐*/
vertrical-align:bottom;

/*图片和一行文字的顶部对齐*/

vertrical-align:text-top;

/*图片和一行文字的底部对齐*/

vertrical-align:text-bottom;

HTML-CSS样式

HTML-CSS样式说明


  • 我们已经可以使用简单的HTML代码创建我们的网页了,但我们想要显示一些更有特色和吸引力的东西。我们可以使用CSS(级联样式表)属性来设置网页样式。

  • CSS用于在由HTML元素组成的网页中应用样式。它可以深入刻画网页的外观。

  • CSS提供了各种样式属性,例如背景颜色,填充,边距,边框颜色等,以为网页设置样式。



使用CSS的三种方法


要将CSS与HTML文档一起使用,有以下三种方法:


  • 内联CSS:使用HTML元素中的style属性定义CSS。

  • 内部或嵌入CSS:使用<head>部分中的<style>标签定义CSS。

  • 外部CSS:在一个单独的.css文件中定义所有CSS属性,然后使用<link>标签将该文件包含在HTML文件中。



CSS内联样式


  • 内联CSS用于将CSS应用于单个元素,它可以在每个元素中应用不同的样式。

  • 使用内联CSS,您需要在HTML元素内应用style属性。我们可以根据需要使用任意多个属性,但是每个属性都应以分号(;)分隔。

  • 当特殊的样式需要应用到个别元素时,就可以使用内联样式。以下实例显示出如何改变段落的颜色和左外边距。


<p style="color:blue;margin-left:20px;">这是一个段落。</p>


效果展示:


这是一个段落。



HTML样式实例 – 背景颜色


背景色属性(background-color)定义一个元素的背景颜色:


<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>


效果展示:


这是一个标题

这是一个段落。


早期背景色属性(background-color)是使用 bgcolor 属性定义。


点击下方“阅读原文”可亲试效果



HTML 样式实例 – 字体颜色和大小


我们可以使用font-family(字体),color(颜色),和font-size(字体大小)属性来定义字体的样式:


<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>


效果展示:

一个标题

一个段落。


点击下方“阅读原文”可亲试效果


现在通常使用font-family(字体),color(颜色),和font-size(字体大小)属性来定义文本样式,而不是使用<font>标签。



HTML 样式实例 – 文本对齐方式


使用 text-align(文字对齐)属性指定文本的水平与垂直对齐方式:


<h1 style="text-align:center;">居中对齐的标题</h1> <p>这是一个段落。</p>


效果展示:

居中对齐的标题

这是一个段落。


点击下方“阅读原文”可亲试效果



CSS内部样式表


内部样式表在HTML文档的<head>部分定义网页的CSS属性,使用内部CSS,我们可以使用class和id属性。


我们可以使用内部CSS为单个HTML页面定义样式。


<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>



CSS外部样式表


外部CSS包含一个单独的CSS文件,该文件包含使用类名称,ID名称,标签名称等样式代码。我们可以通过使用<link>标签将其包含在HTML文件中,从而在任何HTML文件中使用此CSS文件。


如果我们有一个应用程序有多个HTML页面,并且使用相似的CSS,则可以使用外部CSS。


需要创建两个文件以应用外部CSS:


  • 首先,创建一个HTML文件

  • 创建一个CSS文件并使用.css扩展名保存(此文件仅包含样式代码。)

  • 使用HTML文档标题中的<link>标签将HTML文件链接到HTML文件中。


<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>



HTML 样式标签


标签 描述
<style> 定义文本样式
<link> 定义资源引用地址

已弃用的标签和属性


在HTML 4, 原来支持定义HTML元素样式的标签和属性已被弃用。这些标签将不支持新版本的HTML标签。


不建议使用的标签有: <font>, <center>, <strike>


不建议使用的属性: color 和 bgcolor。


以上是关于HTML-CSS:vertical-align属性的主要内容,如果未能解决你的问题,请参考以下文章

html-css

怎么理解CSS中vertical-align这个属性

vertical-align属性

HTML-CSS

[转]CSS vertical-align属性详解 作者:黄映焜

现代HTML-CSS速查表