Bài này tôi sẽ viết khái quát về CSS và cách thêm CSS trong HTML. Nếu các bạn muốn tìm hiểu toàn diện về CSS, hãy đón xem series học CSS toàn tập của tôi.
1. CSS là gì?
CSS là viết tắt của chữ Cascading Style Sheet.
CSS bố cục các phần tử HTML được hiển thị như thế nào thông qua các trình duyệt.
Thông qua CSS các bạn có thể kiểm soát bố cục của nhiều trang web cùng một lúc.
2. Cách thêm CSS vào phần tử HTML
CSS có thể được thêm vào các phần tử HTML theo 03 cách:
+ Inline – bằng cách sử dụng thuộc tính Style trong các phần tử HTML (Cái này tôi đã viết ở bài định dạng văn bản với thuộc tính Style)
+ Internal – bằng cách sử dụng thẻ <style> trong phần <head>
+ External – bằng cách sử dụng một file CSS riêng.
Cách phổ biến nhất để thêm CSS hiện nay là dùng External nghĩa là sử dụng một file CSS riêng. Tuy nhiên, nếu bạn là người mới bắt đầu thì tôi khuyên bạn nên dùng Inline hay Internal cho đến khi thuần thục sau đó hãy dùng External. (vì bạn sẽ không mất thời gian tạo tập tin, không những thế khi bạn dùng inline hay internal nó sẽ hiển thị kết quả ngay thông qua các trang web trung gian mà tôi đã giới thiệu cho bạn ở bài trước Các công cụ soạn thảo code trực tuyến)
Ưu khuyết điểm của các cách trên
– Inline và internal
+ Thích hợp với việc chèn một vài đoạn CSS ngắn.
+ Trình duyệt không mất thời gian tải tập tin CSS.
+ Nhưng nó sẽ khó quản lý nếu bạn có rất nhiều đoạn CSS và nó nằm rải rác khắp nơi trong các file HTML. Nó cũng không thích hợp khi bạn chèn nhiều đoạn CSS dài.
– External
– Thích hợp với việc chèn nhiều đoạn CSS, dễ quản lý.
– Nhưng trình duyệt sẽ mất thêm thời gian để tải tập tin CSS.
3. Inline CSS
Inline CSS áp dụng cho một phần tử HTML.
Inline CSS dùng thuộc tính Style trong một thẻ HTML
Để cho các bạn dễ hiểu tôi sẽ ví dụ như sau đặt màu (color) văn bản của phần tử <h1> thành màu xanh lam (blue) như hình dưới
4. Internal CSS
Internal CSS áp dụng cho một trang HTML
Internal CSS được định nghĩa trong phần <head> của một trang HTML, bên trong một phần tử <style>
Để các bạn dễ hiểu tôi sẽ ví dụ như hình dưới
5. External CSS
External CSS áp dụng cho nhiều trang HTML
Với External CSS bạn có thể thay đổi giao diện của toàn bộ trang web bằng cách thay đổi một tập tin.
Để dùng cách này, bạn cần làm theo các bước sau:
Bước 1: Tạo tập tin có đuôi .css với tên bất kỳ. Hiện nay ở các trang web người ta thường dùng tên là styles.css
Lưu ý thêm rằng bạn có thể dùng bất cứ chương trình soạn thảo văn bản nào để tạo nhưng bạn phải lưu lại với đuôi .css
Ví dụ tôi tạo tập tin như ở dưới với tên là binhnet.css
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
Bước 2: Thêm vào tập tin HTML bằng thẻ <link> và thẻ này phải đặt bên trong cặp thẻ <head> như hình dưới
Như hình trên, trong đó:
+ Thuộc tính rel là khai báo loại tập tin
+ Thuộc tính href là đường dẫn khai báo tên tập tin .css
Ngoài ra bạn cần lưu ý thêm rằng như hình trên thì tập tin binhnet.css của tôi nằm tại thư mục gốc (root). Nếu tập tin binhnet.css của tôi nằm trong thư mục html mà thư mục html nằm ngang hàng với thư mục gốc (root) thì tôi có thể viết đường dẫn với đầy đủ URL như hình dưới
hoặc tôi cũng có thể viết đường dẫn như hình dưới
Các tập tin hoặc thư mục nằm tại thư mục gốc thì nó sẽ có dạng như các ví dụ sau:
– http://ift.tt/2vrxU5r như ví dụ này thì taptin.html là nằm tại thư mục gốc (root).
– http://binhnet.com/html như ví dụ này thì thư mục html nằm ngang hàng với thư mục gốc (root).
Ở đây các bạn lưu ý thêm rằng thuộc tính href là đường dẫn khai báo tên tập tin vì vậy nó sẽ liên quan đến hai loại đường dẫn. Đó là đường dẫn tuyệt đối (absolute path) và đường dẫn tương đối (relative path). Cái này tôi sẽ nói rõ hơn trong bài các liên kết (links), đường dẫn tuyệt đối (absolute path) và đường dẫn tương đối (relative path) trong HTML ở series này.
6. Thứ tự ưu tiên giữa các cách thêm CSS vào phần tử HTML
Nếu một thuộc tính nào đó của phần tử được thiết lập giá trị bởi nhiều cách, thì thuộc tính đó sẽ nhận giá trị của cách sử dụng CSS dựa theo độ ưu tiên như sau:
+ Ưu tiên 1: Inline CSS
+ Ưu tiên 2: Internal CSS
+ Ưu tiên 3: External CSS
+ Ưu tiên 4: Kiểu mặc định của trình duyệt
Mức độ ưu tiên sẽ giảm dần từ trên xuống dưới
7. 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.
Như hình trên bạn thấy thuộc tính color của phần tử <h1> sẽ nhận giá trị ở lần viết cuối cùng là blue
8. Thuộc tính type=”text/css” có cần thiết trong thẻ <link>
Cách 1: <link rel=”stylesheet” type=”text/css” href=…>
Cách 2: <link rel=”stylesheet” href=…>
Cả hai cách viết trên đều đúng trong HTML5. Nhưng đối với phiên bản cũ hơn của HTML thì nó đòi hỏi cách 1.
Riêng tôi, các bài viết tôi đều viết theo phiên bản mới nhất là HTML5 nên tôi viết theo cách 2 và tôi thấy không có vấn đề với tính tương thích ngay cả khi thử nghiệm các phiên bản cũ của IE.
Nếu các bạn muốn tìm hiểu kỹ hơn có thể vào xem tại 02 trang web:
+ Trang web: http://ift.tt/2wRnb7S
+ Trang web: http://ift.tt/2vrRI8O
9. CSS Fonts
– Thuộc tính color của CSS xác định màu chữ sẽ được sử dụng
– Thuộc tính font-family của CSS xác định phông chữ sẽ được sử dụng
– Thuộc tính font-size xác định kích thước chữ sẽ được sử dụng
10. CSS Border
Thuộc tính border của CSS xác định một đường viền xung quanh một phần tử HTML.
11. CSS Padding
Thuộc tính padding của CSS xác định khoảng trống giữa văn bản và đường viền
12. CSS Margin
Thuộc tính margin của CSS xác định một khoảng trắng tính từ bên ngoài biên
13. Thuộc tính id
Để xác định một style cụ thể cho một phần tử đặc biệt, ta thêm một thuộc tính id vào phần tử. Sau đó xác định một style cho các phần tử với id cụ thể.
Lưu ý: id của một phần tử phải là duy nhất trong một trang, vì vậy id chỉ được sử dụng để chọn một phần tử duy nhất.
Để xác định một phần tử HTML bằng tên id, ta sử dụng cú pháp #tên id.
Để cho các bạn dễ hiểu hơn tôi lấy ví dụ như hình dưới
Lưu ý: Tên id chỉ được phép chứa chữ cái, chữ số, dấu gạch dưới ( _ ), dấu gạch nối ( – )
Tên id không nên bắt đầu bằng chữ số
14. Thuộc tính class
Thuộc tính class dùng để đặt tên cho các phần tử HTML muốn có cùng một kiểu định dạng.
Để xác định phần tử HTML bằng tên class, ta sử dụng cú pháp .tên class
Để các bạn dễ hiểu hơn tôi lấy ví dụ như hình dưới
Lưu ý: Tên class chỉ được phép chứa chữ cái, chữ số, dấu gạch dưới ( _ ), dấu gạch nối ( – )
Tên class không nên bắt đầu bằng chữ số
15. Lời cuối bài
Qua bài này chắc các bạn đã biết được cách thêm CSS trong HTML.
Vì bài này khá dài nên tôi tạm dừng ở đây còn về phần bài tập về nó tôi sẽ viết ở bài kế tiếp.
The post [HTML bài 14] Phần lý thuyết về cách thêm CSS trong HTML appeared first on Học online.
from WordPress http://ift.tt/2w7XGyc
via IFTTT
Không có nhận xét nào:
Đăng nhận xét