III.3.1. Làm thế nào chèn vào một Style Sheet
Khi trình duyệt đọc một Style, nĩ sẽ định dạng nội dung trang Web theo Style đĩ. Cĩ 3 cách để sử dụng Style trong một trang HTML.
III.3.2. Dùng file CSS riêng
File CSS độc lập nên dùng khi Style được áp dụng cho nhiều trang. Mỗi trang sử dụng Style định nghĩa trong file CSS sẽ phải liên kết đến file đĩ bằng tag <link> đặt trong phần HEAD:
<head>
<link rel="stylesheet" type="text/css"
href="tên_file.css" />
</head>
Ví dụ một file CSS: Style.css hr {color: sienna} p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
III.3.3. Định nghĩa các Style trong phần HEAD
Các Style định nghĩa trong phần HEAD cĩ thể dùng cho nhiều thành phần HTML trong trang Web
đĩ. Bạn sử dụng tag <Style> để định nghĩa Style:
<head>
<style type="text/css"> hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")} </style>
</head>
Ghi chú: Trình duyệt thường bỏ qua các tag HTML mà nĩ khơng biết, do đĩ để các trình duyệt
khơng hỗ trợ CSS khơng hiển thị phần định nghĩa Style, bạn nên đặt trong tag ghi chú của HTML:
<!--
hr {color: sienna} p {margin-left: 20px}
body {background-image: url("images/back40.gif")} -->
</style> </head>
III.3.4. Dùng Style cho một thành phần HTML cụ thể
Style cho một tag HTML cụ thể gần như khơng tận dụng được các lợi điểm của CSS ngoại trừ cách hiển thị đối tượng. Bạn dùng thuộc tính Style để định nghĩa Style cho thành phần HTML.
<p style="color: sienna; margin-left: 20px">
Đây là đoạn văn bản
</p>
III.3.5. Nhiều Style cho một đối tượng
Nếu một đối tượng được định nghĩa nhiều Style, nĩ sẽ sử dụng Style cụ thể nhất. Ví dụ, một file (adsbygoogle = window.adsbygoogle || []).push({});
CSS định nghĩa tag H3 như sau: h3 {
color: red;
text-align: left; font-size: 8pt }
Trong một file HTML cĩ phần định nghĩa Style cho H3 như sau: h3 {
text-align: right; font-size: 20pt }
Nếu trang HTML cĩ link đến file CSS trên, Style cho H3 sẽ định nghĩa như sau: Color: red; text-align: right; font-size: 20pt III.3.6. Các ví dụ a. Màu chữ, màu nền <html> <head> <style type="text/css">
h1 {background-color: #00ff00; color: #0000ff} h2 {background-color: transparent; color: #dda0dd} p {color: #0000FF}}
</style> </head> <body>
<h1>Đây là dịng tiêu đề: Header 1</h1> <h2>Đây là dịng tiêu đề: Header 2</h2> <p>Đây là một đoạn văn bản</p>
</body> </html> b. Canh lề văn bản <html> <head> <style type="text/css"> h1 {text-align: center} h2 {text-align: left} h3 {text-align: right} </style> </head> <body> <h1>Đây là Header 1</h1> <h2>Đây là Header 2</h2> <h3>Đây là Header 3</h3> </body> </html>
c. Hình nền cho trang Web <html> <head> <style type="text/css"> Body { background-image: url('Hinh_nen.jpg'); background-repeat: repeat-x } </style> </head> <body> </body> </html>
Mặc định, hình nền sẽ được tơ đầy trang Web. Tuy nhiên, nếu chúng ta muốn tơ hình nền theo
hướng ngang, hay đứng, ta chọn giá trị cho thuộc tính background-repeat tương ứng: repeat-
x/repeat-y/repeat-xy d. Font chữ Ví dụ 1: <html> <head> <style type="text/css">
h1 {font-family: Tahoma; font-size: 150%} h2 {font-family: Tahoma; font-size: 120%} h3 {font-family: Tahoma; font-size: 12} p {font-family: Tahoma;}
p.sansserif {font-family: sans-serif} </style> </head> <body> <h1>Đây là header 1</h1> <h2>cịn đây là header 2</h2> <h3>và đây là header 3</h3>
<p>Đây là đoạn văn bản</p> <p class="sansserif">
Đây là đoạn văn bản cĩ font sansserif</p>
</body> </html>
Ví dụ 2:
<html> <head>
<style type="text/css">
p{text-align:justify; font-family: Tahoma;
font-size: 12px; border-bottom: 2px solid #ff0000} </style>
</head> <body>
<p>Để biết được những Web Service được cung cấp miễn phí trên mạng, các bạn cĩ thể dùng google để thực hiện tìm kiếm. Ở đây, chúng tơi giới thiệu đến các bạn trang: http://www.webservicex.net cung cấp khá nhiều các Web Service hữu ích..</p>
</body> </html>
e. Quản lý màu hiển thị của liên kết: Hyperlink
<html> <head>
<style type="text/css"> (adsbygoogle = window.adsbygoogle || []).push({});
a {text-decoration:none; color: #0000FF}
a:visited {text-decoration:none; color: #0000A0} a:hover {text-decoration:none; color: #FF00FF} a:active {text-decoration:none; color: #FF0000} </style>
<p><b><a href="http://www.csc.hcmuns.edu.vn/Qlgv" target="_blank">Trang Quản lý giáo viên - TTTH</a> </b></p>
</body> </html>