css3總結筆記
屬性選擇器
E[attr]只使用屬性名，但沒有肯定任何屬性值
E[attr="value"]指定屬性名，並指定了該屬性的屬性值
E[attr~="value"]指定屬性名，而且具備屬性值，此屬性值是一個詞列表，而且以空格隔開，其中詞列表中包含了一個value詞，並且等號前面的「〜」不能不寫
E[attr^="value"]指定了屬性名，而且有屬性值，屬性值是以value開頭的
E[attr$="value"]指定了屬性名，而且有屬性值，並且屬性值是以value結束的
E[attr*="value"]指定了屬性名，而且有屬性值，並且屬值中包含了value
E[attr|="value"]指定了屬性名，而且屬性值是value或者以「value-」開頭的值（好比說zh-cn）
實例：百度文庫;javascript
<style>p{height:30px; line-height:30px; font-size:12px;border:1px solid #000;}p a{background:url(img/w.gif) no-repeat 3px center;padding-left:20px; display:block;}p a[href*=text]{ background-image:url(img/text.gif);}p a[href*=pdf]{ background-image:url(img/swf.gif);}p a[href*=exl]{ background-image:url(img/x.gif);}</style></head><body><p>
<a href="http://www.miaov.com/doc/javascript.html">測試文字</a></p><p>
<a href="http://www.miaov.com/text/javascript.html">測試文字</a></p><p>
<a href="http://www.miaov.com/pdf/javascript.html">測試文字</a></p><p>
<a href="http://www.miaov.com/exl/javascript.html">測試文字</a></p>
備註：IE7及以上支持;css
結構性僞類
E:nth-child(n) 表示E父元素中的第n個字節點
p:nth-child(odd){background:red}/匹配奇數行/
p:nth-child(even){background:red}/匹配偶數行/
p:nth-child(2n){background:red}
E:nth-last-child(n) 表示E父元素中的第n個字節點，從後向前計算
E:nth-of-type(n) 表示E父元素中的第n個字節點，且類型爲E
E:nth-last-of-type(n)表示E父元素中的第n個字節點，且類型爲E,從後向前計算
E:empty 表示E元素中沒有子節點。注意：子節點包含文本節點
E:first-child 表示E元素中的第一個子節點
E:last-child 表示E元素中的最後一個子節點
E:first-of-type 表示E父元素中的第一個子節點且節點類型是E的
E:last-of-type 表示E父元素中的最後一個子節點且節點類型是E的
E:only-child表示E元素中只有一個子節點。注意：子節點不包含文本節點
E:only-of-type 表示E的父元素中只有一個子節點，且這個惟一的子節點的類型必須是E。注意：子節點不包含文本節點
實例：新浪頭部導航html
<style>.list{margin:0;padding:0; list-style:none;}.list li{width:150px;border-right:1px solid #000;float:left;}.list li:last-of-type{border:none;}.list a{float:left;width:40px;margin:0 5px; font:12px/30px "宋體"; text-align:center;}.list li a:nth-of-type(3n+1){ font-weight:bold;}.list li:nth-child(3) a:nth-child(2){ color:red;}</style></head><body><ul class="list">
<li>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
</li>
<li>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
</li>
<li>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
</li>
<li>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
</li>
<li>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
</li>
<li>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
</li>
<li>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
<a href="#">測試文字</a>
</li></ul>
其它僞類
E:target 表示當前的URL片斷的元素類型，這個元素必須是E
E:disabled 表示不可點擊的表單控件
E:enabled 表示可點擊的表單控件
E:checked 表示已選中的checkbox或radio
E:first-line 表示E元素中的第一行
E:first-letter 表示E元素中的第一個字符
E::selection表示E元素在用戶選中文字時
E::before 生成內容在E元素前
E::after 生成內容在E元素後
E:not(s) 表示E元素不被匹配
E~F表示E元素毗鄰的F元素
Content 屬性java
css3繪製叉號css3
a{ display: inline-block; width: 20px;height:5px; background: red;line-height: 0;font-size:0;vertical-align: middle;-webkit-transform: rotate(45deg) } a:after{content:'/';display:block;width: 20px;height:5px; background: red;-webkit-transform: rotate(-90deg);}
文字
文字陰影
text-shadow：x y blur color, …
參數
x 橫向偏移
y 縱向偏移
blur 模糊距離
color 陰影顏色
文本陰影若是加不少層，會很卡很卡很卡nginx
文字陰影應用web
最簡單用法瀏覽器
text-shadow:2px 2px 4px black
陰影疊加iphone
text-shadow:2px 2px 0px red, 2px 2px 4px green;
先渲染後面的，再渲染前面的
幾個好玩的例子ide
//層疊：color:red; font-size:100px; font-weight:bold; text-shadow:2px 2px 0px white, 4px 4px 0px red;//光暈：color:white; font-size:100px; text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;//火焰文字：text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; font-family:Verdana, Geneva, sans-serif; font-size:100px; font-weight:bold; color:white;
文字描邊
webkit-text-stroke:寬度 顏色
新增文本功能
Direction 定義文字排列方式(全兼容)
Rtl 從右向左排列
Ltr 從左到右
注意要配合unicode-bidi 一塊使用
p{width:300px;border:1px solid #000;font:14px/30px "宋體";direction:rtl;unicode-bidi:bidi-override;unicode-bidi: bidi-override}
Text-overflow 定義省略文本的處理方式
clip 無省略號
Ellipsis 省略號 (注意配合overflow:hidden和white-space:nowrap一塊使用)
p{width:300px;border:1px solid #000;font:14px/30px "宋體"; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
自定義文字
代碼格式
@font-face { font-family: 'miaov'; src: url('1-webfont.eot'); src: url('1-webfont.eot?#iefix') format('embedded-opentype'), url('1-webfont.woff') format('woff'), url('1-webfont.ttf') format('truetype'), url('1-webfont.svg#untitledregular') format('svg'); font-weight: normal; font-style: normal;}
轉換字體格式生成兼容代碼http://www.fontsquirrel.com/fontface/generator
彈性佈局
彈性盒模型
<style>.box{height:100px;padding:10px; display:-webkit-box; display: -moz-box;}.box div{width:100px;height:100px;background:red;border:1px solid #fff;}</style></head><body><div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div></div>
注意在使用彈性盒模型的時候 父元素必需要加display:box 或 display:inline-box
box-orient 定義盒模型的佈局方向
Horizontal 水平顯示 vertical 垂直方向
.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box;-webkit-box-orient:vertical; }
box-direction 元素排列順序
Normal 正序 Reverse 反序
.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box;-webkit-box-direction:Reverse; font-size:20px;color:#fff; }
box-ordinal-group 設置元素的具體位置
.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box; font-size:20px;color:#fff; }.box div{width:100px;height:100px;background:red;border:1px solid #fff;}.box div:nth-of-type(1){-webkit-box-ordinal-group:2;}.box div:nth-of-type(2){-webkit-box-ordinal-group:4;}.box div:nth-of-type(3){-webkit-box-ordinal-group:1;}.box div:nth-of-type(4){-webkit-box-ordinal-group:5;}.box div:nth-of-type(5){-webkit-box-ordinal-group:3;}
box-flex 定義盒子的彈性空間
子元素的尺寸=盒子的尺寸*子元素的box-flex屬性值 / 全部子元素的box-flex屬性值的和
.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box; font-size:20px;color:#fff; }.box div{height:100px;background:red;border:1px solid #fff;}.box div:nth-of-type(1){width:300px;}.box div:nth-of-type(2){-webkit-box-flex:2;}.box div:nth-of-type(3){-webkit-box-flex:3;}.box div:nth-of-type(4){-webkit-box-flex:4;}.box div:nth-of-type(5){-webkit-box-flex:5;}
box-pack 對盒子富裕的空間進行管理
start 全部子元素在盒子左側顯示，富裕空間在右側
end 全部子元素在盒子右側顯示，富裕空間在左側
center 全部子元素居中
justify 富餘空間在子元素之間平均分佈
.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box;-webkit-box-direction:Reverse; font-size:20px;color:#fff;-webkit-box-pack:justify ; }
box-align 在垂直方向上對元素的位置進行管理
star 全部子元素在據頂
end 全部子元素在據底
center 全部子元素居中
<style>
/*個未知寬高的塊元素如何在屏幕中水平垂直居中？需說明原理。*/html{height:100%;}body{height:100%;margin:0;}.box{height:100%; display:-webkit-box;-webkit-box-direction:Reverse; font-size:20px;color:#fff;-webkit-box-pack:center; -webkit-box-align:center;}.box div{background:red;border:1px solid #fff;}</style></head><body><div class="box">
<div>1s</div>
<div>2s</div>
<div>3s</div>
<div>4s</div>
<div>5s</div></div>
盒模型陰影
用法
box-shadow:[inset] x y blur [spread] color
參數
inset投影方式
inset：內投影
不給：外投影
x、y：陰影偏移
blur：模糊半徑
spread：擴展陰影半徑
先擴展原有形狀，再開始畫陰影color
box-shadow:10px 10px 30px blue;box-shadow:inset 10px 10px 30px blue;box-shadow:0 0 30px 10px #000; box-shadow:0 0 30px 30px #000,inset 0 0 30px yellow;
其餘盒模型新增屬性
box-reflect 倒影
direction 方向必選 above|below|left|right;
距離
漸變（可選）
img{ -webkit-box-reflect:below;}//上下排列，倒影在下方img{ -webkit-box-reflect:right 10px;}//左右排列，倒影在右方img{-webkit-box-reflect:right 10px -webkit-linear-gradient(right,rgba(0,0,0,1) 0,rgba(0,0,0,0) 50%);}//線性漸變，逐漸消失background:-webkit-linear-gradient(red 0,blue 100%);//背景漸變
resize 自由縮放
both 水平垂直均可以縮放
horizontal 只有水平方向能夠縮放
vertical 只有垂直方向能夠縮放
.box{width:100px;height:100px;background:url(bg.jpg);border:5px solid #000; resize:both; overflow:auto;}
注意：必定要配合overflow:auto 一塊使用只有水平方向能夠縮放
box-sizing 盒模型解析模式
content-box 標準盒模型 width/height=border+padding+content
border-box 怪異盒模型 width/height=content
.box{width:200px;height:200px;padding:50px;border:10px solid #000; box-sizing:border-box;}
Css3分欄佈局
column-width 欄目寬度
column-count 欄目列數
column-gap 欄目距離
column-rule 欄目間隔線
.wrap{width:900px;border:1px solid #000; font:14px/28px "宋體";color:#000; text-indent:2em; -webkit-column-width:400px;}//分紅了寬度400px的兩欄.wrap{ -webkit-column-count:4; -webkit-column-gap:30px; -webkit-column-rule:1px solid red;}//分紅了四列
只有webkit內核實現了該屬性
Css3響應式佈局
媒體類型
all 全部媒體
braille 盲文觸覺設備
embossed 盲文打印機
print 手持設備
projection 打印預覽
screen 彩屏設備
speech '聽覺'相似的媒體類型
tty 不適用像素的設備
tv 電視
關鍵字
and
not not關鍵字是用來排除某種制定的媒體類型
only only用來定某種特定的媒體類型
媒體特性
(max-width:600px)
(max-device-width: 480px) 設備輸出寬度
(orientation:portrait) 豎屏
(orientation:landscape) 橫屏
(-webkit-min-device-pixel-ratio: 2) 像素比
devicePixelRatio 設備像素比 window.devicePixelRatio = 物理像素 / dips
@media screen{ 選擇器{屬性：屬性值； }
}
@media screen and (max-width:400px) {
}
移動端meta
<meta name="viewport" content="" />
width [pixel_value | device-height]
height [pixel_value | device-height]
user-scalable 是否容許縮放 （no||yes）
initial-scale 初始比例
minimum-scale 容許縮放的最小比例
maximum-scale 容許縮放的最大比例
target-densitydpi [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
新增樣式屬性
圓角
border-radius: 1-4個數字 / 1-4個數字
前面是水平，後面是垂直
不給「/」則水平和垂直同樣
border-radius: 10px/5px; border-radius:100px/150px; border-radius:20px 40px 60px 80px/10px 20px 30px 40px;
參數
各類長度單位均可以：px，%。 %有時很方便但寬高不一致時不太好
border-radius:50%;
用法
1個：都同樣
border-radius: 同樣
border-radius:20px;
2個：對角
border-radius: 左上&右下 右上&左下
border-radius:20px 40px;
3個：斜對角
border-radius: 左上 右上&左下 右下
border-radius:20px 40px 60px;
4個：所有，順時針
border-radius: 左上 右上 右下 左下
border-radius:20px 40px 60px 80px;
例子：風車
<style>.box{width:400px;height:400px;margin:50px auto; transition:5s linear;}.box div{width:180px;height:180px;margin:10px;border:1px solid #000; box-sizing:border-box;float:left;background:red ;}.box div:nth-child(1),.box div:nth-child(4){ border-radius:0 70%;}.box div:nth-child(2),.box div:nth-child(3){ border-radius:70% 0;}.box:hover{ -webkit-transform:rotate(720deg);}</style></head><body><div class="box">
<div></div>
<div></div>
<div></div>
<div></div></div>
邊框
邊框圖片 border-image
border-image-sourceg 引入圖片
border-image-slice 切割圖片
border-image-width 邊框寬度
border-image-repeat 圖片的排列方式 round 平鋪,repeat 重複,stretch拉伸
.box{width:200px;height:60px; -webkit-border-image:url(bt_blue.png) 0 10;border-left-width:20px;border-right-width:20px;}.box{width:100px;height:100px; border-width:20px; -webkit-border-image:url(border.png) 27 27 round round;}
邊框顏色 border-colors 只在火狐下實現
-moz-border-left-colors:red blue yellow red blue yellow red blue yellow;
線性漸變
線性漸變格式
linear-gradient([<起點> || <角度>,]? <點>, <點>…)
只能用在背景上
IE 下的樣式格式以下
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1');`
參數
起點：從什麼方向開始漸變 left、top、left top 默認：top
角度：從什麼角度開始漸變 x deg的形式
background-image:-webkit-linear-gradient(60deg,red,blue);background-image:-webkit-linear-gradient(60deg,red,blue,yellow,blue);
點：漸變點的顏色和位置
black 50%，位置可選
線性漸變實例進度條
<style>.wrap{width:200px;height:30px;overflow:hidden;border:1px solid #000;}.box{width:400px;height:30px;background:-webkit-repeating-linear-gradient(15deg,green 0,green 10px,#fff 10px,#fff 20px); transition:3s;}.wrap:hover .box{ margin-left:-100px;}</style></head><body><div class="wrap">
<div class="box"></div></div>
background-image:-webkit-linear-gradient(60deg,red 0,blue 50%,green 100%);
repeating-linear-gradient
background-image:-webkit-repeating-linear-gradient(60deg,red 0,blue 30px);
性漸變實例(2)
加入點的位置
top, red 40%, green 60%
top, red 50%, green 50%
同一個位置兩個點——直接跳變
也能夠用px 配合rgba
top, rgba(255,255,255,1), rgba(255,255,255,0)
加入背景圖片
background: -webkit-linear-gradient (top, rgba(255,255,255,1) 30%, rgba(255,255,255,0)), url(a.gif)
實例：百度音樂圖片光影效果
<style>.box{width:300px;height:300px;background:-webkit-linear-gradient(-30deg,rgba(255,255,255,0) 0,rgba(255,255,255,0) 150px,rgba(255,255,255,1) 170px,rgba(255,255,255,1) 180px,rgba(255,255,255,0) 210px) no-repeat -200px 0,url(new_bg.png) no-repeat; transition:1s;}.box:hover{background-position:300px 0,-100px -100px;}</style></head><body><div class="box"></div>
兼容版本
.box{background:-webkit-linear-gradient(red,blue);background:-moz-linear-gradient(red,blue);background:linear-gradient(red,blue); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='red',endColorstr='blue',GradientType='0');}
徑向漸變
radial-gradient([<起點>]? [<形狀> || <大小>,]? <點>, <點>…);
起點：能夠是關鍵字（left,top,right,bottom），具體數值或百分比
形狀： ellipse、circle
大小 :具體數值或百分比，也能夠是關鍵字（最近端，最近角，最遠端，最遠角，包含或覆蓋 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）;
注意firefox目前只支持關鍵字
background:-webkit-radial-gradient(red,blue);background:-webkit-radial-gradient(100px 50px,red,blue);background:-webkit-radial-gradient(100px 50px,circle,red,blue);background:-webkit-radial-gradient(100px 50px,100px 20px,red,blue);background:-moz-radial-gradient(100px 50px,red,blue);
<style>.box{width:300px;height:300px;border:1px solid #000;float:left;margin:10px;}.box:nth-child(1){ background:-webkit-radial-gradient(100px 50px,closest-side,red,blue);}.box:nth-child(2){ background:-webkit-radial-gradient(100px 50px,closest-corner,red,blue);}.box:nth-child(3){ background:-webkit-radial-gradient(100px 50px,farthest-side,red,blue);}.box:nth-child(4){ background:-webkit-radial-gradient(100px 50px,farthest-corner,red,blue);}.box:nth-child(5){ background:-webkit-radial-gradient(100px 50px,contain ,red,blue);}.box:nth-child(6){ background:-webkit-radial-gradient(100px 50px,cover ,red,blue);}</style></head><body><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></body>
背景
多背景 先寫的背景在上面
逗號分開
background: url(a.jpg) 0 0, url(b.jpg) 0 100%;
background:url(bt_blue.png) no-repeat, url(border.png) repeat-y right 0;
背景尺寸
background-size:x y
background-size:100% 100%
Cover 放大
Contain 縮小
ackground-origin ： border | padding | content
border-box： 從border區域開始顯示背景。
padding-box： 從padding區域開始顯示背景。
content-box： 從content區域開始顯示背景。
background-clip
border： 從border區域向外裁剪背景。
padding： 從padding區域向外裁剪背景。
content： 從content區域向外裁剪背景。
no-clip： 從border區域向外裁剪背景。
實例：iphone開機動畫
遮罩
Mask-image
Mask-position
Mask-repeat
實例：特殊形狀的幻燈片效果
一、經過 translate 來移動元素和用 left top 移動元素有何區別？分別有何優劣？二、在兼容IE6及全部其餘瀏覽器、不使用JS的前提下：一個未知寬高的塊元素如何在屏幕中水平垂直居中？需說明原理。三、在兼容IE6及全部其餘瀏覽器、不使用JS的前提下：三列布局：中間寬度固定，兩側寬度自適應屏幕？需說明原理。四、在兼容IE6及全部其餘瀏覽器、不使用JS的前提下：三列布局：中間自適應屏幕，兩側固定寬度，要求至少兩種方式完成。五、請在IE6下實現元素（如：DIV）中心點的旋轉？六、對於一個大型網站靜態頁面的製做，談談你對HTML結構的設計、CSS樣式表規劃及重用性的思考？
- 1. css3總結筆記
- 2. CSS3的筆記總結
- 3. 筆記總結
- 4. html5+css3總結
- 5. CSS3總結
- 6. css3總結
- 7. HTML5+CSS3總結
- 8. CSS3 總結（一）
- 9. CSS3筆記
- 10. HTML5/CSS3筆記
- 更多相關文章...
- • Docker 資源彙總 - Docker教程
- • ASP.NET Razor - 標記 - ASP.NET 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 算法總結-雙指針
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 在windows下的虛擬機中,安裝華爲電腦的deepin操作系統
- 2. 強烈推薦款下載不限速解析神器
- 3. 【區塊鏈技術】孫宇晨：區塊鏈技術帶來金融服務的信任變革
- 4. 搜索引起的鏈接分析-計算網頁的重要性
- 5. TiDB x 微衆銀行 | 耗時降低 58%，分佈式架構助力實現普惠金融
- 6. 《數字孿生體技術白皮書》重磅發佈（附完整版下載）
- 7. 雙十一「避坑」指南：區塊鏈電子合同爲電商交易保駕護航！
- 8. 區塊鏈產業，怎樣「鏈」住未來？
- 9. OpenglRipper使用教程
- 10. springcloud請求一次好用一次不好用zuul Name or service not known
- 1. css3總結筆記
- 2. CSS3的筆記總結
- 3. 筆記總結
- 4. html5+css3總結
- 5. CSS3總結
- 6. css3總結
- 7. HTML5+CSS3總結
- 8. CSS3 總結（一）
- 9. CSS3筆記
- 10. HTML5/CSS3筆記