Thực hành sử dụng style sheet trong HTML
Kết thúc chương này, bạn có thể: Dùng các bảng kiểu Tạo ra file CSS Các bước trong chương này được trình bày rất chi tiết, đầy đủ và rõ ràng. Bạn sẽ hiểu rõ hơn những nội dung trong bài lý thuyết và cách ...
Kết thúc chương này, bạn có thể:
- Dùng các bảng kiểu
- Tạo ra file CSS
Các bước trong chương này được trình bày rất chi tiết, đầy đủ và rõ ràng. Bạn sẽ hiểu rõ hơn những nội dung trong bài lý thuyết và cách sử dụng công cụ. Hãy thực hiện theo các bước dưới đây một cách cẩn thận.
Viết những style sheet
Style sheet được tạo nên từ các qui tắc kiểu nó báo cho trình duyệt biết được cách trình bày một tài liệu. Có nhiều cách khác nhau để liên kết những qui tắc kiểu này đến tài liệu HTML của bạn, nhưng phương thức đơn giản nhất cho việc bắt đầu là sử dụng phẩn tử STYLE của HTML. Phần tử này được đặt trong phần HEAD của tài liệu, và nó chứa các qui tắc kiểu cho trang web.
Đoạn mã dưới đây định nghĩa thuộc tính màu ‘color’ và font-size cho phần tử H1 và H2:
<HTML>
<HEAD>
<TITLE>CSS Example</TITLE>
<STYLE TYPE="text/css">
H1 { font-size: x-large; color: red }
H2 { font-size: large; color: blue }
</STYLE>
</HEAD>
<H1> Hi </H1>
<H2> Hello </H2>
<HTML>
Style sheet dưới đây báo cho trình duyệt biết để hiển thị phần tiêu đề H1 có cỡ chữ extra-large, font màu đỏ, và hiển thị phần tiêu đề H2 có cỡ chữ large, và font màu xanh.
Hình 1 hiển thị kết quả của đoạn mã trên.
Kết quả của Ví dụ 1
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<STYLE TYPE="text/css">
H1.pastoral { color: #00FF00 }
</STYLE>
</HEAD>
<BODY>
<H1 CLASS=pastoral>Way too green</H1>
</BODY>
</HTML>
Kết quả của đoạn code trên được hiển thị trong hình 2:
Kết quả của Ví dụ 2
<STYLE TYPE="text/css">
UL { list-style: outside }
UL.compact { list-style: inside }
</STYLE>
<UL>
<LI>first list item comes first
<LI>second list item comes second
</UL>
<UL CLASS=COMPACT>
<LI>first list item comes first
<LI>second list item comes second
</UL>
Kết quả của đoạn mã trên hiển thị ở hình dưới:
Kết quả của ví dụ 3
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<STYLE TYPE="text/css">
P { font-size: 12pt; line-height: 12pt }
P:first-letter { font-size: 200%; float: left }
SPAN { text-transform: uppercase }
</STYLE>
</HEAD>
<BODY>
<P><SPAN>The first</SPAN> few words of an article in The Economist.</P>
</BODY>
</HTML>
Kết quả của đoạn mã trên hiển thị hình bên dưới:
Kết quả của Ví dụ 4
<html>
<body>
<P STYLE="color: blue; font-family: 'Arial Black', serif"> This paragraph is styled in blue with the Arial Black font, if available.</P>
<P STYLE="color: red; font-family: 'Comic Sans MS', serif"> This paragraph is styled in red with the Comic Sans MS font, if available.</P>
</body>
</html>
Kết quả của đoạn mã trên hiển thị hình bên dưới:
Kết quả Ví dụ 5
- Tạo một trang web động dùng style sheet hiển thị như hình bên dưới:
Gợi ý: Dùng bộ chọn ngữ cảnh
- Trình bày một ứng dụng DHTML bằng cách dùng hai tập hợp kiểu, một là kích thước font và canh lề trái và một kiểu là đặt cho phần tử H2 hiển thị như hình bên dưới:
- Trình bày một ứng dụng DHTML cho phần tử <BODY> có màu xanh tươi được hiển thị như hình dưới:
