字型樣式

字型顏色 color
字型風格 font-family

​
span{
font-family:'微軟雅黑','宋體';
}
引入外部字型
@font-face{
font-family:"名稱";
src:url(' ');
}

​

字型大小 font-size

div{
/*具體的值*/
font-size:50px;
/*百分比 相當於父容器的字型百分比調整 瀏覽器預設字型大小16px*/
font-size:50%;
/*根據父元素字型大小來調整*/
font-size:1em;
/*當html字型大小為100px的時候 我想得到一個14px的字型，14/100 等於0.14rem
移動端佈局比較多*/
font-size:1rem;
}
 

字型粗細 font-weight

1. bold  定義粗的字型
2. bolder  定義更粗的字型
3. lighter  定義更細的字型 
4. 100 200 300 400 500 600 700 800 900 數值的寫法沒有單位
5. normal 預設  預設一般是用來給本來就加粗的字型，變成普通粗度

規定字型是否傾斜 font-style

1. italic 定義字型傾斜
2. oblique 定義字型的斜體 (兩者沒有明顯的區別，記住一個就行)
3. normal 預設  一般用來規定本來就是斜體的字型變成普通字型

規定小型大寫字母 font-variant

small­caps = 大型小寫字母

line-height 行高

設定行與行之前的距離：

div{
    line-height:30px;
    line-height:100%;
    line-height:1.2em;
}

複合寫法

基本寫法：

div{
    /*字型大小和字型風格是必須要寫的*/
    font:12px ‘微軟雅黑’,’宋體’;
}

多樣式寫法:

​
​/*字型:字型大小/行高 字型風格 字型粗細 小型大寫字母 傾斜 順序不能改變*/
font:blod small-caps intalic 12px/1.2 ‘微軟雅黑’;

​

​
 

文字樣式

text-transform 控制文字大小寫

uppercase 字母大寫 
capitalize 首字母大寫 
lowercase 小寫字母

text-align 文字對齊方式

left 左對齊 
right 右對齊 
center 居中 
justify 兩端對齊

text-indent 首行縮排

px

text-decoration 文字修飾 下劃線

none 去掉下劃線 
underline 下劃線 
line­through 中劃線 
overline 上劃線

letter-spacing 字間距

px
em

word-spacing 詞間距

px
em

white-space 文字不換行

nowrap 不換行

word-break 單詞內換行

break­all 單詞內換行

text-overflow 文字省略號

ellipsis 文字省略號

span{
    display:block;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
}

css屬性的繼承

預設繼承的屬性：

color
font:small-caps italic bold 50px/100px 'microsoft yahei';
text-align
text-indent:
letter-spacing = 字間距
word-spacing = 詞間距
list-style

a標籤的color不繼承，不繼承的加上inherit

a{color:inherit;}

特殊符號

空格 nbsp &; 
大於號 gt 
小於號 lt 
引號 quot 
版權符號 copy 
http://www.w3school.com.cn/tags/html_ref_symbols.html

滑鼠樣式

​
/*字尾名必須要是`.cur`後面的pointer是防止瀏覽器不相容或者出錯的時候！就執行後面的一個
樣式！*/
div{
    cursor:url('路徑')，pointer;
}

​