Trong quá trình thiết kế web việc nắm bắt CSS là một yếu tố không thể thiếu. Nói dễ hiểu thì CSS giống như 1 chiếc áo khoát lên website của bạn, tất cả những gì bạn thấy được bao gồm màu sắc, font chữ, cỡ chữ, đường viền, bóng đỗ, sắp xếp vị trí các module trên website... đều do CSS quyết định. Trong phạm vi bài viết này mình sẽ hướng dẫn một số CSS thường sử dụng trong quá trình thiết kế template blogger.
1. Một số khái niệm:
Module: là 1 thành phần trong website của bạn. Nói dễ hiểu thì bạn cứ xem module như 1 cái hộp chứa 1 số thứ trong đó, ví dụ như chứa link, hình ảnh, bài viết, tiện ích... và kể cả module khác bên trong nó. Website blogger được cấu thành từ rất nhiều module ví dụ như header, footer, sidebar...2. Chèn thuộc tính css cho module và gọi module ra.
Class: là tên của module và 1 class có thể được sử dụng nhiều lần trong website của bạn.
Class có dạng .Ten-Class {css1; css2; css3;...; cssn}
ID: tương tự như class, id cũng là tên của module nhưng mỗi id chỉ được sử dụng 1 lần trong website của bạn.
ID có dạng #Ten-ID {css1; css2; css3;...; cssn}
Với css1; css2; css3;...; cssn là các thuộc tính mình sẽ đề cập ở mục 5.
a. Vị trí đặt Class và ID
Class và ID có thể đặt vào template theo 1 trong 3 cách sau:
1. Đặt trước thẻ ]]></b:skin>
2. Đặt bên trong thẻ
<style type='text/css'> vị trí đặt các class và id </style>
và đặt toàn bộ đoạn code trên phía dưới thẻ ]]></b:skin>
3.Đặt trực tiếp các thuộc tính vào module lúc gọi module ra.
<div class='TEN_MODULE' style='css1; css2; css3; ...'>Nội dung module</div>
b. Gọi module hiện ra web3. Chèn thuộc tính css cho link, ảnh bên trong module.
Module được gọi ra bằng thẻ div hoặc span hoặc 1 số thẻ khác (thông thường mình chỉ dùng thẻdiv) và đặt bên trong <body> vị trí đặt thẻ div để gọi module ra </body> (thẻ <body> ... </body> có sẵn trong template bạn ko được tạo thêm) cụ thể như sau:<body>Chú ý: 1 module có thể vừa có class vừa có id (giống đoạn code màu cam ở trên) và sẽ có thuộc tính css của cả class và id.
...
<div class='Ten-Class 1'>
Nội dung bên trong module 1
</div>
<div id='Ten-Id 1'>
Nội dung bên trong module 2
</div>
<div class='Ten-Class 1' id='Ten-ID 2'>
Nội dung bên trong module 3
</div>
...
</body>
Ở phần này mình ví dụ 1 module có class là .ABC và id là #XYZ. Module này chứa 1 link vd như www.voquocan.com và 1 tấm hình trong đó. Vậy để đặt thuộc tính css cho link và hình trong module trên ta làm như sau:
a. Đối với link:
Như các bạn đã biết thì link có code dạng <a href="http://www.voquocan.com/">võ quốc an blog</a>. Nói dể hiểu là link nằm trong thẻ <a ...>...</a> nên để cài thuộc tính cho link trong 1 class hay ID thì ta làm như sau:
.ABC a{css1; css2; css3;...} //thuộc tính của link trong class ABC//
.ABC a:hover{css4; css5; css6;...} //thuộc tính của link trong class ABC khi rê chuột vào//
.ABC a:visited{css7; css8; css9;...} //thuộc tính của những link trong class ABC đã xem qua//
hoặc
#XYZ a {css1; css2; css3;...}
#XYZ a:hover {css4; css5; css6;...}
#XYZ a:visited {css7; css8; css9;...}
b. Đối với ảnh:4.Rút gọn css:
Tương tự như link, ảnh thường nằm trong thẻ <img ...>...</img> hoặc <img .../> nên để cài thuộc tính cho ảnh ta làm như sau:
.ABC img {css1; css2; css3;...} //đây là thuộc tính của ảnh trong class ABC//
.ABC img:hover {Nội dung thuộc tính} //đây là thuộc tính của ảnh trong class ABC khi rê chuột vào ảnh//
hoặc
#XYZ img {css1; css2; css3;...}
#XYZ img:hover {css4; css5; css6;...}
Ví dụ mình có 3 css sau:
.ABC {color:#000000}Thì ta sẽ rút gọn thành
.ABC {background: #cccccc}
.ABC {border: 1px solid #999999}
.ABC {color:#000000; background:#cccccc; border:1px solid #999999}Tiếp tục mình có 3 css sau:
.ABC {color:#000000; background:#cccccc; border:1px solid #999999}Ta sẽ rút gọn thành
#DEF {color:#000000; background:#cccccc; border:1px solid #999999}
.XYZ a {color:#000000; background:#cccccc; border:1px solid #999999}
.ABC, #DEF, .XYZ a {color:#000000; background:#cccccc; border:1px solid #999999}Trong quá trình thiết kế bạn sẽ thấy có khá nhiều module có thuộc tính tương tự nhau nên việc rút gọn các css một cách hợp lý sẽ cải thiện rất nhiều đến tốc độ load trang web của bạn.
5. Các thuộc tính css: mỗi thuộc tính bên dưới mình sẽ đưa vào 1 bài viết để hướng dẫn chi tiết. Nhấp vào thuộc tính để xem.
01. Background (nền module)
02. Border (Đường viền cho một module, ảnh)
03. Border-radius (bo góc module, ảnh)
04. Box-shadow (Bóng đổ cho module, ảnh)
05. Clear (Dừng float module, ảnh) (float xem mục 08.)
06. Color (Màu chữ)
07. Display (Sắp xếp hoặc ẩn module)
08. Float (Sắp xếp vị trí module)
09. Font (Kiểu chữ trong module)
10. Height - Width (Chiều cao - rộng module)
11. Line-height (Chiều cao dòng chữ)
12. List-style (dấu • định dạng đầu link)
13. Margin (khoảng cách giữa các module)
14. Max-height và Min-height (Chiều cao tối đa - tối thiểu module. Chiều ngang tương tự)
15. Opacity (Độ trong suốt của một module, ảnh)
16. Overflow (Nội dung vượt ra khỏi module)
17. Padding (Khoãng cách từ biên module đến phần nội dung bên trong)
18. Position (Vị trí tương đối của một module)
19. Text (Thuộc tính về chữ của module)
20. Z-index (Sắp xếp module trên dưới)
21. Transition (tạo hiệu ứng chuyển động)
Một số css khác bạn có thể tham khảo tại đây
6. Tổng kết:
Cơ bản các css thường dùng thì chỉ bao nhiêu đó thôi và tất nhiên còn rất nhiều css khác nữa nhưng hiếm khi dùng đến nên mình không đề cập trong bài viết tổng hợp này. Nếu bạn gặp khó khăn gì trong việc viết ra các đoạn css này thì để lại comments bên dưới, mình sẽ cố gắng trả lời trong thời gian sớm nhất có thể. Chúc bạn thành công!
Theo ThuThuat.VoQuocCan.Com
Không có nhận xét nào:
Đăng nhận xét