css權威指南讀書筆記
css權威指南
屬性選擇器
p.one class名為one的p元素
p[class][name] 含有class和name屬性的p元素
p[class="one"][name="two"] class屬性為one且name屬性為two的p元素
p[class~="one"] class屬性包含one的p元素
p[class^="one"] class屬性以one開頭
p[class$="one"] class屬性以one結尾
p[class*="one"] class屬性包含one
p[class|="one"] class屬性為one或以之開頭
偽類
:lang(fr) 類似於|=，意為語言為法語的元素
偽元素
:first-letter
:first-line
:before {content:"前面插入的內容";color:red;}
特殊性值
ID # 0,1,0,0
Class 0,0,1,0
P標簽名 0,0,0,1
通配符* 0,0,0,0
偽類 特殊性值沒有
字體變形
font-variant:small-caps 小型大寫字母
text-transform:uppercase 字母大寫
capitalize 首字母大寫
字體下載
@font-face{font-family:"name";src: url("www");}
文本格式
p{text-indent:3em;}段落首行縮進3字符
text-align:center;居中
word-spacing:1em文字間隔
letter-spacing:1em 字母間隔
visibility 屬性
hidden 元素不可見，但保留在文檔中的位置（該屬性可繼承，如果要求部分子元素顯示要顯式聲明此部分visibility:visible）
而overflow的hidden,元素不可見的同時也不會占據文檔流
Relative 相對定位元素
當發生沖突時bottom=-top值，right=-left
Absolute絕對定位元素
如果不定義height、width；left、right的值將影響元素大小（拉伸/壓縮）
Border-collapse:collapse
用於表格單元格中間空隙合並
table{border-space:1px 3px;}
表單元格之間x軸空隙1px；y軸空隙3px。
li{list-style-image:url(...);}
為列表標誌改變默認樣式（改用圖片）
li{list-style-position:inside;}
將標誌（小圓點）置於列表項內部，默認值是outside，所以我們通常看到的小圓點是在外面的
a:hover{cursor:pointer;}
該屬性使得光標形狀變成
crosshair十字準星
outline-style
輪廓樣式，類似於元素邊框，可以包在邊框外面
css權威指南讀書筆記