Tạo Kiểu Cách Cho HTML Với CSS
Có thể bạn quan tâm
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.
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
Từ khóa » Chỉnh Css Trong Html
-
Cách Sử Dụng CSS Trong HTML - Web Cơ Bản
-
Cách Sử Dụng CSS Trong Trang Web HTML
-
Cách Sử Dụng CSS Trong HTML Và Thuộc Của Tính CSS - Blog | Got It AI
-
CSS Là Gì Cách Nhúng Mã CSS Vào HTML
-
[HTML/HTML5] Phần 13: Phong Cách CSS Trong HTML | DAMMIO
-
Liên Kết Css Với Html - Học Css Cơ Bản đến Nâng Cao - VietTuts
-
Ba Cách Dùng CSS điều Chỉnh Style Cho Trang Web - ge
-
HTML Styles - CSS - TEDU
-
Thẻ Style Trong HTML
-
3 Cách Chèn CSS Vào HTML Website Bạn Biết Chưa?
-
CSS Là Gì? Các Ví Dụ Cụ Thể Về CSS - Vietnix
-
Tạo Menu Ngang Trong HTML CSS Chỉ Với 5 Bước - Vietnix
-
Reset Css Và Sử Dụng Reset Css - Viblo
-
Hướng Dẫn Và Ví Dụ HTML Styles - Openplanning