前端基礎CSS(1)
1、css的引入方式css
如今的互聯網前端分三層：html
HTML：超文本標記語言。從語義的角度描述頁面結構。前端
CSS：層疊樣式表。從審美的角度負責頁面樣式。css3
JS：JavaScript 。從交互的角度描述頁面行爲web
CSS：Cascading Style Sheet，層疊樣式表。CSS的做用就是給HTML頁面標籤添加各類樣式，定義網頁的顯示效果。簡單一句話：CSS將網頁內容和顯示樣式進行分離，提升了顯示功能。css的最新版本是css3。canvas
一、css優勢：瀏覽器
(1) 使數據和顯示分開；ruby
(2) 下降網絡流量；網絡
(3) 使整個網站視覺效果一致；app
(4) 使開發效率提升了（耦合性下降，一我的負責寫html，一我的負責寫css）；
好比說，有一個樣式須要在一百個頁面上顯示，若是是html來實現，那要寫一百遍，如今有了css，只要寫一遍。如今，html只提供數據和一些控件，徹底交給css提供各類各樣的樣式。
二、css引入方式：
(1) 行內樣式，以下示例：
<p style="color: green">我是一個段落</p>
(2) 內接樣式，以下示例：
<style type="text/css">
/*寫咱們的css代碼*/
span{
color: yellow;
}
</style>
(3) 外接樣式（連接式和導入式）
<link rel="stylesheet" href="./index.css"> <!-- 連接式 -->
<style type="text/css"> <!-- 導入式 -->
@import url('./index.css');
</style>
注意：link，visited，active這三個只有a標籤有，hover其餘元素也能夠用。
2、css選擇器
一、基本選擇器
a、標籤選擇器
標籤選擇器能夠選中全部的標籤元素，好比div，ul，li，p等等，無論標籤藏的多深，都能選中，選中的是全部的，而不是某一個，因此說 "共性" 而不是 」特性「。
用法：標籤名:{ color:red;}
b、id選擇器
同一個頁面中id不能重複，任何的標籤均可以設置id，id命名規範，大小寫嚴格區分，aa和AA是兩個不同的屬性值。
用法：#id名{ color:red;}
c、類選擇器
所謂類：就是class，class與id很是類似，任何的標籤均可以加類，可是類是能夠重複的，屬於歸類的概念，同一個標籤中能夠攜帶多個類，用空格隔開。
用法：.類名{ color:red;}
總結：
（1）不要去試圖用一個類將咱們的頁面寫完。這個標籤要攜帶多個類，共同設置樣式；
（2）每一個類要儘量的小，有公共的概念，可以讓更多的標籤使用；
（3）儘可能用class，除非特殊狀況能夠用id，id通常是用在js中的，即js是經過id來獲取到元素的；
二、高級選擇器
a、後代選擇器
使用空格表示後代選擇器，顧名思義，父元素的後代（包括兒子，孫子，重孫子）。
用法：.container p{ color: red; }
b、子代選擇器
使用>表示子代選擇器， 好比div>p，僅僅表示的是當前div元素選中的子 (不包含孫子....)元素p。
c、並集選擇器
多個選擇器之間使用逗號隔開，表示選中頁面中的多個標籤，一些共性的元素，可使用並集選擇器。
用法：h3,.content{color:red;}
d、交集選擇器
同時用兩種選擇器選擇一個標籤元素，例如div.active，表示類名是active又是div標籤的元素。
h4{
width: 100px;
font-size: 14px;
}
.active{
color: red;
text-decoration: underline;
}
/* 交集選擇器 */
h4.active{
background: #00BFFF;
}
交集選擇器
三、屬性選擇器
屬性選擇器，字面意思就是根據標籤中的屬性，選中當前的標籤。
用法：[for]{ color: red;} 或 input[type='text']{background: red;}
/*根據屬性查找*/
/*[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:link{color:#666;} /*沒有被訪問的a標籤樣式*/
a:visited{color:yellow;} /*訪問事後的a標籤樣式*/
a:hover{color:green;} /*鼠標懸停時a標籤的樣式*/
a:active{color:#yellowgreen;} /*鼠標按下時a標籤的樣式*/
給你們介紹一種css3的選擇器(ie8以及更早版本的瀏覽器不支持）：
/*選中第一個元素*/
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;
}
3、css的繼承性和層疊性
css有兩大特性：繼承性和層疊性
一、繼承性
面嚮對象語言都會存在繼承的概念，在面嚮對象語言中，繼承的特色：繼承了父類的屬性和方法。那麼咱們如今主要研究css，css就是在設置屬性的。不會牽扯到方法的層面。
繼承：給父級設置一些屬性，子元素繼承了父級的該屬性，這就是咱們的css中的繼承。
記住：有一些屬性是能夠繼承下來：color 、font-*、text-*、line-* ，主要是文本級的標籤元素。
可是像一些盒子元素屬性，定位的元素（浮動，絕對定位，固定定位）不能繼承。
二、層疊性
層疊性： 權重大的標籤覆蓋掉了權重小的標籤，說白了，就是被幹掉了。
權重：誰的權重大，瀏覽器就會顯示誰的屬性。
總結：
a、先看標籤元素有沒有被選中，若是選中了，就數數（id,class,標籤的數量）誰的權重大，就顯示誰的屬性，權重同樣大，後來者居上；
b、若是沒有被選中標籤元素，權重爲0；
c、若是屬性都是被繼承下來的，權重都是0 。權重都是0："就近原則"（誰描述的近，就顯示誰的屬性）；
三、!important的使用
!important：設置權重爲無限大（IE6不支持）。
!important 不影響繼承來的權重，隻影響選中的元素。不要隨便使用!important，由於使用它會影響頁面的佈局。
用法：選擇器{樣式:值!important;}
4、盒子模型
在CSS中，"box model"這一術語是用來設計和佈局時使用，而後在網頁中基本上都會顯示一些方方正正的盒子。咱們稱爲這種盒子叫盒模型。
盒模型有兩種：標準模型和IE模型。咱們在這裏重點介紹標準模型。
一、盒模型示意圖
二、盒模型的屬性
width：內容的寬度
height: 內容的高度
padding：內邊距，邊框到內容的距離
border: 邊框，就是指的盒子的寬度
margin：外邊距，盒子邊框到附近最近盒子的距離
三、盒模型的計算
若是一個盒子設置了width，height，padding，border，margin(我們先不要設置margin，margin有坑，後面會介紹)。
盒子的真實寬度 = width+2*padding+2*border
盒子的真實寬度 = height+2*padding+2*border
那麼在這裏要注意了。標準盒模型，width不等於盒子真實的寬度。
另外若是要保持盒子真實的寬度，那麼加padding就必定要減width，減padding就必定要加width。真實高度同樣設置。
四、padding（內邊距）
padding就是內邊距的意思，它是邊框到內容之間的距離。另外padding的區域是有背景顏色的，而且背景顏色和內容的顏色同樣，也就是說background-color這個屬性將填充全部的border之內的區域。
padding有四個方向，分別描述4個方向的padding。
（1）寫單獨屬性，分別設置不一樣方向的padding，以下：
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
（2）寫綜合屬性，用空格隔開，以下：
/*上 右 下 左*/
padding: 20px 30px 40px 50px ;
/*上 左右 下*/
padding: 20px 30px 40px;
/*上下 左右*/
padding: 20px 30px;
/*上下左右*/
padding: 20px;
五、border（邊框）
border：邊框的意思，描述盒子的邊框，邊框有三個要素：粗細、線性樣式、顏色。
若是顏色不寫，默認是黑色。
若是粗細不寫，不顯示邊框。
若是隻寫線性樣式，默認的有上下左右 3px的寬度,實體樣式，而且黑色的邊框。如：
border: solid;
分別設置三要素，以下：
border-width: 3px;
border-style: solid; /*還有dotted、double、dashed*/
border-color: red;
注意：值能夠是1個，2個，3個，4個，對應關係跟上篇介紹的padding同樣；
設置一個方向的三要素，以下：
border-top-width: 10px;
border-top-color: red;
border-top-style: solid;
上面這句話至關於下面這一句，以下：
border-top: 10px solid red;
注意：border: none; 或者 border:0; 都表示border沒有設置樣式。
應用：使用border來製做小三角：
/*小三角 箭頭指向上方*/
div{
width: 0;
height: 0;
border-bottom: 20px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
六、margin（外邊距）
margin：外邊距的意思，表示邊框到最近盒子的距離。也有四個方向，而且能夠設置一、二、三、4個值。
/*表示四個方向的外邊距離爲20px*/
margin: 20px;
/*表示盒子向下移動了30px*/
margin-top: 30px;
/*表示盒子向右移動了50px*/
margin-left: 50px;
margin-bottom: 100px;
5、清除默認樣式
有一些標籤會默認自帶樣式，好比ul標籤默認有padding-left值，有些默認有margin值，ul、ol和a標籤也自帶一些樣式，可是咱們通常在作網頁的時候不想用那些自帶的樣式，因此須要清除頁面標籤中默認的樣式，以便咱們更好的去調整元素的位置。
雖然通配符選擇器*能夠解決問題，可是這種方法效率不高，不推薦，咱們要使用並集選擇器來選中頁面中應有的標籤，以下代碼就是清除默認樣式的一種寫法，reset.css：
參考網址：https://meyerweb.com/eric/tools/css/reset/
才考代碼
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del,
dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label,
legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}