Danh ngôn tình yêu: Tình yêu bắt đầu với nụ cười, lớn lên với nụ hôn, và kết thúc bằng giọt nước mắt.
Sử dụng trình duyệt ![[Bài 2] Viết CSS cơ bản](/images/icon/thumb.png "[Bài 2] Viết CSS cơ bản"){kind=icon}
Bài 2: Viết CSS cơ bản
Như bài 1 thì giờ ta đã biết tạo các class, id cũng như tag cần thiết trong css và lưu thành 1 file với định dạng .css
Tiếp theo ta sẽ bắt dầu viết css. Ở đây mình hướng dẫn các thuộc tính trong 1 class hoặc id hoặc tag nói chung. Mình chỉ làm trên class còn ID và tag thì giống vậy.
Tạo 1 class tên .dead {thuộc tính} thì thuộc tính nó gồm những gì? làm như thế nào?
- Thuộc tính của CSS 3(CSS này ngon nhất :D) rất nhiều nên mình hướng dẫn 1 số cơ bản, còn về nâng cao các bạn tự tìm hiểu nha.
Giờ mình sẽ viết 1 class chứa các thuộc tính cơ bản làm ví dụ
theo như trên ta có quy luật
tên thuộc tính: giá trị ;
- tên thuộc tính phải đúng chuẩn CSS 3
- giá trị: đúng các giá trị CSS 3
- mỗi thuộc tính cách nhau bởi dấu ;
* Các thuộc tính cơ bản
- border: là đường viền, ta có thể viết tắt hoặc chi tiết nhưng thường là viết tắt cho nhanh gọn và nhẹ file css
Ngoài kiểu solid còn có: dashed, dotted.....
Mã màu thì google nhé.
Ngoài cách trên ta có cách gọn hơn thay vì sử dụng: padding-left, padding-right....ta dùng
Các đơn vị có thể thay đổi.
Tương tự padding thì margin sẽ ngược lại: khoảng cách từ ngoài đến các phần tử.
- Để chú thích trong CSS ta dùng
Còn nhiều thuộc tính khác các bạn tìm hiểu thêm nhé :)
Như bài 1 thì giờ ta đã biết tạo các class, id cũng như tag cần thiết trong css và lưu thành 1 file với định dạng .css
Tiếp theo ta sẽ bắt dầu viết css. Ở đây mình hướng dẫn các thuộc tính trong 1 class hoặc id hoặc tag nói chung. Mình chỉ làm trên class còn ID và tag thì giống vậy.
Tạo 1 class tên .dead {thuộc tính} thì thuộc tính nó gồm những gì? làm như thế nào?
- Thuộc tính của CSS 3(CSS này ngon nhất :D) rất nhiều nên mình hướng dẫn 1 số cơ bản, còn về nâng cao các bạn tự tìm hiểu nha.
Giờ mình sẽ viết 1 class chứa các thuộc tính cơ bản làm ví dụ
.dead {
text-color: #0000ff; /*chữ xanh*/
font-weight: bold; /*chữ đậm*/
border: 1px solid #ff0000; /*đường viền*/
background: #000000; /*màu nền*/
Copy Code
theo như trên ta có quy luật
tên thuộc tính: giá trị ;
- tên thuộc tính phải đúng chuẩn CSS 3
- giá trị: đúng các giá trị CSS 3
- mỗi thuộc tính cách nhau bởi dấu ;
* Các thuộc tính cơ bản
- border: là đường viền, ta có thể viết tắt hoặc chi tiết nhưng thường là viết tắt cho nhanh gọn và nhẹ file css
border: 1px solid #000000; /*đường viền có độ mảnh 1px, kiểu solid, và màu là #000000 ĐEN*/
Copy Code
Ngoài kiểu solid còn có: dashed, dotted.....
Mã màu thì google nhé.
padding-left: 10px; /*khoảng cách từ đường viền đến văn bản phía trong bên trái*/
Copy Code
Ngoài cách trên ta có cách gọn hơn thay vì sử dụng: padding-left, padding-right....ta dùng
padding: 1px 2px 3px 4px /*theo thứ tự khoảng cách từ đường viền vào trong: 1px là phía trên, 2px là bên phải, 3px là dưới, 4px là bên trái*/
Copy Code
Các đơn vị có thể thay đổi.
Tương tự padding thì margin sẽ ngược lại: khoảng cách từ ngoài đến các phần tử.
- Để chú thích trong CSS ta dùng
//Chú thích trên 1 dòng
/* Chú thích trên nhiều dòng */
Copy Code
Còn nhiều thuộc tính khác các bạn tìm hiểu thêm nhé :)
Quét Virus: An toàn
