Tạo kiểu cách cho HTML với CSS

Dương Nguyễn

CSS là viết tắt của Cascading Style Sheets (tập tin định dạng theo tầng), mô tả cách các phần tử HTML hiển thị trên màn hình, giấy và các phương tiện khác. CSS có thể kiểm soát layout của nhiều trang web cùng một lúc.

CSS được thêm vào các phần tử HTML bằng 3 cách:

Inline - dùng các thuộc tính về kiểu cách (Style) trong các phần tử HTML
Internal - sử dụng phần tử <style> trong phần <head>
External - dùng tập tin CSS riêng

Cách phổ biến nhất là dùng một tập tin CSS riêng, nhưng ở đây chúng ta sẽ dùng 2 cách đầu tiên vì như vậy dễ mô tả và bạn đọc cũng dễ thực hành theo hơn.

Inline CSS

Inline CSS (CSS nội dòng) dùng để áp dụng một kiểu cách đặc biệt nào đó cho một phần tử HTML. CSS nội dòng dùng thuộc tính style của phần tử HTML. Ví dụ dưới đây sẽ tạo màu cho phần tử <h1> thành màu xanh.

<h1 style="color:blue;">Tiêu đề màu xanh</h1>

Internal CSS

Internal CSS (CSS nội bộ) dùng để định nghĩa cả một trang HTML, được khai báo trong phần <head> của trang HTML, trong phần tử <style>.

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>Tiêu đề</h1>
<p>Quản trị mạng.</p>

</body>
</html>

External CSS

External CSS (CSS ngoài) định nghĩa kiểu cách cho nhiều trang HTML bằng một tập tin ngoài (stylesheet). Với cách này, bạn có thể thay đổi diện mạo của cả website mà chỉ cần một tập tin CSS duy nhất.

Để sử dụng CSS ngoài, chỉ cần dẫn một đường link tham chiếu tới tập tin đó trong mục <head> của trang HTML.

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>Tiêu đề</h1>
<p>Quản trị mạng.</p>

</body>
</html>

Stylesheet này có thể viết trên bất kì trình soạn thảo văn bản nào. Tập tin không được chứa bất kì đoạn mã HTML nào và khi lưu phải có phần mở rộng là .css. Đây là ví dụ về một phần trong tập tin CSS này.

body {
    background-color: powderblue;
}
h1 {
    color: blue;
}
p {
   color: red;
}

CSS Font

color trong CSS xác định màu văn bản.
font-family xác định font chữ được sử dụng.
font-size xác định cỡ chữ sử dụng.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
   color: blue;
   font-family: verdana;
   font-size: 300%;
}
p {
   color: red;
   font-family: courier;
   font-size: 160%;
}
</style>
</head>
<body>

<h1>Tiêu đề bài viết</h1>
<p>Quản trị mạng.</p>

</body>
</html>

CSS Border

border xác định đường viền xung quanh phần tử HTML.

p {
   border: 1px solid powderblue;
}

CSS Padding

padding xác định khoảng trống giữa văn bản và đường viền.

p {
   border: 1px solid powderblue;
   padding: 30px;
}

CSS Margin

margin xác định phần lề, tức là khoảng trống bên ngoài đường viền.

p {
   border: 1px solid powderblue;
   margin: 50px;
}

Thuộc tính id

Thuộc tính id được dùng để xác định một kiểu cách nhất định cho một phần tử đặc biệt nào đó.

<p id="p01">Quản trị mạng là trang web về công nghệ</p>

Sau đó xác định kiểu cách cho phần tử này bằng id

#p01 {
   color: blue;
}

Lưu ý: id của một phần tử phải là duy nhất trong một trang.

Thuộc tính class

Khi cần định nghĩa một kiểu cách nhất định cho một loại đặc biệt nào đó của phần tử, hãy dùng thuộc tính class.

<p class="error">Tôi khác biệt.</p>

sau đó định nghĩa kiểu cách cho phần tử bằng lớp riêng.

p.error {
   color: red;
}

Tham chiếu ngoài

Stylesheet ngoài có thể được tập tin HTML tham chiếu tới bằng đường dẫn URL hoặc đường dẫn lên quan tới trang web hiện tại. Ví dụ dưới đây sử dụng đường dẫn đầy đủ tới một stylesheet.

<link rel="stylesheet" 
href="https://www.quantrimang.com/html/styles.css">

Ví dụ dưới đây dẫn tới một stylesheet đặt ở một thư mục HTML trên trang web hiện tại.

<link rel="stylesheet" href="/html/styles.css">

Ví dụ dưới đây dẫn tới một stylesheet đặt ở cùng thư mục trong trang hiện tại.

<link rel="stylesheet" href="styles.css">

Bài trước: Màu sắc trong HTML

Bài sau: Các đường dẫn trong HTML

Thứ Bảy, 12/05/2018 18:45

3,8 ★ 5 👨 4.255

Bạn nên đọc

Xác thực tài khoản!

Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:

Số điện thoại chưa đúng định dạng!