Giáo trình Thực hành CSS - Bài 1: CSS là gì. Các quy ước trong CSS và một số thuộc tính đơn giản về font nền

LAB CSS 1
CSS LÀ GÌ – CÁC QUY ƯỚC TRONG CSS VÀ MỘT SỐ THUỘC TÍNH ĐƠN GIẢN VỀ FONT NỀN
A – LÝ THUYẾT
I – GIỚI THIỆU VỀ CSS
1 – CSS là gì
	Trong lĩnh vực xây dựng, chúng ta có trang trí nội thất; trong lĩnh vực thẩm mỹ - làm đẹp, chúng ta có kỹ thuật make-up; còn trong lĩnh vực thiết kế web chúng ta có CSS. Đây chỉ là một cách định nghĩa giàu hình ảnh mà thôi. Còn CSS là từ viết tắt của cụm từ sau (Cascading Style Sheets) là một ngôn ngữ quy định cách trình bày cho các tài liệu viết bằng HTML, XHTML, XML, SVG, hay UML, Mà ở đây, cụ thể là chúng ta dùng CSS để làm việc với HTML
2 – CSS dùng để làm gì
	Trong khuôn khổ làm việc với CSS cơ bản này thì CSS mang lại cho chúng ta những tiện ích như sau:
CSS dùng để hỗ trợ, bổ sung và hoàn thiện những điểm còn thiếu trong các văn bản HTML
CSS có thể tạo ra các khuôn mẫu bên ngoài giúp chúng ta dễ dàng sử dụng lại mã và tiết kiệm được phần lớn thời gian và chi phí
Ngoài ra CSS còn giúp chúng ta dễ dàng trình bầy các nội dung một cách phức tạp và tinh vi nhất
3 – Các kiến thức cũng như phần mềm liên quan khi học CSS
Để bắt đầu làm việc với CSS trước tiên các bạn phải có chút kiến thức về ngôn ngữ HTML
Tiếp theo, để dễ dàng hơn khi làm việc với CSS và kết hợp CSS với HTML trong quá trình thiết kế, chúng ta cần sử dụng một số Add on của Firefox như
Web Developer: Thấy ngay được sự thay đổi khi chúng ta viết mã hay chỉnh sửa mã CSS ngay trên trình duyệt
ColorZilla: Công cụ kiểm mầu và lấy mầu
MeasureIt: Công cụ thước đo
II – MỘT SỐ QUY ƯỚC TRONG KHI LÀM VIỆC VỚI CSS
1 – Vùng làm việc của CSS và sự ưu tiên đối với các vùng đó
	Chúng ta có 3 cách khác nhau để nhúng mã CSS vào một tài liệu HTML
Cách 1: Nội tuyến (Kiểu thuộc tính)
Đây là một phương pháp nguyên thủy nhất để nhúng CSS vào một tài liệu HTML bằng cách nhúng vào từng thẻ HTML muốn áp dụng. Và dĩ nhiên trong trường hợp này chúng ta sẽ không cần Selector trong cú pháp (Selector sẽ được học sau).
Cú pháp cơ bản đó là:
style = “Vùng viết mã CSS”
Cách 2: Bên trong (Thẻ Style)
Đây được xem là một cách tương đối phổ biến với những ai mới bắt đầu làm việc với CSS
Cú pháp của nó như sau: Khai báo một vùng làm việc bởi cặp thẻ Vùng viết mã CSS. Cặp thẻ này được đặt dưới thẻ và trên thẻ 
Cách 3: Bên ngoài (Liên kết với một File CSS bên ngoài)
Tạo một File .CSS bên ngoài để viết mã CSS mà không cần bỏ phần mã đó vào trong cặp thẻ như ở cách 2
Sử dụng một đoạn mã đặt dưới thẻ và trên thẻ trong tài liệu HTML để gọi File CSS vào: 
Trước khi thực thi CSS cho một trang web. Trình duyệt sẽ đọc toàn bộ CSS mà trang web có thể được áp dụng, bao gồm: CSS mặc định của trình duyệt, file CSS bên ngoài liên kết vào trang web, CSS nhúng trong thẻ và các CSS nội tuyến. Sau đó, trình duyệt sẽ tổng hợp toàn bộ CSS này vào một CSS ảo, và nếu có các thuộc tính CSS giống nhau thì thuộc tính CSS nào nằm sau sẽ được ưu tiên sử dụng (cái này cũng giống như chương trình “Ai Là Triệu Phú” trên truyền hình vậy, chỉ câu trả lời sau cùng mới được chấp nhận). Theo nguyên tắc đó trình duyệt của bạn sẽ ưu tiên cho các CSS nội tuyến > CSS bên trong > CSS bên ngoài > CSS mặc định của trình duyệt.
2 – Cú pháp làm việc với CSS
	Cú pháp cơ bản của CSS như sau:
	Selector{Property: Value;}
	Trong đó
Selector: Là các đối tượng mà chúng ta sẽ áp dụng các thuộc tính trình bầy như:
Các thẻ HTML
Class hoặc Id (sẽ học ở những bài sau)
Property: Chính là các thuộc tính quy định cách trình bầy. Mỗi thuộc tính CSS phải được gán một giá trị. Nếu có nhiều hơn một thuộc tính cho một selector thì chúng ta phải dùng một dấu ; (chấm phẩy) để phân cách các thuộc tính. Tất cả các thuộc tính trong một selector sẽ được đặt trong một cặp ngoặc nhọn sau selector. 
Value: Giá trị của thuộc tính
VD:
	Ngoài ra cũng giống như HTML ta cũng có thể chú thích cho đoạn mã CSS của chúng ta bằng cú pháp sau:
	/*	Nội dung cần chú thích	*/
3 – Một số đơn vị và ý nghĩa sử dụng của chúng trong CSS
Đơn vị chiều dài
Dưới đây là bảng một số đơn vị chiều dài mà các bnaj có thể dùng khi làm việc vơi CSS
Đơn vị
Mô tả
%
Phần trăm
in
Inch (1 inch = 2.54 cm)
cm
Centimeter
mm
Milimeter
em
1 em tương đương với kích thước font hiện hành
ex
1 ex bằng chiều cao của chữ x in thường của font hiện hành. Do đó đơn vị này không những phụ thuộc vào kích cỡ của font chữ mà còn phụ thuộc vào loại font chữ
pt
Point (1 pt = 1/72 inch)
pc
Pica (1 pc = 12 pt)
px
Pixels (Điểm ảnh trên màn hình máy tính)
Chú ý: Thường chúng ta chỉ sử dụng đơn vị là Pixels (px) để việc thiết kế được chuẩn xác
Đơn vị mầu sắc
	Trong CSS cho chúng ta thao tác vơi mầu sắc qua 2 đơn vị đó là:
Tên mầu
Mã mầu
Chú ý: Thường chúng ta nên sử dụng đơn vị là mã mầu để các mầu của chúng ta được hiển thị chuẩn và đa dạng
III – MỘT SỐ THUỘC TÍNH VỀ FONT NỀN
1 – Thuộc tính Background-color
Khái niệm
Thuộc tính background-color giúp định màu nền cho một thành phần trên trang web. Các giá trị mã màu của background-color cũng giống như color nhưng có thêm giá trị Transparent để tạo nền trong suốt.
Cách sử dụng
background-color: Tên mầu hoặc mã mầu;
2 – Thuộc tính Background-image
Khái niệm
Để chèn ảnh nền vào một thành phần trên trang web chúng ta sử dụng thuộc tính background-image
Cách sử dụng
background-image:url(Đường dẫn ảnh);
VD:
3 – Thuộc tính Background-repeat
Khái niệm
Nếu sử dụng một ảnh có kích thước quá nhỏ để làm nền cho một đối tượng lớn hơn thì theo mặc định trình duyệt sẽ lặp lại ảnh nền để phủ kín không gian còn thừa. Thuộc tính background-repeat cung cấp cho chúng ta các điều khiển giúp kiểm soát trình trạng lặp lại của ảnh nền
Cách sử dụng
background-repeat: Value; 
Value là một trong bốn giá trị sau dây
Repeat-x: Chỉ lặp lại ảnh theo phương ngang
Repeat-y: Chỉ lặp lại ảnh theo phương dọc
Repeat: Lặp lại ảnh theo cả 2 phương, đây là giá trị mặc định
No-repeat: Không lặp lại ảnh
4 – Thuộc tính Background-attachment
Khái niệm
Background-attachment là một thuộc tính cho phép bạn xác định tính cố định của ảnh nền so với với nội dung trang web
Cách sử dụng
background-attachment: Value;
Value là một trong các giá trị sau:
Scroll: Ảnh nền sẽ cuộn cùng nội dung trang web, đây là giá trị mặc định
Fixed: Cố định ảnh nền so với nội dung trang web. Khi áp dụng giá trị này, ảnh nền sẽ đứng yên khi bạn đang cuộn trang web
5 – Thuộc tính Background-position
Khái niệm
Theo mặc định ảnh nền khi được chèn sẽ nằm ở góc trên, bên trái màn hình. Tuy nhiên với thuộc tính background-position bạn sẽ có thể đặt ảnh nền ở bất cứ vị trí nào (trong không gian của thành phần mà nó làm nền)
Background-position sẽ dùng một cặp 2 giá trị để biểu diễn tọa độ đặt ảnh nền. Có khá nhiều kiểu giá trị cho thuộc tính position. Như đơn vị chính xác như centimeters, pixels, inches, hay các đơn vị qui đổi như %, hoặc các vị trí đặt biệt như top, bottom, left, right
Cách sử dụng
background-position: Value_1 Value_2;
Value_1: là đơn vị chiều dài canh lề bên trái
Value_2: là đơn vị chiều dài canh lề bên trên
Hoặc Value_1, Value_2: Nhận một trong các giá trị (Top, Left, Right, Bottom)
B – THỰC HÀNH
I – BÀI TẬP THỰC HÀNH
1 – Bài tập
Bài 1
	Sử dụng tối đa các kiến thức về CSS để thiết kế mẫu Layout như hình dưới đây. Mở File bài giải bai_tap_1.html để giúp cho công việc thiết kế trở nên chính xác hơn. Cho biết các thông số thiết kế như sau:
Độ rộng của website là 800px
Độ cao của banner là 80px
Độ rộng của menu trái là 200px
Độ cao của footer là 60px
Bài 2
Sử dụng các kiến thức về mầu nền và ảnh nền trong CSS để chỉnh sửa lại phần background của phần Body và phần background của phần Table như hình dưới đây. Mở File bài giải bai_tap_2.html để việc thiết kế của bạn được chính xác hơn.