a级黄色片网站,日本久久久精品视频,97国产在线播放

導讀網(wǎng)頁的本質(zhì)就是超級文本標記語言，通過結(jié)合使用其他的Web技術(shù)（如：腳本語言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強大的網(wǎng)頁。因而，超級文本標記語言是萬維網(wǎng)（Web）編程的基礎(chǔ)，也就是說萬維網(wǎng)是建立...

網(wǎng)頁的本質(zhì)就是超級文本標記語言，通過結(jié)合使用其他的Web技術(shù)（如：腳本語言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強大的網(wǎng)頁。因而，超級文本標記語言是萬維網(wǎng)（Web）編程的基礎(chǔ)，也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級文本標記語言之所以稱為超文本標記語言，是因為文本中包含了所謂“超級鏈接”點。

css如何設(shè)置行距？其實在css并沒有一個直接設(shè)置行間距的方式，只能通過間接的設(shè)置行高來實現(xiàn)行間距效果，行高越大就表明行間距越大。本章就給大家介紹css中是怎樣通過設(shè)置行高來屬性行間距效果的，讓大家可以了解css文本文字的行間距是如何調(diào)整的。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有所幫助。

首先我們先了解一下什么是行高，在css中又是如何設(shè)置行高，進而設(shè)置和調(diào)整行間距。

簡單來說：行高類似于單線本，單線本里是用一行一行線條隔開的空間，線與線之間的距離就是行高。網(wǎng)頁中的文本文字實際上是寫在一條看不見的線中的，然后會默認在行高中垂直居中顯示。那么在css中是如何設(shè)置行高的？在css中可以通過 line-height 屬性來設(shè)置行高，下面我們來簡單介紹一下css line-height 屬性吧。

css line-height 屬性 會影響行框的布局，是用來設(shè)置行與行之間的距離（行高）的，不允許使用負值。在應用到一個塊級元素的時候，它定義了該元素中基線之間的最小距離而不是最大距離。

line-height 與 font-size 的計算值之差（在 CSS 中成為“行間距”）分為兩半，分別加到一個文本行內(nèi)容的頂部和底部。可以包含這些內(nèi)容的最小框就是行框。

下面我們來看看css line-height屬性可能會用的的值：

normal：設(shè)置合理的行間距，默認值。

number：設(shè)置數(shù)字，此數(shù)字會與當前的字體尺寸相乘來設(shè)置行間距。

length：設(shè)置固定的行間距。

%：基于當前字體尺寸的百分比行間距。

inherit：規(guī)定應該從父元素繼承 line-height 屬性的值。

注：所有瀏覽器都支持 line-height 屬性。

我們來用實例介紹line-height屬性是如何設(shè)置和調(diào)整行間距，下面會舉例介紹設(shè)置行間距的方法：

1、使用數(shù)值來設(shè)置行間距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用數(shù)值來設(shè)置行間距</title>
		<style type="text/css">
			p.small {
				line-height: 0.5
			}
			
			p.big {
				line-height: 2
			}
		</style>
	</head>
	<body>
		<p>
			這是擁有標準行高的段落。 默認行高大約是 1。 這是擁有標準行高的段落。 這是擁有標準行高的段落。 這是擁有標準行高的段落。 這是擁有標準行高的段落。 這是擁有標準行高的段落。
		</p>

		<p class="small">
			這個段落擁有更小的行高。 這個段落擁有更小的行高。 這個段落擁有更小的行高。 這個段落擁有更小的行高。 這個段落擁有更小的行高。 這個段落擁有更小的行高。 這個段落擁有更小的行高。
		</p>

		<p class="big">
			這個段落擁有更大的行高。 這個段落擁有更大的行高。 這個段落擁有更大的行高。 這個段落擁有更大的行高。 這個段落擁有更大的行高。 這個段落擁有更大的行高。 這個段落擁有更大的行高。
		</p>
	</body>

</html>

效果圖：

2、使用像素值設(shè)置行間距

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>使用數(shù)值來設(shè)置行間距</title>
		<style type="text/css">
			p.small {
				line-height: 10px;
			}
			
			p.big {
				line-height: 30px
			}
		</style>
	</head>

	<body>
		<p>
			這是擁有標準行高的段落。 在大多數(shù)瀏覽器中默認行高大約是 20px。 這是擁有標準行高的段落。 這是擁有標準行高的段落。 這是擁有標準行高的段落。 這是擁有標準行高的段落。 這是擁有標準行高的段落。
		</p>

		<p class="small">
			這個段落擁有更小的行高。 這個段落擁有更小的行高。 這個段落擁有更小的行高。 這個段落擁有更小的行高。 這個段落擁有更小的行高。 這個段落擁有更小的行高。 這個段落擁有更小的行高。
		</p>

		<p class="big">
			這個段落擁有更大的行高。 這個段落擁有更大的行高。 這個段落擁有更大的行高。 這個段落擁有更大的行高。 這個段落擁有更大的行高。 這個段落擁有更大的行高。 這個段落擁有更大的行高。
		</p>
	</body>

</html>

效果圖：

3、使用百分比設(shè)置行間距

line-height屬性指定了一個百分數(shù)，則會相對于字體去計算行高。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>使用數(shù)值來設(shè)置行間距</title>
		<style type="text/css">
			p.small {
				line-height: 80%;
			}
			
			p.big {
				line-height: 200%;
			}
		</style>
	</head>

	<body>
		<p>
			這是擁有標準行高的段落。 在大多數(shù)瀏覽器中默認行高大約是 110% 到 120%。 這是擁有標準行高的段落。 這是擁有標準行高的段落。 這是擁有標準行高的段落。 這是擁有標準行高的段落。 這是擁有標準行高的段落。
		</p>

		<p class="small">
			這個段落擁有更小的行高。 這個段落擁有更小的行高。 這個段落擁有更小的行高。 這個段落擁有更小的行高。 這個段落擁有更小的行高。 這個段落擁有更小的行高。 這個段落擁有更小的行高。
		</p>

		<p class="big">
			這個段落擁有更大的行高。 這個段落擁有更大的行高。 這個段落擁有更大的行高。 這個段落擁有更大的行高。 這個段落擁有更大的行高。 這個段落擁有更大的行高。 這個段落擁有更大的行高。
		</p>
	</body>

</html>

效果圖：

總結(jié)：以上就是本篇文的全部內(nèi)容，希望能對大家的學習有所幫助。更多相關(guān)教程請訪問 CSS視頻教程！

相關(guān)推薦：php公益培訓視頻教程

以上就是css如何設(shè)置行間距？css文本文字的行間距設(shè)置（代碼實例）的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！

網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學科中所使用的生產(chǎn)和維護的網(wǎng)站。

溫馨提示：喜歡本站的話，請收藏一下本站！

當前位置:雨林木風下載站 > 網(wǎng)頁設(shè)計教程 > 詳細頁面

css如何設(shè)置行間距？css文本文字的行間距設(shè)置（代碼案例）

本類教程下載

系統(tǒng)下載排行