強哥CSS學習筆記
html嵌套css樣式：
1.外部（推薦）
2.內部
3.內聯（不推薦）
css優先級
1.內聯
2.id選擇器
3.class選擇器
4.標簽
css長度單位：
1.px
2.em (14px)
css選擇器：
常用選擇器
基本選擇器
層級選擇器
偽類選擇器
屬性選擇器
常用選擇器：
1.標簽
2.id
3.class
4.關聯
.div1 .imgcls{
}
5.組合
.div1 .imgcls,.div2 .imgcls{
}
基本選擇器：
1.:first-child
2.:first-letter 第一個字符
3.:first-line 第一行
4.:last-child
5.:nth-child(2)
層級選擇器:
a,b 和
a b 選擇後代
a>b 選擇子集
a+b a後面的b
偽類選擇器：
:hover 劃過上方
:focus 獲得焦點
::selection 選擇
屬性選擇器：
[id] 含有屬性
[id=use1] 屬性等於
[name*=us] 包含us
[name|=en] 以en開頭
[name^=en] 以en開頭
[name$=en] 以en結尾
常見的樣式屬性和值：
1.字體和顏色
2.背景
3.文本
4.邊框
5.鼠標光標
6.列表
7.定位
8.內外邊距
9.浮動和清除浮動
10.滾動條
11.顯示和隱藏
字體：
font:
font-size: 字體大小
font-family: 字體類型
font-style: 字體樣式(斜體italic)
font-weight: 字體粗細(bold加粗)
文本：
letter-spacing 字間距
word-spacing 詞間距
text-decoration none|underline|overline|line-through 橫線
text-align left|center|right 文字對齊
text-indent 首字母縮進
line-height 行高
color 顏色
word-break 自動換行
背景：
background
background-color 背景色
background-image 背景圖片
background-repeat 背景圖片是否重復（平鋪）
background-attachment 背景圖隨內容滾動（用在body身上,其他不適用）
background-position
邊框：
1.border-style solid實線 dotted小虛線 dashed小橫線 double雙線 groove凹 ridge凸 inset凹槽 outset凸槽
2.border-width
3.border-color
4.border-left right bottom top
鼠標：
cursor:crosshair十字 pointer小手 text文本 wait等待 default默認 help幫助
列表：
list-style-type
1.none空|desc實心圓|circle空心圓|square實心方塊|decimal數字|lower-roman小寫羅馬數字|upper-roman大寫|lower-alpha小寫字母|upper-alpha大寫字母
2.list-style-type:none; 列表前面的選項圖標取消
3.text-decoration:none; a標簽下劃線取消
尺寸：
height:
max-width:
max-height:
文本框：
textarea
width:
height:
resize
樣式繼承：
文字有關的樣式會繼承下去
font-size:
font-family:
font-style:
color:
line-height:
font-weight:
word-spacing:
等
表格：
border-collapse: collapse邊框合並|separate不合並
border-spacing: 間距
定位：
1.position: absolute絕對定位|relative相對定位
2.top
3.left
4.定位
5.z-index z軸
絕對定位和相對定位：
1.相同點：
脫離文檔流，在文檔流上方
2.不同點
坐標系不同，絕對的坐標系在瀏覽器左上角，相對的坐標系在自己的左上角
占位
絕對不占位，相對占位
div絕對居中：
1.父div：position:relative;
2.子div：position：absolute
外邊距：
margin-right:
margin-left:
margin-top:
margin-bottom: 10px;
如果只提供一個，將用於全部的四邊。
如果提供兩個，第一個用於上－下，第二個用於左－右。
如果提供三個，第一個用於上，第二個用於左－右，第三個用於下。
如果提供全部四個參數值，將按上－右－下－左的順序作用於四邊。
內邊距：
padding
浮動：
float
清除(阻止)浮動
clear left|right|both
可以有效防止盒子回縮
<div style=‘clear:both‘></div>
滾動條：
overflow: hidden隱藏|auto自動|scroll出現滾動條
顯示和隱藏：
1.display:none隱藏|block塊顯示|inline行顯示
2.visibility:visible顯示|hidden隱藏
邊框樣式：
1.border-radius
第一個值是水平半徑。
如果第二個值省略，則它等於第一個值，這時這個角就是一個四分之一圓角。
如果任意一個值為0，則這個角是矩形，不會是圓的。
值不允許是負值。
2.box-shadow <length>水平偏移 <length>垂直偏移 <length>陰影模糊值 <length>陰影外延值 || <color>顏色
box-shadow: 5px 5px 5px 0px #999;
none： 無陰影
<length>①： 第1個長度值用來設置對象的陰影水平偏移值。可以為負值
<length>②： 第2個長度值用來設置對象的陰影垂直偏移值。可以為負值
<length>③： 如果提供了第3個長度值則用來設置對象的陰影模糊值。不允許負值
<length>④： 如果提供了第4個長度值則用來設置對象的陰影外延值。可以為負值
<color>： 設置對象的陰影的顏色。
inset： 設置對象的陰影類型為內陰影。該值為空時，則對象的陰影類型為外陰影
3.border-image:
border-image: url(‘b.png‘) 26 26 round;
stretch | repeat| round | space
stretch： 指定用拉伸方式來填充邊框背景圖。
repeat： 指定用平鋪方式來填充邊框背景圖。當圖片碰到邊界時，如果超過則被截斷。
round： 指定用平鋪方式來填充邊框背景圖。圖片會根據邊框的尺寸動態調整圖片的大小直至正好可以鋪滿整個邊框。
space： 指定用平鋪方式來填充邊框背景圖。圖片會根據邊框的尺寸動態調整圖片的之間的間距直至正好可以鋪滿整個邊框。
4.background-size: 屬性規定背景圖片的尺寸
5.background-origin: 屬性規定背景圖片的定位區域
border-box邊框區域
padding-box內邊距區域
content-box有效區域
6.text-shadow 文字陰影
text-shadow:3px 3px 3px #f00;
7.word-wrap:break-word;單詞折行
類似word-break
8.字體樣式
@font-face
{
font-family: my;
src:url(‘my.ttf‘);
}
2D樣式：
1.translate() 移動
2.rotate() 會改變坐標系
3.scale() 比例
3D樣式：
1.rorateX(30deg);
2.rorateY(30deg);
多欄樣式：
column-count
column-gap
column-rule
用戶界面：
1.輪廓樣式
outline-offset
強哥CSS學習筆記