Thứ Sáu, 13 tháng 12, 2013
HTML Styles - CSS
CSS (Cascading Style Sheets) được sử dụng để các phần tử HTML phong cách.
Look! Styles and colors
Manipulate Text
Colors, Boxes
and more...
Tạo kiểu tóc HTML với CSS
CSS đã được giới thiệu cùng với HTML 4, để cung cấp một cách tốt hơn để tạo kiểu các phần tử HTML.
CSS có thể được thêm vào HTML trong các cách sau:
- Nội tuyến - bằng cách sử dụng phong cách thuộc tính trong các phần tử HTML
- Nội bộ - bằng cách sử dụng <style> yếu tố trong phần <head>
- Bên ngoài - sử dụng một CSS bên ngoài tập tin
Cách ưa thích để thêm CSS để HTML, là đặt cú pháp CSS trong file CSS riêng biệt.
Tuy nhiên, trong hướng dẫn HTML này chúng tôi sẽ giới thiệu cho bạn sử dụng thuộc tính CSS phong cách. Này được thực hiện để đơn giản hóa ví dụ. Nó cũng làm cho nó dễ dàng hơn để bạn có thể chỉnh sửa mã và thử nó cho mình.
Phong cách nội tuyến
Một phong cách nội tuyến có thể được sử dụng nếu một phong cách duy nhất là để áp dụng cho một lần xuất hiện của một phần tử.
Sử dụng phong cách nội tuyến, sử dụng thuộc tính style trong thẻ có liên quan. Thuộc tính phong cách có thể chứa bất kỳ tài sản CSS. Ví dụ dưới đây cho thấy làm thế nào để thay đổi màu sắc văn bản và lề trái của một đoạn văn:
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
HTML Kiểu Ví dụ - Màu nền
Tài sản background-color xác định màu nền cho một phần tử:
Ví dụ
<!DOCTYPE html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>
Thử nó cho mình »
Tài sản nền màu làm cho "cũ" bgcolor thuộc tính lỗi thời.
HTML Kiểu Ví dụ - Font, màu và kích cỡ
Font-gia đình, màu sắc, và tính font-size định nghĩa các font chữ, màu sắc và kích thước của văn bản trong một phần tử:
Ví dụ
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
<html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
Thử nó cho mình »
Font-gia đình, màu sắc, và tính font-size làm thẻ <font> cũ đã lỗi thời.
HTML Kiểu Ví dụ - Text Alignment
Tài sản text-align xác định sự liên kết ngang của văn bản trong một phần tử:
Ví dụ
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Thử nó cho mình »
Tài sản text-align làm thẻ <center> cũ đã lỗi thời.
Nội Style Sheet
Một phong cách trang nội bộ có thể được sử dụng nếu một tài liệu duy nhất có một phong cách độc đáo. Phong cách nội bộ được xác định trong phần <head> của một trang HTML, bằng cách sử dụng thẻ <style>, như thế này:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
Bên ngoài Style Sheet
Sheet bên ngoài là lý tưởng khi phong cách được áp dụng cho nhiều trang. Với một phong cách trang bên ngoài, bạn có thể thay đổi giao diện của một trang web toàn bộ bằng cách thay đổi một tập tin. Mỗi trang phải gắn với phong cách sử dụng thẻ <link>. Thẻ <link> đi bên trong phần <head>:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Tags và thuộc tính bị phản đối
Trong HTML 4, một số thẻ và thuộc tính được sử dụng để tài liệu phong cách. Các thẻ không được hỗ trợ trong phiên bản mới của HTML.
Tránh sử dụng các yếu tố: <font>, <center>, và <strike>, và các thuộc tính: màu sắc và bgcolor.
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét