CHƯƠNG TRÌNH GIẢM 50% GIÁ TẤT CẢ CÁC GÓI HOSTING WORDPRESS => Link giảm 50%
Đây là bài học CSS cơ bản nhất mà chúng tôi gọi là “Bài học CSS đầu tiên” cho những ai chưa từng nghe qua về thuật ngữ CSS.
1. HMTL cơ bản
Trước khi bắt đầu học cơ bản về CSS, tôi có đoạn HTML như bên dưới. Tốt nhất là bạn nên lưu thành một file index.html để việc học được thuận tiện hơn.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Học Css cơ bản dễ hiểu</title>
</head>
<body>
<!-- Begin: Chú ý đoạn này thôi nhé-->
<div id="id-cha" class="my-class-1 my-class-2 my-class-n">
<div id="id-con-1" class="my-child">
<a href="#">Bài học Css3 cơ bản</a>
</div>
<div id="id-con-2" class="my-child">
<a href="#">Bài học Css3 nâng cao</a>
</div>
</div>
<!-- End: Chú ý đoạn này thôi nhé-->
</body>
</html>
Giải thích:
div, a là những thẻ HTML hay còn gọi là tag. Thẻ HTML có nhiều loại khác nhau, ngoài div, a còn có một số thẻ khác như: html, body, header, footer, span, img, b, i….Để thiết kế website đẹp hơn, bạn có thể học HTML nâng cao tại link này https://www.w3schools.com/tags/default.asp.
Mỗi một thẻ html được tạo ra như sau, bao gồm thẻ mở và thẻ đóng, trong mỗi thẻ có chứa nhiều thẻ con khác. Chúng có một id không trùng với id của bất kì thẻ nào khác, mặc dù bạn có thể đặt id giống nhau, không có bất kì lỗi nào xảy ra nhưng đó là điều cho là không hợp lệ.
Trong khi đó class có thể khai báo nhiều class khác nhau chúng cách nhau bởi một khoảng trắng, và các class của một thẻ cũng không đươc giống nhau, class có thể giống nhau ở các thẻ khác hoặc có thể giống một trong các class của thẻ cha của chúng. Ngoài 2 thuộc tính chính là ID và CLASS thì mỗi thẻ cũng có các thuộc tính khác mà bạn có thể tự định nghĩa cho chúng, ví dụ như data-page=”10″ chẳng hạn. Để rõ hơn bạn nên xem đoạn code sau đây:
<!-- Begin: Đây là một thẻ html cơ bản--> <div id="id-cha" class="my-class-1 my-class-2 my-class-n"> </div> <!-- Begin: Đây là một thẻ html cơ bản-->
Có thể nhận thấy thẻ DIV vừa khai báo trên có id là id-cha và có 3 class: my-class-1, my-class-2, my-class-n.
Tốt rồi, mục đích tạo ra các ID và CLASS để chúng ta dễ định dạng CSS cho các thẻ và đây là trọng tâm của bài học hôm nay.
2. Cách khai báo CSS
Có nhiều cách khai báo CSS khác nhau như:
- Khai báo thẻ <style type=”text/css”></style>.
- Tách riêng thành 1 file css có đuôi là .css ( đây là cách tối ưu hiện nay các website dùng nhiều nhất ).
- Khai báo ngay trong thuộc tính style của thẻ.
- Bạn có thể dùng cà javascript cũng có thể định dạng css cho các thẻ HTML nữa.
Trong bài này tôi sẽ chọn cách đơn giản nhất là dùng thẻ STYLE trong file html nhé. Cụ thể được khai báo như sau:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Học Css cơ bản dễ hiểu</title>
</head>
<style type="text/css">
/*Đây là ghi chú trong CSS*/
</style>
<body>
<div id="id-cha" class="my-class-1 my-class-2 my-class-n">
<div id="id-con-1" class="my-child">
<a href="#">Bài học Css3 cơ bản</a>
</div>
<div id="id-con-2" class="my-child">
<a href="#">Bài học Css3 nâng cao</a>
</div>
</div>
</body>
</html>
3. Bắt đầu học CSS cơ bản
3.1 Cú pháp CSS
Để dùng css bạn có thể sử dụng một trong các cách sau nhé:
Cách gọi css với ID của thẻ html: # + id thẻ
#id-cha{ /*Chỉ những thẻ nào có id = id-cha có tác dụng*/
//khai báo thuộc tính trong đây
}
Cách gọi css với Class của thẻ html: dấu chấm + class thẻ
.my-class-1{ /*Tất cả các thẻ nào có chứa class là my-class-1 có tác dụng*/
}
Cách gọi css bằng thẻ html:
div{ /*Tất cả những thẻ DIV có tác dụng*/
}
a{ /*Tất cả những thẻ a có tác dụng*/
}
div a{ /*Tất cả những a là con của thẻ DIV có tác dụng*/
}
Cách gọi css kết hợp ID với thẻ:
div#id-cha{
}
Cách gọi css kết hợp CLASS với thẻ:
div.my-child{ /*Chỉ những thẻ DIV có class = my-child mới có tác dụng */
}
Cách gọi css với ID kết hợp với Class thẻ:
#id-cha.my-class-1{
}
Cách gọi css kết hợp nhiều Class thẻ:
.my-class-1.my-class-2.my-class-n{
}
Cách gọi css ID kết hợp nhiều Class thẻ:
#id-cha.my-class-1.my-class-2.my-class-n{
}
Cách gọi css theo kiểu CHA – CON
#id-cha #id-con-1{ /*Chỉ thằng con có ID = id-con-1 có tác dụng*/
}
#id-cha .my-child{ /*Tất cả những thằng con có class = my-child có tác dụng*/
}
#id-cha a{ /*Tất cả những thằng con là thẻ a có tác dụng*/
}
#id-cha .my-child a{
}
3.2 Thuộc tính CSS
Tất cả những thuộc tính của CSS được nằm giữa dấu { và }, có nhiều thuộc tính và chúng cách nhau bởi đấu chấm phẩy ( ; ). Sau đây là ví dụ một số thuộc tính cơ bản trong css:
#id-cha .my-child a{
color:#f00f00; /* hoặc có thể dùng màu theo tên bằng tiếng anh: color:red; */
font-size:20px;
text-decoration:none;
}
*Chú ý thêm:
Không phải tất cả các thuộc tính đều giống nhau ở các thẻ, mà một số thẻ đặc biệt sẽ có thêm những thuộc tính chỉ cho riêng mình mà các thẻ khác không có, ví dụ như thuộc tính text-decoration có ở thẻ A nhưng sẽ không có tác dụng ở thẻ DIV hay IMG.
Hoặc một số thuộc tính chỉ có tác dụng khi một thuộc tính khác được khai báo, chúng cần kết hợp cùng nhau, ví dụ như z-index chỉ có hiệu lực khi đã khai báo position chẳng hạn. Nhưng hiện tại bạn đừng quá quan tâm về vấn đề này nhé.
3.3 Kết quả
Như vậy ta sẽ có một file html với nội dung như sau:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Học Css cơ bản dễ hiểu</title>
</head>
<style>
body{
background:#cccccc;
}
#id-cha .my-child a{
color:#f00f00; /* hoặc có thể dùng màu theo tên bằng tiếng anh: color:red; */
font-size:20px;
text-decoration:none;
background:url('bg.jpg');
position:
}
</style>
<body>
<div id="id-cha" class="my-class-1 my-class-2 my-class-n">
<div id="id-con-1" class="my-child">
<a href="#">Bài học Css3 cơ bản</a>
</div>
<div id="id-con-2" class="my-child">
<a href="#">Bài học Css3 nâng cao</a>
</div>
</div>
</body>
</html>
Và kết quả như hình:
Như vậy sau bài học này bạn đã phần nào hiểu được cơ chế hoạt động của CSS như thế nào rồi phải không? Css là một phần không thể thiếu trong quá trình thiết kế web, đặc biệt: Nếu bạn đã làm biết thiết kế web wordpress rồi mà không biết Css là một phần thiếu sót cần phải khắc phục ngay nhé!
CHƯƠNG TRÌNH GIẢM 50% GIÁ TẤT CẢ CÁC GÓI HOSTING WORDPRESS => Link giảm 50%