[BÀI 1] Giới thiệu về CSS, học CSS như thế nào?
1-CSS là gì? -CSS là chữ viết tắt của cụm từ ‘ Cascading Style Sheets’ -CSS được dùng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (ví dụ HTML ). -CSS sẽ tác động thay đổi cách hiển thị mặc định của HTML để tạo ra một giao diện đẹp và lung linh hơn. ...
1-CSS là gì?
-CSS là chữ viết tắt của cụm từ ‘Cascading Style Sheets’
-CSS được dùng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (ví dụ HTML ).
-CSS sẽ tác động thay đổi cách hiển thị mặc định của HTML để tạo ra một giao diện đẹp và lung linh hơn.
-Ví dụ về thế mạnh của CSS : Nếu bạn muốn thay font chữ của toàn bộ trang web mà không có CSS, bạn phải thực hiện thay đổi font chữ của từng file html. Nhưng nếu có CSS, bạn chỉ cần thay đổi ở file CSS và tất cả sẽ thay đổi.
2-Các loại style CSS cơ bản
-Nền trang Web (background): x-color, x-image, x-repeat, x-attachment, x-position
-Văn bản
+Heading: text-align, text-transform, color, ..
+Paragraph: indented, aligned, space, ..
-Font chữ: font-family, font-style, font-size, ..
-Liên kết: text-decoration, background-color, ..
-Danh sách: list-style-type, list-style-image, ..
-Bảng biểu: border, awidth, height, text-align, padding, color, ..
-Hộp (chung): awidth, padding, border, margin, ..
Css thường được sử dụng trong ngôn ngữ lập trình web php phải không?
3-Ba cách áp dụng CSS trong tài liệu
-Inline style :
Sử dụng thuộc tính style của thẻ để định dạng, là cách dùng style ngay trong câu lệnh, bổ sung thêm thuộc tính style vào sau một phần tử HTML.
Ví dụ :
|
1 2 3 4 |
<thẻ style=“thuộc tính:giá trị; thuộc tính:giá trị;….”> Nội dung </thẻ > <b style="color:navy;">Màu xanh nước biển.</b> |
+ Một inline style áp dụng cho bất cứ thẻ nào và chỉ có tác dụng trên chính thẻ đó!
+ Dùng inline style làm cho tài liệu rõ ràng hơn, nhưng cũng có thể dẫn đến việc viết mã quá nhiều và thiếu sự nhất quán trên toàn site!
+ Làm cho mã nguồn bị dư thừa, khó bảo trì!
-Internal style sheet :
+Định nghĩa style bên trong <head> của tài liệu
+ Áp dụng thống nhất cho toàn trang web
+Định nghĩa riêng một khối, phân biệt bởi thẻ <style > và được đặt trong phần head của tài liệu
+Khối này là một tập các style rule (quy tắc về kiểu dáng), trong đó mỗi quy tắc định nghĩa style cho một phần tử hay nhóm phần tử HTML.
Ví dụ :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<head> <style type="text/css"> b { text-transform:lowercase; font-size:18px } p { border: silver thick solid; background-color:pink } </style> </head> <body> <p> đoạn văn bản có viền màu bạc - <b>CHữ THường ĐậM </b></p> </body> |
-External style sheet :
+Liên kết đến một tập tin *.css chứa toàn bộ style sử dụng
trong tài liệu
+ Áp dụng cho toàn site
+Tạo một tập tin có phần mở rộng là *.css bên ngoài HTML, sử dụng thẻ <link> trong phần <head> để liên kết tập tin này trong HTML.
|
1 |
<link rel="stylesheet" type="text/javascript" href="demo.css"> |
+Các style rule chứa riêng biệt trong file *.css và hoạt động tương tự như internal style sheet.
4-Học CSS như thế nào?
-Mỗi người có một nền tảng kiến thức khác nhau nên việc học CSS ở mỗi người là khác nhau.
-Các nguồn tài liệu : hiện nay internet phát triển, việc học CSS nói riêng cũng như các ngôn ngữ lập trình nói chung rất tiện ích và đơn giản. Các bạn có thể lên google search với từ khóa “Tài liệu CSS,…” hoặc lên youtube search với từ khóa “hướng dẫn học CSS,…”.
5-Kết luận :
Ở những bài sau chúng ta sẽ cùng đi tìm hiểu kĩ về từng style của CSS. Hy vọng sau serie này các bạn có thể nắm chắc được kiến thức cơ bản về CSS
Để tìm hiểu chi tiết hơn, các bạn có thể tham khảo các khóa học tại đây.!!!
Tìm hiểu thêm về khóa học:
- Tự hoc lap trinh ios tại nhà có được không?
- Bộ lap trinh android cơ bản
