CSS樣式設置及僞類選擇器

一、CSS顏色的設置？

　　CSS顏色樣式設置方式：

　　　　一、直接在color屬性中用英文命令顏色，好比：

 p{color:red;}

　　　　二、RGB方式，與 photoshop 中的 RGB 顏色一致，由 R(red)、G(green)、B(blue) 三種顏色的比例來配色。每一項的值能夠是 0~255 之間的整數，也能夠是 0%~100% 的百分數。

{color:rgb(133,45,200);}

p{color:rgb(20%,33%,25%);} 

　　　　三、使用十六進制的方法設置CSS的樣色樣式，原理和 RGB 顏色同樣，但每一項的值由 0-255 變成了十六進制 00-ff。

　　　　　　（使用十六進制的方法表示的時候能夠簡寫，好比：#ff00aa 可簡寫爲 #f0a ）

p{color:#00ffff;}

　　　　4，設置關鍵字透明度，能夠用opacity和RGBA關鍵字來設置。值爲1~0之間，值越接近0則顏色透明度越高；

　　　　五、HSL顏色設置，HSL 不一樣於 RGB 的色彩模式，HSL顏色是使用色相(hue)，飽和度(saturation)，亮度(lightness)表示顏色的一種方法。

color:hsl(360, 100%, 75%); color:hsl(120, 100%, 75%); color:hsl(240, 100%, 75%);

 

二、如何引入外部字體包？

　　　　一、獲取相關的字體包文件；字體包文件的後綴和瀏覽器有關，一般咱們下載的文件是以 .TTF 結尾的，.TTF、.OTF適用於Firefox3.五、safari、Opera瀏覽器；.EOT適用於IE4.0+；.SVG適用於Chrome和iphone；

　　　　二、使用@font-face語法引入文件；

三、字體樣式的設置？

　　　　字體大小的設置使用font-size，常見設置字體大小的方法有四種：14px，表示字體的高度是14個像素；設置百分比，是表示相對大小，相對於body的150%倍；em，是表示相對大小，想對於body的1.2倍大小；關鍵字。經常使用的有small,medium,large;

body{
font-size:14px;
}
h1{
font-size:150%;
}
h2{
font-size:1.2em;
}
h3{
font-size:small;

　　　　字體的設置使用font-family設置，常見的字體類型有微軟雅黑、宋體、黑體；

　　　　字體的粗細使用font-weight設置，normal表示正常，bold表示加粗，bodler表示相對於父級更粗，lighter表示相對於父級更細（目前字體的粗細僅支持細、正常、粗三種樣式）；也可使用100-900整數表示，100-300表示細、400-500表示正常、600-900表示粗；

　　　　字體的樣式（傾斜）設置，使用font-style設置；

body{
font-style:italic;
}
h1{
font-style:oblique;

normal表示正常，italic和oblique均是表示傾斜效果；（oblique後面能夠跟一個整數表示旋轉角度，以deg爲單位）

四、table佈局和div+CSS佈局的區別？

　　使用table佈局的優勢：一、對於新手而言，容易上手，尤爲對於一些佈局中規中矩的網頁，更讓人首先想到excel，進而經過使用table去實現它。

　　　　　　　　　　　　二、表現上更加「嚴謹」，在不一樣瀏覽器中都能獲得很好的兼容

　　　　　　　　　　　　三、經過複雜的表格套表格的形式，也能夠實現比較複雜的佈局需求。佈置好表格，而後將內容放進去就能夠了。

　　　　　　　　　　　　四、它能夠不用顧及垂直居中的問題。

　　　　　　　　　　　　五、數據化的存放更合理。

　　　　　　　　　　缺點：一、標籤結構多，複雜，在表格佈局中，主要是用到表格的相互嵌套使用，這樣就會形成代碼的複雜度更高！

　　　　　　　　　　　　　　二、表格佈局，不利於搜索引擎抓取信息，直接影響到網站的排名

　　使用div+css佈局的優勢：一、符合W3C標準的，W3C標準提出網頁由三部分組成：結構（Structure）、表現（Presentation）和行爲（Behavior）。結構清晰明瞭，結構、樣式和行爲分離，帶來足夠好的可維護性。

　　　　　　　　　　　　　　二、佈局更加靈活多樣，可以經過樣式選擇來實現界面設計方面的更多要求。

　　　　　　　　　　　　　　三、佈局改版方便，不須要過多地變更頁面內容，一般只要更換相應的css樣式就能夠將網頁變成另一種風格展示出來。

　　　　　　　　　　　　　　四、佈局可讓一些重要的連接和文字信息等優先讓搜索引擎抓取，內容更便於搜索。

　　　　　　　　　　　　　　五、增長網頁打開速度，加強用戶體驗。

　　　　　　　　　　　缺點：一、開發技術高，要考慮兼容版本瀏覽器。目前來看，DIV+CSS尚未實現全部瀏覽器的統一兼容。

　　　　　　　　　　　　　　　二、CSS網站製做的設計元素一般放在1個外部文件中，或幾個文件，

　　　　　　　　　　　　　　　　　　比較複雜，甚至龐大；

五、瀏覽器內核及前綴？

     最先的瀏覽器是： Mosaic / Netscape Navigator(網景領航者)（1994-2008）簡稱NN

　　Google Chrome(谷歌瀏覽器) ：Blink內核（早先是使用webkit內核，後來Google、Opera共同開發了Blink瀏覽器排版引擎）   -webkit-

　　Safari(蘋果瀏覽器) ：WebKit內核       -webkit-

　　 Mozilla Firefox(火狐瀏覽器) ：Gecko內核       -moz-
　　Internet Explorer(IE瀏覽器) ：          Trident內核           -ms-
　　Opera(歐朋瀏覽器) ：Presto內核          -o-

六、僞類選擇器？

　　　　表單僞類選擇器：

　　　　　　　　　　：read-only選取不可被用戶編輯的可輸入表單；

　　　　　　　　　　:read-write選取能夠被用戶編輯的表單元素；

　　　　　　　　　　:checked 選取任何能夠被選中的單選和多選框；

　　　　　　　　　　:disabled選取被禁用的表單元素；

　　　　　　　　　　:enabled選取未被禁用的表單元素；

　　　　　　　　　　:focus 選取獲取焦點的表單元素；

　　　　　結構僞類選擇器：

　　　　　　　　　　：first-child 選取一組兄弟元素中的第一個元素；

　　　　　　　　　　：last-child 選取一組兄弟元素中的最後一個元素；

 

　　　　　　　　　　:first-of-type 選取一組元素中，同類型的第一個元素；

　　　　　　　　　　：last-of-type 選取一組元素中，同類型的最後一個元素；

 

　　　　　　　　　　：nth-child（an+b） 先找到當前元素的全部兄弟元素，而後按照順序依次從0排序；

　　　　　　　　　　：nth-last-child （an+b） 在全部兄弟節點中由後向前排序

 

　　　　　　　　　　：nth-of-type（an+b） 先找到全部同類型的兄弟元素，而後按照順序依次從0開始排序；

　　　　　　　　　　：nth-last-of-type（an+b） 先找到全部同類型的兄弟元素，而後由後向前開始排序；

 

　　　　　　　　　　：only-child 匹配沒有任何兄弟元素的元素；

　　　　　　　　　　：only-of-type 表明一個元素沒有同類型的兄弟元素；

　　　　　　　　　　：not（X） X是一個選擇器，選取全部元素中，排除X所表明元素的元素； （not 僞類權重計算看X選擇器大的權重）

　　　　　　　　　   ：empty 選取沒有子元素的元素，子元素包括元素和文本 （空格和回車也包括）