CSS là ngôn ngữ giúp trang web trở nên sành điệu và chuyên nghiệp. Bài viết này sẽ giúp bạn hiểu rõ hơn về CSS và cách sử dụng nó để tạo phong cách độc đáo cho trang web của bạn.
Khái niệm về CSS
css là viết tắt của Cascading Style Sheets, ngôn ngữ tạo ra phong cách cho trang web. Đơn giản dễ hiểu, CSS có 2 khái niệm chính:
- "Cascading" là cách CSS hoạt động.
- "Style Sheets" quyết định cách hiển thị nội dung trên trang web.
CSS dùng để định dạng các phần tử HTML, từ kích thước, font chữ, màu sắc, đường viền đến hình nền.
Lý do cần sử dụng CSS
CSS cho phép bạn xác định kiểu và cách hiển thị các phần tử HTML. Điều này giúp bạn tách biệt nội dung và cách trình bày trang web. Nếu chỉ dùng HTML mà không sử dụng CSS, việc định dạng phần tử và kiểu phần tử phải được thực hiện trong cùng một văn bản, gây khó khăn trong việc bảo trì.
Bằng cách lưu các định dạng vào một file CSS riêng biệt, các định dạng sẽ được loại bỏ khỏi văn bản HTML.
Cách sử dụng CSS trong HTML
Có ba cách sử dụng CSS trong HTML:
1. Inline CSS
Ta đặt thuộc tính style vào thẻ mở của phần tử HTML và giá trị của thuộc tính style là các cặp thuộc tính định dạng CSS.
Ví dụ:
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ẻ
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ẻ của tập tin HTML, ta dùng thẻ để nhúng CSS vào trang web.
Ví dụ:
Thứ tự ưu tiên các cách sử dụng CSS
Khi một thuộc tính của phần tử được thiết lập bởi nhiều cách, thì thuộc tính sẽ có giá trị theo thứ tự ưu tiên sau:
- Inline
- Internal
- 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ử. Có thể sử dụng tên màu, giá trị Hex hoặc giá trị RGB.
2. Background - color
Thuộc tính này thiết lập màu nền cho phần tử. Có thể sử dụng tên màu, giá trị Hex hoặc giá trị RGB.
3. Font - size
Thuộc tính này thiết lập kích thước chữ cho phần tử. Có thể sử dụng đơn vị px hoặc em (1em = 16px).
4. Font - family
Thuộc tính này thiết lập kiểu chữ cho phần tử.
5. Text - align
Thuộc tính này căn lề cho nội dung của phần tử. Có 3 giá trị: left, center, right.
6. Border
Thuộc tính này tạo đường viền xung quanh phần tử.
7. Width, height
Thuộc tính này thiết lập chiều rộng và chiều cao cho phần tử. Có thể sử dụng đơn vị px hoặc %.
Bài viết trên đây chỉ là một số thông tin cơ bản về cách sử dụng CSS trong HTML. Hi vọng nó sẽ giúp bạn trên con đường lập trình của mình.