学习总结:CSS(一)定义方式、选择器、选择器权重
一、CSS的定義方式
1.內部樣式:<style></style>
2.行間樣式:<div style="width:100px;height:100px;">
3.外部樣式:<link rel="stylesheet" type="text/css" href="地址" >
注:瀏覽器異步加載html、css、js文件
二、CSS選擇器
1.常用選擇器:類選擇器、id選擇器、標簽選擇器、通配符選擇器
/*類選擇器*//*假設頁面有一個或多個同類名元素,且該類元素有一些共同的樣式特性。當然通常我們的設計邏輯是有這樣一些共同特性元素的需求,預先設計編寫一組樣式表,用來描述具備特定需求的元素。*/ /*假設有需求是有一些元素的寬高為100px,內邊距和外邊距為0,文本內容,文本溢出部分被剪切*/ .exa{width: 100px;height: 100px;margin:0 auto;padding: 0 auto;text-align: center;line-height: 100px;overflow: hidden; }
標簽選擇器與類選擇器的使用邏輯非常相似,就是用來描述頁面同一類標簽的元素的樣式。類選擇器使用程序員自己在元素屬性上定義的class屬性值來選定(.類名),點加類名的方式來設置。而標簽選擇器直接使用標簽名即可。
id選擇器就是使用元素上定義的id屬性值來設置,在di屬性值前面加上井號“#”就可以實現,設置的特定的一個元素的樣式。實際開發中并不建議使用id選擇器來設置樣式表,根據項目和開發手冊要求來定。
通配符使用的應該是最少的一種,出現在常用名單里的原因是我們每個樣式表的第一行都是用星號“*”,即通配符來去除元素原本的默認樣式,如元素的默認邊距、列表標簽的默認序列號、超鏈接元素的默認字體顏色和下劃線、統一全局字體大小和字體及顏色等一系列應用。
2.父子選擇器/派生選擇器
基于標簽選擇器、類選擇器、id選擇器的父子關系進行篩選需要匹配的元素,每級條件用空格間隔。
/*比如有需求是:找到頁面中id為“showcase”的div下,所有有序列表的列表項內的img元素中,設置樣式為寬300px,高200px,內外邊距為0像素,超出部分隱藏*/ div #showcase ul li img{margin: 0 auto;padding: 0 auto;width: 100px;height: 100px;overflow: hidden; }3并列選擇器
這個選擇器也是基于標簽選擇器、類選擇器、id選擇器來實現的,通過基礎選擇器組合,有別于父子選擇器的是并列選擇器的每個基礎選擇器之間不加空格。
/*例如有需求是:有一類元素是div并且都有類名是showcase和primary的樣式是,寬高249px;內外邊距為0,邊框1像素藍色*/ div.showcase.primary{width: 249px;height: 249px;padding: 0 auto;margin: 0 auto;border: 1px solid blue; }4.直接子元素選擇器
是在父子選擇器的基礎上演變而來的一個選擇器,比如要找到一個div元素下的子元素em,但是在其他子元素下面還有em,所以就不能使用div em的父子選擇器來實現了,這時候就可以采用直接子元素選擇器div > em,在父子選擇器的基礎上添加一個大于號,中間可以加空格也可以不加空格。這樣就是可以實現匹配一個元素下的子元素,而不會影響到其他后代元素。
5屬性選擇器
?在通常的情況下我們使用類名作為選擇器或者id選擇器其本質都是屬性選擇器,所謂的屬性選擇器就是使用元素的屬性和屬性值作為匹配條件。
語法:[屬性值=屬性值]
屬性值的類型與元素上的一致,不需要發生改變。
/*比如有需求是找到img元素的圖片名稱是figure的元素,并設置寬300px,高250px,超出部分隱藏*/ img[src*="figure"]{width: 300px;height: 250px;overflow: hidden; }注意留意中間出現的一個符號“*”,在屬性選擇器中還存在^、$、~、|四個特殊的符號。
星號(*)表示在屬性值中出現了指定的字符串。
(^)表示在屬性值內有以指定字符串開頭的屬性值。
($)表示在屬性值內有以指定字符串結尾的屬性值。
(~)表示在屬性值內有指定的屬性值。
(|)表示在屬性值整個以指定的字符串開頭。
[class="aaa bbb ccc"]{...} /*(^)匹配屬性值內有指定的字符開頭的屬性*/ [class^="a"]{...} [class^="b"]{...} [class^="c"]{...} /*(|)匹配屬性值以指定的字符串開頭*/ [class|="a"]{...} [class|="aa"]{...} [class|="aaa b"]{...} ...6.分組選擇器
分組選擇器就是同時有多個選擇器同時匹配一個樣式列表,使用逗號間隔。
.exa,div #showcase ul li img,div.showcase.primary,img[src*="figure"]{...}7.偽類選擇器
通過指定偽類設置元素樣式,偽類即為不需設置就存在的類,css語法自有的類。在一定程度上解決了行為特性的需求。
| ?:active | 向被激活的元素添加樣式 |
| ?:focus | 向擁有鍵盤輸入焦點的元素添加樣式 |
| ?:hover | 當鼠標懸浮元素上方時,向該元素添加樣式 |
| ?:link | 向未被訪問的鏈接添加樣式 |
| ?:visited | 向已被訪問的鏈接添加樣式 |
| ?:first-child | 向元素的第一個子元素添加樣式 |
| ?:lang | 向帶有指定lang屬性的元素添加樣式 |
?三、偽元素
1.在一個標簽內,內容前后隱式的存在邏輯上的兩個元素,內容的邏輯前是:before,內容的邏輯后是:after
2.在css中選取偽元素的語法:標簽名::before/after
3.偽元素中的content樣式屬性可以設置偽元素的內容,這個樣式只存在偽元素中,必須寫content才能生效(content:"";)
4.偽元素是行級元素
| ?:first-letter | 向文本的第一個字母添加特殊樣式(只是應塊級元素) |
| ?:first-line | 向文本的首行添加特殊樣式(只適應塊級元素) |
| ?:before | 在元素之前添加內容 |
| ?:after | 在元素之后添加內容 |
偽元素是由HTML語法給每一個標簽內置的虛擬但真實存在的元素,這里的屬性其實質是虛擬標簽的class值
四、css樣式權重
!important??????? infinity???? 正無窮???? 寫在樣式后面
行間樣式????????? 1000
id????????????????????? 100
class|屬性|偽類? 10
標簽 | 偽元素????? 1
通配符??????????????? 0
注:計算機的:正無窮+1 > 正無窮
權重數值采用的256進制計算。
css復合樣式的權重采用權重值相加,誰的權重值的和大使用誰。
?
轉載于:https://www.cnblogs.com/ZheOneAndOnly/p/10166682.html
總結
以上是生活随笔為你收集整理的学习总结:CSS(一)定义方式、选择器、选择器权重的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 干洗店一个月能挣多少 比上班多赚三倍不
- 下一篇: 盛京银行信用卡额度调整方法