1、概念css
CSS(Cascading Style Sheets,層疊樣式表) 能夠用來爲網頁建立樣式表,經過樣式表能夠對網頁進行裝飾。html
所謂層疊,就是能夠將整個網頁想象成是一層一層的結構,層次高的將會覆蓋層次低的。而CSS能夠分別爲網頁的各個層次設置樣式。瀏覽器
書寫的位置:緩存
一、內聯樣式:能夠將css樣式表書寫到元素(標籤)的style屬性中,只對當前標籤中的內容起做用,不方便複用。屬於結構與表現耦合,不推薦使用。工具
二、內部樣式:能夠將css樣式編寫的head中style標籤中,而後經過css選擇器選中指定的元素,而後能夠同時爲這些元素設置一樣的樣式,提升樣式的複用性。佈局
三、外部樣式:能夠將css樣式表編寫到外部的css文件,而後經過link標籤引入外部的css文件到當前的HTML文件中,最大限度提升複用性,利用瀏覽器緩存,加快用戶開發工具
的訪問速度,提高用戶體驗。開發中推薦使用外部樣式。字體
語法:選擇器,經過選擇器能夠選擇頁面中的指定標籤,而且將聲明塊的樣式應用到對應的標籤中。網站
聲明塊,緊跟選擇器的後邊,使用大括號括起來,聲明塊中就是一組名值對結構,這一組一組名值對稱爲聲明。一個聲明塊中可寫多種聲明,中間用分號隔開。聲明的ui
樣式名和樣式值使用冒號鏈接。
IDE(Integrated Development Environment,集成開發工具):Hbuilder ,Alt+/ 代碼提示 Ctrl+enter 換行 Ctrl+d 刪除當前行
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css基礎</title> <!--一二、內部樣式:將css樣式設置到head標籤中,能夠同時給這些元素設置一樣的樣式,提升複用性。--> <style type="text/css"> /*這裏邊寫的全是css的代碼,不能出現HTML的代碼*/ p{/*表示給body中的全部p標籤設置這種樣式*/ color: greenyellow; font-size:20px ; } </style> <!-- 一三、外部樣式:引入外部的css文件中,按照代碼的執行順序這裏把上邊的樣式給替代了--> <link rel="stylesheet" type="text/css" href="../css/04-01 外部樣式.css"/> </head> <body> <!--一 一、內聯樣式:標籤內部的style屬性,只對當前標籤起做用 這裏雖然在上邊設置了樣式,可是這裏對他個性化設置,按照代碼執行順序,使用個性設置 --> <p style="color: red; font-size:30px ;"> 錦瑟無故五十弦,一弦一柱思華年。</p> <p>莊生曉夢迷蝴蝶,望帝春心託杜鵑。 </p> <p>滄海月明珠有淚,藍田日暖玉生煙。</p> <p>此情可待成追憶?只是當時已惘然。</p> </body> </html>
2、塊元素(塊標籤)
就是能夠獨佔一行的標籤,無論它內容多少,寬度多窄,它都獨佔一行。
一、div元素:這個標籤沒有任何語義,就是個純粹的塊元素,它不會爲它裏邊的元素設置任何默認的樣式,主要用來對網頁進行佈局的。能夠表示一塊區域。
二、p元素:
三、h1-h6元素
四、hr 和 br 元素
3、內聯元素(內聯標籤,行內標籤)
所謂內聯元素,指的是隻佔自身大小的元素,不會獨佔一行。
一、span元素:沒有任何語義,專門用來選擇一段文字,爲它設置樣式。英文:範圍的意思
二、a元素、img元素、iframe元素:
區別:塊元素用來作頁面的佈局,內聯元素主要用來選中文本爲它設置樣式。通常只使用塊元素去包含內聯元素,不會用內聯去包含塊元素。
可是a元素能夠包含任何元素除了a元素,即a元素不能包含a元素。
p元素不能包含其餘任何的塊元素,儘管它是個塊元素。
4、經常使用的選擇器
一、元素選擇器:經過元素選擇器選中頁面中全部的指定元素 語法:元素名{ ....}
二、id選擇器:經過元素的id值選擇到惟一的一個元素。語法:#id號{.....}
三、類選擇器:經過元素的class值選擇一組元素,能夠同時爲一個元素設置多個class值,中間用空格隔開。語法: .class值{......}
四、分組選擇器(並集選擇器):經過分組選擇器同時選擇多種選擇器對應的元素。語法:選擇器1,選擇器2....{.....} 中間逗號隔開
五、通配選擇器:選擇頁面中的全部元素。語法:*{.....}
六、複合選擇器(交集選擇器):選中同時知足多個選擇器的元素。 語法:選擇器1選擇器2..{....} 中間無空格。id選擇器不建議是複合選擇器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>經常使用的選擇器</title> <style type="text/css"> /*四 一、元素選擇器 */ p{ color: goldenrod; } h3{ color: red; } /*四二、id選擇器*/ #p3{ color: green; } /*四三、類選擇器 class * class屬性和ids屬性相似,能夠同時給多個同一種元素設置樣式 class值能夠相同,id值不能相同。 * */ .p1{ color: blue; } .p2{ font-size:30px ; } /*四四、分組選擇器(並集選擇器)*/ .p1,h3{ background: darkgrey; } /*四五、通配選擇器*/ *{ font-size: 35px; } /*四六、複合選擇器*/ span.p4{ background:gold ; } </style> </head> <body> <h3>錦瑟</h3> <p class="p1">錦瑟無故五十弦,一弦一柱思華年。</p> <p class="p1 p2">莊生曉夢迷蝴蝶,望帝春心託杜鵑。 </p> <p id="p3">滄海月明珠有淚,藍田日暖玉生煙。</p> <p class="p4">此情可待成追憶?只是當時已惘然。</p> <span class="p4"> 《錦瑟》是唐代詩人李商隱的表明做之一。詩題「錦瑟」,但並不是詠物, 不過是按古詩的慣例以篇首二字爲題,實是借瑟以隱題的一首無題詩。 </span> </body> </html>
5、元素之間的關係
父元素:直接包含子元素的元素
子元素:直接被父元素包含的元素
祖先元素:直接(如:父親元素)或間接(如:爺爺元素往上)包含後代的元素。
後代元素:直接(如:子元素)或間接(如:孫子輩元素往下)被祖先元素包含的元素。
兄弟元素:擁有相同父元素的元素叫(親)兄弟元素。
7(上接 四1-6)、後代元素選擇器:選中咱們指定元素的指定後代元素。語法:祖先元素 後代元素 {.....}。中間是空格
八、子元素選擇器:選中父元素的指定子元素。 語法:父元素 > 子元素{....} 。中間是空格,大於號,空格。IE6及如下的瀏覽器不兼容這種選擇器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>元素之間的關係</title> <style type="text/css"> /*後代元素選擇器*/ div span{ /*包括子元素span和後代元素span。例子中2個div若是沒有id號,2個div都會選中*/ color: red; } #d2 span{ /*給祖先元素加id*/ color: green; } div > span{ /*沒有指定id的狀況*/ background-color: yellow; } #d2 > span { /*指定id的狀況*/ background-color: blue; } </style> </head> <body> <div id="d1"> <p> <span > 我是第1個div中p標籤中的span標籤,是div的孫子,p的兒子 </span> </p> <span> 我是第1個div中的span標籤,是div的兒子</span> </div> <div id="d2"> <span> 我是第2個div元素中的span元素,是div的兒子 </span> </div> <span> 我是body中的span元素,與div平輩 </span> </body> </html>
九、僞類選擇器:
專門用來表示元素的一種特殊的狀態。好比,訪問過的超連接、普通的超連接、獲取焦點的文本框當。咱們須要爲這些處於特殊狀態的元素設置樣式時
就可使用僞類。
定義連接的訪問狀態: a:link 正常連接(沒訪問過的連接);
a:visited 訪問過的連接; 瀏覽器是根據歷史記錄看網站是否訪問過,因爲涉及用戶隱私,因此此設置只能設置字體的顏色。
a:hover 鼠標滑過的連接; 它和active不只能設置超連接也能夠設置其餘標籤,如p標籤。(但IE6不支持,其餘能夠)
a:active 正在點擊的連接:
其餘狀態:標籤名:focus ,獲取焦點,指當鼠標在文本框中時。失去焦點,指鼠標在文本框以外。格式:標籤名 冒號 focus{.....} (IE6不支持)
標籤名::selection,選中的元素 。中間2個冒號。可是在火狐中須要這樣寫, 標籤::-moz-selection{.....}不然用不了。若是要兼容,要寫2個。
十、僞元素選擇器
標籤名:first-letter{......} 給標籤中第一個字符設置樣式
標籤名:first-line{......} 給標籤中的第一行(是網頁顯示時的第1行,網頁變大變小,第1行的內容也會改變)設置樣式
標籤名: before,指定元素以前 <p>你好呀</p> 指的是開始標籤右邊的尖括號「>」 和 「你」之間的位置。通常before須要結合content這個樣式一塊兒使用,經過
content能夠向before或after的位置添加一些內容。
標籤名:after,指定元素後以後。結束標籤右邊的">"以後的位置。他們都不能選中。
【代碼示例】
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>僞類選擇器</title> <!-- 九、僞類選擇器:就是表示一種特殊的狀態 --> <style type="text/css"> a:link{ /*正常連接; */ color: yellowgreen; } a:visited{/*訪問過的連接;*/ color: red; } a:hover{/*鼠標滑過的連接;*/ color: blue; } a:active{/*正在點擊的連接,鼠標別鬆手*/ color: black; } input:focus{/*當文本框獲取焦點時,改變文本框的顏色爲黃色*/ background: yellow; } p::selection{/*爲p標籤中鼠標選中的文字設置樣式*/ color: blue; } p:first-letter{/*十、僞元素選擇器*/ color: blue; font-size:25px ; } p:before{ content: "憫農"; } P:after{ content: "沙雕"; color: orange; } </style> </head> <body> <a href="http://www.baidu.com">訪問過的連接</a> <br /> <a href="http://www.iqiyi.com/">沒訪問過的連接</a> <br /> 用戶名:<input type="text" name="" id="" value="" /> <p>鋤禾日當午,汗滴禾下土。</p> </body> </html>
十一、子元素的僞類選擇器(child是在全部子元素中排,大排行,如全部子女一塊兒排(大姐、二 哥、三姐);type是在當前類型中排,小排行,如男的排男的(大兒子、
二兒子),女的排女的(大女兒、二女兒))
first-child:能夠選中第一子元素;
last-child:能夠選中最後一個子元素;
nth-child(m):能夠選中任意位置的子元素;n就是第n個的意思,m是自定義選中的行。
first-of-type :選中指定類型的第一個
last-of-type:選中指定類型的最後一個
nth-of-type:選中指定類型的第n個
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>子元素的僞類選擇器</title> <style type="text/css"> p:first-child{/*first-child:選中第一個子元素,爲第一個p標籤設置樣式 這句話的意思,既要符合p標籤又要是父元素第一個子元素(p是body的子元素) 若是把p標籤去掉,則就是默認的是* 選中一個子元素便可 若是要指定子元素須要: body > p:first-child{ ..... }表示選中body的第一個p標籤子元素 * */ color: blue; } div > p:last-child{/*表示給div中最後一個子元素設置樣式*/ color: yellow; } body >p:nth-child(3){/*自定義位置,意思是把3換成1根first-child相同 括號中能夠設置爲 even:表示選中偶數行 odd:表示選中奇數行 表格中隔行變色能夠用 * */ background: yellowgreen; } div >p:nth-child(2){ background: green; } </style> </head> <body> <!--若是這行加個p以外的標籤,則上述設置不會生效,由於不是p標籤。下一行也不會生效由於不是否是第一個子元素--> <p>一別都門三改火,天涯踏盡紅塵。</p> <!--這行即便p標籤又是body的第一個子元素--> <p>依然一笑做春溫。無波真古井,有節是秋筠。</p> <p>惆悵孤帆連夜發,送行淡月微雲。</p> <p>尊前不用翠眉顰。人生如逆旅,我亦是行人。</p> <div> <p> 蘇軾,北宋詞人</p><!--這行也會生效,由於他2項符合條件都符合 p是div的子元素--> <p>這首詞是公元1091年(宋哲宗元祐六年)蘇軾知杭州時</p> <p>爲送別自越州(今浙江紹興)北徙途經杭州的老友錢穆父而做</p> </div> <span> </span> </body> </html>
十二、兄弟元素選擇器
後一個兄弟選擇器:能夠選中一個元素後邊緊挨着的一個兄弟元素。語法:前一個元素(哥哥)+緊挨的後一個元素(弟弟){.......},中間是空格加號空格
全部兄弟元素選擇器:能夠選中一個元素後邊的全部兄弟。語法:前一個元素 ~ 後邊元素{.....},中間是空格波浪號空格
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>兄弟元素選擇器</title> <style type="text/css"> /*後一個兄弟元素*/ span + p{ color: blue; } /*全部兄弟選擇器*/ div ~ p{ color: cyan; } </style> </head> <body> <span>白居易的詩詞</span> <p> 綠蟻新醅酒,紅泥小火爐。</p> <!--span+p 這行會生效--> <p> 晚來天欲雪,能飲一杯無?</p> <span>蘇軾的詩詞 </span> <p>寒食後,酒醒卻諮嗟。</p><!--span+p 這行也會生效--> <p>休對故人思故國,且將新火試新茶。詩酒趁年華。</p> <div id=""> 李清照的詩詞改編</div> <p> 一朝花開傍柳, 尋香誤覓亭侯。</p><!--這2行都會生效--> <p> 縱飲朝霞半日暉, 風雨着不透。</p> </body> </html>
1三、否認僞類選擇器
能夠從已經選中的元素中剔除某些元素。語法: 標籤:not(選擇器){........},中間只有冒號,沒有空格
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>否認僞類選擇器</title> <style type="text/css"> /*否認僞類選擇器*/ p:not(.p5){ color: blue; } </style> </head> <body> <p>一朝花開傍柳, 尋香誤覓亭侯。</p> <p>縱飲朝霞半日暉, 風雨着不透。</p> <p class="p5">一任宮長驍瘦, 臺高冰淚難流。</p> <p>錦書送罷驀回首, 無餘歲可偷。</p> </body> </html>
6、樣式的繼承(兒子能夠繼承父親的遺產,在css中祖先元素的樣式也能夠被後代元素繼承)
利用繼承能夠把一些基本樣式設置給祖先元素或父元素,這樣全部的後代元素會自動繼承這些樣式,可是並非全部樣式都會被子元素繼承。好比全部背景相關的樣式,
如背景顏色。實際中p標籤的默認背景顏色是透明的,若是在父標籤中設置個顏色,好比黃色,則顏色能夠透過來,網頁也會顯現出黃色,可是原理是顏色透過來,而不是被繼承
過來的。全部背景相關的樣式都不能被繼承,切記! 邊框相關的樣式、定位相關的樣式都不會被繼承。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>樣式的繼承</title> <style type="text/css"> </style> </head> <body> <p style="font-size: 25px;"> <!--全部p元素中的都會生效,包括span.這就是繼承--> 我是p標籤 <br /> <span>我是p標籤的兒子span標籤</span> </p> <span>我是與p標籤平輩的span</span> </body> </html>
7、選擇器的優先級
當使用不一樣的選擇器選中同一個元素時,而且相同的樣式時(如都設置背景顏色),這時樣式之間產生衝突,由選擇器的優先級決定,高的優先顯示。
優先級規則:內聯樣式 優先級:1000;
id選擇器 優先級:100;
類和僞類選擇器 優先級:10;
元素選擇器 優先級:1
通配選擇器 優先級:0
繼承的樣式 優先級: 沒有優先級
【注意】一、樣式越具體,優先級越高。
二、 當選擇器中有多個優先級時,須要將多個優先級的權重加起來比較 ,而後設置樣式。選擇器的累加計算不會超過它的最大數量級。
三、選擇器的優先級的權重同樣時,則使用靠後的樣式。
四、並集選擇器的是單獨計算的。
五、能夠在樣式的最後加個!important 表示優先級最高,比內聯樣式都高。在開發中儘可能避免使用important。
【引伸】a的僞類選擇器,優先級的是同樣的。因此寫的順序就是下邊的順序,比較好。L-V-H-A
a:link;未訪問過的連接狀態。link和visited沒有順序要求。
a:visited;訪問過的連接狀態。可是把link和visited寫在hover和active的下邊,hover和active等於無效代碼
a:hover;鼠標滑過的連接狀態。不能寫在active下邊,不然設置無效。他們優先級同樣,執行下邊的,寫在下邊,hover等於無效代碼。
a:active;鼠標點擊的連接狀態。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>選擇器的優先級</title> <style type="text/css"> .p3{/*類選擇器 10*/ color: red; } p{/*元素選擇器 1 */ color: blue; } #d3{/*id選擇器 100*/ color:greenyellow; /*color:greenyellow !important 優先級比內聯樣式都高*/ } /*a僞類選擇器*/ a:link{ color: yellowgreen; } a:visited{ color: blue; } a:hover{ color: orange; } a:active{ color: green; } </style> </head> <body> <p>一朝花開傍柳, 尋香誤覓亭侯。</p> <p>縱飲朝霞半日暉, 風雨着不透。</p> <!--style="color: grey; 是內聯樣式 優先級1000--> <p class="p3" id="d3" style="color: grey;">一任宮長驍瘦, 臺高冰淚難流。</p> <p >錦書送罷驀回首, 無餘歲可偷。</p> <p>昨夜雨疏風驟 濃睡不消殘酒</p> <p>試問卷簾人 卻道海棠依舊</p> <p>知否 知否 應是綠肥紅瘦</p> <a href="http://www.baidu.com">訪問過的連接:百度</a> <br /> <a href="http://www.iqiyi.com/">沒訪問過的連接:愛奇藝</a> <br /> </body> </html>