Cách sử dụng CSS trong HTML và thuộc của tính CSS cho người mới học lập trình
CSS là một ngôn ngữ dùng để tạo phong cách cho trang web. Nó cho phép bạn định dạng các phần tử HTML và tạo ra các hiệu ứng thị giác đặc biệt để tăng tính chuyên nghiệp và thẩm mỹ của trang web. Bằng cách sử dụng CSS trong HTML, bạn có thể thiết kế và định dạng trang web của mình một cách linh hoạt hơn, giúp cho trang web trở nên đẹp hơn và thu hút được sự chú ý của người dùng.
Để sử dụng CSS trong HTML, bạn có thể định nghĩa các quy tắc CSS bằng cách sử dụng các selector và khai báo style. Selector được sử dụng để chỉ định các phần tử HTML nào sẽ được áp dụng style, còn khai báo style sẽ chứa các thuộc tính và giá trị để định dạng cho các phần tử HTML đó.
Khái niệm về CSS
Cascading Style Sheets, được gọi tắt là CSS, là một ngôn ngữ được sử dụng để tạo ra phong cách cho trang web. CSS hoạt động theo cách "cascading", có nghĩa là các quy tắc được áp dụng cho một phần tử HTML sẽ "tràn" (cascading) xuống các phần tử HTML con của nó.
Bằng cách sử dụng CSS trong HTML, chúng ta có thể tùy chỉnh cách hiển thị các nội dung của trang web, từ kích thước, font chữ, màu sắc cho đến các thuộc tính khác như đường viền, hình nền... Nhờ đó, chúng ta có thể tạo ra các phần tử HTML đặc biệt và chuyên nghiệp hơn, giúp trang web trông đẹp hơn và dễ đọc hơn. Bài viết sau đây sẽ giúp bạn hiểu hơn về CSS và cách sử dụng nó.
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> |
Màn hình trình duyệt sẽ hiển thị là:
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
Chúng ta có thể thiết lập chiều rộng và chiều cao cho các phần tử HTML bằng CSS. Khi thiết lập chiều rộng và chiều cao, chúng ta có thể sử dụng các đơn vị đo lường khác nhau như pixel (px) hoặc phần trăm (%).
Ngoài ra, CSS còn cung cấp nhiều thuộc tính khác để tùy chỉnh các phần tử HTML, như định dạng chữ, màu sắc, đường viền, hình nền, v.v.
Bài viết trên cung cấp một số thông tin hữu ích 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ẽ giúp bạn hiểu rõ hơn về CSS và cách sử dụng nó trong lập trình web.
Nhận xét
Đăng nhận xét