Cafedev chia sẻ cho các bạn về CSS, trong phần này chúng ta sẽ đi và hiểu cơ bản về CSS, để có đủ kiến thức cho các bài tìm hiểu tiếp theo về HTML. Để học nâng cao hơn bạn có thể tham khảo ở đây.
Bạn hãy nhớ rằng để làm đẹp hơn cho UI làm từ HTML thì bạn phải biết thêm CSS, Vì vậy chúng luôn đi chung với nhau.
CSS là viết tắt của Cascading Style Sheets.
CSS tiết kiệm rất nhiều công việc. Nó có thể kiểm soát bố cục của nhiều trang web cùng một lúc.
Nội dung chính
1. CSS là gì?
Cascading Style Sheets (CSS) được sử dụng để định dạng bố cục của trang web.
Với CSS, bạn có thể kiểm soát màu sắc, phông chữ, kích thước văn bản, khoảng cách giữa các yếu tố, cách các yếu tố được định vị và bố trí, hình ảnh nền hoặc màu nền nào sẽ được sử dụng, hiển thị khác nhau cho các thiết bị và kích thước màn hình khác nhau, và nhiều hơn!
Mẹo: Xếp tầng từ có nghĩa là một kiểu được áp dụng cho phần tử cha cũng sẽ áp dụng cho tất cả các phần tử con trong phần cha mẹ. Vì vậy, nếu bạn đặt màu của văn bản body thành “màu xanh”, tất cả các tiêu đề, đoạn văn và các thành phần văn bản khác trong body cũng sẽ có cùng màu (trừ khi bạn chỉ định một cái gì đó khác)!
2. Sử dụng CSS
CSS có thể được thêm vào tài liệu HTML theo 3 cách:
- Nội tuyến(Inline) – bằng cách sử dụng thuộc tính
stylebên trong các thành phần HTML - Nội bộ(Internal) – bằng cách sử dụng phần tử
stylebên trong phần<head> - Bên ngoài(External) – bằng cách sử dụng phần tử
<link>để liên kết đến tệp CSS bên ngoài
Cách phổ biến nhất để thêm CSS, là giữ các kiểu trong các tệp CSS bên ngoài. Tuy nhiên, trong hướng dẫn này, chúng ta sẽ sử dụng các kiểu nội tuyến và nội bộ, bởi vì điều này dễ thể hiện hơn và dễ dàng hơn để bạn tự thử.
3. Cách dùng CSS kiểu Nội tuyến
Kiểu nội tuyến được sử dụng để áp dụng một kiểu duy nhất cho một thành phần HTML duy nhất.
CSS nội tuyến sử dụng thuộc tính style của thành phần HTML.
Ví dụ sau đây đặt màu văn bản của phần tử <h1> thành màu xanh lam và màu văn bản của phần tử <p> thành màu đỏ:
<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p> 4. Cách dùng CSS kiểu Nội bộ
Một CSS nội bộ được sử dụng để xác định kiểu cho một trang HTML.
CSS bên trong được xác định trong phần <head> của trang HTML, bên trong phần tử <style>
Ví dụ sau đây đặt màu văn bản của TẤT CẢ các phần tử <h1> (trên trang đó) thành màu xanh lam và màu văn bản của TẤT CẢ các phần tử <p> thành màu đỏ. Ngoài ra, trang sẽ được hiển thị với màu nền “Powderblue”:
<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> 5. Cách dùng CSS kiểu bên ngoài
Một biểu định kiểu ngoài được sử dụng để xác định kiểu cho nhiều trang HTML.
Để sử dụng biểu định kiểu bên ngoài, hãy thêm một liên kết đến nó trong phần <head> của mỗi trang HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> Kiểu bên ngoài có thể được viết trong bất kỳ trình soạn thảo văn bản nào. Tệp không được chứa bất kỳ code HTML nào và phải được lưu với phần mở rộng .css.
Đây là cách tập tin “Styles.css” trông như thế nào:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}Mẹo: Với kiểu bên ngoài, 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!
6. Colors, Fonts vs Sizes trong CSS
Ở đây, chúng ta sẽ trình bày một số thuộc tính CSS thường được sử dụng. Bạn sẽ tìm hiểu thêm về chúng sau này.
Thuộc tính color CSS xác định màu văn bản sẽ được sử dụng.
Thuộc tính font-family CSS xác định phông chữ sẽ được sử dụng.
Thuộc tính font-size CSS xác định kích thước văn bản sẽ được sử dụng.
<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> 7. Viền – CSS Border
Thuộc tính border trong CSS xác định đường viền xung quanh thành phần HTML.
Mẹo: Bạn có thể xác định đường viền cho gần như tất cả các thành phần HTML.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 2px solid powderblue;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>8. CSS Padding
Thuộc tính padding trong CSS xác định phần đệm (khoảng trắng) giữa văn bản và đường viền.
<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 2px solid powderblue;
padding: 30px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
9. CSS Margin
Thuộc tính margin trong CSS xác định lề (khoảng trắng) bên ngoài đường viền.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 2px solid powderblue;
margin: 50px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
10. Liên kết file CSS ở bên ngoài
Các kiểu bên ngoài có thể được tham chiếu với một URL đầy đủ hoặc với một đường dẫn liên quan đến trang web hiện tại.
Ví dụ này sử dụng URL đầy đủ để liên kết đến một biểu định kiểu:
<link rel="stylesheet" href="https://cafedev.vn/html/styles.css"> Ví dụ này liên kết đến một biểu định kiểu nằm trong thư mục html trên trang web hiện tại:
<link rel="stylesheet" href="/html/styles.css"> Ví dụ này liên kết đến một biểu định kiểu nằm trong cùng thư mục với trang hiện tại:
<link rel="stylesheet" href="styles.css"> Trên đây chỉ là các phần rất cơ bản về CSS, bạn nên tham khảo và tìm hiểu thêm tự học CSS tại đây.
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
