Mục tiêu bài học

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.

Thực hiện trong 1h30’ đầu

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.

Cách dùng selector lớp



<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:

Dùng style sheet để định dạng danh sách

 
<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:

Phần tử giả ‘first-letter:

  
<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:

Style sheet nội tuyến

 
<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:

Thực hiện trong 1h30’ tiếp theo

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

Tự thực hà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:

Thực hành sử dụng style sheet trong HTML

Mục tiêu bài học

Thực hiện trong 1h30’ đầu

Viết những style sheet

Thực hiện trong 1h30’ tiếp theo

Tự thực hành