前端css -- 引入方式和選擇器
引入css方式(重點掌握)
-
行內樣式
-
內接樣式
-
外接樣式
3.1 鏈接式
3.1 導入式
css介紹
現在的互聯網前端分三層:
- HTML:超文本標記語言。從語義的角度描述頁面結構。
- CSS:層疊樣式表。從審美的角度負責頁面樣式。
- JS:JavaScript 。從交互的角度描述頁面行為
CSS:Cascading Style Sheet,層疊樣式表。CSS的作用就是給HTML頁面標簽添加各種樣式,定義網頁的顯示效果。簡單一句話:CSS將網頁內容和顯示樣式進行分離,提高了顯示功能。
css的最新版本是css3,我們目前學習的是css2.1
接下來我們要講一下為什麽要使用CSS。
HTML的缺陷:
- 不能夠適應多種設備
- 要求瀏覽器必須智能化足夠龐大
- 數據和顯示沒有分開
- 功能不夠強大
CSS 優點:
- 使數據和顯示分開
- 降低網絡流量
- 使整個網站視覺效果一致
- 使開發效率提高了(耦合性降低,一個人負責寫html,一個人負責寫css)
比如說,有一個樣式需要在一百個頁面上顯示,如果是html來實現,那要寫一百遍,現在有了css,只要寫一遍。現在,html只提供數據和一些控件,完全交給css提供各種各樣的樣式。
行內樣式
1 <div> 2 <p style="color: green">我是一個段落</p> 3 </div>
內接樣式
<style type="text/css"> /*寫我們的css代碼*/ span{ color: yellow; } </style>View Code
外接樣式-鏈接式
<link rel="stylesheet" href="./index.css">
外接樣式-導入式
<style type="text/css"> @import url(‘./index.css‘); </style>View Code
css的選擇器:
1 .基本選擇器包含:
1.標簽選擇器
標簽選擇器可以選中所有的標簽元素,比如div,ul,li ,p等等,不管標簽藏的多深,都能選中,選中的是所有的,而不是某一個,所以說 "共性" 而不是 ”特性“
body{ color:gray; font-size: 12px; } /*標簽選擇器*/ p{ color: red; font-size: 20px; } span{ color: yellow; }View Code
2.id選擇器
# 選中id
同一個頁面中id不能重復。
任何的標簽都可以設置id
id命名規範 要以字母 可以有數字 下劃線 - 大小寫嚴格區分 aa和AA是兩個不一樣的屬性值
#box{ background:green; } #s1{ color: red; } #s2{ font-size: 30px; }View Code
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?
答案:盡可能的用class。除非一些特殊情況可以用id 原因:id一般是用在js的。也就是說 js是通過id來獲取到標簽
2. 高級選擇器分為:
-
後代選擇器
-
子代選擇器
-
並集選擇器
-
交集選擇器
後代選擇器:
使用空格表示後代選擇器。顧名思義,父元素的後代(包括兒子,孫子,重孫子)
.container p{
color: red;
}
.container .item p{
color: yellow;
}
View Code
子代選擇器:
使用>表示子代選擇器。比如div>p,僅僅表示的是當前div元素選中的子代(不包含孫子....)元素p。
1 .container>p{ 2 color: yellowgreen; 3 }View Code
並集選擇器:
多個選擇器之間使用逗號隔開。表示選中的頁面中的多個標簽。一些共性的元素,可以使用並集選擇器
/*並集選擇器*/ h3,a{ color: #008000; text-decoration: none; }View Code
比如像百度首頁使用並集選擇器。
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
margin: 0;
padding: 0
}
/*使用此並集選擇器選中頁面中所有的標簽,頁面布局的時候會使用*/
View Code
交集選擇器:
使用.表示交集選擇器。第一個標簽必須是標簽選擇器,第二個標簽必須是類選擇器 語法:div.active
比如有一個<h4 class=‘active‘></h4>這樣的標簽。
那麽
h4{ width: 100px; font-size: 14px; } .active{ color: red; text-decoration: underline; } /* 交集選擇器 */ h4.active{ background: #00BFFF; }View Code
它表示兩者選中之後元素共有的特性。
前端css -- 引入方式和選擇器