1.開發(fā)的兩種模式：
漸進(jìn)增強(qiáng)(特點(diǎn)：1.實(shí)現(xiàn)一個(gè)兼容性較好的頁面阁最。2.根據(jù)需求往上添加新的功能盯拱，新的技術(shù))
優(yōu)雅降級(jí)（特點(diǎn)：1.使用最新的技術(shù)事甜，最酷炫的效果實(shí)現(xiàn)頁面订歪，2.根據(jù)網(wǎng)站的用戶瀏覽器版本進(jìn)行針對(duì)性兼容性寫法）
2.css兼容性問題：
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */ 火狐下需要加的前綴
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
-ms-transform:width 2s; /* IE */
3.屬性選著器
<style>
/* 獲取到 擁有 該屬性的元素 */
li[type]{
border: 1px solid gray;
}
/* 獲取 屬性等于某個(gè)值的 元素 屬性值 可以使用 引號(hào)進(jìn)行包裹 */
li[type="vegetable"]{
background-color: green;
}
/* 使用空格分隔的 多個(gè)屬性 其中有某個(gè)屬性即可獲取 */
li[type~="hot"]{
font-size: 40px;
}
/* 獲取以某個(gè)屬性開頭的語法 */
li[color^='green']{
background-color: orange;
}
/* 獲取以某個(gè)值 結(jié)尾的屬性 */
li[type$='t']{
color: hotpink;
font-weight: 900;
}
/* 獲取 屬性中 擁有某個(gè)值的 元素 */
li[type*=ea]{
font-size: 100px;
}
/* 如果屬性的值 只有very 也能夠獲取 用來獲取 多個(gè)屬性 并且 使用-連接 */
li[price|='very']{
background-color: darkred;
}
</style>
這些屬性選著器主要用于精靈圖的使用穿肄。
演示代碼：
<style type="text/css">
div[class^='icon-']{
background-image: url('images/sprites.png');
background-repeat: no-repeat;
background-color: gray;
}
.icon-car{
background-position: -185px -65px;
/* 指定寬高 */
width: 51px;
height: 38px;
}
.icon-people{
background-position: -253px -64px;
/* 指定寬高 */
width: 34px;
height: 39px;
}
.icon-house{
background-position: -66px -63px;
width: 47px;
height: 41px;
}
</style>
<body>
<div class='icon-car'>
</div>
<div class='icon-people'></div>
<div class='icon-house'></div>
</body>
4.偽類選著器
孩子偽類選著器
E:first-child 作用： 匹配父元素的第一個(gè)子元素E年局。
E:last-child 作用： 匹配父元素的最后一個(gè)子元素E
E:nth-child(n) 作用： 匹配父元素的第n個(gè)子元素E。
E:nth-last-child(n) 作用： 匹配父元素的倒數(shù)第n個(gè)子元素E咸产。
種類選著器
E:nth-last-child(n) 匹配父元素的倒數(shù)第n個(gè)子元素E矢否。
E:first-of-type 匹配同類型中的第一個(gè)同級(jí)兄弟元素E。
E:last-of-type 匹配同類型中的最后一個(gè)同級(jí)兄弟元素E脑溢。
E:only-of-type 匹配同類型中的唯一的一個(gè)同級(jí)兄弟元素E僵朗。
E:nth-of-type(n) 匹配同類型中的第n個(gè)同級(jí)兄弟元素E。
E:nth-last-of-type(n) 匹配同類型中的倒數(shù)第n個(gè)同級(jí)兄弟元素E焚志。
區(qū)別：
E:last-child是先找到最后一個(gè)孩子衣迷，如果最后一個(gè)孩子不是E標(biāo)簽，則設(shè)置的樣式無效酱酬。
E:last-of-type:是找到所有的E標(biāo)簽壶谒，對(duì)所有E標(biāo)簽最后設(shè)置樣式。
代碼演示：
<style type="text/css">
/* last-child 是找到 在父元素中 滿足前面選擇器條件的 最后一個(gè),
如果最后一個(gè) 不是 h3標(biāo)簽 那么無法獲取*/
.filmBox>h3:last-child{
color: red;
}
.filmBox>h3:last-of-type{
color: green;
}
</style>
<body>
<div class='filmBox'>
<h3>北京遇上西雅圖</h3>
<h3>小鬼當(dāng)家</h3>
<h3>夏洛特?zé)?lt;/h3>
<h3>神犬小七</h3>
<h3>湄公河行動(dòng)</h3> //此標(biāo)簽為紅色膳沽，有（h3:last-of-type）生效
<h2>建國大業(yè)</h2> //此標(biāo)簽沒有顏色變化
</div>
</body>
在sublime和webstorm中 快速生成測試文本
使用快捷鍵: lorem+tab;
5.偽元素選擇器(一)
E:first-letter/E::first-letter 設(shè)置對(duì)象內(nèi)的第一個(gè)字符的樣式汗菜。
E:first-line/E::first-line 設(shè)置對(duì)象內(nèi)的第一行的樣式让禀。
E::placeholder 設(shè)置對(duì)象文字占位符的樣式。但是兼容性 奇差無比陨界。
E::selection 設(shè)置對(duì)象被選擇時(shí)的顏色巡揍。
注意：
- 我們不建議使用 一個(gè)冒號(hào)的的偽元素選著器，最好使用兩個(gè)冒號(hào)偽元素選菌瘪。
- placeholder的兼容性極差腮敌，在谷歌瀏覽器上需要使用-webkit-input-placeholder，否者無效
- selection只能改變color ,background-color, text-shadow.其他的不能改變俏扩。
<input type="text" placeholder="占位符" />
input::-webkit-input-placeholder {
color: #999;
}
input:-ms-input-placeholder { // IE10+
color: #999;
}
input:-moz-placeholder { // Firefox4-18
color: #999;
}
input::-moz-placeholder { // Firefox19+
color: #999;
}
5.偽元素選著器（二）
E:before/E::before 設(shè)置在對(duì)象前（依據(jù)對(duì)象樹的邏輯結(jié)構(gòu)）發(fā)生的內(nèi)容糜工。用來和content屬性一起使用
E:after/E::after 設(shè)置在對(duì)象后（依據(jù)對(duì)象樹的邏輯結(jié)構(gòu)）發(fā)生的內(nèi)容。用來和content屬性一起使用
代碼演示：
/* 通過 偽元素選擇器的方式 為其 添加新的 '元素''
能夠在 不添加 其他標(biāo)簽的情況下 新增一個(gè)元素
*/
div::before{
/* 必須設(shè)置 content屬性 只是需要擁有這個(gè)屬性 即可 屬性值 是什么 無所謂*/
content: '';
/* before偽元素 默認(rèn)是行內(nèi)元素 為了能夠設(shè)置寬高 需要變成塊 */
display: block;
/* width: 50px; */
width: 100%;height: 50px;border: 1px solid black;position: absolute;
bottom: 0px;left: 0px;background-color: hotpink;
}
/* after 跟before 基本一樣 除了 名字不同而已 */
div::after{
content: '';display: block;
/* width: 50px; */
width: 100%;height: 50px;border: 1px solid orange;position: absolute;
top: 0px;left: 0px;background-color: skyblue;
}
注意事項(xiàng)：
- 偽元素選擇器 只能夠設(shè)置一個(gè)元素 其內(nèi)部 無法再添加 后代元素
- 偽元素選擇器 只能夠添加給 雙標(biāo)簽元素
- before 跟 after 只是名字不同而已 用法一樣
- 雙標(biāo)簽元素 只支持 這兩個(gè)偽元素
使用案例：
<style type="text/css">
.showBox{
width: 320px;
height: 320px;
background: url('images/robot.png') no-repeat center;
margin: 50px auto;
position: relative;
}
/* before after 只是語法不同而已 實(shí)際使用中 可以隨意挑選 */
.showBox::after{
content: '';
position: absolute;
width: 100%;
height: 0%;
background-color: orange;
opacity: .5;
transition: all 1s;
}
/* 手指移動(dòng)到 div上的時(shí)候 才出現(xiàn)遮擋 */
.showBox:hover::after{
height: 100%;
}
</style>
<body>
<div class='showBox'>
</div>
</body>
6.Color(顏色)
顏色的設(shè)置方法：
- 單詞（red, green....）
- 十六進(jìn)制（#fff 或#ffffff）
- rgb(red,green,blue)
- rgba(red,green,blue,alpha)
- hsl (色相录淡，飽和度捌木，明度) //hue,saturation,luminance
- hsla() //使用方法一樣
注意：
opacity:透明度會(huì)被繼承， 其他的rgba,hsla中的透明度不會(huì)被繼承嫉戚。
7.text-shadow(文字陰影)
屬性：
/* 文字陰影
陰影的大小 默認(rèn)是跟 文字一樣大
方向
x的正方向是 右邊
y的正方向是 下邊
顏色的模糊
會(huì)直接放大影子
顏色
默認(rèn)的顏色是黑色
x y 模糊 顏色
如果要設(shè)置多個(gè) 直接使用 逗號(hào)分隔 繼續(xù)往后寫即可
*/
text-shadow: 0px 0px 10px yellow,
0px 0px 20px red;
8.box-shadow(盒子陰影)
屬性：
/* 設(shè)置盒子陰影
影子默認(rèn)跟元素的大小一樣
(影子發(fā)散的方向 默認(rèn)是 往外)
inset
影子的方向
影子的顏色
影子的模糊
直接放大影子
不是模糊的 視覺效果上 較差
(方向 x y 模糊 放大 color)
方向 的 x跟y 是必須設(shè)置的 不能省略 但是 模糊 跟 影子放大 可以省略
如果想要
只設(shè)置模糊 可以 0 0 10px orange
只設(shè)置放大 0 0 0 10px orange
*/
/* box-shadow: 1px 1px hotpink,
-1px -1px orange; */
/* box-shadow: 0px 0px 0px 10px yellow; */
/* box-shadow: inset 0px 0px 0px 0px yellow; */
box-shadow: 100px 100px 100px yellow;
9.box-sizing(盒模型)
屬性:
- content-box : ( Element width = width + border + padding ) 此屬性表現(xiàn)為標(biāo)準(zhǔn)模式下的盒模型
- border-box：( Element width = width ) 此屬性表現(xiàn)為怪異模式下的盒模型刨裆。
注意：如果設(shè)置成border-box,那么padding也不會(huì)撐大盒子
10.background(背景)
background-size:contain,或者cover;(80px 60px;)
注意:
1.contain 圖片兩邊等比例拉伸 知道 某一邊 頂格 停止拉伸
2.cover 圖片等比例拉伸 保證 兩邊 都頂格 可能會(huì)出去
可以進(jìn)行多背景設(shè)置：
//如果有重復(fù)部分，前面的背景會(huì)覆蓋后面的背景
background-image:url('images/gyt.jpg'),url('images/robot.png');
background-size: 300px 100px,400px 200px;
/* 設(shè)置多張圖片的 位置
如果不想使用 字母的方式進(jìn)行設(shè)置 想要精確修改
*/
/* background-position: top left,bottom right; */
background-position: top left,100px 200px;
background-origin:(背景圖開始的位置)
屬性：
- border-box,content-box,和padding-box.
background-clip:(背景圖切割的位置)
屬性：
- content-box,和padding-box.
演示代碼：
<style>
div{
width: 300px;
height: 300px;
border: 5px dashed gray;
margin: 0 auto;
padding: 10px;
background: url('images/gyt.jpg') no-repeat top left /200px 200px;
/* 設(shè)置的是 背景圖片 開始的位置
border-box: 從邊框開始;
下面這兩個(gè)屬性 如果沒有設(shè)置 padding 那么 看起來視覺效果一樣
content-box: 從內(nèi)容開始;
padding-box padding開始的位置
*/
background-origin: border-box;
/* 背景圖 切割的位置
padding-box padding之外的區(qū)域切割
content-box 內(nèi)容之外的區(qū)域切割
*/
background-clip: content-box;
}
</style>
11.漸變
1.線性漸變(linear-gradient())
2.徑向漸變（radial-gradient()）
使用方法（linear-gradient）：
linear-gradient(angle,color ,color percentage)
例子：
linear-gradient(to bottom, #fff, #333);
linear-gradient(to top, #333, #fff);
linear-gradient(180deg, #fff, #333);
linear-gradient(to bottom, #fff 0%, #333 100%);
注意:角度也可以用位置設(shè)置
to left： 設(shè)置漸變?yōu)閺挠业阶蟊蛱础Ｏ喈?dāng)于: 270deg
to right： 設(shè)置漸變從左到右帆啃。相當(dāng)于: 90deg
to top： 設(shè)置漸變從下到上。相當(dāng)于: 0deg
to bottom： 設(shè)置漸變從上到下凤覆。相當(dāng)于: 180deg链瓦。這是默認(rèn)值，等同于留空不寫盯桦。
使用方法(radial-gradient())：
使用方法：
radial-gradient(shape at position,color percentage,color percentage)
示例代碼：
background:radial-gradient(100px 100px at 20px 30px ,red, green 30%慈俯，yellow);
//解釋： 100px 100px 表示 直徑，分別表示橫直徑拥峦，和縱直徑贴膘，兩個(gè)值相同的話表示是圓，
如果不相同略号，則表示的是橢圓刑峡，這兩個(gè)值也可以用單詞代替。（circle玄柠，ellipse）
示例:
background:radial-gradient(circle或者ellipse at 20px 30px ,red, green 30%突梦，yellow);
//解釋： 20px 30px 表示徑向漸變中心點(diǎn)的位置，也可以使用單詞來代替
（left,center,right || top羽利，center,bottom）
示例：
background:radial-gradient(circle或者ellipse at left top ,red, green 30%宫患，yellow);
其他形參值不做介紹。
注意：
在使用單詞（circle,ellipse）可以添加如下內(nèi)容：
closest-side： 指定徑向漸變的半徑長度為從圓心到離圓心最近的邊
closest-corner： 指定徑向漸變的半徑長度為從圓心到離圓心最近的角
farthest-side： 指定徑向漸變的半徑長度為從圓心到離圓心最遠(yuǎn)的邊
farthest-corner： 指定徑向漸變的半徑長度為從圓心到離圓心最遠(yuǎn)的角 这弧、
示例代碼：
radial-gradient(circle farthest-corner, #f00, #ff0, #080);
radial-gradient(circle farthest-corner, #f00, #ff0, #080);
radial-gradient(circle farthest-corner, #f00, #ff0, #080);
radial-gradient(circle farthest-corner, #f00, #ff0, #080);
效果自行演示娃闲，就可以明白他們的區(qū)別了虚汛。
