Tự Học PHP
By traibingo 1 | P a g e
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ẻ <H1>, <P>, <TABLE> 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ẻ <FONT> 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í.
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ẻ <HEAD>, 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: Tự Học PHP
By traibingo 3 | P a g e
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*/
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:
<p class="trai">Đoạn văn này được canh lề trái.</p>
<p class="phai">Đoạn văn này được canh lề phải.</p>
<p class="giua">Đoạn văn này được canh lề giữa.</p>
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:
<p class="trai" class="phai">Đây là đoạn định nghĩa sai</p>
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:
<td class="trai">Ví dụ này không hoạt động</td>
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ụ:
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:
<p id="xyz">Đoạn văn bản</P>
3. Đoạn mã dưới đây chỉ có thể áp dụng cho thẻ <P> đầu tiên:
p#wer345 {color: green}
Khi sử dụng:
<p id="wer345">Đoạn văn bản</p>
Tự Học PHP
By traibingo 6 | P a g eVà đoạn dưới đây không có hiệu lực:
<h1 id="wer345">Đoạn văn bản không được áp dụng</p>
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*/
Copyright: Tài liệu đại học ©