Bài 5 - CSS và DHTML - Học lập trình web cơ bản với Html, Css, Javascript

11
HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAO
HocLapTrinhWeb.COM
α - Tek http://www.facebook.com/groups/hoclaptrinhweb/

22
HocLapTrinhWeb.COM
Mục tiêuMục tiêu
• Định dạng trang web bằng CSS
• Sử dụng CSS để tạo các trang DHTML

33
HocLapTrinhWeb.COM
Nội dungNội dung
1. Giới thiệu CSS1. Giới thiệu CSS1. Giới thiệu CSS1. Giới thiệu CSS 2. Các loại CSS2. Các loại CSS2. Các loại CSS2. Các loại CSS 3. Tạo và sử dụng3. Tạo và sử dụng
CSS phức tạpCSS phức tạp
3. Tạo và sử dụng3. Tạo và sử dụng
4. Giới thiệu DHTML4. Giới thiệu DHTML4. Giới thiệu DHTML4. Giới thiệu DHTML 5. Style động5. Style động5. Style động5. Style động 6. Nội dung động6. Nội dung động6. Nội dung động6. Nội dung động
7. Vị trí động7. Vị trí động7. Vị trí động7. Vị trí động

44
HocLapTrinhWeb.COM
• Style Sheet
− Là một tập hợp các khai báo style
Bài 5: CSS và DHTML
Giới thiệu CSS
<head>
<style type = "text/css">
<tên tag 1> { <tên thuộc tính >: <giá trị> ; … }
…
</style>
</head>
Các styleStyle
Sheet

55
HocLapTrinhWeb.COM
• Style Sheet
− Là một tập hợp các khai báo style
Giới thiệu CSS
Ví dụ:
<style type="text/css">
h1 {color:#FF0000}
div {background-color:#66CCFF; color:#0000FF; border-
color:#0000FF; border-style:double; width:300}
ul {list-style:square; color:#660000}
</style>

66
HocLapTrinhWeb.COM
• CSS – Cascading Style Sheets
− Là một chuẩn của Internet do W3C định nghĩa
− Hiệu ứng của style có thể được kế thừa từ các tag khác
Giới thiệu CSS
Ví dụ:
<div>
<ul>
<li> Canh chua</li>
<li> Cá kho tộ</li>
<li> Trứng chiên</li>
</ul>
</div> 

77
HocLapTrinhWeb.COM

88
HocLapTrinhWeb.COM
Các loại CSSCác loại CSS
• Inline Style
• Internal Style
• External Style




99
HocLapTrinhWeb.COM
• Inline Style
− Loại style này chính là phần khai báo thuộc tính style
trong các tag HTML
Các loại CSS
Ví dụ:
<div style="color:#FF0000; background-color:#CCCCCC; border-style:inset;
width:450; text-align:center; padding:10,10, 10,10">
Chào mừng các bạn đến với bài học về "CSS và DHTML"
</div>

1010
HocLapTrinhWeb.COM
• Inline Style
• Internal Style
• External Style




1111
HocLapTrinhWeb.COM
• Internal Style
− Dùng để định nghĩa các style dùng chung trong một
trang web
Các loại CSS
<head>
<style type = “text/css” id =“tên style sheet 1”>
…
</style>
<style type = “text/css” id =“tên style sheet 2”>
…
</style>
</head>


1212
HocLapTrinhWeb.COM
• Inline Style
• Internal Style
• External Style




1313
HocLapTrinhWeb.COM
• External Style
− Dùng chung trong một website
− Phần khai báo nằm trong một tập tin có kiểu là .css và
tập tin này được xem như là một Style Sheet
Các loại CSS

1414
HocLapTrinhWeb.COM
• External Style
− Khai báo và sử dụng:
• Khai báo trong tập tin .css
• Liên kết với trang web
Các loại CSS
<tên tag> { <tên thuộc tính >: <giá trị> ; … }
<head>
…
<link rel=stylesheet href="<tên tập tin>.css" type="text/css">
</head>
Minh họaMinh họa

1515
HocLapTrinhWeb.COM

1616
HocLapTrinhWeb.COM
Tạo và sử dụng CSS phức tạpTạo và sử dụng CSS phức tạp
• Grouping - nhóm
• Class – lớp



1717
HocLapTrinhWeb.COM
• Grouping – nhóm
− Khai báo một style áp dụng cho nhiều tag khác nhau
Tạo và sử dụng CSS phức tạp
<head>
<style type = “text/css” >
<tên tag 1>, <tên tag 2>, … { <tên thuộc tính >: <giá trị> ; … }
…
</style>
</head>
Ví dụ:
h1, h2, h3 {color: red; font-family:sans-serif }
</style>

1818
HocLapTrinhWeb.COM
Tạo và sử dụng CSS phức tạpTạo và sử dụng CSS phức tạp
• Grouping - nhóm
• Class – lớp



1919
HocLapTrinhWeb.COM
• Class – lớp
− Khai báo nhiều style khác nhau cho cùng một tag hoặc
cho nhiều tag
− Khai báo
• Cùng một tag
• Nhiều tag khác nhau
<tên tag>.<tên lớp> {<danh sách thuộc tính> }
.<tên lớp> {<danh sách thuộc tính> }

2020
HocLapTrinhWeb.COM
• Class – lớp
− Sử dụng
<têntag class = ”tên lớp” ... >

2121
HocLapTrinhWeb.COM
• Class – lớp
Ví dụ: sử dụng style cho tag <p>
<head>
p{ color: red; font-size: 20px; font-weight:bold}
p.dong1{ color: blue; font-size: 18px; }
p.dong2{ font-size: 16px; }
</style>
</head>
<body >
<p> HocLapTrinhWeb.com </p>
<p class="dong1"> Học lập trình web cơ bản </p>
<p class="dong2"> Học lập trình web nâng cao </p>
</body>

2222
HocLapTrinhWeb.COM
• Class – lớp
Ví dụ: sử dụng style cho nhiều tag
<head>
.dong1{ color: red; font-size: 20px; font-weight:bold}
.dong2{ color: blue; font-size: 18px;}
.dong3{ color: #000099; font-size: 16px; }
</style>
</head>
<body >
<p class="dong1"> HocLapTrinhWeb.com<br>
<label class="dong2"> Học lập trình web cơ bản</label><br>
<label class="dong3"> Học lập trình web nâng cao</label>
</body>

2323
HocLapTrinhWeb.COM
• Các mục thường định dạng
− Font chữ
− Màu chữ và nền (màu, hình ảnh) – Colors và Background
− Canh lề văn bản - Text Alignment
− Lề văn bản và đường viền – Margins và Borders

2424
HocLapTrinhWeb.COM

2525
HocLapTrinhWeb.COM
• Giới thiệu DHTML – Dynamic HTML
− Tạo tính “linh động” cho trang web
− Xử lý các yêu cầu khi người dùng tương tác với trang
web
− Là sự kết hợp HTML, CSS, DOM và một ngôn ngữ
client-side script
− Không phải là chuẩn của W3C
Giới thiệu DHTML

2626
HocLapTrinhWeb.COM

2727
HocLapTrinhWeb.COM
Style động – Dynamic StylesStyle động – Dynamic Styles
• Thay đổi thuộc tính
• Thay đổi style



2828
HocLapTrinhWeb.COM
− Sử dụng cú pháp tham chiếu đến một đối tượng trong
DOM
Style động – Dynamic Styles
Ví dụ: thay đổi thuộc tính src của tag <img>

2929
HocLapTrinhWeb.COM
Style động – Dynamic StylesStyle động – Dynamic Styles



3030
HocLapTrinhWeb.COM
Có 2 cách làm thay đổi Inline Style
− Thay đổi thuộc tính style: thường dùng từ khóa this và
viết code trực tiếp vào sự kiện
Ví dụ:
<div id="nd" onMouseOver="this.style.fontSize=36"
onMouseOut="this.style.fontSize=16" >Một bông hồng cho em</div>
this.style.<tên thuộc tính> = <giá trị>

3131
HocLapTrinhWeb.COM
− Thay đổi tên lớp: dùng để thay đổi nhiều thông tin trong
thuộc tính style
Ví dụ:
<head>
.vao { font-size:36px; color:#FF0000; font-weight:bold; font-style:italic}
.ra { font-size:16px; color:black; text-decoration: none}
</style>
</head>
<body><div id="nd" onMouseOver="this.className='vao' "
onMouseOut="this.className='ra' ">Một bông hồng cho em</div>
</body>
this.className = ‘Tên lớp’

3232
HocLapTrinhWeb.COM

3333
HocLapTrinhWeb.COM
• Nội dung động
− Chèn vào, hủy bỏ hoặc thay đổi nội dung của một
element.
− Thay đổi nội dung: thường sử dụng thuộc tính
innerText, innerHTML hoặc value
Nội dung động – Dynamic content

3434
HocLapTrinhWeb.COM

3535
HocLapTrinhWeb.COM
Vi trí động – Dynamic positionVi trí động – Dynamic position
• Thuộc tính position
• Thuộc tính visibility
• Thuộc tính z-index




3636
HocLapTrinhWeb.COM
− Định vị trí của một element (theo tọa độ (x,y) hay left, top)
− Gối chồng các element với nhau theo thứ tự trên, dưới.
− Thường sử dụng các thuộc tính left, top, position,
visibility và z-index.
Vị trí động – Dynamic position

3737
HocLapTrinhWeb.COM
− Khai báo loại vị trí của một element
− Có 3 giá trị:
• static: mặc định. Thuộc tính left và top sẽ không có tác dụng
nếu element có position là static
• absolute: vị trí dịch chuyển của đối tượng tùy theo vị trí của
elemnet cha hoặc element body
• relative: vị trí dịch chuyển của đối tượng tùy theo vị trí ban
đầu khi viết code HTML

3838
HocLapTrinhWeb.COM




3939
HocLapTrinhWeb.COM
− Dùng để thể hiện hoặc làm ẩn đi một đối tượng
− Có 2 giá trị:
• visible: thể hiện đối tượng lên trang web
• hidden: làm ẩn đi đối tượng
Ví dụ: thể hiện khẩu hiệu “Học, học nữa, học mãi” khi rê chuột vào
hình và ngược lại làm ẩn đi

4040
HocLapTrinhWeb.COM




4141
HocLapTrinhWeb.COM
− Dùng để gối chồng các element lên nhau theo thứ tự
trên, dưới
− Giá trị của thuộc tính là các con số
− Thường kết hợp với thuộc tính visibility và position

4242
HocLapTrinhWeb.COM
HẾTHẾT

Bài 5 - CSS và DHTML - Học lập trình web cơ bản với Html, Css, Javascript

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (16)

More from MasterCode.vn

More from MasterCode.vn (20)

Bài 5 - CSS và DHTML - Học lập trình web cơ bản với Html, Css, Javascript

Editor's Notes