Bài 5 CSS và DHTML


Định dạng trang web bằng CSS. Sử dụng CSS để tạo các trang DHTML


Mục tiêu

  • Định dạng trang web bằng CSS
  • Sử dụng CSS để tạo các trang DHTML

Nội dung

  1. Giới thiệu CSS
  2. Các loại CSS
  3. Tạo và sử dụng CSS phức tạp
  4. Giới thiệu DHTML
  5. Style động
  6. Nội dung động
  7. Vị trí động

1. Giới thiệu CSS

  • Style Sheet Là một tập hợp các khai báo style

Style Sheet

<style type="text/css">
       h1 {color:#FF0000}
       div {color:#0000FF; border-color:#0000FF; border-style:double;}
       ul {list-style:square; color:#660000}
</style>
  • 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

2. Các loại CSS

  • 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
  • Internal Style
<head>
    <style type = “text/css” id =“tên style sheet 1”>
	<tên tag 1> { <tên thuộc tính >: <giá trị> ; … }
	…
    </style>
    <style type = “text/css” id =“tên style sheet 2”>
	…
    </style>
</head> 
  • 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
<head>
  …
  <link rel=stylesheet href="<tên tập tin>.css" type="text/css">
</head>

3. Tạo và sử dụng CSS phức tạp

  • Grouping - nhóm Khai báo một style áp dụng cho nhiều tag khác nhau
<style type="text/css">
   h1, h2, h3 {color: red; font-family:sans-serif }
</style>
  • Class – lớp Khai báo nhiều style khác nhau cho cùng một tag hoặc cho nhiều tag

  • 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

4. Giới thiệu DHTML

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

5. Style động

  • Thay đổi thuộc tính
  • Thay đổi style
<head>
<style type="text/css">
	.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 onMouseOver="this.className='vao'" onMouseOut="this.className='ra'">
Một bông hồng cho em
</div>
</body> 

6. 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

7. Vị trí động

  • Thuộc tính position
    • 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
  • Thuộc tính visibility
    • visible: thể hiện đối tượng lên trang web
    • hidden: làm ẩn đi đối tượng
  • Thuộc tính z-index
    • 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

 

Chia sẽ bài viết :