Bài hướng dẫn HTML, CSS & Javascript cơ bản hôm nay sẽ giới thiệu về CSS
Phần trước mình đã có bài cơ bản về HTML rồi, nghĩa là đã có bộ xương, giờ chúng ta thêm da và thịt, mặc quần áo vào cho đẹp nhé 😀
Nội dung
II. Hướng dẫn CSS cơ bản :
1. Cấu trúc CSS:
Cú pháp cơ bản của CSS bao gồm 3 phần: vùng chọn (selector), thuộc tính (property) và giá trị (value).
selector {
property-1: value-1;
property-2: value-2;
}- Vùng chọn : là cách xác định các thẻ HTML dựa trên cấu trúc phân cấp của HTML. Vùng chọn có thể được tạo nên dựa trên nhiều yếu tố. Xem vùng chọn phổ biến
- Thuộc tính: là yếu tố bạn muốn thay đổi ở các thẻ HTML thuộc vùng chọn. Danh sách các thuộc tính có thể xem thêm tại W3S.
- Giá trị: mỗi thuộc tính sẽ yêu cầu một giá trị khác nhau. Đó có thể là 1 từ khóa định sẵn như
Các bạn xóa file demo.html chưa vậy :)) nếu chưa thì chúng ta tiếp tục nhé.
2. Cách viết CSS
CSS thường được viết theo 3 cách :
- Viết trong thẻ style giống cấu trúc ở trên. <style>#container { background-color : red; }</style> (thẻ này thường đặt ở trong và cuối thẻ head)
<!DOCTYPE html>
<html>
<head>
<title>Đây là title nơi xuất hiện ở cái tab trên trình duyệt</title>
<style>
#container{
background-color : red;
color : white;
}
</style>
</head>
<body id="container" >
<h1>Thẻ heading lớn nhất</h1>
</body>
</html>- Viết trực tiếp trong thuộc tính style của thẻ html. Ví dụ : <div id=”container” style=”backgound-color: red”></div>
<!DOCTYPE html>
<html>
<head>
<title>Đây là title nơi xuất hiện ở cái tab trên trình duyệt</title>
</head>
<body id="container" style="background-color : red; color : white;">
<h1>Thẻ heading lớn nhất</h1>
</body>
</html>- Viết sang 1 file có đuôi .css và sau đó include vào file .html. Bạn hãy tạo 1 file style.css cùng folder với file demo.html
File demo.html thì bạn thêm 1 dòng <link rel=”stylesheet” href=”style.css”> như này
<!DOCTYPE html>
<html>
<head>
<title>Đây là title nơi xuất hiện ở cái tab trên trình duyệt</title>
<link rel="stylesheet" href="style.css"><!-- Thêm dòng này-->
</head>
<body id="container">
<h1>Thẻ heading lớn nhất</h1>
</body>
</html>Còn file style.css thì không cần thẻ <style> và viết rút gọn như này
#container {
background-color : red;
color : white;
}Viết kiểu nào cũng ra kết quả như nhau thôi :v
Demo đơn giản nên xấu xấu vậy thôi, chứ nó là bước đệm để bạn trở nên pro hơn đấy. Tin tui đi :))
3. Tips :
- Luôn đóng ngoặc khi mở ngoặc { }
- Kết thúc mỗi thuộc tính có chấm phẩy (;) và enter xuống hàng
- Nên viết file riêng và nhúng vào file html -> giúp code của bạn ngắn gọn hơn và dễ quản lý
- Nhớ các vùng chọn cơ bản, các thuộc tính cơ bản và tất nhiên phải làm nhiều mới quen được
- Thực hành trực tiếp trên Google Chrome bằng cách Nhấn F12 ở Window hoặc Command + Option + i ở Macbook
4. Các vùng chọn CSS (selector) phổ biến :
<div id="container">
<h2 id="title">Solution seeking</h2>
<p>Hướng dẫn HTML, CSS & Javascript cơ bản - Thiết kế website wordpress</p>
<div class="5s-quang-cao">
<p class="5s-quang-cao">Thiết kế website giá rẻ tại Vũng Tàu và HCM</p>
<p class="5s-quang-cao">Thiết kế website web-app, làm chatbot, thiết kế ứng dụng Android và iOS.</p>
</div>
</div>- #ID
Dấu # được sử dụng để chọn một thẻ HTML có định danh cụ thể (ID). Do đó, bản chất của việc sử dụng ID là duy nhất mỗi trang, không thể tái sử dụng. Hãy chắc chắn rằng việc gán ID cho thẻ HTML và chọn thẻ này bằng ID này là cách duy nhất bạn có thể định dạng cho nó. Ví dụ từ đoạn code trên #title là vùng chọn định danh của thẻ <h2>
- .Class
Dấu “.” đại diện cho tên lớp. Nhiều thẻ HTML có thể có cùng tên lớp. Do đó, sự khác nhau giữa ID và Class là: ID chỉ cho phép chọn 1 phần tử, còn Class cho phép bạn chọn nhiều thẻ HTML cùng lúc. Ví dụ từ đoạn code trên .5s-quang-cao là vùng chọn class của 2 thẻ <p> và 1 thẻ <div> - A.Class
Vùng chọn này giúp xác định tất cả các thẻ HTML cùng thuộc một lớp. Ví dụ từ đoạn code trên p.5s-quang-cao là vùng chọn class của 2 thẻ <p> - A B
Vùng chọn này còn được gọi là vùng chọn hậu duệ (descendant). Vùng chọn này sẽ xác định tất cả các thẻ B nằm bên trong thẻ A, không kể phân cấp, ngôi thứ như là con, là cháu, là chắt chút chít gì đó. Hậu duệ B cách thẻ cha 1 A dấu cách. Ví dụ từ đoạn code trên #container p là vùng chọn hậu duệ của 3 thẻ <p> - A > B
Vùng chọn này còn được gọi là vùng chọn con (child), và có nét tương đồng với vùng chọn hậu duệ. Tuy nhiên, vùng chọn này chỉ xác định tất cả các thẻ B là con trực tiếp (1 cấp) của thẻ A, chứ không nằm bên trong thẻ nào khác. Ví dụ từ đoạn code trên #container > p là vùng chọn con của 1 thẻ <p> đầu tiên
Kết luận :
Các vùng chọn ở trên là hay được sử dụng nhất. Tuy nhiên bạn có thể xem tất cả các vùng chọn ở trang w3Schools
Kết thúc phần này các bạn sẽ biết được cấu trúc cơ bản của file css, các mẹo nhỏ khi viết code và các vùng chọn sử dụng thường xuyên.
Vẫn câu nói này, muốn nhớ và trở nên pro thì nên rèn luyện nhiều hơn nhé. Chúc các bạn may mắn <3
