-
屬性選擇器
<a?href="xxx.pdf">我鏈接的是PDF文件</a> <a?href="#"?class="icon">我類名是icon</a> <a?href="#"?title="我的title是more">我的title是more</a>
a[class^=icon]{ ??background:?green; ??color:#fff; } a[href$=pdf]{ ??background:?orange; ??color:?#fff; } a[title*=more]{ ??background:?blue; ??color:?#fff; }偽類選擇器：root
對根元素<html>進行設(shè)置
:root{ background:orange; } 等價于 html{ background:orange; }偽類選擇器：not
選擇除了某個元素以外的所有元素。
所有元素:not([type="某個元素"])
例：給form表單中除submit按鈕之外的input元素添加紅色邊框。
form{ ????width:200px; ????margin:20px?auto; } div{ ????margin-bottom:20px; } input:not([type="submit"]){ ????border:1px?solid?red; }<form?action="#"> ????<div> ????????<label?for="name">Text?Input:</label> ????????<input?type="text"?name="name"?id="name"?/> ????</div> ????<div> ????????<label?for="name">Password?Input:</label> ????????<input?type="text"?name="name"?id="name"?/> ????</div> ????<div> ????????<input?type="submit"?value="Submit"?/> ????</div> </form>
查看全部 -
偽元素
:first-line
向文本的首行添加特殊樣式；注意：只能用于塊級元素。
<style> p:first-line ??{ ??color:#ff0000; ??font-variant:small-caps; ??} </style> <body> ????<p>You?can?use?the?:first-line?pseudo-element?to?add<br> ?????a?special?effect?to?the?first?line?of?a?text!</p> </body>
:first-letter
用于向文本的首字母設(shè)置特殊樣式。注意：只能用于塊級元素。
<style?type="text/css"> p:first-letter?{ ????color:?#ff0000; ????font-size:xx-large } </style> <body> ????<p>You?can?use?the?:first-letter?pseudo-element?to?add?a?special?effect?to?the?first?letter?of?a?text!</p> </body>
:before
在元素的內(nèi)容前面插入新內(nèi)容。
h1:before ??{ ??content:url(logo.gif); ??}:after
在元素的內(nèi)容之后插入新內(nèi)容。
偽元素和 CSS 類
p.article:first-letter ??{ ??color:?#FF0000; ??} <p?class="article">This?is?a?paragraph?in?an?article。</p> //使所有?class?為?article?的段落的首字母變?yōu)榧t色。:before和:after常見使用場景
1、清除浮動
?????<div?class="l-form-row"> ?????????<div?class="l-form-label"></div> ?????????....???????????? ?????</div> ?????<style> ?????????.l-form-row:after?{???????????????????? ?????????????clear:?both;???????????????????? ?????????????content:?"\0020";???????????????????? ?????????????display:?block;???????????????????? ?????????????height:?0;???????????????????? ?????????????overflow:?hidden ?????????}???????????? ?????</style> ????? ?????//class=l-form-row的元素內(nèi)部任何浮動都能清除掉，不用額外添加無意義的元素2、利用 attr() 來實現(xiàn)某些動態(tài)功能——優(yōu)化無法加載的img
①當(dāng)頁面上加載的圖片無法加載時，通過偽元素配合樣式，更美觀
img{ ????max-height:?200px; ????position:?relative; } img:before{ ????content:?"?"; ????display:?block; ????position:?absolute; ????top:?0px; ????left:?0; ????height:?calc(100%?+?10px); ????width:?100%; ????backgound-color:?rgb(230,?230,230); ????border:?2px?dotted?rgb(200,200,200); ????border-radius:?5px; } img:after{ ????content:?"\f127"?"?Broken?Image?of?"?attr(alt);/*替換alt文本*/ ????display:?block; ????font-size:?16px; ????font-style:?normal; ????font-family:?FontAwesome; ????color:?rgb(100,100,100); ????position:?absolute; ????top:?5px; ????left:?0; ????width:?100%; ????text-align:?center; }3、特效使用
a?{ ????position:?relative; ????display:?inline-block; ????outline:?none; ????text-decoration:?none; ????color:?#000; ????font-size:?20px; ????padding:?5px?10px; } a:hover::before,?a:hover::after?{?position:?absolute;?} a:hover::before?{?content:?"\5B";?left:?-10px;?} a:hover::after?{?content:?"\5D";?right:??-10px;?}
查看全部 -
背景樣式
1、設(shè)置元素背景圖片的原始起始位置
background-origin?：?border-box?|?padding-box?|?content-box;
參數(shù)分別表示背景圖片是從邊框，還是內(nèi)邊距（默認值），或者是內(nèi)容區(qū)域開始顯示。
注意：背景不是no-repeat，這個屬性無效，它會從邊框開始顯示。
2、對背景圖片進行適當(dāng)裁剪（去掉框外部的）
background-clip?：?border-box?|?padding-box?|?content-box?|?no-clip
border-box：邊框
padding-box：內(nèi)填充
content-box：內(nèi)容區(qū)域
no-clip：不裁切，和參數(shù)border-box顯示同樣的效果
background-clip：默認值為border-box。
3、設(shè)置背景圖片的大小
以長度值或百分比顯示。還可以通過cover和contain來對圖片進行伸縮
background-size:?auto?|?<長度值>?|?<百分比>?|?cover?|?contain
auto：默認值，不改變背景圖片的原始高度和寬度；
<長度值>：成對出現(xiàn)如200px 50px，將背景圖片寬高依次設(shè)置為前面兩個值，當(dāng)設(shè)置一個值時，將其作為圖片寬度值來等比縮放；
<百分比>：0％~100％之間的任何值，將背景圖片寬高依次設(shè)置為所在元素寬高乘以前面百分比得出的數(shù)值，當(dāng)設(shè)置一個值時同上；
cover：顧名思義為覆蓋，即將背景圖片等比縮放以填滿整個容器；
contain：容納，即將背景圖片等比縮放至某一邊緊貼容器邊緣為止。
4、多重背景
查看全部 -
文字與字體
1、文本溢出
text-overflow?
text-overflow:clip（剪切）或者ellipsis（顯示省略標(biāo)記）?
2、溢出時產(chǎn)生省略號
須定義強制文本在一行內(nèi)顯示（white-space:nowrap）及溢出內(nèi)容為隱藏（overflow:hidden）
text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
3、設(shè)置文本行為，當(dāng)前行超過指定容器的邊界時是否斷開轉(zhuǎn)行。
word-wrap:normal(連續(xù)文本換行)或者break-word（內(nèi)容在邊界內(nèi)換行，在長單詞或URL地址內(nèi)部）
4、嵌入字體
????@font-face
????加載服務(wù)器端的字體文件，讓web端顯示用戶電腦里沒有安裝的字體。
@font-face?{ ????font-family:字體名稱; ????src:字體文件在服務(wù)器上的相對或絕對路徑; }使用方式：
p{ ????font-size:12px; ????font-family:"My?Font"; ????/*必須項，設(shè)置@font-face中font-family同樣的值*/ }5、文本陰影
text-shadow:X-Offset?Y-Offset?blur?color;
X-Offset：表示陰影的水平偏移距離，其值為正值時陰影向右偏移，反之向左偏移；??????
Y-Offset：是指陰影的垂直偏移距離，如果其值是正值時，陰影向下偏移，反之向上偏移；
Blur：是指陰影的模糊程度，其值不能是負值，如果值越大，陰影越模糊，反之陰影越清晰，如果不需要陰影模糊可以將Blur值設(shè)置為0；
Color：是指陰影的顏色，其可以使用rgba色。
查看全部 -
顏色之RGBA
color:rgba(R,G,B,A)
A為透明度參數(shù)，取值為0~1。
?漸變色彩?
線性漸變：
linear-gradient(to?bottom,#fff,#999)
? linear-gradient ：漸變類型，徑向為radial。
參數(shù)1：指定漸變方向? ?可以用“角度”的關(guān)鍵詞或“英文”。? ?參數(shù)省略時，默認為“180deg”
參數(shù)2、參數(shù)3：表示顏色的起始點和結(jié)束點。中間可以有多個顏色值。
background-image:linear-gradient(to?left,?red,?orange,yellow,green,blue,indigo,violet);
查看全部 -
圖片邊框樣式
border-image
查看全部 -
邊框陰影
box-shadow
X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴展半徑] [陰影顏色] [投影方式];
參數(shù)介紹：
注意：inset 可以寫在參數(shù)的第一個或最后一個，其它位置是無效的。
X軸/Y軸偏移量可以為負數(shù)。
陰影模糊半徑：參數(shù)可選，只能是正值。
????????????????????????等于0時：陰影沒有模糊，值越大陰影邊緣越模糊。
陰影擴展半徑：參數(shù)可選，正負值。
? ? ? ? ? ? ? ? ? ? ? ? 值為正，陰影擴展擴大，反之。
多個陰影
只需用逗號隔開即可。如：
.box_shadow{ ????box-shadow:4px?2px?6px?#f00,?-4px?-2px?6px?#000,?0px?0px?12px?5px?#33CC00?inset; }查看全部 -
邊框圓角效果
border-radius:? ? 左上角、右上角、右下角、左下角（順時針）
px,%,em
實心上半圓
1、把高度(height)設(shè)為寬度（width）的一半
2、設(shè)置左上角和右上角的半徑與元素的高度一致（大于也是可以的）
div{ ????height:50px;/*是width的一半*/ ????width:100px; ????background:#9da; ????border-radius:50px?50px?0?0;/*半徑至少設(shè)置為height的值*/ ????}實心圓
1、把寬度（width）與高度(height)值設(shè)置為一致（也就是正方形）
2、四個圓角值都設(shè)置為它們值的一半。
div{ ????height:100px;/*與width設(shè)置一致*/ ????width:100px; ????background:#9da; ????border-radius:50px;/*四個圓角值都設(shè)置為寬度或高度值的一半*/ ????}查看全部 -
“:first-of-type”選擇器類似于“:first-child”選擇器，不同之處就是指定了元素的類型,其主要用來定位一個父元素下的某個類型的第一個子元素。查看全部
-
x軸向右為正，y軸向下為正
查看全部 -
可以通過border-radius來制作實心圓或者半圓
查看全部 -
牛啊讓步vwrvbdf二我vwew
查看全部 -
barder-radius: 左上角 右上角 右小角 左下角
查看全部 -
.nav li:after{
? ? ? ? ? ? position:absolute;
? ? ? ? ? ? content:"|";
? ? ? ? ? ? right:0;
? ? ? ? ? ? top:0;
? ? ? ? ? ? color:#fff;
? ? ? ? ? ? text-shadow:0 0 0 rgba(0,0,0,.5);
}/*刪除第一項和最后一項導(dǎo)航分隔線*/
.nav li:last-child::after{
? ?????????content:"";
?}
查看全部 -
多重背景，也就是CSS2里background的屬性外加origin、clip和size組成的新background的多次疊加，縮寫時為用逗號隔開的每組值；用分解寫法時，如果有多個背景圖片，而其他屬性只有一個（例如background-repeat只有一個），表明所有背景圖片應(yīng)用該屬性值。
語法縮寫如下：
background?：?[background-color]?|?[background-image]?|?[background-position][/background-size]?|?[background-repeat]?|?[background-attachment]?|?[background-clip]?|?[background-origin],...
可以把上面的縮寫拆解成以下形式：
background-image:url1,url2,...,urlN;
background-repeat?:?repeat1,repeat2,...,repeatN; backround-position?:?position1,position2,...,positionN; background-size?:?size1,size2,...,sizeN; background-attachment?:?attachment1,attachment2,...,attachmentN; background-clip?:?clip1,clip2,...,clipN; background-origin?:?origin1,origin2,...,originN; background-color?:?color;
注意：
用逗號隔開每組 background 的縮寫值；
如果有 size 值，需要緊跟 position 并且用 "/" 隔開；
如果有多個背景圖片，而其他屬性只有一個（例如 background-repeat 只有一個），表明所有背景圖片應(yīng)用該屬性值。
background-color?只能設(shè)置一個。
查看全部
舉報