Tin tức
Cách sử dụng CSS trong HTML đơn giản nhất cho người mới bắt đầu
Nếu chỉ sử dụng HTML thì định dạng phần tử, kiểu phần tử phải ở cùng một vị trí với phần tử trong văn bản, điều này rất khó để bảo trì khi trang web phức tạp. Vì vậy hãy tìm hiểu về cách sử dụng CSS trong HTML để có thể định nghĩa kiểu, cách hiện thị cho các phần tử HTML. Mẫu website 24h sẽ hướng dẫn cách sử dụng CSS trong HTML đơn giản nhất cho người mới bắt đầu. Hãy cùng theo dõi đến cuối bài viết nhé.
Lý do cần sử dụng CSS trong HTML?
Chúng ta cần sử dụng CSS trong HTML vì nó cho phép định dạng kiểu và cách hiển thị của các phần tử HTML. CSS sẽ hỗ trợ bạn phân tách nội dung và cách trình bày trang. Nếu bạn chỉ sử dụng HTML thì việc định dạng các phần tử, kiểu phần tử phải ở cùng một vị trí với phần tử trong văn bản, việc này gây khó khăn cho việc bảo trì.
Những định dạng sẽ được loại bỏ khỏi văn bản HTML, định dạng sẽ được lưu vào một file CSS khi bạn sử dụng CSS.
Các khái niệm cần biết khi sử dụng CSS trong HTML
Property (Thuộc tính): Là thuộc tính của phần tử HTML, ví dụ như:
- Font-size (kích cỡ chữ của phần tử)
- Color (màu sắc chữ của phần tử)
- Background-color (màu nền của phần tử)
- …
Value (Giá trị): Là giá trị của thuộc tính.
Selector (Bộ chọn): Là phần tử mà bạn muốn định dạng.
Cú pháp định dạng phần tử
Để định dạng cho một phần tử, bạn sử dụng cú pháp sau:
selector {
property1: value;
property2: value;
property3: value;
.....
propertyN: value;
}Lưu ý:
- Phía sau mỗi cặp property : value phải được kết thúc bằng dấu chấm phẩy (;)
- Vấn đề xuống dòng và khoảng cách trong CSS là không quan trọng, đoạn mã ở ví dụ phía trên có thể viết lại như sau.
-
h1{font-size:40px;color:white;background-color:black;}p{background-color:gray;}
Các thuộc tính định dạng CSS quan trọng
1. Color (Màu sắc)
Thuộc tính Color dùng để thiết lập màu chữ cho phần tử. Xác định giá trị của thuộc tính theo:
- Tên màu
- Giá trị Hex
- Giá trị RGB
2. Background – color ( Màu nền)
Thuộc tính Background – color thiết lập màu nền cho phần tử. Xác định giá trị thuộc tính theo tên màu, giá trị Hex, giá trị RGB.
3. Font – size ( Cỡ chữ)
Thiết lập kích cỡ chữ cho phần tử. Giá trị thuộc tính xác định theo:
- px
- em (1em = 16px)
4. Font – family
Thiết lập kiểu chữ cho phần tử.
5. Text – align (Căn lề)
Căn lề cho nội dung của phần tử. Có 3 giá trị:
- Left: Căn lề trái
- Center: Căn lề giữa
- Right: Căn lề phải
6. Border
Tạo đường viền bao xung quanh phần tử.
7. Width, height (Chiều rộng – cao)
Thiết lập chiều rộng và chiều cao cho phần tử. Có thể xác định theo đơn vị px hoặc %.
Cách sử dụng CSS trong HTML
Chúng ta sẽ có 3 cách sử dụng CSS trong HTML là:
- Inline: mã CSS viết tại thuộc tính Style của phần tử HTML
- Internal: mã CSS trong chính văn bản HTML, nằm trong khối thẻ <style>
- External: mã CSS ở một file riêng biệt sau đó nạp vào HTML bằng phần tử <link>
1. Inline CSS
Ta đặt thuộc tính style vào thẻ mở của phần tử HTML, giá trị của thuộc tính style là các cặp thuộc tính định dạng CSS.
2. Internal CSS
Ta đặt các cặp thuộc tính định dạng CSS vào bên trong cặp thẻ <style type=”text/css”></style>
Cặp thẻ <style type=”text/css”></style> thì được đặt bên trong cặp thẻ <head></head>
3. External CSS
External CSS đặt các thuộc tính định dạng vào bên trong tập tin CSS.
Trong cặp thẻ <head></head> của tập tin HTML, ta dùng thẻ <link rel=”stylesheet’type=”text/css”hrè=”đường dẫn đến tập tin CSS”> để nhúng tin CSS vào trang web.
Thứ tự ưu tiên sử dụng CSS trong HTML
Khi thuộc tính của phần tử được thiết lập bởi nhiều cách, khi đó thuộc tính sẽ nhận giá trị của các cách sử dụng CSS theo thứ tự ưu tiên như sau:
1. Inline
2. Internal
3. External
Thứ tự ưu tiên trong một bộ định dạng
Trong một bộ định dạng của một phần tử, nếu một thuộc tính nào đó bị viết lập lại nhiều lần, thì thuộc tính đó sẽ nhận giá trị ở lần viết cuối cùng.
Kế thừa giá trị thuộc tính từ phần tử tổ tiên
Mặc định, nếu một phần tử không thiết lập giá trị cho thuộc tính thì thuộc tính đó sẽ nhận giá trị từ giá trị thuộc tính của phần tử chứa nó và ở gần nó nhất.
Cách ghi chú thích
Nếu bạn muốn vô hiệu hóa một số mã CSS với mục đích nào đó (ví dụ như để ghi nhớ, chú thích, hoặc test code) thì bạn đặt chúng vào bên trong cặp dấu /* */
Đoạn CSS nào nằm bên trong cặp dấu /* */ sẽ bị vô hiệu hóa
h1 {
/*color:red;
font-size:40px;*/
background-color:red;
/*Đây là một câu chú thích*/
}Lời kết
Các bạn đã hiểu tầm quan trọng khi sử dụng CSS trong HTML hay chưa. Qua những chia sẻ của Mẫu Website 24h, hi vọng các bạn có thể thực hiện và sử dụng CSS trong HTML một cách dễ dàng nhất. Chúc các bạn thành công, mọi thắc mắc hãy liên hệ với chúng tôi – Dịch vụ thiết kế website hàng đầu Việt Nam.