例:background-image:url('XXX.png');
background-repeat:repeat-x;? ? 讓圖片水平方向平鋪,頁面不會出現(xiàn)多圖狀態(tài)踊兜。
background-repeat:no-repeat;? 不讓圖像平鋪泊业,只出現(xiàn)一個圖像
background-position:right top;? 改變圖像在背景中的位置
background-attachment:fixed? ? 設(shè)置固定的背景圖像,不會隨頁面其它部分滾動而滾動
p {text-indent:50px;}? 首行文本縮進50px
p.small {line-height:70%;}? 行高
p{white-space:nowrap;}? ? 文字一行顯示涂身、不換行,禁用文字環(huán)繞
img.top {vertical-align:text-top;}? 圖片上對齊
img.bottom {vertical-align:text-bottom;} 圖片下對齊
h1 {text-shadow:2px? 3px? #FF0000;}? 文本陰影? (向右偏移2px不傅,向下偏移3px若锁,顏色#FF0000)
td { vertical-align:bottom;}? ? ? ? 垂直底部對齊
要讓圖片實現(xiàn)劇中對齊,先將其display:block ;然后用margin:auto;
{address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li}---塊元素
{a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var}---內(nèi)聯(lián)元素
display:inline-block?-- 顯示為內(nèi)聯(lián)塊元素悲龟,表現(xiàn)為同行顯示并可修改寬高內(nèi)外邊距等屬性
我們常將<ul>元素加上display:inline-block樣式屋讶,原本垂直的列表就可以水平顯示了。
li{display:inline;}? 【將li元素作為內(nèi)聯(lián)元素】 li元素水平顯示
display:block;? 可將span元素變?yōu)閴K元素须教,塊元素占用全部寬度皿渗,前后都用了換行符
h1.hidden {display:none;} 和 h1.hidden {visibility:hidden;}的區(qū)別在于:前者再隱藏后不會占用頁面上的空間,后者則還會占用此位置轻腺。
CSS-position:
position:static? HTML元素的默認值
positon:fixed? 元素的位置相對于瀏覽器窗口是固定位置
position:relative? 元素的位置相對于正常位置
position:absolute? 絕對定位乐疆,可以將元素放在頁面的任何位置
z-index:重疊的元素,值可以有正數(shù)或負數(shù)的堆疊順序贬养,1挤土,-1....
position: fixed; top: 0; width: 100%; ----導(dǎo)航欄位置固定在頂部
position: fixed; bottom: 0; width: 100%; ----導(dǎo)航欄位置固定在底部
CSS-圖像:
圖像透明度樣式:
img
{
opacity:0.4;
filter:alpha(opacity=40); /* 適用 IE8 及其更早版本 */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* 適用 IE8 及其更早版本 */
}
CSS-選擇器:
[title = hello] { }? ----改變標題為hello的元素的樣式
[title ~= hello] { }? ----改變標題包涵h(huán)ello的元素的樣式
[lang|=en] { }? ---包含指定值的lang屬性的元素樣式,用(|)分隔屬性和值:
input[type="text"]? ? ---屬性選擇器樣式? -無需使用class或id的形式
CSS-顏色漸變:
background: linear-gradient(red, blue);? ? //從上至下的線性漸變
background: linear-gradient(to right, red , blue);? //從左到右的線性漸變
background: linear-gradient(to bottom right, red , blue);? //左上角到右下角的線性漸變
background: linear-gradient(180deg, red, blue);? //帶有角度的線性漸變
background: linear-gradient(red, green, blue);? //使用多個顏色節(jié)點的漸變
background: linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet);? //彩虹漸變
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));? 透明度漸變误算,rgba()中最后一位為0-1的 數(shù)