Home
Trong bài đầu tiên này mình sẽ hướng dẫn cho các bạn về cơ bản về CSS, qua đó các bạn đó thể hiểu hơn và dễ đàng tùy biến code CSS.
I.CSS là gì?
CSS tên đầy đủ là Cascading Style Sheets hiểu một cách đơn giản thì đó là một ngôn ngữ lập trình web giúp ta trang trí và bố cục trong trang web được đẹp mắt hơn. CSS cung cấp cho bạn rất thuộc tính để tùy biến các đối tượng với sự hiệu quả cao.
II.Cú pháp
Ví dụ: Để định màu nền cho trang web là màu xanh lá cây trong HTML thì chúng ta dùng code "<body bgcolor=”#00ff00”>" hoặc "<body style=”background-color: #00ff00”>"
Còn trong CSS thì bạn dùng cú pháp "body {background-color: #00ff00;}" hoặc "body {background-color: green;}"
Từ đó ta có thể thấy CSS được sử dụng với cú pháp cơ bản là
{ : mở thuộc tính khai báo
property : tên thuộc tính
value : giá trị
} : đóng thuộc tính khai báo
Trong CSS, ngoài việc viết selectorname tạo tên thẻ HTML thì chúng ta có thể đặt tên theo thuộc tính class và id trong thẻ HTML.
Ví dụ chúng ta thẻ body với thuộc tính class <body class="classcuabody">
Thì sẽ có selectorname là .classcuabody
Hoặc thẻ body với thuộc tính id là <body id="idcuabody">
Thì sẽ có selectorname là #classcuabody
2 thuộc tính class và id được phân loại bởi 2 dáu "." và dấu "#"
III.Đặc điểm của CSS
1. Khai báo và sử dụng với nhiều hình thức khác nhau
Khi bạn muốn áp dụng file CSS của bạn trong trang web thì bạn có thể thêm vào trong thẻ head đoạn code sau:
Còn nếu bạn muốn viết CSS ngay trên trang HTML thì bạn tạo thẻ
Hoặc bạn cũng có thể CSS cho từng thẻ một trong trang web bằng cách thêm thuộc tính style ở trong thẻ đó. VD:
2. Kế thừa
Ví dụ bạn có một thẻ <div id="gcs"></div> với thuộc tính được khai báo trước là
I.CSS là gì?
CSS tên đầy đủ là Cascading Style Sheets hiểu một cách đơn giản thì đó là một ngôn ngữ lập trình web giúp ta trang trí và bố cục trong trang web được đẹp mắt hơn. CSS cung cấp cho bạn rất thuộc tính để tùy biến các đối tượng với sự hiệu quả cao.
II.Cú pháp
Ví dụ: Để định màu nền cho trang web là màu xanh lá cây trong HTML thì chúng ta dùng code "<body bgcolor=”#00ff00”>" hoặc "<body style=”background-color: #00ff00”>"
Còn trong CSS thì bạn dùng cú pháp "body {background-color: #00ff00;}" hoặc "body {background-color: green;}"
Từ đó ta có thể thấy CSS được sử dụng với cú pháp cơ bản là
- Code:
selectorname {
property:value;
}
{ : mở thuộc tính khai báo
property : tên thuộc tính
value : giá trị
} : đóng thuộc tính khai báo
Trong CSS, ngoài việc viết selectorname tạo tên thẻ HTML thì chúng ta có thể đặt tên theo thuộc tính class và id trong thẻ HTML.
Ví dụ chúng ta thẻ body với thuộc tính class <body class="classcuabody">
Thì sẽ có selectorname là .classcuabody
Hoặc thẻ body với thuộc tính id là <body id="idcuabody">
Thì sẽ có selectorname là #classcuabody
2 thuộc tính class và id được phân loại bởi 2 dáu "." và dấu "#"
III.Đặc điểm của CSS
1. Khai báo và sử dụng với nhiều hình thức khác nhau
Khi bạn muốn áp dụng file CSS của bạn trong trang web thì bạn có thể thêm vào trong thẻ head đoạn code sau:
- Code:
<link rel="stylesheet" href="/link.css" type="text/css" />
Còn nếu bạn muốn viết CSS ngay trên trang HTML thì bạn tạo thẻ
- Code:
<style type="text/css">
</style>
Hoặc bạn cũng có thể CSS cho từng thẻ một trong trang web bằng cách thêm thuộc tính style ở trong thẻ đó. VD:
- Code:
<div style="font-size:18px"></div>
2. Kế thừa
Ví dụ bạn có một thẻ <div id="gcs"></div> với thuộc tính được khai báo trước là
- Code:
#gcs {
line-height: 15px;
width: 300px;
height: 150px;
}
- Code:
#gcs {
line-height: 20px;
box-shadow: 2px 2px 4px #343434;
}
- Code:
#gcs {
line-height: 20px; /* Khai báo này sẽ thay thế cho khai báo cũ */
width: 300px;
height: 150px;
box-shadow: 2px 2px 4px #343434;
}
