CSS學習:文本排版,顏色,背景,邊框,邊距

來源:互聯網
上載者:User
文本的精細排版:
調整字元間距: letter-spacing: normal | 長度
調整單詞間距: word-spacing: normal | 長度
添加文字修飾: text-decoration: underline | overline | line-through | blink | none
設定文本相片順序: text-align: left | right | center | justify(兩段對齊)
設定段落縮排: text-indent: 長度 | 百分比
調整行高: line-height: normal | 數字 | 長度 | 百分比
轉換英文大小寫: text-transform: uppercase | lowercase | capitalize(單字首大寫) | none

顏色和背景:
網頁中的每一個元素都有一個前景色彩和一個後景色, 而且前景色彩和後景色最好同時設定, 以免重複或衝突.
設定顏色: color:顏色
      color屬性不是只用來設定字型的顏色, 網頁中每個元素的顏色都可以用color屬性來設定, color屬性設定的顏色一般都為標記內容的前景色彩.
設定背景顏色: background-color: 顏色 | transparent(透明值)
      在CSS中使用background-color屬性不僅可以設定網頁的背景顏色, 還可以設定文字的背景顏色
插入背景圖片: background-image: url | noneBackground-image
<html>
<head>
<title>應用背景圖片屬性</title>
<style type="text/css">
<!--
body{background-image:url(14-3-1.jpg)}
h2{font-family:黑體; font-size:20pt; color:red}
.p1{font-size:18px;color:black;background-image:url(14-3-2.jpg)}
-->
</style>
</head>
<body>
<center>
<h2>插入背景圖片</h2>
</center>
<hr>
<p class=p1>這段文字的顏色為黑色,文字背景和網頁背景的圖片不一樣</p>
</body>
</html>

插入背景附件: back-ground-attachment: scroll | fixed
      設定背景圖片是否隨著捲軸的移動而一起移動
設定重複背景圖片: background-repeat: repeat(水平和垂直方向平鋪) | repeat-x(水平方向平鋪) | repeat-y(垂直方向平鋪) | no-repeat(不平鋪)
      使用background-image屬性設定網頁的背景圖片時, 背景圖片總是在水平和垂直方向重複顯示並平鋪於整個視窗.
      將backgrond-image和background-repeat屬性結合使用, 就可以方便地控制背景圖片的平鋪方式.
設定背景圖片位置: background-position: 百分比 | 長度 | 關鍵字
執行個體:Code
<html>
<head>
  <title>設定顏色和背景</title>
  <style type=text/css>
  <!--
  body{background-image:url(14-7-1.jpg);background-repeat:no-repeat;
  background-position:bottom right}
  h2{font-family:黑體;color:white;font-size:20px;background-image:url(14-7-2.jpg);
  background-repeat:repeat-x}
  .p1{font-size:18px;color:blue;background-color:yellow;}
  -->
  </style>
</head>
<body>
  <center>
  <h2>黃鶴樓</h2>
  <hr>
  <p class=p1>昔人已乘黃鶴去,此地空餘黃鶴樓。</p> 
  <p class=p1>黃鶴一去不複返,白雲千載空悠悠。</p> 
  <p class=p1>晴川曆曆漢陽樹,芳草萋萋鸚鵡洲。</p>
  <p class=p1>日暮鄉關何處是,煙波江上使人愁。</p>
</center>
</body>
</html>

邊框和邊距:
邊框屬性包括邊框樣式, 邊框顏色, 邊框寬度, 主要用來設定網頁中各個元素的邊框, 如段落, 圖片, 表格等

設計邊框樣式: boder-style
border-style:樣式取值
border-top-style:樣式取值
border-bottom-style:樣式取值
border-left-style:樣式取值
border-right-style:樣式取值
調整邊框寬度: border-width
border-width:關鍵字 | 長度
border-top-width:關鍵字 | 長度
border-bottom-width:關鍵字 | 長度
border-right-width:關鍵字 | 長度
border-left-width:關鍵字 | 長度
設定邊框顏色 border-color
設定邊框屬性: border  同時設定邊框的寬度,樣式和顏色
border: 邊框寬度 | 邊框樣式 | 邊框顏色
border-top:
border-bottom:
border-right:
border-left:

邊距: margin-top / margin-bottom / margin-right / margin-left / margin
        用來設定網頁中某個元素的四邊和網頁中其他元素之間的空白距離.
填充: padding-top / padding-bottom / padding-right / padding-left / padding
        用來控制邊框和其他元素之間的空白距離, 和邊距屬性很類似.

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。