css文字與排版

目錄

• 文字與排版樣式
  • `font文字樣式
  • 排版樣式(text)
  • 文字半透明
  • 文字陰影
• 背景和顏色
  • 基本
  • 背景位置使用
  • 背景附着
  • 背景簡寫
  • 背景透明
  • 背景縮放
• 列表樣式
• 表格樣式
  • 表格邊框樣式
  • 摺疊邊框
  • 設置寬度和高度
  • 表格對齊方式
  • 定義表格標題位置
  • 設置表格佈局
• 元素的隱藏和顯示
  • display顯示
  • visibility可見性
  • overflow溢出
• 用戶界面樣式
  • 鼠標樣式cursor
  • 輪廓outline
  • 防止拖拽文本域resize
• 溢出的文字隱藏
  • word-break：自動換行
  • white-space：設置或檢索對象內文本顯示方式
  • text-overflow：文字溢出
• 其餘特殊技術
  • 精靈圖技術
  • 滑動門技術
  • 字體圖標技術

文字與排版樣式

`font文字樣式

屬性	描述	屬性值
font-family	字體族科	任意的字體族科名稱，若是有多箇中間用逗號隔開，以防止該瀏覽器沒法解析
font-size	字體大小	可使用絕對大小、相對大小、長度和百分比
font-style	字體樣式	normal(普通)，italic(斜體)或oblique(傾斜)
font-weight	字體加粗	normal、bold或lighter
font-variant	字體變形	normal(普通)或small-caps(小型大寫字母)

注意：使用font同時設置多個文字屬性時，屬性之間用空格隔開。

排版樣式(text)

屬性	描述	屬性值
letter-spacing	字母間隔	必須符合長度格式，運行使用負值
word-spacing	文字間隔	必須符合長度格式，運行使用負值
text-decoration	文字修飾	underline(下劃線),overline(上劃線),line-through(刪除線),blink(閃耀)或默認無
text-transform	改變大小寫	uppercase(大寫),lowercase(小寫),capitalize(首字母大寫)或者none(默認值)
text-align	橫向排列	left,right,center或justify
text-indent	文字縮進	一個長度或者百分比
line-height	行高	數字或者百分比，容許負值，當取值和盒子高度同樣時，則居中
vertical-align	垂直方式	baseline,top,middle或bottom

文字半透明

color: rgba(r,g,b,a); a 是alpha 透明的意思 取值範圍 0~1之間

文字陰影

text-shadow:水平位置 垂直位置 模糊距離 陰影顏色;

• h-shadow：必需，水平陰影的位置，運行負值
• v-shadow：必需，垂直陰影的位置，運行負值
• blur：可選，模糊的距離
• color：可選，陰影的顏色

背景和顏色

基本

屬性	描述	屬性值
background-color	背景顏色	與color設置相同，也可使用transparent(透明)值，必須設置高（寬），要否則沒法顯示
background-image	背景圖片	圖片URL
barkground-repet	背景重複	repeat(默認),repeat-x,repeat-y,no-repeat
barkground-attachment	背景附件	scroll(滾動),fixed(固定)
barkground-position	背景位置	橫向的關鍵字(left、center或right),縱向的關鍵字(top、center或bottom)百分比和長度也能夠用作安排背景圖像的位置

背景位置使用

background-position : length || length
background-position : position || position

先指定background-image屬性。默認值爲：(0% 0%)。
若是隻指定了一個值，該值將用於橫座標。縱座標將默認爲50%，第二個值將用於縱座標。position 後面是x座標和y座標，且若是和精確單位和方位名字混合使用，則必須是x座標在前，y座標後面。好比 background-position: 15px top; 則 15px 必定是 x座標 top是 y座標。

背景附着

background-attachment : scroll | fixed

基本參數：

• scroll：背景圖像是隨對象內容滾動
• fixed：背景圖像固定

背景簡寫

background屬性的值的書寫順序官方並無強制標準的，不過咱們這樣建議：

background: transparent url(image.jpg) repeat-y  scroll 50% 0;

背景透明

background: rgba(0,0,0,0.3); /*最後一個參數是alpha 透明度  取值範圍 0~1之間*/
border: 1px solid rgba(0,0,0,0.3);

背景縮放

background-image: url('images/gyt.jpg');
background-size: 300px 100px;
/* background-size: contain;會自動調整縮放比例，保證圖片始終填充滿背景區域，若有溢出部分則會被隱藏 */
/* background-size: cover; 會自動調整縮放比例，保證圖片始終完整顯示在背景區域*/

列表樣式

屬性	描述	屬性值
list-style-type	列表樣式	disc,circle,square,decimal,lower-roman,upper-roman,lower-alpha,upper-alpha或none
list-style-image	圖像列表	url或none
list-style-position	列表符號的縮進	inside或outside

表格樣式

表格邊框樣式

咱們可使用如{border:1px solid red;}爲table、th或td設置邊框。

摺疊邊框

{border-collapse:collapse(合併邊框)|separate(默認，邊框獨立)|inherit(繼承父級樣式)}

設置寬度和高度

經過width和height這兩個屬性定義，能夠是百分比也能夠是絕地值

表格對齊方式

咱們使用text-align和vertical-align來設置表格中文本的對齊方式

定義表格標題位置

caption-size:top|bottom|left|right|inherit|

設置表格佈局

使用label-layout屬性來設置是否保證單元格寬度不被改變，其屬性值以下：

• auto：當內容超過寬度是能自動換行則自動換行，不能自動換行則增長寬度（默認值）
• fixed：不管內容是否超過寬度，都保持原來的寬度
• inherit：繼承父級樣式

元素的隱藏和顯示

display顯示

設置或檢索對象是否及如何顯示，且隱藏以後，再也不保留位置。

• none：隱藏對象
• block：顯示元素

visibility可見性

設置或檢索是否顯示對象，隱藏以後，繼續保留原有位置。

• visible：對象可見
• hidden：對象隱藏

overflow溢出

檢索或設置當對象的內容超過其指定高度及寬度時如何管理內容。

屬性	含義
visible	不剪切內容也不添加滾動條
auto	超出自動顯示滾動條，不超出不顯示滾動條
hidden	不顯示超過對象尺寸的內容，超出的部分隱藏掉
scroll	無論超出內容否，老是顯示滾動條

用戶界面樣式

鼠標樣式cursor

設置或檢索在對象上移動的鼠標指針採用何種系統預約義的光標形狀，語法以下：

cursor :  default默認|pointer手形|move移動|text文本光標

輪廓outline

是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的做用，語法以下：

outline : outline-color ||outline-style || outline-width

不過咱們平時都是使用outline:0或者outline:none來去掉。

防止拖拽文本域resize

resize:none這個單詞能夠防止火狐、谷歌等瀏覽器隨意的拖動文本域。

溢出的文字隱藏

word-break：自動換行

屬性值	含義
normal	使用瀏覽器默認的換行規則
break-all	容許在單詞內換行
keep-all	只能在半角空格或連字符處換行

white-space：設置或檢索對象內文本顯示方式

• normal：默認處理方式
• nowrap：強制在同一行內顯示全部文本，直到文本結束或者遭遇br標籤對象才換行。

text-overflow：文字溢出

設置或檢索是否使用一個省略標記...標示對象內文本的溢出:

• clip:不顯示省略標記，而是簡單的裁切
• ellipsis：對象內文本溢出時顯示省略標記

其餘特殊技術

精靈圖技術

CSS精靈是一種處理網頁背景圖像的方式。它將一個頁面涉及到的全部零星背景圖像都集中到一張大圖中去，而後將大圖應用於網頁，這樣，當用戶訪問該頁面時，只需向服務發送一次請求，網頁中的背景圖像便可所有展現出來。一般狀況下，這個由不少小的背景圖像合成的大圖被稱爲精靈圖。最後，咱們使用CSS的background-image、background-repeat和background-position屬性進行背景定位，其中最關鍵的是使用background-position屬性精確地定位。

滑動門技術

爲了使各類特殊形狀的背景可以自適應元素中文本內容的多少，出現了CSS滑動門技術。它重新的角度構建頁面，使各類特殊形狀的背景可以自由拉伸滑動，以適應元素內部的文本內容，可用性更強。其技術核心就是利用CSS精靈（主要是背景位置）和盒子padding撐開寬度, 以便能適應不一樣字數的導航欄。

字體圖標技術

字體圖標是一種特殊的字體，它看起來像圖標，可是卻有着字體的各類功能，能自由的改變大小和顏色。
首先，咱們要在樣式裏面聲明字體：

@font-face {
  font-family: 'icomoon'; //可改變的值，用於命名
  src:  url('fonts/icomoon.eot?7kkyc2');
  src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
    url('fonts/icomoon.woff?7kkyc2') format('woff'),
    url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

而後咱們給盒子使用字體：

span {
        font-family: "icomoon"; //對於曾經申明的名字
        }

最後給盒子裏面添加結構：

<span></span>