css樣式：數(shù)據(jù)與外觀相分離
軟件發(fā)展方向：低耦合，高內(nèi)聚
<table><caption>標(biāo)題
<span>為塊標(biāo)簽可以用來突出顯示某些內(nèi)容 例如：我的愛好<span style="color:Red;font-family:@華文彩云;font-size:x-large">唱歌</span> 突出顯示唱歌
盒子模型（框模型，回字模型） 內(nèi)容區(qū)，邊框區(qū)，空白區(qū)
連接外部樣式表
<head><link rel="stylesheet" type="text\css" href="樣式表文件.css"></head>
內(nèi)嵌樣式在<head>內(nèi)部寫,例如
<head runat="server">
<style type="text/css">
p
{
color:Red;
background-color:Green
}
</head>
行內(nèi)樣式直接寫在標(biāo)簽處
不要用屬性直接控制外觀模式應(yīng)用style模式
padding:到邊框的距離
篩選器：Html選擇器（用Html標(biāo)簽的名稱去定義的），class類選擇器（偽類），ID選擇器，特殊的選擇器
Html選擇器:無需調(diào)用
p
{
color:Red;
font-family:@方正舒體;
font-size:large;
}
ul
{
background-color:Blue;
font-family:@幼圓;
font-size:medium;
}
class類選擇器:需要用class="名稱"調(diào)用
.myclass
{
color:Black;
padding:5px,20px,30px,50px;
border-width:medium;
}
ID選擇器:在應(yīng)用標(biāo)簽處需要定義id如<ol id="div_ol">
#div_ol
{
background-color:Green;
}
特殊的選擇器：不需要調(diào)用
a
{
color:Blue;
}
a:hover
{
color :Red;
text-decoration:"underline";
}
a:active
{
color:Green;
}
Z-index:Z軸索引 索引越大就在上面
懸浮窗
.news
{
background-color: gray;
border: solid 1px red;
float:left;
}
.news img
{
float:left;
}
.news p
{
float:right;
}
<div class="news">
<img src="logo.gif" />
<p>我的大大泡泡糖</p>
</div>
可以做圍繞圖片顯示文本的形式
在使用相對(duì)定位時(shí)，無論是否進(jìn)行移動(dòng)，元素仍然占據(jù)原來的空間。因此，移動(dòng)元素會(huì)導(dǎo)致它覆蓋其他
框。 Position:relative相對(duì)定位
與之相反，絕對(duì)定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間。Position:absolute絕對(duì)定位
容器元素不包圍兩個(gè)浮動(dòng)的塊。添加一個(gè)進(jìn)行清理的空元素可以迫使容器元素包圍浮動(dòng)元素
還可以不對(duì)浮動(dòng)的文本和圖像進(jìn)行清理，而是選擇對(duì)容器div進(jìn)行浮動(dòng)：
.news {background-color: gray; border: solid 1px black; float:left;}
目前漸變非常時(shí)髦，你可能希望在頁面上應(yīng)用垂直漸變。為此，需要?jiǎng)?chuàng)建一個(gè)很高但很窄的漸變圖像，
然后將這個(gè)圖像應(yīng)用于頁面的主體并讓它水平平鋪：
body {
background:#ccc url(gradient.gif)repeat-x;
}
可以創(chuàng)建一個(gè)非常長(zhǎng)的圖像，逐漸變化到一個(gè)固定的顏色。但是，很難預(yù)測(cè)頁面會(huì)有多長(zhǎng)。實(shí)際上，只
需再添加一個(gè)背景顏色。背景圖像總是出現(xiàn)在背景顏色的上面，所以當(dāng)圖像結(jié)束時(shí)，顏色就會(huì)顯示出來了。
如果選擇的背景顏色與漸變底部的顏色相同，那么圖像和背景顏色之間的轉(zhuǎn)換就看不出來了。
我在標(biāo)記中添
加一個(gè)空的div并且給它設(shè)置ID branding。然后可以將這個(gè)div的尺寸設(shè)置為與品牌圖像相同，作為背景
應(yīng)用圖像并指定不進(jìn)行平鋪。
#branding {
width:700px;
height:200px;
background:url(/images/branding.gif) no-repeat;
}
本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)
點(diǎn)擊舉報(bào)。
