Tự học PHP - Chương 3: Định dạng HTML nâng cao với CSS

 Tự Học PHP 
 Khái niệm về CSS 
 Định kiểu trình bày trang HTML
Nội dung chủ yếu của bài được dịch từ  , phần còn 
lại từ... một số nguồn khác và trong đầu 
Trước khi đọc bài này các bạn cần có kiến thức cơ bản về WWW, HTML cùng những kỹ năng cơ 
bản nhất để làm một trang web 
CSS là gì? 
- CSS: Cascading Style Sheet: Đây là những mẫu để quy định cách thức thể hiện các thẻ HTML. 
Bạn có thể xem ví dụ về cách thức thể hiện các thẻ này ở 
- CSS có 3 cách sử dụng: 
+ Sử dụng trực tiếp kèm với các thẻ HTML (Inline Style Sheet) 
+ Định nghĩa trong 1 trang web (Internal Style Sheet) 
+ Định nghĩa thành 1 file CSS riêng (External Style Sheet) 
- Style được đưa vào HTML 4.0 để giải quyết một số vấn đề. 
- CSS giúp bạn tiết kiệm được rất nhiều thời gian và công sức cho việc thiết kế web. 
- Bạn có thể định nghĩa nhiều style vào một thẻ HTML 
Style (mẫu định dạng) giải quyết một số vấn đề chung: 
- Ta biết rằng các thẻ HTML chuẩn được thiết kế để định nghĩa nội dung của một văn bản. Đầu 
tiên các thẻ HTML hỗ trợ cách viết "Đây là tiêu đề", "Đây là đoạn", "Đây là bảng".... bằng cách 
sử dụng các thẻ , , ... Cách bố trí văn bản này được qui định bởi trình duyệt 
web và không có bất cứ một thẻ nào để định dạng văn bản. 
- Đến các trình duyệt thế hệ sau đặc biệt là Nescape và Internet Explorer tiếp tục đưa thêm vào 
các thẻ HTML mới cùng các thuộc tính định dạng riêng của mình (như các thẻ và thuộc 
tính Color...). Do đó ngày càng khó để tạo ra được một web site khi mà nội dung của nó bị tách 
rời khỏi cách bố trí. 
- Để giải quyết vấn đề này World Wide Web Consortium (W3C) đã tạo ra STYLE để đưa thêm 
vào trong HTML 4.0 
- Cả hai trình duyệt lớn là Nescape Và Internet Explorer đều hỗ trợ CSS. 
By traibingo 1 | P a g e 
 Tự Học PHP 
CSS giúp bạn tiết kiệm được rất nhiều thời gian và công sức cho việc thiết kế web. 
- Style trong phiên bản HTML 4.0 (phiên bản chúng ta đang dùng) qui định cách thức thể hiện 
các thẻ HTML tương tự như thẻ hay thuộc tính COLOR trong HTML 3.2. Style thường 
được lưu trong các file nằm ngoài trang web. Chúng giúp bạn có thể thay đổi cách thức định 
dạng và cách bố trí các trang web chỉ bằng cách thay đổi riêng file CSS. Chỉ khi bạn muốn thay 
đổi lại toàn bộ màu sắc, cách định dạng của các tiêu đề, nội dung bạn mới hiểu rõ tác dụng thực 
sự của CSS. 
- CSS cho phép chúng ta điều khiển cách định dạng và cách bố trí của cùng lúc nhiều trang web 
với chỉ duy nhất 1 lần thay đổi tại một vị trí. Là một người thiết kế web, bạn có thể định nghĩa 1 
file CSS cho các thẻ HTML và áp dụng nó vào nhiều trang web mà bạn muốn. Để thay đổi tổng 
thể các trang web này bạn chỉ đơn giản là thay đổi file CSS và tất cả các trang đã áp dụng sẽ 
được thay đổi một cách tự động. 
Bạn có thể định nghĩa nhiều style vào một thẻ HTML 
CSS cho phép bạn đưa các thông tin định nghĩa thẻ thông qua nhiều con đường khác nhau. 
Style có thể được qui định ở trong chỉ một thẻ HTML, được qui định trong 1 trang web hoặc ở 
trong một file CSS bên ngoài. 
Thứ tự áp dụng các định dạng 
Như trên đã nói, ta có thể sử dụng nhiều cách khác nhau để làm CSS. Điều gì sẽ xảy ra nếu bạn 
áp dụng nhiều cách định dạng cho 1 thẻ HTML? 
Theo một cách chung nhất ra có thể nói các style của bạn sẽ được "xếp tầng" (cascade). Việc 
xếp tầng này tuân theo thứ tự sau: (Số 1 là ưu tiên nhất, số 4 là kém ưu tiên nhất). 
1. Inline Style (Style được qui định trong 1 thẻ HTML cụ thể) 
2. Internal Style (Style được qui định trong phần của 1 trang HTML ) 
3. External Style (style được qui định trong file CSS ngoài) 
4. Browser Default (thiết lập mặc định của trình duyệt) 
Như vậy ta thấy các thiết lập trong 1 thẻ HTML có mức ưu tiên cao nhất, Những gì được định 
nghĩa ở đây sẽ bị bỏ qua tất cả các định nghĩa khác (như trong thẻ , File CSS ngoài,...) 
 Cú pháp của CSS 
Cú pháp của CSS được tạo nên bởi 3 thành phần: 
- Thành phần lựa chọn (thường là một thẻ HTML) (Selector) 
- Thuộc tính (Property) 
- Giá trị (Value) 
Cú pháp của CSS được thể hiện như sau: 
By traibingo 2 | P a g e 
 Tự Học PHP 
Selector { 
 Property1: Value1; 
 Property2: Value2; 
} 
- Selector thường là các thẻ HTML mà bạn muốn định nghĩa thêm. Property là thuộc tính mà 
bạn muốn thay đổi; mỗi một thuộc tính cần phải có một giá trị. Một thuộc tính và giá trị của nó 
được phân cách bởi dấu hai chấm ( . Hai cặp thuộc tính-giá trị được phân cách nhau bởi dấu 
chấm phảy ( . Toàn bộ các cặp thuộc tính-giá trị của một thẻ HTML được đặt trong cặp dấu 
ngoặc nhọn ({}) 
Ví dụ 
body{color: black} /*Phần chữ trong thẻ body sẽ có màu đen*/ 
hay: 
p {text-align: center} /*tất cả các thẻ trong trang HTML sẽ được canh giữa.*/ 
hay định nghĩa nhiều thuộc tính: 
p 
{ 
 text-align: center; 
 color: red; 
 font-family: arial 
} 
Nhóm các thẻ 
Trong trường hợp bạn muốn định nghĩa nhiều thẻ giống nhau bạn có thể nhóm các thẻ lại. Ví dụ 
dưới đây sẽ nhóm tất cả các thẻ Header lại và định nghĩa chúng sẽ có màu xanh: 
h1,h2,h3,h4,h5,h6 
{ 
 color: green 
} 
Tạo các lớp 
Bằng việc tạo ra các lớp, bạn có thể định nghĩa nhiều kiểu thể hiện khác nhau cho cùng một thẻ 
HTML và áp dụng mỗi lớp vào một vị trí cần thiết trên trang web. 
By traibingo 3 | P a g e 
 Tự Học PHP 
Các lớp gắn với 1 thẻ cụ thể 
Ví dụ: Trên trang web của bạn có 3 loại đoạn văn: Đoạn văn canh lề trái, đoạn văn canh lề giữa 
và đoạn văn canh lề phải. Khi đó bạn có thể định nghĩa 3 lớp riêng biệt cho 3 loại đoạn văn này 
như sau: 
p.trai {text-align: left} 
p.phai {text-align: right} 
p.giua {text-align: center} 
Tiếp theo, trong trang HTML bạn sử dụng như sau: 
Đoạn văn này được canh lề trái. 
Đoạn văn này được canh lề phải. 
Đoạn văn này được canh lề giữa. 
Chú ý: 
- CSS phân biệt chữ hoa và chữ thường giống như C++ do đó khi viết bạn cần phải cẩn thận 
trong việc sử dụng chữ hoa, chữ thường. 
- Trong trang HTML, bạn chỉ được phép khai báo 1 thẻ thuộc duy nhất một lớp. Trái điều này 
mặc dù trình duyệt không báo lỗi nhưng các lớp sẽ không hoạt động được. 
Ví dụ về sử dụng lớp sai: 
Đây là đoạn định nghĩa sai 
Các ví dụ ở trên là ví dụ về việc tạo các lớp bị "gắn chặt" với một thẻ nào đó, tức là ta không sử 
dụng được lớp này trong thẻ khác. Theo các khai báo ở trên, ví dụ dưới đây sẽ không hoạt 
động: 
Ví dụ này không hoạt động 
Các lớp không gắn với một thẻ cụ thể (có thể gắn với hầu như tất cả các thẻ): 
Rất đơn giản, bạn có thể tạo ra một lớp mà lớp đó có thể gắn vào hầu như bất cứ thẻ nào trên 
trang web bằng cách bỏ tên thẻ ở đầu đi nhưng nhớ giữ lại dấu chấm (.) 
Ví dụ: 
Định nghĩa một lớp "giua" có thể gắn với bất cứ thẻ nào 
.giua{text-align="center"} 
By traibingo 4 | P a g e 
 Tự Học PHP 
và trong trang HTML ta sử dụng như sau: 
Đoạn văn này được canh lề giữa. 
Câu này cũng được canh lề giữa. 
Tạo các định danh (ID) 
Tương tự như các lớp, các định danh cũng cho phép chúng ta chia các thẻ thành nhiều loại khác 
nhau. Tuy nhiên trên thực tế thì Định danh khác với lớp!!! Một lớp có thể áp dụng nhiều lần ở 
nhiều vị trí trên trang web, tuy nhiên 1 định danh chỉ có thể áp dụng được duy nhất cho 1 thẻ 
và tên của định danh phải là duy nhất trên 1 trang web. 
Các ví dụ: 
1. Đoạn mã dưới đây có thể áp dụng cho thẻ có ID là para1 
p#para1 
{ 
 text-align: center; 
 color: red 
} 
Khi sử dụng như sau: 
Đoạn văn bản 
2. Đoạn mã dưới đây có thể có hiệu lực cho thẻ đầu tiên có ID là xyz: 
*#xyz {color: green} 
Khi sử dụng: 
Đoạn văn bản 
3. Đoạn mã dưới đây chỉ có thể áp dụng cho thẻ đầu tiên: 
p#wer345 {color: green} 
Khi sử dụng: 
Đoạn văn bản 
By traibingo 5 | P a g e 
 Tự Học PHP 
Và đoạn dưới đây không có hiệu lực: 
Đoạn văn bản không được áp dụng 
Chú thích trong CSS 
Bạn có thể bổ xung các chú thích cho đoạn mã của mình trong CSS. Các đoạn chú thích sẽ được 
trình duyệt bỏ qua. Đoạn chú thích được tạo ra tương tự như trong C++ (đặt bắt đầu bởi /* và 
kết thúc bởi */) 
Ví dụ: 
/* Đây là đoạn chú thích*/ 
p 
{ 
text-align: center; 
/* Và đây là một đoạn chú thích khác */ 
color: black; 
font-family: arial 
} 
Tạm thời thế đã, bây giờ chúng ta sẽ xem 2 ví dụ về dùng CSS dưới đây. Trong các ví dụ này ở 
khung phái trên bên trái là đoạn mã HTML của trang web, khung bên phải là mã CSS và ở phía 
dưới là kết quả. 
Ví dụ 1:  
Ví dụ 2:  
 Còn tiếp 
By traibingo 6 | P a g e