css3一般介紹:
CSS注釋:/*CSS*/
CSS長度單位:
1.px(像素)
2.em(倍數,一般用于文字)
一、HTML嵌套CSS3樣式:
1.外部(推薦)
例如HTML文件為index.html
將樣式放入另一文件中,index.css
以上兩個文件放入同一文件夾下
2.內部
3.內聯(不推薦)
二、CSS3優先級
1.內聯style
2.id選擇器
3.class選擇器
4.標簽
index#imgid{
background:#0ff;
border-radius:256px;
}
.imgcls{
background:#f0f;
border-radius:256px;
}
img{
background:#ccc;
border-radius:256px;
}
以上代碼中,優先級為:內聯style>#imgid>.imgid>img
三、CSS3選擇器
1.常用選擇器
1)標簽
...
span{
font-size:10em
}
linux
...
*{} //給頁面上所有的標簽設置模式
h1{} //給頁面上所有的h1標簽設置樣式
2)id
...
#imgid{
font-size:10em
}
...
#h3{} //給id是h3的標簽設置樣式
3)類
...
.imgid{
font-size:10em
}
...
.hcls{} //給class是hcls的一類標簽設置模式
4)關聯
...
.div2 .imgcls{ /*表示div2里面的imglcs*/
background:#ccc;
border-radius:256px;
}
...
...
#div1 h1
#div1 h1.ljhcls
5)組合
...
.div1 .imgcls,.div2 .imgcls{
background:#ccc;
border-radius:256px;
}
...
...
div,h1,p,span,button{}
2.基本選擇器
1):first-child
2):first-letter
對一段文字中的第一個字符進行操作
3):first-line
對一段文字中的第一個行進行操作
4):last-child
5):nth-child(num)
可以自由選擇對第幾個進行樣式操作(用法參考1)4))
3.層級選擇器
1)a,b(組合)
2)a b(a里面的b)
3)a>b(a的“子集”b)
如圖,以上代碼只對bbbbbbbbb進行操作
4)a+b
如圖,以上代碼只對后面的
ccccccccccccccc進行操作
4.偽類選擇器
1):hover
鼠標在選擇內容上則操作,鼠標移開則不進行操作,如下例:
2):focus
鼠標點擊后,表單元素獲得焦點,右下圖為改變表單輪廓的實例
3)::selection
內容被選擇后,內容的背景色發生變化
5.屬性選擇器(用的不多,不做贅述)
附上一段詳細講解的鏈接=>CSS選擇器參考手冊
1)[id]
2)[id=use1]
3)[name*=us]
名字中包含有us的
4)[name|=en]
本文地址:https://blog.csdn.net/weixin_47982238/article/details/107531919