Bài giảng Phát triển ứng dụng web 1 - Bài 6: CSS-Cascading Style Sheet

Nội dung buổi học trước 
Khái niệm và mục đích Form 
Các đối tượng Form Fields 
Phương thức GET/POST 
Tag Marquee 
Nội dung 
Giới thiệu CSS 
Định nghĩa Style và các đơn vị tính 
Phân loại CSS 
Phạm vi áp dụng CSS (selector) 
Một số tag HTML dùng riêng CSS 
Thực hành 
Giới thiệu CSS 
CSS = Cascading Style Sheet 
Dùng định dạng các thành phần trong trang web 
Sử dụng tương tự như định dạng template 
Thống nhất cách thể hiện và tái sử dụng cho nhiều webpage trong website. 
Có thể thay đổi thuộc tính từng trang hoặc cả site nhanh chóng linh hoạt thay đổi cách thể hiện. 
–  
Định nghĩa Style 
Kiểu 1 
Kiểu 2 
<tag style= 
	“ property1: value1 ; 
	 property2: value2 ; 
	propertyN: valueN ; ”> 
SelectorName{ 
	property1: value1; 
	 property2: value2; 
	 propertyN: valueN; 
} 
Định nghĩa Style 
Vd kiểu 1 
Vd kiểu 2 
<h1 style=“ 
 color : blue; 
 font-family : Arial;” > SGU 
.TieuDe1 { 
 color: red; 
 font-family: Verdana, sans-serif; } 
 SGU 
Ghi chú 
Ví dụ 
Giống ghi chú trongC++ 
Sử dung 
	/* Ghi chú */ 
Measurement units 
Absolute length: inch, cm, point  
Relative length: pixel, em, ex, ... 
p ixel (px): relative to the screen resolution 
Ex: LCD 14’’2 (1024x768) thì DPI = 96 
 có 96 pixel trên 1 inch 
Point: 1pt = 1/72 inch. 
 có 1 pixel = 0.75pt 
Font-size = 16pt 
Measurement Units 
Relative length: em, ex, ... 
em and ex - relative to the parent element 
Ex: em 
Ex: ex 
CSS: 
Phân loại CSS 
Gồm 3 lại CSS: 
Inline Style Sheet 
Embedding Style Sheet (Internal SS) 
External Style Sheet 
Phân loại CSS 
Inline style sheet: dùng thuộc tính style cho từng thẻ HTML 
Embedded style sheet: định nghĩa các định dạng trong thẻ trong phần của webpage 
External style sheet: định nghĩa các định dạng trong file .css và các webpage link tới file .css (trong phần ) 
Phân loại CSS – Inline Style Sheet 
Định nghĩa Style trong thuộc tính style của từng tag HTML 
Ví dụ: 
Phân loại CSS – Embedding Style Sheet 
Định nghĩa các định dạng trong thẻ , đặt trong phần của trang HTML. 
Ví dụ: 
Phân loại CSS – External Style Sheet 
Định nghĩa style lưu trong file .CSS và các page liên kết tới file .CSS (link đặt trong ) 
Định nghĩa style theo cú pháp kiểu 2 
Tạo liên kết đến file .CSS . 
Liên kết bằng tag Link 
LK bằng tag style với @import URL 
Phân loại CSS – External Style Sheet 
Browser 
File .CSS 
File HTML 
CSS – so sánh và đánh giá 
CSS – độ ưu tiên 
Thứ tự ưu tiên áp dụng định dạng khi sử dụng các loại CSS (độ ưu tiên giảm dần) 
Inline Style Sheet 
Embedding Style Sheet 
External Style Sheet 
Browser Default 
Selector : tên 1 style tương ứng với một thành phần được áp dụng style đó. 
Ví dụ: 
h1 { 
	color:#006; 
	font:28px "arial black"; 
	margin-top:0px; 
	padding-top:0px; 
} 
Phạm vi áp dụng CSS (selector) 
Properties & values 
Selector 
Ví dụ: 
Phạm vi áp dụng CSS (selector) 
Browse 
Các loại selector 
Ví dụ phạm vi sử dụng các Selector - Elements 
Ví dụ phạm vi sử dụng các Selector - #ID 
Ví dụ phạm vi sử dụng các Selector - .CLASS 
Ví dụ Các Selector - Element.CLASS 
Ví dụ Các Selector - Contextual 
Ví dụ Các Selector – Others 
Một số tag HTML dùng riêng CSS 
CSS Positioning 
and 
Multi-Column Layouts 
HTML Tag 
Một số tag HTML dùng riêng CSS 
Code View 
Design View 
Browser View 
Một số tag HTML dùng riêng CSS 
Demonstration Basic Three-Column Layout 
 position: static , position: relative , position: absolute and position: float . 
Một số tag HTML dùng riêng CSS 
Demonstration Basic Three-Column Layout 
Tham Khảo 
 Tìm hiểu thêm:  Designing without table with CSS Google 
Bài thực hành 
 Hoàn tất danh sách đăng ký đề tài 
Thực hành CSS 
 Làm lại các bài tập trước, sử dụng CSS 
CSS cơ bản 
 1. CSS Linking and Setup 
 2 .Understanding_levels_of_inheritance 
CSS cơ bản 
 1. CSS Linking and Setup: 
01-body-style.html + external.css 
CSS cơ bản 
 Understanding_levels_of_inheritance: 
02-inheritance.html + external.css 
 () 
CSS cơ bản 
 03- levels 
03-levels .html + external.css 
1 
2 
3 
CSS cơ bản 
 04.span and div 
04-span-div.html + external.css 
span 
div 
CSS cơ bản 
 05.selectors 
05-selectors.html + external.css 
CSS cơ bản 
 05.selectors 
CSS cơ bản 
 05.selectors 
CSS cơ bản 
 05.selectors 
??? 
CSS cơ bản 
 06.Units 
06-units.html + external.css