HTML CSS

18/01/2020

Bài sau » « Bài trước

Định dạng HTML với CSS

CSS là chữ viết tắt của Cascading Style Sheets.

CSS mô tả cách mà cách phần tử HTML sẽ hiển thị lên màn hình, thiết bị đa phương tiện,.. như thế nào.

Có 3 cách chèn CSS vào trong tài liệu HTML:

  • Inline : Bằng cách dùng thuộc tính style của phần tử HTML.
  • Internal : Bằng cách dùng thẻ <style> trong thẻ <head>.
  • External : Bằng cách dùng thẻ <link> của phần tử HTML.

Chú ý: Bạn có thể học thêm về các thuộc tính CSS ở trang này : CSS Cơ bản

Inline CSS

Inline CSS được sử dụng để áp dụng style riêng biệt cho một thành phần HTML riêng biệt đó. Và nó sử dụng thuộc tính style trong thẻ HTML. Xem ví dụ bên dưới:

<h1 style="color:blue;">Tiêu đề này có màu xanh.</h1>

Internal CSS

Internal CSS (CSS Nội bộ) dùng để định dạng cho 1 trang đơn lẻ. Chỉ áp dụng cho trang hiện tại.

Internal CSS được định nghĩa trong phần <head> của trang web, nằm bên trong thẻ <style>.

<!DOCTYPE html> <html> <head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>

External CSS

External CSS được dùng để định dạng cho nhiều trang HTML khác nhau.

Với External CSS bạn có thể thay đổi bố cục của trang web chỉ với việc chỉnh sửa 1 file CSS

Để khai báo và sử dụng External CSS ta chỉ cần thêm nó vào phần <head> của trang web và nằm trong thẻ <link>. Xem ví dụ dưới đây:

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>

External CSS có thể được viết bằng bất cứ editor nào tùy bạn thích. Và nó có đuôi mở rộng là .css

Ví dụ file "styles.css" ở trên ta viết như sau:

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

CSS Font

Thuộc tính CSS color định nghĩa màu của văn bản.

Thuộc tính CSS font-family định nghĩa font chữ được dùng cho trang web.

Thuộc tính CSS font-size định nghĩa kích cỡ của văn bản.

Ví dụ ta có đoạn CSS sau:

h1 { color: blue; // Thẻ h1 có chữ màu XANH font-family: verdana; // Font chữ là Verdana font-size: 300%; // Kích thước gấp 3 lần so với khai báo của thẻ body }

CSS Border

Thuộc tính CSS border định nghĩa đường viền bao quanh phần tử HTML.

Ví dụ:

p { border: 1px solid blue; // Thẻ p có đường viền 1px màu XANH }

CSS Padding

Thuộc tính CSS padding xác định khoảng cách từ nội dung của thẻ HTML đến đường border của nó.

Ví dụ:

p { border: 1px solid blue; // Thẻ p có đường viền 1px màu XANH padding: 30px; // Khoảng cách từ văn bản đến đường viền là 30px }

CSS Margin

Thuộc tính CSS margin xác định khoảng cách từ thẻ HTML này đến thẻ HTML khác. Nói cách khác là khoảng cách bên ngoài border của phần tử HTML đó.

Ví dụ:

p { border: 1px solid blue; // Thẻ p có đường viền 1px màu XANH margin: 50px; // Khoảng cách từ thẻ p đến các phần tử khác là 50px }

Thuộc tính ID

Để định nghĩa 1 phần tử đặc biệt, ta có thể dùng thuộc tính id.

<p id="p01">Tôi là duy nhất.</p>

Và trong CSS ta viết nó bắt đầu bằng dấu thăng (#):

#p01{ color: blue; }

Thuộc tính id của phần tử HTML là duy nhất trong 1 trang web. Vì vậy khi ta dùng id selector tức là ta đang tìm 1 phần tử duy nhất!

Thuộc tính Class

Dùng để định nghĩa các phần tử đặc biệt hoặc giống nhau. Ta dùng thuộc tính class.

<p class="txt">Đây là đoạn văn bản.</p>

Và trong CSS ta viết nó bắt đầu bằng dấu dấu (.):

.txt{ color: tomato; }

Bài sau » « Bài trước
Back to top