1. 程式人生 > >CSS屬性進階詳解

CSS屬性進階詳解

1.文字常用樣式屬性進階:

  • text-align 設定文字水平對齊方式,如text-align:center 設定文字水平居中

  • text-indent 設定文字首行縮排,如:text-indent:32px; 設定文字首行縮排32px

    CSS部分:

    HTML部分:

    你好世界

    大頭兒子小頭爸爸 一對好朋友 快樂父子倆 兒子的頭大手兒小 爸爸的頭小手兒很大 大手牽小手 走路不怕滑 走呀走呀走 走 走 轉眼兒子就長大 轉眼兒子就長大

  1. display屬性

作用: 第一個決定了當前元素是否應該顯示, 第二個決定了當前元素應該以什麼型別顯示

display 屬性規定元素應該生成的框的型別。

display 的預設屬性值是 inline, 此元素會被顯示為內聯元素

display屬性是用來設定元素的型別及隱藏的,常用的屬性有:

  • none 元素隱藏且不佔位置

  • block 此元素會被顯示為塊元素

  • inline 此元素會被顯示為內聯元素

  • inline-block 行內塊元素 ( 瞭解 )

    CSS部分:

    HTML部分:

    我是要成為海賊王的男人 海賊王下面的div
      <a href="#">這是第一個連結</a>
      <a href="#">這是第二個連結</a>
      
      <p class="pbox" style="display:block">
          葫蘆娃 葫蘆娃 一根藤上七朵花 小小樹藤是我家 啦啦啦啦 叮噹當咚咚噹噹 澆不大 叮噹當咚咚噹噹 是我家 啦啦啦啦
      </p>
    

補充: ( 瞭解 )

font:

font: 樣式屬性是一個集合, 可以吧關於 font 的都放到這個屬性裡面:

使用方法:

<style>
	div {
       font:  bold italic 18px/20px  arial; 
	}
</style>


HTML部分:
<div>這是div裡面的文字</div>

其中: arial 是一種字型, 和 微軟雅黑一樣.

         font-size 和 font-family 的值是必需的。
  • font-style 定義字型的風格
    • normal: 正常
    • italic: 瀏覽器會顯示一個2斜體的字型樣式。
  • font-variant 能把字型變小一號並且全大寫顯示 small-caps 變小一號並且全大寫顯示 normal 正常
  • font-weight 是否加粗 bold 是加粗 normal 正常
  • font-size/line-height 字型大小 / 行高大小
  • font-family 字型型別