整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
、CSS概述
CSS是Cascading Style Sheets的簡稱，中文稱為層疊樣式表，對html標簽的渲染和布局
CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。
二、CSS的四種引入方式
1.行內式
行內式是在標記的style屬性中設定CSS樣式這種方式沒有體現出CSS的優勢，不推薦使用。
2.內嵌式
嵌入式是將CSS樣式集中寫在網頁的<head></head>標簽對的<style></style>標簽中。
3.鏈接式
建一個index.css的文件存放樣式，在主頁面中把index.css引入。
4.導入式
將一個獨立的.css文件引入HTML文件中，導入式使用CSS規則引入外部CSS文件，<style>
標記也是寫在<head>標記中。使用格式 @import "index.css"
注意：
導入式會在整個網頁裝載完后再裝載CSS文件，因此這就導致了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之后，再出現網頁的樣式。這是導入式固有的一個缺陷。使用鏈接式時與導入式不同的是它會以網頁文件主體裝載前裝載CSS文件，因此顯示出來的網頁從一開始就是帶樣式的效果的，它不會像導入式那樣先顯示無樣式的網頁，然后再顯示有樣式的網頁，這是鏈接式的優點。所以還是推薦用鏈接式。。。。。。。。。。。
三、注意嵌套規則
五、CSS選擇器
1.基礎選擇器
“選擇器”指明了{}中的“樣式”的作用對象，也就是"樣式"作用與網頁中的哪些元素
1.通用元素選擇器 *: 所有的標簽都變色
2.標簽選擇器：匹配所有使用p標簽的樣式 p{color:red}
3.id選擇器：匹配指定的標簽 #p2{color:red}
4.class類選擇器：誰指定class誰的變色，可選多個 .c1{color:red} 或者 div.c1{color:red}
可以對塊級標簽設置長寬
不可以對內聯標簽設長寬（它只會根據他的文字大小來變）
2.組合選擇器
1.后代選擇器 (不分層級，只讓p標簽變色) .c2 p{color:red}
2.子代選擇器（只在兒子層找） .c2>p{color:red}
3.多元素選擇器：同時匹配所有指定的元素 .div,p{color:red} 或者
.c2 .c3,.c2~.c3{
color: red;
background-color: green;
font-size: 15px;
}
3.屬性選擇器
1. E[att] 匹配所有具有att屬性的E元素，不考慮它的值。（注意：E在此處可以省略。 ） 比如“[cheacked]”。以下同。） p[title] { color:#f00; }
2.E[att=val] 匹配所有att屬性等于“val”的E元素 div[class=”error”] { color:#f00; }
3.E[att~=val] 匹配所有att屬性具有多個空格分隔的值、其中一個值等于“val”的E元素 td[class~=”name”] { color:#f00; }
4.E[attr^=val] 匹配屬性值以指定值開頭的每個元素 div[class^="test"]{background:#ffff00;}
5.E[attr$=val] 匹配屬性值以指定值結尾的每個元素 div[class$="test"]{background:#ffff00;}
6.E[attr*=val] 匹配屬性值中包含指定值的每個元素 div[class*="test"]{background:#ffff00;}
4.偽類
anchor偽類：專用于控制鏈接的顯示效果
before after偽類
:before p:before 在每個<p>元素之前插入內容
:after p:after 在每個<p>元素之后插入內容
例：p:before{content:"hello";color:red;display: block;}
5.CSS優先級和繼承
css的繼承
繼承是CSS的一個主要特征，它是依賴于祖先-后代的關系的。繼承是一種機制，它允許樣式不僅可以應用于某個特定的元素，還可以應用于它的后代。例如一個BODY定義了的顏色值也會應用到段落的文本中。
發現只需要給加個顏色值就能覆蓋掉它繼承的樣式顏色。由此可見：任何顯示申明的規則都可以覆蓋其繼承樣式?！?/p>
此外，繼承是CSS重要的一部分，我們甚至不用去考慮它為什么能夠這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等。
所謂CSS優先級，即是指CSS樣式在瀏覽器中被解析的先后順序。
樣式表中的特殊性描述了不同規則的相對權重，它的基本規則是：
1 內聯樣式表的權值最高 style=""－－－－－－－－－－－－1000；
2 統計選擇符中的ID屬性個數。 #id －－－－－－－－－－－－－－100
3 統計選擇符中的CLASS屬性個數。 .class －－－－－－－－－－－－－10
4 統計選擇符中的HTML標簽名個數。 p －－－－－－－－－－－－－-－1
按這些規則將數字符串逐位相加，就得到最終的權重，然后在比較取舍時按照從左到右的順序逐位比較。
、標簽選擇器
li{color: blue; font-size: 35px;}
選擇標簽名為li的元素
二、id選擇器
#two{ color: red; }
#two選擇的是id為two的元素
三、class選擇器
.ls{color: green;}
.ls選擇的是class為ls的元素
四、交叉選擇器
p.ls{ color: purple;}
p.ls選擇的是標簽是p，并且class是ls的元素
注意：交叉選擇器中間沒有空格，即p和.ls之間沒有空格
五、子代選擇器
li span{color: orange;font-size: 50px; }
li span選擇的是li標簽里面的span標簽
注意：子代選擇器中間有空格，即li 和span 之間有空格
六、群選擇器
.ls,span{ color: yellow; }
.ls,span選擇的是class為ls的標簽和標簽為span的元素
七、通用選擇器
*{ color: yellow; }
選擇HTML文檔body內的所有標簽
例：1 div.box p,li 表示class為box的div標簽中的p標簽和li標簽
<div class="box" >
<p></p>
<li></li>
</div>
對帶有指定屬性的 HTML 元素設置樣式。
ps：這個屬性你可以自定義，隨便啦，想寫什么寫什么。
eg:
vue中的scoped作用域屬性就是用它來實現的。
在template模板中給style標簽加上scoped屬性就可以實現不同template頁面其樣式互不干擾
當然，屬性選擇器遠遠不止這些：
我們可以給相同的屬性不同的值定義不同的樣式
還可以向正則表達式那樣，給屬性值開頭不同，結尾不同，中間含義不同分別設置不同的樣式！
input[attr^=a] ------ 屬性值【開頭】為【“a”】的元素
input[attr$=a] ------ 屬性值【結尾】為【“a”】的元素
input[attr*=a] ------ 屬性值中含有【“a”】的元素
ps: 我屬性前面的input是標簽選擇器的意思，你也可以用類名，id, 標簽什么的都可以!
就像這樣：
還有就是我上面css中寫屬性選擇器中，我把屬性的中用引號包裹了，事實上，你帶不帶引號都對！看個人習慣!
選擇第一個子元素：
父元素>子元素:first-child{}
ps：如果有很多父元素，要選擇指定的用選擇器就行 指定父元素>一堆子元素：first-child
選擇最后一個子元素：
父元素>子元素:last-child{}
用法相同。
匹配屬于父元素中唯一子元素的元素。
要匹配的子元素:only-child {}
當你使用這個選擇器的時候，它會找一個自己是不是獨生子女（父元素沒有出了自已以外的其它子元素了），如果是獨生子女，那就匹配成功，不是，不好意思，匹配失??！
匹配屬于其父元素的特定類型的唯一子元素的每個元素。
要指定的子元素類型類型:only-of-type{}
這個真的不是很好理解，和only-child不同（only-child選擇器選擇的是父元素中只有一個子元素，而且只有唯一的一個子元素。也就是說，匹配的元素的父元素中僅有一個子元素，而且是一個唯一的子元素。），在偽類選擇器前面是要指定的子元素類型, 然后當它匹配時候，會找自己在父元素里面是不是獨一份（假設我們把標簽比作男女的話，它的父親有很多個孩子，但是其它的都是男孩，只有它是女孩），如果是，匹配成功，否則匹配失敗
eg:
ps：大家看了這個選擇器，現在可以把它忘掉了，因為講道理來說，既然它是父元素里的唯一此標簽子元素，我們完全可以通過: 父元素>此子元素標簽 直接就把它定位了！完全不需要這么麻煩！
子元素列表 :nth-child(要選擇的第幾個)
需要注意一點就是，他不是從0開始選擇，比如你要選擇第一個子元素，那么
子元素列表 :nth-child(1)即可
子元素列表:nth-last-child((要選擇的倒數第幾個)
同 :nth-child類似，它也是從1開始的，nth-last-child(1)代表倒數第一個，也就是最后一個！
eg:
子元素列表：nth-child(odd) 匹配下標是奇數的子元素 子元素列表：nth-child(even) 匹配下標是偶數的子元素
嗯，可以用它來實現經典的隔行變色是在恰當不過的了！
除此之外，:nth-child里面還可以寫一些計算。
:nth-child(數字n) 表示匹配該數字的倍數的意思，比如nth-child(3n)就表示匹配該元素下的所有3的倍數：
eg:
:nth-child(數字n) ,這個數字還可以進行簡單的計算，比如，如果我寫 :nth-child(3n-1)，則會匹配到下標分別為 2,5,8的子元素，因為3的一倍為3,3減1得到下標2的子元素, 3的2倍為6, 6減1得到下標5的子元素。
子元素集合:nth-of-type(n) 選擇器匹配屬于父元素的特定類型的第 N 個子元素的每個元素.
好吧，官方描述可能坑，我們用例子來理解：
不同于 :nth-child(n) (選取父元素的第 N 個子元素，不論元素的類型。n 可以是數字（從 1 開始），關鍵詞（even/odd）,或者公式（3n + 1, 2n + 1...）)
:nth-of-type(n)與 :nth-child(n) 的區別就在于 :nth-child(n) 不論元素的類型，而nth-of-type(2)選取父元素的第 N 個類型為 你所知道 的子元素。
上圖中，父元素有2個span標簽，第一個span標簽在父元素的子元素集合中下標為2的位置，第二個span在父元素的子元素集合中下標為3的位置
我們使用 span:nth-child(2) 會選中第一個sapn標簽，因為下標為1的子元素是p標簽，
但是使用 span:nth-of-type(2) 則會選中第二個span標簽，因為在該父元素的子元素集合中，第二個span標簽是依據該父元素的子元素集合中的span標簽集合中的第二個?。。。。。?！
子元素集合:nth-last-of-type(n) n 可以是數字、關鍵詞或公式。
這個用法同 :nth-of-type(n) 保持一致，只不過它是從倒數開始。
比如 span:nth-last-of-type(2)意思就是說選擇父元素的倒數第二個span標簽。
eg:
:focus {}
表示該表單光標獲得焦點時觸發。
:
:enabled{} 選擇啟用狀態的元素
凡是沒有設置屬性為disabled的表單都會匹配到，disabled為禁用該表單的意思
與:enabled{} 相對的，:disabled{}為選擇 選擇禁用狀態的元素 例如：<input type="text" disabled />
:valid {} 驗證輸入合法時觸發
與:valid {} 相對于，:invalid{}選擇器在匹配不合法時觸發,這里就不寫例子了
:before
在【當前元素】之前插入【額外內容】 ，需要配合【content】一起
使用?！綾ontent】的值就是插入的內容，這個和:after是很常用的，因為可以把一個標簽當三個標簽來用，大網站經常用它來提示性能。
同:before{}對應，:after{}會在元素之后插入內容，同樣，也需要配合content來使用
::selection 指鼠標選中“網頁文本”狀態的設定。
默認，我們的瀏覽器選中網頁文本效果都是藍色背景，白色文字：
我們可以通過::selection來更改默認樣式:
ps: 記著是兩個冒號?。。。?！ ::selection
好了，差不多就是這些，要是后面還有比較重要的我在補充！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
