如今的互聯網前端分三層:css
好比說,有一個樣式須要在一百個頁面上顯示,若是是html來實現,那要寫一百遍,如今有了css,只要寫一遍。如今,html只提供數據和一些控件,徹底交給css提供各類各樣的樣式。html
<!--行內樣式--> <div> <p style="color: green">我是一個段落</p> </div> <!--內接樣式--> <style type="text/css"> /*寫咱們的css代碼*/ span{ color: yellow; } </style> <!--外接樣式-連接式--> <link rel="stylesheet" href="./index.css"> <!--外接樣式-導入式--> <style type="text/css"> @import url('./index.css'); </style>
css的選擇器:1.基本選擇器 2.高級選擇器前端
基本選擇器包含:css3
1.標籤選擇器
標籤選擇器能夠選中全部的標籤元素,好比div,ul,li ,p等等,無論標籤藏的多深,都能選中,選中的是全部的,而不是某一個,因此說 "共性" 而不是 」特性「瀏覽器
body{ color:gray; font-size: 12px; } /*標籤選擇器*/ p{ color: red; font-size: 20px; } span{ color: yellow; }
2.id選擇器
# 選中id網絡
同一個頁面中id不能重複。
任何的標籤均可以設置id
id命名規範 要以字母 能夠有數字 下劃線 - 大小寫嚴格區分 aa和AA是兩個不同的屬性值前端工程師
#box{ background:green; } #s1{ color: red; } #s2{ font-size: 30px; }
3.類選擇器佈局
所謂類:就是class . class與id很是類似 任何的標籤均可以加類,可是類是能夠重複,屬於歸類的概念。同一個標籤中能夠攜帶多個類,用空格隔開字體
類的使用,可以決定前端工程師的css水平到底有多牛逼?網站
玩類了,必定要有」公共類「的概念。
.lv{ color: green; } .big{ font-size: 40px; } .line{ text-decoration: underline; }
<!-- 公共類 共有的屬性 --> <div> <p class="lv big">段落1</p> <p class="lv line">段落2</p> <p class="line big">段落3</p> </div>
到底使用id仍是用class?
3、高級選擇器
<!--後代選擇器--> .container p{ color: red; } .container .item p{ color: yellow; } <!--子代選擇器--> container>p{ color: yellowgreen; } <!--並集選擇器--> h3,a{ color: #008000; text-decoration: none; } <!--交集選擇器--> h4{ width: 100px; font-size: 14px; } .active{ color: red; text-decoration: underline; } h4.active{ background: #00BFFF; }
/*根據屬性查找*/ /*[for]{ color: red; }*/ /*找到for屬性的等於username的元素 字體顏色設爲紅色*/ /*[for='username']{ color: yellow; }*/ /*以....開頭 ^*/ /*[for^='user']{ color: #008000; }*/ /*以....結尾 $*/ /*[for$='vvip']{ color: red; }*/ /*包含某元素的標籤*/ /*[for*="vip"]{ color: #00BFFF; }*/ /**/ /*指定單詞的屬性*/ label[for~='user1']{ color: red; } input[type='text']{ background: red; }
僞類選擇器通常會用在超連接a標籤中,使用a標籤的僞類選擇器,咱們必定要遵循"愛恨準則" LoVe HAte
/*沒有被訪問的a標籤的樣式*/ .box ul li.item1 a:link{ color: #666; } /*訪問事後的a標籤的樣式*/ .box ul li.item2 a:visited{ color: yellow; } /*鼠標懸停時a標籤的樣式*/ .box ul li.item3 a:hover{ color: green; } /*鼠標摁住的時候a標籤的樣式*/ .box ul li.item4 a:active{ color: yellowgreen; }
再介紹一種css3的選擇器nth-child()
/*選中第一個元素*/ div ul li:first-child{ font-size: 20px; color: red; } /*選中最後一個元素*/ div ul li:last-child{ font-size: 20px; color: yellow; } /*選中當前指定的元素 數值從1開始*/ div ul li:nth-child(3){ font-size: 30px; color: purple; } /*n表示選中全部,這裏面必須是n, 從0開始的 0的時候表示沒有選中*/ div ul li:nth-child(n){ font-size: 40px; color: red; } /*偶數*/ div ul li:nth-child(2n){ font-size: 50px; color: gold; } /*奇數*/ div ul li:nth-child(2n-1){ font-size: 50px; color: yellow; } /*隔幾換色 隔行換色 隔4換色 就是5n+1,隔3換色就是4n+1*/ div ul li:nth-child(5n+1){ font-size: 50px; color: red; }
/*設置第一個首字母的樣式*/ p:first-letter{ color: red; font-size: 30px; } /* 在....以前 添加內容 這個屬性使用不是很頻繁 瞭解 使用此僞元素選擇器必定要結合content屬性*/ p:before{ content:'alex'; } /*在....以後 添加內容,使用很是頻繁 一般與我們後面要講到佈局 有很大的關聯(清除浮動)*/ p:after{ content:'&'; color: red; font-size: 40px; }