Tạo kiểu 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 để các phần tử HTML style .

CSS có thể được thêm vào HTML trong những cách sau đây:

Nội bộ - bằng cách sử dụng <style> yếu tố trong phần <head>
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
Bên ngoài - sử dụng CSS bên ngoài tập tin

Cách ưa thích để thêm CSS vào 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 bạn đến CSS bằng cách sử dụng thuộc tính Style. 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 (Inline Styles)

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ỳ thuộc tính 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ề của một đoạn văn:

<p style="color:blue;margin-left:20px;">This is a paragraph.</p>

HTML Style (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 Style Example - Font, Color and Size

Font-family, color, and font-size xác định phông 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>

Font-gia đình, màu sắc, và tính font-size làm cho tag cũ đã lỗi thời.

HTML Style Example - 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>

Text-align làm thẻ <center> cũ đã lỗi thời.

Internal Style Sheet

Một Style trang nội bộ có thể được sử dụng nếu một tài liệu duy nhất có một Style độc đáo. Style nội bộ được xác định trong phần head của một trang HTML, bằng cách sử dụng các từ khóa <style>, như thế này:

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

External Style Sheet

Sheet bên ngoài là lý tưởng khi Style đượ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 trong phần <head>:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML Style Tags

Tag	Description
<style>	Defines style information for a document
<link>	Defines the relationship between a document and an external resource

Deprecated Tags and Attributes

Trong HTML 4, một số thẻ và thuộc tính được sử dụng để tài liệu được 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.

Nguồn: Sưu Tầm