1 .T ng qua nổ
2.5.2.8 Th uc tính color và Background ộ
G m các thu c tính sau:ồ ộ • Corlor • Background • Background-attachment • Background-color • Background-image • Background-position • Background-repeat Cú pháp : corlor : <giá tr >ị
Ch c năngứ Quy đ nh màu cho các ph n t đị ầ ử ược áp d ngụ Các giá tr có th : ị ể Các m u theo b ng m u ầ ả ầ Áp d ng v i : ụ ớ t t c các ph n tấ ả ầ ử Ví d : ụ P { color : red } H1 { color : #ffffff } Cú pháp : Background : <giá tr >ị
Ch c năngứ Quy đ nh n n c a các ph n t nh body, b ng, …đị ề ủ ầ ử ư ả ược áp d ngụ
Các giá tr có th :ị ể <background-color> | <background-image> | <background-repeat> | <background-attachment> | <background-position>
- <background-color>: màu n nề - <background-image>: nh n nả ề
- <background-repeat>: quy đ nh ch đ l p l i nhị ế ộ ặ ạ ả
- <background-attachment>: quy đ nh ch đ hi n th nh n n khiị ế ộ ể ị ả ề cu n chu tộ ộ
Áp d ng v i : ụ ớ T t c các ph n tấ ả ầ ử
Ví d : ụ body {background: #ffffff url(“/ANH/banner.gif”) ; margin: 0} TABLE { background: red url(“/ANH/Left-Corner.gif”) no-repeat bottom } 2.5.2.9 Các thu c tính v fontộ ề Font Font-family Font-size Font-style Font-variant
Font-weight
Cú pháp font : <giá tr >ị
Ch c nứ ăng Thi t l p các thu c tính cho font ch nh tên font, kích thế ậ ộ ữ ư ước font,….
Các giá tr có th : ị ể <font-family> | <font-size> | <font-variant> | <font-weight> | <font-style> | <line-height>
1 S Font thông d ng (cài s n trong Windows nên ko b l i font) :ố ụ ẵ ị ỗ Arial, tahoma, verdana, Times new roman.
Áp d ng v i : ụ ớ T t c các ph n tấ ả ầ ử
Ví d : ụ P { font : tahoma, 12pt, normal, bold }
Cú pháp font-family : <tên font>
Ch c nứ ăng Thi t l p danh sách font cho kh i ch n ho c trang Web, nên ch n cácế ậ ố ọ ặ ọ font thông d ng đụ ược cài đ t s n nh Arial, Veranda, Tahoma, Timesặ ẵ ư new roman
Các giá tr có th ị ể <tên font>
Áp d ng v i ụ ớ T t c các ph n t ấ ả ầ ử
Ví d ụ Table, tr, td { font-family : arial, tahoma, verdana ; font-size : 13}
Cú pháp : font-size : <kíck c tuy t đ i> | <kíck c tỡ ệ ố ỡ ương đ i> | <đ dài> | <t lố ộ ỉ ệ ph n trăm>ầ
Ch c năngứ Thay đ i kích thổ ước font, nên s d ng ki u đ nh d ng px,ử ụ ể ị ạ
Các giá tr có th : ị ể - < kíck c tuy t đ i >ỡ ệ ố
xx-small | x-small | small | medium | large | x-large | xx-large - < kíck c tỡ ương đ i >ố
smaller | larger - < đ dài>ộ
- < t l ph n trăm>ỉ ệ ầ
Áp d ng v i : ụ ớ t t c các ph n t ấ ả ầ ử
Ví d : ụ H1 { font-size: large } P { font-size: 12pt }
LI { font-size: 90% }
STRONG { font-size: larger}
Cú pháp : font-style : <giá tr >ị
Ch c nứ ăng Thi t l p ki u fontế ậ ể
Các giá tr có th : ị ể normal | ilatic | oblique
Áp d ng v i : ụ ớ t t c các ph n tấ ả ầ ử
Ví d : ụ P { font-style : italic }
H1 { font-style : normal }
Cú pháp font-variant : <giá tr >ị
Ki u ể SMALL-CAPS l n h n ch thớ ơ ữ ường 1 chút và nh h n ch vi t hoa,ỏ ơ ữ ế ta hãy th so sánh : ử SMALL-CAPS--SMALL-CAPS
Các giá tr có th ị ể normal | SMALL-CAPS
Áp d ng v i ụ ớ T t c các ph n tấ ả ầ ử
Ví d ụ Span { font-variant : small-caps ; font-size : 12pt}
Cú pháp font-weight : <giá tr >ị
Ch c nứ ăng Thi t l p đ nét c a chế ậ ộ ủ ữ
Các giá tr có thị ể normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 |
800 | 900
Áp d ng v iụ ớ t t c các ph n tấ ả ầ ử
Ví d ụ p { font-weight : bold }
H1 { font-weight : normal }
Chú ý không c n đ ý đ n giá tr : 100,200..900 làm gì, thầ ể ế ị ường thì nó th hi n vi c đ m nh t h n c a ch ! ể ệ ệ ậ ạ ơ ủ ữ 2.5.2.10 Các thu c tính Textộ Letter-spacing Line-height Text-align Text-decoration Vertical-align Word-spacing Cú pháp letter-spacing : <giá tr >ị
Ch c nứ ăng letter-spacing xác đ nh kho ng cách gi a các kí t đị ả ữ ự ược th hi n ể ệ
Các giá tr có th ị ể normal | <đ dài> ộ
Áp d ng v i ụ ớ T t c các ph n t ấ ả ầ ử
Ví d ụ k h o n g c á c h n à y l à 4 p x ả
p {letter-spacing : 1px}: Kho ng cách gi a các kí t c aả ữ ự ủ đo n là 1pxạ
Cú pháp Line-height : <giá tr >ị
Ch c năngứ Quy đ nh chi u cao vùng ch a đo n văn b n ị ề ứ ạ ả
Các giá tr có th ị ể normal | <number> | <t l ph n trăm> | <đ dài> ỉ ệ ầ ộ
Áp d ng v i ụ ớ T t c các ph n tấ ả ầ ử
Ví dụ . vd {line-height:20px }
Cú pháp Text-align : <giá tr >ị
Ch c nứ ăng Cho phép canh l đo n văn b n (tề ạ ả ương t thự ẻ DIV)
Các giá tr có th : ị ể left | right | center | justify - left: Canh trái - Right: Canh ph iả
- Center: Canh gi aữ - Justify: Canh đ u ề
Áp d ng v i : ụ ớ T t c các ph n t ấ ả ầ ử
Ví d : ụ .vd { text-align: center }
Cú pháp : text-decoration : <giá tr >ị
Ch c nứ ăng Thi t l p các hi u ng lên văn b nế ậ ệ ứ ả
Các giá tr có th : ị ể none | underline | overline | line-through | blink - None: Không
- Underline: ch g ch dữ ạ ưới - Overline: ch cao h n dòngữ ơ - Line through: g ch xuyên chạ ữ - Blink: Ch nh p nháyữ ấ
Áp d ng v i : ụ ớ T t c các ph n t ấ ả ầ ử
Ví d : ụ a {corlor: #ffffff ; text-decoration: none }
a :visited {corlor: red ; text-decoration: underline }
Cú pháp : vertical-align : <giá tr >ị
Ch c nứ ăng: Canh văn b n theo chi u d cả ề ọ
Các giá tr có th : ị ể baseline | sub | super | top | text-top | middle | bottom | text-bottom | <t lỉ ệ ph n trăm> ầ
Áp d ng v i : ụ ớ T t c các ph n t ấ ả ầ ử
Ví d : ụ .vd { vertical-align: super }
Cú pháp word-spacing : <giá tr >ị
Ch c nứ ăng Xác đ nh kho ng cách gi a các t ị ả ữ ừ
Các giá tr có th ị ể Normal | <đ dài> ộ
Áp d ng v i ụ ớ T t c các ph n t ấ ả ầ ử
Ví d ụ p {word-spacing : 12px}
<P class= “p”> Chào các b n </P> //kho ng cách gi a các t nàyạ ả ữ ừ là 12px
2.5.3 T o file CSS v i công c Rapid CSS 2008 (HS nghiên c u)ạ ớ ụ ứ
Ví d : ụ Xem ví d finish_cssụ
Mã ngu n:ồ
finish_css.html
<html> <head>
<link rel="stylesheet" href="Skin/skin.css"> <title>Design Simple Website</title>
</head> <body>
<table border="1" width="100%" id="table1" height="422" style="border-collapse: collapse" bordercolor="#FF915D"> <tr> <td colspan="2" class="banner"></td> </tr> <tr> <td width="145" valign="top">
<table border="1" width="100%" id="table2"> <tr> <td class="MenuHeader">Danh m c đ a phụ ị ương</td> </tr> <tr> <td class="SubMenu">Thành Ph Hu </td>ố ế </tr> <tr>
<td class="SubMenu">Hương Th y</td>ủ </tr> <tr> <td class="SubMenu">Phú Vang</td> </tr> <tr> <td class="SubMenu">Phú M u</td>ậ </tr> <tr> <td class="SubMenu">Hương S </td>ơ </tr> <tr> <td class="SubMenu">Bình Đi n</td>ề </tr> <tr>
<td class="SubMenu">Hương Văn</td> </tr>
<tr>
<td class="SubMenu">Kim Long</td> </tr>
<tr>
<td class="SubMenu">Hương Vinh</td> </tr>
</table> </td>
<td valign="top" class="noidungtin> Đây là Website gi i thi u m tớ ệ ộ s đ a phố ị ương trên đ a bàn t nh th a thiên hu .<p>T nh th a thiên hu bao g mị ỉ ừ ế ỉ ừ ế ồ m t s các đ a phộ ố ị ương sau:</p>
<li>Thành Ph Hu </li>ố ế <li>Hương Th y</li>ủ <li>Phú Vang</li> <li>Phú M u</li>ậ <li>Hương S </li>ơ <li>Bình Đi n</li>ề <li>Hương Văn</li> <li>Kim Long</li> <li>Hương Vinh</li> </ol> </td> </tr> <tr> <td colspan="2" class="footer"></td> </tr> </table> </body> </html>
T o file skin.css l u vào th m c Skin v i mã ngu n nh sau:ạ ư ư ụ ớ ồ ư /*mau nen cho toan trang*/
/*trang hien dai*/ body { /*background:#cccccc; background-image:url(../images/skins/hiendai/bg.gif);*/ text-align:center; margin-bottom:5px; margin-left:5px; margin-right:5px; margin-top:5px; /*---ch nó có g ch đ th ---*/ữ ạ ể ế SCROLLBAR-FACE-COLOR: #dedfde; SCROLLBAR-HIGHLIGHT-COLOR: white; SCROLLBAR-SHADOW-COLOR: #dedfde; SCROLLBAR-3DLIGHT-COLOR: #000000; SCROLLBAR-ARROW-COLOR: black; SCROLLBAR-TRACK-COLOR: #dedfde; SCROLLBAR-DARKSHADOW-COLOR: #424142; } td {
font-family:Arial,Times New Roman, Tahoma; font-size:10pt;
a { text-decoration:none; color:#000000; } a:hover { color:#e30000; text-decoration:none; } .a:Visited { color:#000000; } .Banner { height:100px; background-image:url(../images/banner.jpg);*/ }
/*Áp d ng cho n n c a submenu trái thông thụ ề ủ ường */ .SubMenu {
/*BORDER-TOP: #FFFFFF 1px solid;*/ PADDING-LEFT: 20px;
FONT-WEIGHT: bold; FONT-SIZE: 10px; PADDING-BOTTOM: 2px; COLOR: #000000;
PADDING-TOP: 2px;
BACKGROUND-COLOR: #ffffff; /*BORDER-TOP:solid 1px white;*/ BORDER-BOTTOM: #aaa 1px dashed; FONT-FAMILY: verdana, Arial,tahoma; TEXT-DECORATION: none;
height:20px; }
/*Áp d ng cho n n c a submenu trái khi ch n */ụ ề ủ ọ .SubMenuSelect
{
PADDING-LEFT: 20px;
FONT-WEIGHT: bold; FONT-SIZE: 10px; PADDING-BOTTOM: 2px; COLOR: #770000;
PADDING-TOP: 2px;
BACKGROUND-COLOR: #D9D9FF; BORDER-BOTTOM: #aaa 1px dashed; /*BORDER-TOP:solid 1px white;*/ FONT-FAMILY: verdana, Arial,tahoma; TEXT-DECORATION: underline;
height:20px; }
/*Áp d ng cho n n c a submenu trái khi di chuy n */ụ ề ủ ể .SubMenuOver
{
/*BORDER-TOP: #FFFFFF 1px solid;*/ PADDING-LEFT: 20px;
FONT-WEIGHT: bold; FONT-SIZE: 10px; PADDING-BOTTOM: 2px; COLOR:#990000; PADDING-TOP: 2px;
BACKGROUND-COLOR: #FAD570; /*BORDER-TOP:solid 1px white;*/ BORDER-BOTTOM: #aaa 1px dashed; FONT-FAMILY: verdana, Arial,tahoma;
TEXT-DECORATION: none; CURSOR: hand; height:20px; /*background-image: url(../Images/menu.gif);*/ } /*---*/ .MenuHeader { FONT-WEIGHT: bold; FONT-SIZE: 10px; text-align:right; padding-right:5px; padding-left:5px; COLOR: blue; LINE-HEIGHT: 25px; vertical-align:middle; FONT-FAMILY: Verdana,Tahoma,arial; } .MenuHeader:hover { FONT-WEIGHT: bold; FONT-SIZE: 10px; padding-right:5px; padding-left:5px; COLOR:#ffff00; cursor:hand; LINE-HEIGHT: 25px; vertical-align:middle; FONT-FAMILY: Verdana,Tahoma,arial; } .Footer
{
/*background:red;63,8A,DE */
font-family:Verdana,arial,tahoma,time Times New Roman; font-size:8pt; font-weight:normal; color:#ffffff; text-align:left; padding-left:10px; background-image:url(../images/footer_bg.jpg); height:27px; } .noidungtin { padding-left:5px; padding-bottom:2px; padding-top:2px; padding-right:5px; text-align:justify; } .tinlienket { font-family: verdana,arial,Tahoma; font-size: 8pt; color:#333333; padding-top:2px; padding-bottom:2px; padding-left:5px; padding-right:2px; width:auto; cursor:hand; } .tinlienket:hover { font-family: verdana,arial,Tahoma; font-size: 8pt; color:#800000; padding-left:5px; padding-top:2px; padding-bottom:2px; padding-right:2px; text-decoration:underline; cursor:hand; width:auto; }
Chú ý:
Ghi chú không được đ tặ
trong c p th <- và ->ặ ẻ
nh ghi chú trong fileư
HTML. Cú pháp c aủ JavaScript tương t cúự pháp c a C nên có thủ ể s d ng // hay /* ... */.ử ụ Chương 3: JavaScript 2.1 Gi i thi u chungớ ệ
- JavaScript là ngôn ng dữ ướ ại d ng script có th g n v i các file HTML. Nó không để ắ ớ ược biên d ch mà đị ược trình duy t di n d ch.ệ ễ ị
- Khi trình duy t yêu c u m t trang, server s g i đ y đ n i dung c a trang đó, bao g m cệ ầ ộ ẽ ử ầ ủ ộ ủ ồ ả HTML và các câu l nh JavaScript qua m ng t i client. Client s đ c trang đó t đ u đ nệ ạ ớ ẽ ọ ừ ầ ế cu i, hi n th các k t qu c a HTML và x lý các câu l nh JavaScript khi nào chúng xu tố ể ị ế ả ủ ử ệ ấ hi n.ệ
2.2 Cách th c nhúng JavaScript vào file HTMLứ
Chúng ta có th nhúng JavaScript vào m t file HTML theo m t trong các cách sau đây:ể ộ ộ S d ng các câu l nh và các hàm trong c p th <SCRIPT>ử ụ ệ ặ ẻ
S d ng các file ngu n JavaScriptử ụ ồ
S d ng m t bi u th c JavaScript làm giá tr c a m t thu c tính HTMLử ụ ộ ể ứ ị ủ ộ ộ S d ng th s ki n (event handlers) trong m t th HTML nào đóử ụ ẻ ự ệ ộ ẻ
Trong đó, s d ng c p th <SCRIPT>...</SCRIPT> và nhúng m t file ngu nử ụ ặ ẻ ộ ồ JavaScript là đượ ử ục s d ng nhi u h n c .ề ơ ả
2.3 S d ng th SCRIPTử ụ ẻ
Script được đ a vào file HTML b ng cách s d ng c p thư ằ ử ụ ặ ẻ
<SCRIPT> và </SCRIPT>. Các th <SCRIPT> có th xu t hi nẻ ể ấ ệ trong ph n <HEAD> hay <BODY> c a file HTML. N u đ t trongầ ủ ế ặ ph n <HEAD>, nó s đầ ẽ ượ ảc t i và s n sàng trẵ ước khi ph n còn l iầ ạ c a văn b n đủ ả ượ ảc t i.
Thu c tính duy nh t độ ấ ược đ nh nghĩa hi n th i cho thị ệ ờ ẻ <SCRIPT> là “LANGUAGE=“ dùng đ xác đ nh ngôn ng scriptể ị ữ được s d ng. Có hai giá tr đử ụ ị ược đ nh nghĩa là "JavaScript" vàị "VBScript". V i chớ ương trình vi t b ng JavaScript b n s d ng cúế ằ ạ ử ụ pháp sau :
<SCRIPT LANGUAGE=”JavaScript” type=”text/javascript”> //Vi t mã JavaScript đâyế ở
…..
</SCRIPT>
2.4 S d ng m t file ngu n JavaScript ử ụ ộ ồ
Thu c tính ộ SRC c a th <ủ ẻ SCRIPT> cho phép b n ch rõ file ngu n JavaScript đạ ỉ ồ ượ ử ục s d ng.
Cú pháp:
<SCRIPT SRC=”path/file_name.js” language=”javascript” type=”text/javascript”> ...
</SCRIPT>
Chú ý:
- Thu c tính này r y h u d ng cho vi c chia s các hàm dùng chung cho nhi u trang khácộ ấ ữ ụ ệ ẻ ề nhau.
- Có th đ a thêm các câu l nh JavaScript n m trong c p th <ể ư ệ ằ ặ ẻ SCRIPT> và </SCRIPT> có ch a thu c tinhứ ộ SRC.
- Các file JavaScript bên ngoài không được ch a b t kỳ th HTML nào, chúng ch đứ ấ ẻ ỉ ược ch aứ các câu l nh JavaScript và các đ nh nghĩa hàm.ệ ị
2.5 Hi n th m t dòng Text trên Websiteể ị ộ
Đ i tố ượng document trong JavaScript được thi t k s n hai cách th c đ xu t m tế ế ẵ ứ ể ấ ộ dòng text ra màn hình c a client: ủ write() và writeln(). Cách g i m t cách th c c a m t đ iọ ộ ứ ủ ộ ố tượng nh sau:ư
object_name.property_name
D li u mà cách th c dùng đ th c hi n công vi c c a nó đữ ệ ứ ể ự ệ ệ ủ ược đ a vào dòng thamư s , ố Ví d :ụ
document.write("Test"); document.writeln('Test');
Cách th c ứ write() xu t ra màn hình xâu Text nh ng không xu ng dòng, còn cách th cấ ư ố ứ writeln() sau khi vi t xong dòng Text t đ ng có kho ng tr ng cu i dòng. Hai cách th c nàyế ự ộ ả ắ ở ố ứ đ u cho phép xu t ra th HTML. ề ấ ẻ
Ví d : ụ Xem ví d ụDocument.html
Mã ngu n:ồ
<HTML><HEAD>
<meta http-equiv="ConHoTent-Language" conHoTent="en-us">
<meta http-equiv="ConHoTent-Type" conHoTent="text/html; charset=windows- 1252">
<TITLE>Design Simple Website</TITLE> </HEAD>
<BODY>
<p>Đây là dòng văn b n bình thả ường.<BR> <B>
<SCRIPT LANGUAGE="JavaScript" type=”text/javascript”> document.write("Đây là dòng văn b n in đ m!.</B>");ả ậ </SCRIPT>
</BODY></HTML>
2.6 Giao ti p v i ngế ớ ườ ử ụi s d ng thông qua h p tho iộ ạ 2.6.1 Hàm Alert
Ch c năng: ứ Thông báo m t h p tho i đ n ngộ ộ ạ ế ườ ử ụi s d ng.
Cú pháp: alert(“dòng văn b n”);ả
Thông thường, hàm alert() đượ ử ục s d ng trong các trường h p:ợ Thông tin đ a vào form không h p l .ư ợ ệ
K t qu sau khi tính toán không h p l .ế ả ợ ệ
Khi d ch v ch a s n sàng đ truy nh p d li u.ị ụ ư ẵ ể ậ ữ ệ
Ví d : ụ Xem ví d ụalert.html
Mã ngu n:ồ
<html> <head>
<meta http-equiv="ConHoTent-Language" conHoTent="en-us"> <meta http-equiv="ConHoTent-Type" conHoTent="text/html; charset=utf-8">
<title>H tên</title>ọ </head>
<body>
<script language="javascript" type="text/javascript"> function kiemtradulieu(){
alert("Vui lòng nh p vào d li u!");ậ ữ ệ }
</script>
<form method="POST" action="--WEBBOT-SELF--">
<table border="1" width="100%" id="table1" style="border-collapse: collapse" bordercolor="#0000FF">
<tr>
<td width="143">H tên</td>ọ
<td><input type="text" name="T1" size="38"></td> </tr>
<tr>
<td width="143">Đ a ch </td>ị ỉ
<td><input type="text" name="T2" size="53"></td> </tr>
</table>
<p align="center">
<input type="submit" onclick="kiemtradulieu();"
value="Update" name="B1"><input type="reset" value="Reset" name="B2"></p>
</form> </body> </html>
2.6.2 Hàm Prompt
Ch c năng: ứ Thông báo m t h p tho i đ n ngộ ộ ạ ế ườ ử ụi s d ng và yêu c u ngầ ườ ử ụi s d ng nh pậ vào m t giá tr nào đó.ộ ị
Cú pháp:
Prompt(“Đo n văn b n”, “Giá tr m c đ nh đạ ả ị ặ ị ược gán”);
Ví d :ụ