Thứ Năm, 26 tháng 12, 2013
CSS Tiêu đề
ĐỊNH DẠNG VĂN BẢN
Văn bản này theo kiểu với một số thuộc tính định dạng văn bản. Nhóm này sử dụng text-align, văn bản chuyển đổi, và các đặc tính màu sắc. Đoạn được thụt vào, liên kết, và không gian giữa các ký tự được quy định. Gạch dưới được lấy ra từ "Hãy thử nó cho mình" liên kết.
Tô màu văn bản
Tài sản màu sắc được sử dụng để thiết lập màu sắc của văn bản.
Với CSS, một màu sắc thường được quy định bởi:
- một giá trị HEX - như "# ff0000"
- RGB giá trị - như "rgb (255,0,0)"
- một tên màu - như "đỏ"
Màu mặc định cho một trang được định nghĩa trong chọn cơ thể.
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p>
<p class="ex">This is a paragraph with class="ex". This text is blue.</p>
</body>
</html>
Thử nó cho mình »
 | Lưu ý: Đối với CSS LTTT: Nếu bạn định nghĩa thuộc tính màu sắc, bạn cũng phải xác định tài sản background-color. |
|---|
Văn bản Alignment
Tài sản text-align được sử dụng để thiết lập sự liên kết ngang của một văn bản.
Văn bản có thể được làm trung tâm, hoặc liên kết bên trái hoặc phải, hoặc hợp lý.
Khi text-align được thiết lập để "biện minh", mỗi dòng được kéo dài để mỗi dòng có chiều rộng bằng nhau, và lề trái và phải thẳng (như trên các tạp chí và báo chí).
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
</style>
</head>
<body>
<h1>CSS text-align Example</h1>
<p class="date">May, 2009</p>
<p class="main">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me,
'just remember that all the people in this world haven't had the advantages that you've had.'</p>
<p><b>Note:</b> Resize the browser window to see how the value "justify" works.</p>
</body>
</html>
Thử nó cho mình »
Trang trí văn bản
Tài sản trang trí văn bản được sử dụng để thiết lập hoặc loại bỏ các đồ trang trí từ văn bản.
Tài sản trang trí văn bản chủ yếu được sử dụng để loại bỏ gạch dưới từ các liên kết cho các mục đích thiết kế:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
a {text-decoration:none;}
</style>
</head>
<body>
<p>Link to: <a href="http://www.lutip.com">W3Schools.com</a></p>
</body>
</html>
Thử nó cho mình »
Nó cũng có thể được sử dụng để trang trí văn bản:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body>
</html>
Thử nó cho mình »
| Lưu ý: Không nên để nhấn mạnh văn bản đó không phải là một liên kết, vì điều này thường lẫn lộn người sử dụng. |
|---|
Văn bản chuyển đổi
Tài sản văn bản chuyển đổi được sử dụng để xác định chữ hoa và chữ thường trong một văn bản.
Nó có thể được sử dụng để biến mọi thứ thành chữ hoa hoặc chữ thường, in hoa chữ cái đầu tiên của mỗi từ.
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>
<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
</html>
Thử nó cho mình »
Văn bản lõm
Tài sản text-indent được sử dụng để xác định thụt đầu dòng của dòng đầu tiên của một văn bản.
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
p {text-indent:50px;}
</style>
</head>
<body>
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</body>
</html>
Thử nó cho mình »
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét