CSS是(Cascading Style Sheet)的縮寫(xiě)纸颜,也被稱為層疊樣式單;主要用作網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)狂打,包括字體大小,顏色伦连,以及元素的精確定位等雨饺。
1.如何讓CSS和html5有關(guān)聯(lián)呢/
引入外部css樣式單文件,在html5的
<head.../>
元素內(nèi)插入<link.../>
子元素:
<head>
<link herf="out.css" rel="stylesheet" type="text/css">
</head>
直接在html5里面增加css樣式采用的方法是直接在需要添加樣式的標(biāo)簽上寫(xiě)style="需要添加的樣式屬性"
2.如何在外部css樣式單文件準(zhǔn)確定位到需要添加樣式的標(biāo)簽上呢?
用css選擇器來(lái)準(zhǔn)確定位 那么css的選擇器有哪些呢?有很多惑淳,那么下面我給大家一一介紹一下:
1.元素選擇器
2.屬性選擇器
3.id選擇器
4.類選擇器
5.子選擇器
6.后代選擇器
3.css的幾種引入方式{1.內(nèi)聯(lián)style屬性 } {2.style標(biāo)簽} {3.外部文件css link}
4.學(xué)習(xí)css的幾種資源:
一.google關(guān)鍵詞:MND
二.CSS Tricks
三.阮一峰 css
四.張?chǎng)涡竦?40多篇css博客
五.Codrops 酷炫css效果
六. css揭秘(推薦購(gòu)買書(shū)籍)
七.css 2.1中文spec (最權(quán)威的書(shū)其實(shí)就是文檔)
4 針對(duì)style="float:left"
的bug的修復(fù):
clearfix::after{
content: '';
display:block;
clear:both;
}
注意添加
float:left
的子元素 其直屬母元素上一定要加clearfix
5.當(dāng)你不知道自己<div>
里面框的是什么的時(shí)候你可以在這個(gè)div里面加一個(gè)style="border:1px solid red"
這個(gè)屬性會(huì)讓你直接看到div
的框架额港。
6 我學(xué)習(xí)css中所用到的屬性及其含義:
padding:20px 0px 20px 0px
(padding是內(nèi)邊距 后面的數(shù)字意思分別是 上 右 下 左)
margin
外邊距 用法跟padding一樣也是后面加所需要的數(shù)字
text-decoration:none
(這個(gè)是樣式 默認(rèn)的樣式是有下劃線underline
的 這個(gè)呢就是幫助你去掉下劃線 也還有overline
上劃線等等)
text-align:center
(文字居中的意思)
font-weight:bold
(字體加粗)
font-family:字體樣式
(意思的選擇你想要的字體樣式)
font-size
(字體大小tiaojie)
display-block
(脫離文檔流)
background-position:center center
(背景圖片居中)
background-size:cover
(背景圖片按比例縮放)
mix-weight:100px
(最大寬度不超過(guò)100px)
margin-left:auto ; margin-right:auto;
(可以實(shí)現(xiàn)水平居中)