2分鐘掌握css選擇器優(yōu)先級,css中選擇器是什么意思?
要使用css對HTML頁面中的元素實現一對一,一對多或者多對一的控制,這就需要用到CSS選擇器。HTML頁面中的元素就是通過CSS選擇器進行控制的。
每一條css樣式定義由兩部分組成,形式如下:[code] 選擇器{樣式} [/code] 在{}之前的部分就是“選擇器”。“選擇器”指明了{}中的“樣式”的作用對象,也就是“樣式”作用于網頁中的哪些元素。
CSS的基本特征?
總體來說,CSS具有以下特點:
1.豐富的樣式定義
CSS提供了豐富的文檔樣式外觀,以及設置文本和背景屬性的能力;允許為任何元素創(chuàng)建邊框,以及元素邊框與其他元素間的距離,以及元素邊框與元素內容間的距離;允許隨意改變文本的大小寫方式、修飾方式以及其他頁面效果。
2.易于使用和修改
CSS可以將樣式定義在HTML元素的style屬性中,也可以將其定義在HTML文檔的header部分,也可以將樣式聲明在一個專門的CSS文件中,以供HTML頁面引用。總之,CSS樣式表可以將所有的樣式聲明統一存放,進行統一管理。
另外,可以將相同樣式的元素進行歸類,使用同一個樣式進行定義,也可以將某個樣式應用到所有同名的HTML標簽中,也可以將一個CSS樣式指定到某個頁面元素中。如果要修改樣式,我們只需要在樣式列表中找到相應的樣式聲明進行修改。
3.多頁面應用
CSS樣式表可以單獨存放在一個CSS文件中,這樣我們就可以在多個頁面中使用同一個CSS樣式表。CSS樣式表理論上不屬于任何頁面文件,在任何頁面文件中都可以將其引用。這樣就可以實現多個頁面風格的統一。
4.層疊
簡單的說,層疊就是對一個元素多次設置同一個樣式,這將使用最后一次設置的屬性值。例如對一個站點中的多個頁面使用了同一套CSS樣式表,而某些頁面中的某些元素想使用其他樣式,就可以針對這些樣式單獨定義一個樣式表應用到頁面中。這些后來定義的樣式將對前面的樣式設置進行重寫,在瀏覽器中看到的將是最后面設置的樣式效果。
5.頁面壓縮
在使用HTML定義頁面效果的網站中,往往需要大量或重復的表格和font元素形成各種規(guī)格的文字樣式,這樣做的后果就是會產生大量的HTML標簽,從而使頁面文件的大小增加。而將樣式的聲明單獨放到CSS樣式表中,可以大大的減小頁面的體積,這樣在加載頁面時使用的時間也會大大的減少。另外,CSS樣式表的復用更大程度的縮減了頁面的體積,減少下載的時間。
css怎么設置class的優(yōu)先級?
樣式權值設定
1. 內聯樣式表的權值最高 1000;
2. ID 選擇器的權值為 100
3. Class 類選擇器的權值為 10
4. HTML 標簽選擇器的權值為 1
5 繼承樣式的權值為0.1
舉例
< class a>
< class b>
<class c >
直接用 .c(類)選擇器 它的權值只有10 ,
用 .a .b .c來選擇,則它的權值為10+10+10。
自學HTML5的條件是什么?
對于許多自學前端的學習者來說,學習興趣是濃厚的,但是往往求學無方。現在網上的資源良莠不齊,在海量的信息庫里挑選適合自己的HTML5學習線路更是難上加難。
今天小編就給大家分享一個HTML5初級開發(fā)工程師學習線路。
第一部分是HTML5課程介紹,通過這段課程學習,學生可以對整個HTML5課程有全面的了解,對未來主要的工作和業(yè)務應用場景有初步的認識。
1、互聯網發(fā)展趨勢
2、H5語言的優(yōu)勢
3、簡單易學人人都能編程
4、H5就業(yè)和薪資情況
5、H5常見的項目與產品
6、H5的未來與方向
第二部分是HTML基礎,通過這一部分基礎學習,學生可以學會HTML,并且了解網頁的組成,可寫出基本的網頁結構。
1、HTML簡介與歷史版本
2、常用開發(fā)軟件
3、常見標簽與屬性
4、表格與表單
5、標簽規(guī)范與標簽語義化
6、實戰(zhàn):網頁結構布局
第三部分是CSS基礎,通過此階段的學習,學生可以學會CSS,利用PS工具進行樣式開發(fā),結合HTML結構完成整頁制作。
1、css簡介與基本語法
2、常見的各種樣式屬性
3、CSS選擇器與標簽類型
4、理解盒子模型與CSS重置
5、浮動與定位
6、利用photoshop工具測量樣式
7、HTML+CSS開發(fā)網頁
8、實戰(zhàn):高仿電商首頁效果
第四部分是CSS3基礎,學成之后,學生可以利用CSS3制作出炫酷的網頁動態(tài)效果。
1、css3常見樣式
2、css3選擇器
3、變形與動畫
4、3D效果與關鍵幀
5、彈性盒模型
第五部分是移動端布局,通過這一階段的學習,可以掌握移動端概念與移動端布局方案,理解什么是響應式,利用bootstrap來搭建頁面。
1、移動端基本概念
2、viewport窗口設置
3、移動端布局方案
4、rem、vh、vw等單位
5、響應式布局
6、bootstrap框架
第六部分是JavaScript基礎,可以基本掌握JS基本語法和簡單的邏輯處理,掌握JS核心內容,利用JS開發(fā)網頁中常見的特效效果。
1、JS簡介
2、JS變量
3、數據類型與類型轉換
4、運算符與優(yōu)先級
5、流程控制-if..else
6、流程控制-switch...case
7、流程控制-while、do..while、for循環(huán)
8、break、continue語法
9、函數定義與調用
10、全局變量與局部變量
11、函數傳參與返回值
12、函數作用域與變量作用域
13、DOM的基本操作
14、定時器使用
15、this指向與修改指向
16、數組、字符串等方法操作
17、時間對象與正則對象
18、掌握常見BOM操作
19、常見事件與事件細節(jié)
20、JSON與AJAX
21、JSONP跨域操作
22、前端cookie的使用
23、實戰(zhàn):JS配合HTML與CSS完成電商項目
第七部分是jquery框架,此階段的學習結束,學生可以學會jquery框架,利用jquery框架快速開發(fā)網頁效果。
1、jquery核心思想
2、jquery常見方法
3、jquery動畫操作
4、jqueryAJAX操作
5、jquery工具方法
6、利用jquery快速開發(fā)網頁
第八部分是PHP基礎,學習之后可以掌握前后端真實開發(fā)模式,能夠對數據庫進行CURD操作,并能顯示數據到頁面,實現動態(tài)網站開發(fā)。
1、PHP簡介與基本語法
2、mysql數據庫及sql語法
3、apache服務器與集成開發(fā)工具
4、PHP鏈接數據庫
5、PHP與AJAX交互
6、實戰(zhàn):留言板、登錄、注冊等
第九部分是H5基礎項目,也是此學習路線的尾聲部分。學生能夠獨立完成一整個大型網站的前端開發(fā)。具備獨立的項目開發(fā)能力和思考能力。并且,做到多設備、多瀏覽器兼容等處理實現。
1、項目簡介
2、項目功能演示
3、項目劃分及框架
4、編寫HTML頁面結構
5、設置CSS樣式
6、添加JS交互
7、可選框架:bootstrap、jquery、PHP等
8、項目調試及兼容
9、項目驗收