1. 程式人生 > >07_設定文字樣式

07_設定文字樣式





html5

text {

border: medium solid red;
width: 400px;
background-color: lightgrey;
padding: 10px;
text-justify:

}

/* 處理空白
whitespace屬性控制瀏覽器對空白字元的處理方式
*/

whiteText {

white-space: pre-line;

}

/* 指定文字方向 */

rtl {

direction: rtl;

}

ltl {

direction: ltr;

}

/* 指定單詞,字母,行之間的間距 */

space {

letter-spacing: 10px;
word-spacing: 10px;
line-height: 30px;
border: thin solid red;

}

/* 控制斷詞
單詞超過邊界截斷or不截斷
*/

word {

word-wrap: break-word;
/*  word-wrap: normal; 預設*/
border: thin solid red;
height: 120px;
width: 130px;

}

/* 首行縮排 */

line {

text-indent: 10%;

}

/* 文字裝飾與大小寫轉換 */

p6 {

text-decoration: blink;
text-transform: capitalize;

}

/* 建立文字陰影
text-shadow:水平偏移,垂直偏移 模糊程度 陰影顏色
*/

p7 {

text-shadow: 10px 20px 1px red;

}

/*################ 使用字型
font-family:設定字型,後面為備用字型
font-style:字型樣式,斜體,假斜體,正常字型
font-weight:粗細程度
*/

p7 {

font-family: "微軟雅黑", fantasy;
font-size: smaller;
font-style: italic;
font-weight: bold;

}

/* 使用web字型 */
@font-face{
font-family:MyStyle; /* 名字 */
src:url(“./cour.ttf”);/* 地址 */
}

p7 {

font-family: MyStyle, fantasy;

}

table: 指定物件作為塊元素級的表格。類同於html標籤(CSS2) inline-table:
指定物件作為內聯元素級的表格。類同於html標籤(CSS2) table-caption:
指定物件作為表格標題。類同於html標籤<(CSS2)table-cell: 指定物件作為表格單元格。類同於html標籤
table-row: 指定物件作為表格行。類同於html標籤


start
end
left
right
justify
center