css總結
DHTML(Dynamic HTML) 稱爲動態HTML 它是 HTML CSS JAVASCRIPT的集成
CSS層疊樣式表:(cascading style sheet) 將對佈局 字體 顏色 背景和其它
圖文效果實現更加精確的控制
javascript:它是一種script腳本語言
腳本語言:就是能夠和HTML混合在一塊兒使用的語言,能夠用來在IE的客戶端進行程序編制,從而控制瀏覽器等對象的操做
CSS層疊樣式表 1996.12.17 css1
1998.5.12 css2
樣式能夠定義在HTML文檔的標誌(tag)裏
也可做爲外部附加文檔 此是將用於整個頁面 甚至整個站點
所以具備更好的易用性和擴展性
CSS功能: 彌補HTML對網頁格式化功能的不足 好比段落間距,行間距
字體變化和大小
頁面格式的動態更新
排版定位
CSS的類型
1.自定義CSS .bg{background-image:url(bg.gif);} <body class="bg">
2.重定義標記的CSS 即定義的CSS將只用於選擇的標記
p{color:#000099;font-size:9pt}
3.CSS選擇符 使用id做爲屬性 以保證文檔具備惟一可用的值
它有4種樣式 a: link 設定正常狀態下鏈接文字的外觀
a: visited 設定訪問過的鏈接外觀
a: hover設定鼠標放置在鏈接文字之上時的文字的外觀
a: active 設定鼠標單擊時鏈接的外觀
a:link{color:#ff3366;font-family:"宋體"；text-decoration:none;}
a:hover{color:#ff6600;font-family:"宋體"；text- decoration:underline;}
a:visited{color:#339900;font-family:"宋體"；text-decoration:none;}
CSS實現的方式
1.在HEAD內的實現 以<style>開始</style>結束
<HTML>
<HEAD>
<TITLE>歡迎進入 HTML 世界</TITLE>
<style type="text/css">
h1{font-size:x-large;color:red}
h2{font-size: large;color:blue}
p{font-size:x-large;color:green}
</style>
</HEAD>
<BODY>
<P>這會是一種頗有趣的體驗</P>
<h1>你好!!!</h1>
<h2>歡迎你!!!</h2>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>歡迎進入 HTML 世界</TITLE>
<style type="text/css">
body{
font-family:"黑體"；
font-size:12pt;
line-height:16pt;
color:#ffffff;
background-color:#006699;
}
</style>
</HEAD>
<BODY>
HTML 是一種標記語言
使用 HTML 標記和元素，能夠：
控制頁面和內容的外觀
發佈聯機文檔
使用 HTML 文檔中插入的連接檢索聯機信息
建立聯機表單，收集用戶的信息、執行事務等等
插入動畫
開發幫助文件
</BODY>
</HTML>
line-height行的間距
2.在body內的實現
<HTML>
<HEAD><TITLE>設置屬性</TITLE></HEAD>
<BODY>
<P style = "color:aqua;font-Style:italic;">
本段應用了內嵌樣式<BR>
<P>本段以默認樣式顯示。<BR>
<P>您能發現本行中的
<SPAN style = "color:red">不一樣之處</SPAN>嗎？
</BODY>
</HTML>
3.在文件外的調用
<HTML>
<HEAD>
<TITLE>歡迎進入 HTML 世界</TITLE>
<LINK REL=stylesheet HREF="public.css" Type="text/css" >
</HEAD>
<BODY>
HTML 是一種標記語言
使用 HTML 標記和元素，能夠：
控制頁面和內容的外觀
發佈聯機文檔
使用 HTML 文檔中插入的連接檢索聯機信息
建立聯機表單，收集用戶的信息、執行事務等等
插入動畫
開發幫助文件
</BODY>
</HTML>
CSS的屬性和之值
字體屬性：包括 字體族科 font-family
字體風格 font-style
字體加粗 font-weight
字體大小 font-size
1.字體族科 font-family
<HTML>
<HEAD>
<TITLE>歡迎進入 HTML 世界</TITLE>
<style type="text/css">
h1{font-family:"隸書"}
.text{font-family:"宋體,仿宋_gb2312"}
</style>
</HEAD>
<BODY>
<h1>HTML 是一種標記語言</h1>
<p class="text">使用 HTML 標記和元素，能夠：
控制頁面和內容的外觀
發佈聯機文檔
使用 HTML 文檔中插入的連接檢索聯機信息
建立聯機表單，收集用戶的信息、執行事務等等
插入動畫
開發幫助文件</p>
</BODY>
</HTML>
2.字體大小 font－size 單位pt 表示尺寸
<HTML>
<HEAD>
<TITLE>歡迎進入 HTML 世界</TITLE>
<style type="text/css">
h1{font-size:14pt}
.text{font-size:9pt}
</style>
</HEAD>
<BODY>
<h1>HTML 是一種標記語言</h1>
<p class="text">使用 HTML 標記和元素，能夠：
控制頁面和內容的外觀
發佈聯機文檔
使用 HTML 文檔中插入的連接檢索聯機信息
建立聯機表單，收集用戶的信息、執行事務等等
插入動畫
開發幫助文件</p>
</BODY>
</HTML>
3.字體風格 font-style
屬性 normal 普通的文字
italic 斜體的文字
oblique 傾斜的文字
<HTML>
<HEAD>
<TITLE>歡迎進入 HTML 世界</TITLE>
<style type="text/css">
h1{ font-style:italic}
.text{ font-style:oblique}
</style>
</HEAD>
<BODY>
<h1>HTML 是一種標記語言</h1>
<p class="text">使用 HTML 標記和元素，能夠：
控制頁面和內容的外觀
發佈聯機文檔
使用 HTML 文檔中插入的連接檢索聯機信息
建立聯機表單，收集用戶的信息、執行事務等等
插入動畫
開發幫助文件</p>
</BODY>
</HTML>
4字體的加粗 font-weight
屬性 值100－900
normal 普通的文字
bold 加粗
bolder 特粗
lighter 加細
<HTML>
<HEAD>
<TITLE>歡迎進入 HTML 世界</TITLE>
<style type="text/css">
h1{ font-weight:900}
.text{ font-weight:bolder}
</style>
</HEAD>
<BODY>
<h1>HTML 是一種標記語言</h1>
<p class="text">使用 HTML 標記和元素，能夠：
控制頁面和內容的外觀
發佈聯機文檔
使用 HTML 文檔中插入的連接檢索聯機信息
建立聯機表單，收集用戶的信息、執行事務等等
插入動畫
開發幫助文件</p>
</BODY>
</HTML>
文本屬性
Letter-spacing 定義一個附加在字符之間的間隔數量
text-decoration 文本修飾屬性
text-align 文本水平的對齊方式 左對齊 右對齊 居中 兩端對齊
text-indent 文字的首行縮進
Line-height 行高的屬性 行的間距
1.Letter-spacing 字母間隔屬性 定義附加在字符之間的間隔數量 容許使用負數
<HTML>
<HEAD>
<TITLE>歡迎進入 HTML 世界</TITLE>
<style type="text/css">
h1{ Letter-spacing:-10px}
.text{Letter-spacing:5px}
</style>
</HEAD>
<BODY>
<h1>HTML 是一種標記語言</h1>
<p class="text">使用 HTML 標記和元素，能夠：
控制頁面和內容的外觀
發佈聯機文檔
使用 HTML 文檔中插入的連接檢索聯機信息
建立聯機表單，收集用戶的信息、執行事務等等
插入動畫
開發幫助文件</p>
</BODY>
</HTML>
2 text-decoration 文本修飾屬性
屬性 underline 下劃線
overline 上劃線
line-through 刪除線
none 無任何修飾
<HTML>
<HEAD>
<TITLE>歡迎進入 HTML 世界</TITLE>
<style type="text/css">
a:link{ font-family:宋體;text-decoration:none}
a:visited{ font-family:宋體;text-decoration:none}
a:hover{ text-decoration:underline}
</style>
</HEAD>
<BODY>
<h1>HTML 是一種標記語言</h1>
<p class="text">使用 HTML 標記和元素，能夠：
控制頁面和內容的外觀
發佈聯機文檔
使用 HTML 文檔中插入的連接檢索聯機信息
建立聯機表單，收集用戶的信息、執行事務等等
插入動畫
開發幫助文件</p>
<a href="http:www.163.com">網易</a>
</BODY>
</HTML>
3.text-align 文本水平的對齊方式 左對齊 右對齊 居中 兩端對齊
left right center justify
<HTML>
<HEAD>
<TITLE>歡迎進入 HTML 世界</TITLE>
<style type="text/css">
h1{text-align:center}
.text{text-align:justify}
</style>
</HEAD>
<BODY>
<h1>HTML 是一種標記語言</h1>
<p class="text">使用 HTML 標記和元素，能夠：
控制頁面和內容的外觀
發佈聯機文檔
使用 HTML 文檔中插入的連接檢索聯機信息
建立聯機表單，收集用戶的信息、執行事務等等
插入動畫
開發幫助文件</p>
</BODY>
</HTML>
4.text-indent 文字的首行縮進
可用於塊級元素 p h1等
定義該元素第一行能夠接受的縮進的數量
該值必須是一個長度或一個百分比
<HTML>
<HEAD>
<TITLE>歡迎進入 HTML 世界</TITLE>
<style type="text/css">
h1{text-indent:100pt}
.text{text-indent:24pt}
</style>
</HEAD>
<BODY>
<h1>HTML 是一種標記語言</h1>
<p class="text">使用 HTML 標記和元素，能夠：
控制頁面和內容的外觀
發佈聯機文檔
使用 HTML 文檔中插入的連接檢索聯機信息
建立聯機表單，收集用戶的信息、執行事務等等
插入動畫
開發幫助文件</p>
</BODY>
</HTML>
Line-height 行高的屬性 行的間距
<HTML>
<HEAD>
<TITLE>歡迎進入 HTML 世界</TITLE>
<style type="text/css">
h1{text-indent:100pt}
.text{Line-height:24pt}
</style>
</HEAD>
<BODY>
<h1>HTML 是一種標記語言</h1>
<p class="text">使用 HTML 標記和元素，能夠：
控制頁面和內容的外觀
發佈聯機文檔
使用 HTML 文檔中插入的連接檢索聯機信息
建立聯機表單，收集用戶的信息、執行事務等等
插入動畫
開發幫助文件</p>
</BODY>
</HTML>
顏色和背景屬性
color 定義顏色
background-color 定義一個元素的背景顏色
background-image 定義一個元素的背景圖象
background-repeat 決定一個指定的背景圖象如何被重複
background-position 設定水平和垂直方向上的位置
1.color 定義顏色
<HTML>
<HEAD>
<TITLE>歡迎進入 HTML 世界</TITLE>
<style type="text/css">
h1{color:#336699}
.text{color:#ffcc00}
</style>
</HEAD>
<BODY>
<h1>HTML 是一種標記語言</h1>
<p class="text">使用 HTML 標記和元素，能夠：
控制頁面和內容的外觀
發佈聯機文檔
使用 HTML 文檔中插入的連接檢索聯機信息
建立聯機表單，收集用戶的信息、執行事務等等
插入動畫
開發幫助文件</p>
</BODY>
</HTML>
2. background-color 定義一個元素的背景顏色
<HTML>
<HEAD>
<TITLE>歡迎進入 HTML 世界</TITLE>
<style type="text/css">
body{background-color :#336699}
h1{color:#ffffff}
.text{color:#ffcc00}
</style>
</HEAD>
<BODY>
<h1>HTML 是一種標記語言</h1>
<p class="text">使用 HTML 標記和元素，能夠：
控制頁面和內容的外觀
發佈聯機文檔
使用 HTML 文檔中插入的連接檢索聯機信息
建立聯機表單，收集用戶的信息、執行事務等等
插入動畫
開發幫助文件</p>
</BODY>
</HTML>
3.background-image 定義一個元素的背景圖象
<HTML>
<HEAD>
<TITLE>歡迎進入 HTML 世界</TITLE>
<style type="text/css">
body{background-image :url(2008.jpg)}
</style>
</HEAD>
<BODY>
<h1>HTML 是一種標記語言</h1>
<p class="text">使用 HTML 標記和元素，能夠：
控制頁面和內容的外觀
發佈聯機文檔
使用 HTML 文檔中插入的連接檢索聯機信息
建立聯機表單，收集用戶的信息、執行事務等等
插入動畫
開發幫助文件</p>
</BODY>
</HTML>
4. background-repeat 決定一個指定的背景圖象如何被重複
屬性 repeat-x 圖象橫向重複
repeat-y 圖象縱向重複
repeat 圖象橫向縱向重複
no-repeat 圖象不重複
<HTML>
<HEAD>
<TITLE>歡迎進入 HTML 世界</TITLE>
<style type="text/css">
body{background-image :url(酷吧.gif);background-repeat:repeat-y}
</style>
</HEAD>
<BODY>
<h1>HTML 是一種標記語言</h1>
<p class="text">使用 HTML 標記和元素，能夠：
控制頁面和內容的外觀
發佈聯機文檔
使用 HTML 文檔中插入的連接檢索聯機信息
建立聯機表單，收集用戶的信息、執行事務等等
插入動畫
開發幫助文件</p>
</BODY>
</HTML>
5. background-position 設定水平和垂直方向上的位置
屬性 left 背景圖象居左
right 背景圖象居右
center 背景圖象水平居中 垂直居中
top 背景圖象上對齊
bottom 背景圖象下對齊
<HTML>
<HEAD>
<TITLE>歡迎進入 HTML 世界</TITLE>
<style type="text/css">
body{background-image :url(酷吧.gif);
background-repeat:repeat-y;
background-position:right top}
</style>
</HEAD>
<BODY>
<h1>HTML 是一種標記語言</h1>
<p class="text">使用 HTML 標記和元素，能夠：
控制頁面和內容的外觀
發佈聯機文檔
使用 HTML 文檔中插入的連接檢索聯機信息
建立聯機表單，收集用戶的信息、執行事務等等
插入動畫
開發幫助文件</p>
</BODY>
</HTML>
邊框屬性 ： 用於設置一個元素邊框的寬度式樣和顏色
邊框屬性 描述
border 邊框
border-top 上邊框
border-left 左邊框
border-right 右邊框
border-bottom 下邊框
邊框樣式屬性值 描述
none 無邊框
dotted 邊框由點組成
dash 邊框由短線組成
solid 邊框是實線
double 邊框是雙實線
groove 邊框是帶有立體感的溝槽
ridge 邊框成脊形
inset 邊框內嵌一個立體邊框
outset 邊框外嵌一個立體邊框
<HTML>
<HEAD>
<TITLE>歡迎進入 HTML 世界</TITLE>
<style type="text/css">
p{
border-top:2px solid #990000;
border-right:2px solid #3399ff;
border-bottom:2px solid #00ff33;
border-left:2px solid #cc33ff;
}
</style>
</HEAD>
<BODY>
<h1>HTML 是一種標記語言</h1>
<p class="text">使用 HTML 標記和元素，能夠：
控制頁面和內容的外觀
發佈聯機文檔
使用 HTML 文檔中插入的連接檢索聯機信息
建立聯機表單，收集用戶的信息、執行事務等等
插入動畫
開發幫助文件</p>
</BODY>
</HTML>
鼠標光標屬性
鼠標光標屬性 描述
hand 手
cross-hair 交叉十字
text 文本選擇符號
wait WINDOWS的沙漏形狀
default 默認的鼠標形狀
help 帶問號的鼠標
e-resize 向東的箭頭
ne-resize 向東北的箭頭
n-resize 向北的箭頭
nw-resize 向西北的箭頭
w-resize 向西的箭頭
sw-resize 向西南的箭頭
s-resize 向南的箭頭
se-resize 向東南的箭頭
<HTML>
<HEAD>
<TITLE>歡迎進入 HTML 世界</TITLE>
<style type="text/css">
body{
cursor:crosshair
}
img{ cursor:help}
</style>
</HEAD>
<BODY>
<h1>HTML 是一種標記語言</h1>
<img src="酷吧.gif" align=left>
<p class="text">使用 HTML 標記和元素，能夠：
控制頁面和內容的外觀
發佈聯機文檔
使用 HTML 文檔中插入的連接檢索聯機信息
建立聯機表單，收集用戶的信息、執行事務等等
插入動畫
開發幫助文件</p>
</BODY>
</HTML>
定位屬性 CSS提供兩種定位方法
相對定位：是指讓操做的元素在相對其它的位置上進行偏移
絕對定位：是指讓操做的元素參照原始文檔進行偏移
定位屬性 描述
position absolute(絕對定位) relative相對定位
top 層距離定點縱座標的距離
left 層距離定點橫座標的距離
width 層的寬度
height 層的高度
Z-index 決定層的前後順序和覆蓋關係 值高的覆蓋值低的元素
Clip 限定只顯示剪切出來的區域 爲矩形
只要設定兩個點便可 top left
bottom right
overflow 當層的內容超出層所能容納的範圍時：
visible 層的 大小 內容會顯示出來
hidden 隱藏超出層大小的內容
scrol 無論內容是否超出層的範圍 都添加滾動條
auto 只在內容超出層的範圍時才顯示滾動條
visibility 針對嵌套層的設置
inherit 子層繼承父層的可見性
父層可見 子層也可見 父層不可見 子層也不可見
visible 不管父層可見與否子層均可見
hidden 不管父層可見與否子層都隱藏
<HTML>
<HEAD>
<TITLE>歡迎進入 HTML 世界</TITLE>
<style type="text/css">
.self{
position:absolute;
top:80px;
left:50px;
width:300px;
height:100px;
overflow:auto;
background-color:#336699;
color:#ffffff;
z-index:1;
visibility:visible;
}
</style>
</HEAD>
<BODY>
<h1>HTML 是一種標記語言</h1>
<div class="self">使用 HTML 標記和元素，能夠：
控制頁面和內容的外觀發佈聯機文檔使用 HTML文檔中插入的接檢索聯機信息建立聯機表單,收集用戶的信息執行事務等等插入動畫開發幫助文件
索聯機信息建立聯機表單,收集用戶的信息執行事務等等插入動畫開發幫助文件</div>
</BODY>
</HTML>
區塊屬性 在格式化頁面對象時，CSS將全部的對象都放置在一個容器裏面
這個容器成爲塊
區塊屬性 描述
width 設定對象的寬度
height 設定對象的高度
float 讓文字環繞在一個元素的四周
clear 指定在某一元素的某一邊是否容許有環繞的文字
padding 決定了究竟在邊框與內容之間應該插入多少空間距離
top bottom left right
設定上下左右的填充距離
margin 設置一個元素在4個方向上與IE窗口邊界或上一級元素的邊界距離
top bottom left right
設定上下左右的距離
<HTML>
<HEAD>
<TITLE>歡迎進入 HTML 世界</TITLE>
<style type="text/css">
.self{
position:absolute;
margin-top:20px;
margin-right:30px;
margin-bottom:20px;
margin-left:30px;
width:300px;
height:100px;
}
</style>
</HEAD>
<BODY>
<h1>HTML 是一種標記語言</h1>
<div class="self">使用 HTML 標記和元素，能夠：
控制頁面和內容的外觀發佈聯機文檔使用 HTML文檔中插入的接檢索聯機信息建立聯機表單,收集用戶的信息執行事務等等插入動畫開發幫助文件
索聯機信息建立聯機表單,收集用戶的信息執行事務等等插入動畫開發幫助文件</div>
</BODY>
</HTML>
列表屬性
列表屬性 描述
list-style-type 設定引導列表項目的符號類型
bullet 選擇圖象做爲項目的引導符號
position 決定列表項目縮進的程度
outside 列表貼近左側邊框
inside 列表縮進
符號類型屬性值
disc 實心圓
circle 空心圓
square 實心方塊
decimal 在文本前加普通的阿拉伯數字
lower-roman 在文本前加小寫羅馬數字
upper-roman 在文本前加大寫羅馬數字
lower-alpha 在文本前加小寫英文字母
upper-alpha 在文本前加大寫英文字母
none 不顯示任何項目符號和編號
<HTML>
<HEAD>
<TITLE>學習HTML</TITLE>
<style type="text/css">
ol{
list-style-type:upper-roman;
}
</style>
</HEAD>
<BODY>
<OL>
<LI>簡介HTML
<LI>建立列表
</OL>
<LI>星期二
<OL>
<LI>建立表
<LI>插入圖像
</OL>
</BODY>
</HTML>
濾鏡屬性 能夠把可視化的濾鏡和
轉換效果添加到一個標準的HTML元素
1.alpha 濾鏡---設置透明層次
{filter:alpha(opacity=opacity,finishopacity=finishopacity,style=style,
startx=startx,starty=starty,finishx=finishx,finishy=finishy)}
alpha:屬性是把一個目標元素與背景混合 就是一個元素的透明度
opacity: 表明透明度水準
finishopacity:設置漸變的透明效果 範圍1---100
style:指定透明區域的形狀特徵
0 統一形狀
1 線形
2 放射狀
3 長方形
startx和starty表明漸變透明效果開始的X和Y座標
finishx和finishy表明漸變透明效果結束的X和Y座標
<HTML>
<HEAD>
<TITLE>學習HTML</TITLE>
<style type="text/css">
img{
filter:alpha(opacity=30);
}
</style>
</HEAD>
<BODY>
<h2>圖像</h2>
<img src=2008.jpg>
</BODY>
</HTML>
2.blur濾鏡---模糊效果
語法：{filter:bur(add=add,direction=direction,strength=strength)}
add:它是一個參數值爲 true false
指定圖象是否被改變成印象派的模糊效果
derection:用來設置模糊的方向 0表示垂直向上 每45度爲一個單位
默認值是向左270度
strength 它表明有多少像素的寬度將受到模糊影響
即模糊的強度 默認是5
<HTML>
<HEAD>
<TITLE>學習HTML</TITLE>
<style type="text/css">
img{
filter:blur(add=true,strength=30,direction=0);
}
</style>
</HEAD>
<BODY>
<h2>圖像</h2>
<img src=2008.jpg>
</BODY>
</HTML>
3. flipH flipV濾鏡－－－－水平垂直翻轉
<HTML>
<HEAD>
<TITLE>學習HTML</TITLE>
<style type="text/css">
img{
filter:Flipv;
}
</style>
</HEAD>
<BODY>
<h2>圖像</h2>
<img src=2008.jpg>
</BODY>
</HTML>
4.gray濾鏡－－－灰度
做用就是把一張圖片變成灰度圖
<HTML>
<HEAD>
<TITLE>學習HTML</TITLE>
<style type="text/css">
img{
filter:gray;
}
</style>
</HEAD>
<BODY>
<h2>圖像</h2>
<img src=2008.jpg>
</BODY>
</HTML>
5.invert濾鏡－－－反轉 顯示底片的效果
做用是把對象的可視化屬性所有翻轉
<HTML>
<HEAD>
<TITLE>學習HTML</TITLE>
<style type="text/css">
img{
filter:invert;
}
</style>
</HEAD>
<BODY>
<h2>圖像</h2>
<img src=2008.jpg>
</BODY>
</HTML>
6.Xray濾鏡---x射線 x光片的效果
是讓對象反映它的輪廓並把這些輪廓加亮 就是所謂的X光片
<HTML>
<HEAD>
<TITLE>學習HTML</TITLE>
<style type="text/css">
img{
filter:xray;
}
</style>
</HEAD>
<BODY>
<h2>圖像</h2>
<img src=2008.jpg>
</BODY>
</HTML>
7.wave濾鏡－－－波紋
語法：{filte:wave(add=add,freq=freq,lightstrength=strength
phase=phase,strength=strength)}
wave :屬性把對象垂直的波形樣式打亂 默認是TRUE（非0）
add: 表示是否把對象按照波形樣式打亂
freq: 是波紋的頻率，也就是指定在對象上一共須要產生多少個完整的波紋
lightstrength:能夠加強波紋的光影的效果
phase:設置正線弦波的偏移量
strength:表示振幅的大小
<HTML>
<HEAD>
<TITLE>學習HTML</TITLE>
<style type="text/css">
img{
filter:wave(freq=2,lightstrength=50,phase=45,strength=10);
}
</style>
</HEAD>
<BODY>
<h2>圖像</h2>
<img src=2008.jpg>
</BODY>
</HTML>
javascript
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. css hack總結
- 2. 003 css總結
- 3. CSS總結
- 4. css-總結
- 5. CSS小總結
- 6. css總結
- 7. HTML CSS總結
- 8. css 小總結
- 9. css js 總結
- 10. css 總結2