什麼是css?
css選擇器:
經常使用的選擇器:
一、標記選擇器(簡單選擇器)
標記的名稱{
屬性名:屬性值
}
body{
color:red;
}
二、class選擇器
a、第一種形式 匿名的class選擇器
.選擇器的名稱{
屬性名:屬性值;
}
.s1{
font-style:
}
b、第二種形式 有命的class選擇器
標記的名稱 .選擇器的名稱{
屬性名:屬性值
}
div .s1{
font-style:
}
三、id選擇器
#選擇器的名稱{
屬性名:屬性值
}
#s1{
font-style:
}
四、選擇器的分組
h1,h2,h3{
color:green;
}
五、選擇器的派生
#d2 p{
font-size :120px;
}
表示id爲d2的標記內部的全部p標記的字體爲120px
樣式的優先級:
1) 默認樣式:瀏覽器默認的樣式
2) 外部樣式:樣式寫在一個.csss文件裏
3) 內部樣式:樣式寫在html文件裏
4) 內聯樣式:樣式寫在標記裏
從上到下,優先級愈來愈高
兩個關鍵屬性:
一、display
display的3個值
none:不顯示該標記
block:按塊標記的方式顯示
inline:按行內標記的方式來顯示
二、position
position的3個值
static(缺省值):瀏覽器在默認狀況下,會按從左到右,從上到下依次擺放各個標記
absolute:先對父標記偏移
relative:先按照默認的方式擺放,而後在偏移
快標記和行內標記
一、塊標記(另起一行)
常見的塊標記
div
p
img
form
table
h1...h6
ul
li
二、行內標記(不用另起一行)
行見的行內標記
span
strong
a
一些常見的屬性:
文本
font-size:30px; 字體大小
font-family : "宋體" 字體
font-style:italic/normal 風格
font-weight:100 粗細100~900
text-align:center 對齊方式 left , right , center
text-decoration:underline; 加下劃線
cursor:pointer 光標的形狀
背景
background-color : red 背景顏色
background-image :url(images/b1.jpg) 背景圖片
background-repeat:no-repeat 平鋪方式 repeat-x repeat-y
background-position: 20px 10px; 位置
background-attachment : fixed 依附方式 scroll(缺省)
也能夠簡化爲:
background : 背景顏色 背景圖片 平鋪方式 依附方式 水平位置 垂直位置
邊框
border : 1px solid red;
border-left;
border-right;
border-bottom;
border-top;
定位
width : 100px;
height: 200px;
margin: //外邊距
margin-left : 20px;
margin-top : 30px;
margin-right: 40px;
margin-bottom : 50 px;
也能夠簡化爲:
margin: 30px 40px 50px 20px 頂右底左
此外,還有這樣一些形式
margin : 0px;
margin:20px auto; //上下各20px,左右平均分配。通常用於居中
padding: //內邊距
padding-left : 20px;
padding-top : 30px;
padding-right: 40px;
padding-bottom: 50px;
也能夠簡化爲:
padding:30px 40px 50px 20px; 頂右底左
列表相關:list-style-type : none;
浮動(即取消標記的獨佔一行的特性。浮動以後,其位置能夠被其餘標記使用)
float:left; //浮動 right
clear:both; //取消浮動的影響,指的是告訴瀏覽器,雖然浮動的標記讓出了位置,可是不可以使用
連接的僞樣式:
a : link {color : red } 沒有訪問時
a : visited {color : blue} 訪問後
a : active {color : lime} 鼠標立即但尚未放開時
a : hover {color : aqua} 鼠標指向時
css