CSS là ngôn ngữ tạo phong cách cho trang web. Biết cách sử dụng CSS trong HTML, ta có thể định dạng ra các phần tử HTML thật đặc biệt và chuyên nghiệp. Bài viết sau đây sẽ giúp bạn hiểu hơn về CSS cũng như cách sử dụng nó.
Mục lục
Khái niệm về CSS
Cascading Style Sheets, hay còn gọi là CSS, là một ngôn ngữ tạo phong cách cho trang Web. Về mặt ngữ nghĩa, ta có thể hiểu như sau:
- Cascading là cách làm việc của CSS.
- Style Sheets điều khiển cách hiển thị các nội dung của trang web.
CSS là một ngôn ngữ dùng để định dạng các phần tử HTML như chỉnh kích cỡ, font chữ, màu chữ, màu nền, đường viền, hình nền,…
Chúng ta có thể định dạng ra các phần tử HTML một cách chuyên nghiệp và đặc biệt thông qua việc sử dụng CSS.
CSS và HTML luôn đi cùng nhau. Cấu trúc và nội dung các phần tử trong trang do HTML tạo ra còn CSS sẽ quy định cách hiển thị phần tử như thế nào trên trang.
Lý do cần dùng CSS?
Chúng ta cần dùng CSS vì nó cho phép bạn định nghĩa kiểu và cách hiển thị các phần tử HTML. Từ đó, CSS sẽ hỗ trợ bạn phân tách nội dung và cách trình bày trang. Nếu chúng ta chỉ sử dụng HTML thì việc đị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 thật sự khó cho việc bảo trì.
Các định dạng sẽ được loại bỏ khỏi văn bản HTML, định dạng được lưu vào một file CSS khi sử dụng CSS.
Cách sử dụng CSS trong HTML
Chúng ta sẽ có ba 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 trong 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.
Ví dụ:
| <!DOCTYPE html><html><body><img src=”http://webcoban.vn/image/h2.jpg” style=”width:200px;height:100px”></body></html> |
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>
Ví dụ:
| <!DOCTYPE html><html><head> <style type=”text/css”> h1 { font-size:30px; color:white; background-color:red; } p { background-color:gray; } </style></head><body> <h1>webcoban.vn (WEB CƠ BẢN .VN)</h1> <p>Hướng dẫn học lập trình web từ cơ bản đến nâng cao</p></body></html> |
3. External CSS
Với External CSS, ta đặ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.
Ví dụ:
Có một tập tin dinhdang.css (cùng cấp với tập tin HTML) có nội dung là:
| h1 { color:red; font-size:50px; font-family:Courier;} |
Khi thực thi tập tin HTML có nội dung:
| <!DOCTYPE html><html> <head> <link rel=”stylesheet” type=”text/css” href=”dinhdang.css”> </head> <body> <h1>Hello HTML</h1> </body></html> |
4. Thứ tự ưu tiên các cách sử dụng CSS
Khi một thuộc tính nào đó của phần tử được thiết lập bởi nhiều cách, thì thuộc tính sẽ nhận giá trị của các cách sử dụng CSS theo độ ưu tiên như sau:
1. Inline
2. Internal
3. External
Các thuộc tính định dạng CSS quan trọng
1. Color
Thuộc tính này 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
Thuộc tính 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
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ề cho nội dung của phần tử. Có 3 giá trị:
- left: căn lề cho nội dung nằm bên trái
- center: căn lề cho nội dung nằm ở giữa
- right: căn lề cho nội dung nằm bên phải
6. Border
Tạo đường viền bao xung quanh phần tử.
7. Width, height
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 %.
Bài viết trên đây là một số thông tin cho những ai đang quan tâm đến cách sử dụng CSS trong HTML. Hy vọng bài viết sẽ đem đến nhiều thông tin hữu ích cho bạn trên con đường lập trình của mình.
