Tóm Tắt
Cách sử dụng CSS trong HTML
CSS là gì?
CSS ( Cascading Style Sheets ) là một ngôn từ dùng để định dạng cho những thành phần HTML ( Ví dụ : chỉnh kích cỡ chữ, chỉnh font chữ, màu chữ, màu nền, hình nền, đường viền, …. ) dựa trên những cặp thuộc tính : giá trị thuộc tính
Với việc sử dụng CSS, ta hoàn toàn có thể định dạng ra những thành phần HTML thật đặc biệt quan trọng và chuyên nghiệp .
Hướng dẫn học Lập Trình Web
Theo phong cách học từ a đến z
Bạn đang đọc: Cách sử dụng CSS trong HTML
Hướng dẫn học HTML
Hướng dẫn học CSS
Cách sử dụng CSS
Có ba cách để sử dụng CSS : Inline, Internal, External
1) Inline CSS
Ta đặt thuộc tính style vào thẻ mở của thành phần HTML, giá trị của thuộc tính style là những cặp thuộc tính định dạng CSS ( Bạn hoàn toàn có thể tìm hiểu thêm cách sử dụng CSS bằng Inline trong bài Thuộc tính Style trong HTML ) .
Ví dụ :
Xem 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ẻ
Cặp thẻ
thì được đặt bên trong cặp thẻ
Ví dụ :
Xem ví dụ
Để định dạng cho một thành phần, ta sử dụng cú pháp :
element {
property1 : value;
property2 : value;
property3 : value;
....
propertyN : value;
}
Ví dụ :
heading 1
heading 2
heading 3
Xem ví dụ
3) External CSS
Với Internal CSS :
- Ta đặt các thuộc tính định dạng vào bên trong cặp thẻ
- Rồi cặp thẻ
thì đặt bên trong cặp thẻ
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 tập tin CSS vào trang web.
Ví dụ :
Tôi 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
Hello HTML
Màn hình trình duyệt sẽ hiển thị là
Xem thêm: Khối finally trong Java
Cách tạo tập tin CSS giống với cách tạo tập tin HTML (thay .html bằng .css) |
Một số thuộc tính định dạng CSS quan trọng
Thuộc tính | Ý nghĩa | Xem ví dụ |
---|---|---|
color |
Thiết lập màu chữ cho thành phần. Giá trị của thuộc tính color hoàn toàn có thể xác lập theo :
|
Xem ví dụ |
background-color | Thiết lập màu nền cho thành phần. Giá trị của thuộc tính background-color hoàn toàn có thể xác lập theo tên màu, giá trị Hex, giá trị RGB giống như thuộc tính color . | Xem ví dụ |
font-size |
Thiết lập kích cỡ chữ cho thành phần. Giá trị của thuộc tính font-size hoàn toàn có thể xác lập theo :
|
Xem ví dụ |
font-family |
Thiết lập kiểu chữ cho thành phần. Dưới đây là một số ít kiểu chữ phổ cập :
|
Xem ví dụ |
text-align |
Canh lề cho nội dung của phần tử. Thuộc tính text-align có ba giá trị:
|
Xem ví dụ |
border |
Tạo đường viền bao xung quanh thành phần. Giá trị của thuộc tính border có 3 tham số :
|
Xem ví dụ |
width, height | Thiết lập chiều rộng và chiều cao cho thành phần. Có thể xác lập theo đơn vị chức năng px hoặc % | Xem ví dụ |
Sau khi xem xong bài viết này, chúng tôi khuyến khích bạn học HTML song song với loạt bài Hướng dẫn sử dụng CSS để đạt được hiệu suất cao cao nhất . |
Source: https://final-blade.com
Category: Kiến thức Internet