<output id="jbxdv"></output>

      1. 網頁設計中文本的縮進和水平對齊

        • 2018-09-30 16:26:17
        • 閱讀次數:
        • 作者:盈嵐科技小編
        • 來源:http://www.freenetsites.com

        不錯,很多網頁設計都需要選擇適當的顏色,讓頁面有最酷的外觀,不過在真正的網頁設計中,可能更多的時間都花在這樣一些問題上:文本放在哪里,文本的外觀是怎樣的。由于存在這些問題,出現了一些HTML標記(如<FONT><CENTER>)允許你對文本的外觀和放置有所控制。

        因為文本如此重要,所以有很多CSS屬性以這樣或那樣的方式影響文本。文本和字體之間有什么不同呢?簡單地講,文本是內容,而字體用于顯示這個內容。使用文本屬性,可以控制文本相對于該行余下內容的位置、使其作為上標、加下劃線,以及改變大小寫等。甚至還可以有限地模擬打字機的Tab鍵的使用。

        下面先來討論如何影響文本在行中的水平定位。寫一個時事通訊或做一份報告時,你可能會采取一些步可以把這些基本動作看作是這些步驟的一部分。

        縮進文本

        Web頁面上一個段落的第一行縮進,這是一種最常用的文本格式化效果(去除段落之間的空行是第二常用的方法,這個內容將在第7章討論)。有些網站在段落的第一個字母前放一個很小的透明圖像,這些圖像將文本推到后面來制造一種縮進文本的感覺.另外一些網站則使用完全非標準的SPACER標記。在CSS網站制作中,有一種更好的方法實現文本縮進,即 text-indent 屬性。

        計算值:

        對于百分數值,要根據指定確定,對于長度值,則為絕對長度

        通過使用text-indent屬性,所有元素的第一行都可以縮進一個給定長度,甚至該長度可以是負值。當然,這個屬性最常見的用途是將段落的首行縮進:

        p {text-indent: 3em;}

        這個規則會使所有段落的首行縮進3em。

        一般地,可以為所有塊級元素應用text-indent,但無法將這個屬性應用到行內元素,圖像之類的替換元素上也無法應用text-indent屬性。不過,如果一個塊級元素(如段落)的首行中有一個圖像,它會隨著該行的其余文本移動。

        注意:如果想把一個行內元素的第一行“縮進”,可以用左內邊距或外邊距創造這種效果。

        text-indent還可以設置為負值,利用這種技術,可以實現很多有意思的效果。最常見的用途是一種“懸掛縮進”,即第一行懸掛在元素中余下部分的左邊:

        p {text-indent:-4em;}

        在為text-indent設置負值時要當心:上例中前3個詞(“This is a”)可能會超出瀏覽器窗口的左邊界。為了避免出現這種顯示問題,建議針對負縮進再設置一個外邊距或一些內邊距:

        p {text-indent:-4em; padding-left: 4em;}

        不過,負縮進也可以得到充分利用??紤]下面的例子,如圖6-2所示,這里增加了一個浮動圖像:

        p.hang {text-indent:-25px;}

        <img src="star.gif" style="width: 60px; height: 60px;

        float: left; alt="An image of a five-pointed star."/>

        <p> This paragraph has a negatively indented first

        line, which overlaps the floated image that precedes the text. Subsequent

        lines do not overlap the image, since they are not indented in any way.</p>

        使用這個簡單的技術可以實現很多有意思的設計。

        text-indent可以使用所有長度單位(包括百分數值)。在下面的例子中,百分數要相對于縮進元素父元素的寬度。換句話說,如果將縮進值設置為10%,所影響元素的第一行會縮進其父元素寬度的10%。

        水平對齊

        text-indent相比,text-align是一個更基本的屬性,它會影響一個元素中的文本行相互之間的對齊方式。前3個值相當直接,不過第4個和第5個則略有些復雜。

        要理解這些值是如何工作的,最快的辦法就是查看圖6-5。

        顯然,值left,rightcenter會導致元素中的文本分別左對齊、右對齊和居中。因為text-align只應用于塊級元素(如段落),所以無法將行內的一個錨居中而不影響行中的其余部分(你可能也不想這么做.因為這很可能導致文本重疊)。

        西方語言都是從左向右讀,所以text-align的默認值是left。文本在左邊界對齊,右邊界呈鋸齒狀(稱為“從左到右”文本)。對于希伯來語和阿拉伯語之類的語言,text-align則默認為right,因為這些語言從右向左讀。不出所料,center會使每個文本行在元素中居中。

        注意:將塊級元素或表元素居中,這要通過在這些元素上適當地設置左、右外邊距來實現.詳細內容見第7章。

        雖然你可能認為text-align: center<CENTER>元素的作用一樣,但實際上二者大不相同。<CENTER>不僅影響文本,還會把整個元素居中,如表。text-align不會控制元素的對齊,而只影響其內部內容。圖6-5很清楚地展示了這一點。實際元素沒有從一端移到另一端。只是其中的文本受影響。

        警告:IE6之前的IE/Win有一個危害較大的bug:它確實會把text-align: center處理為<CENTER>元素,不僅將文本居中,還會將元素居中。在IE6和更高版本IE的標準模式中就不會這樣了,但在IE5.X和較早版本中仍是如此。

        最后一個水平對齊屬性是:justify,它會帶來自己的一些問題。在兩端對齊文本中,文本行的左右兩端都放在父元素的內邊界上,如圖6-6所示。然后,調整單詞和字母間的間隔,使各行的長度恰好相等。兩端對齊文本在打印領域很常見(例如,本書就使用了兩端對齊文本),不過在CSS網頁設計中,還需要多做些考慮。

        要由用戶代理(而不是CSS)來確定兩端對齊文本如何拉伸,以填滿父元素左右邊界之間的空間。例如,有些瀏覽器可能只在單詞之間增加額外的空間,而另外一些瀏覽器可能會平均分布字母間的額外空間(不過CSS規范特別指出,如果letter-spacing屬性指定為一個長度值,“用戶代理不能進一步增加或減少字符間的空間”)。還有一些用戶代理可能會減少某些行的空間,使文本擠得更緊密。所有這些做法都會影響元素的外觀,甚至改變其高度,這取決于用戶代理的對齊選擇影響了多少文本行。

        CSS也沒有指定應當如何處理連字符(注1[1]。大多數兩端對齊文本都使用連字符將長單詞分開放在兩行上,從而縮小單詞之間的間隔,改善文本行的外觀。不過,由于CSS沒有定義連字符行為,用戶代理不太可能自動加連字符。因此,在CSS中,兩端對齊文本看上去沒有打印出來好看,特別是元素可能太窄,以至于每行只能放下幾個單詞。當然,使用窄設計元素是可以的,不過要當心相應的缺點。

        當前文章標題:網頁設計中文本的縮進和水平對齊

        當前URL:http://www.freenetsites.com/news/wzzz/text- indent-align.html

        上一篇:網頁設計中的字體匹配

        下一篇:網頁設計中的垂直對齊

        網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
        国产成人亚洲综合无码
        <output id="jbxdv"></output>