Trang chủ>Hướng dẫn làm wap>

Bài 1: Cách dùng CSS
Muốn có wap đẹp cần cái này
Để tạo 1 CSS ta có 2 cách:
1. tạo file định dạng .css để chứa code css
2. dùng thẻ <style> để tạo css
VD:
<?php
<style>Nội dung CSS</style>
?>
Chú ý: Cách 1 ta có thẻ dùng cho toàn wapsite với 1 đoạn code đơn giản (nói sau). Cách hai sẽ phức tạp hơn nếu muốn áp dụng cho nhiều site (nói chung không chỉ xtgem).
*CSS có 3 loại thuộc tính quan trọng
1. Class của CSS: bắt đầu bằng dấu chấm "." và kí tự tiếp theo không được dùng số
VD:
<?php
.dead {các thuộc tính} là đúng
?>


<?php
.1dead {các thuộc tính} là sai
.12345 {các thuộc tính} là sai
?>

2. ID của CSS: Bắt đầu bằng dấu # và kí tự đầu tiên tiếp theo không được viết bằng số.
VD:
<?php
#dead {các thuộc tính} là đúng
?>


<?php
#1dead {các thuộc tính}

hoặc

#12345 {các thuộc tính} là sai
?>
3. Tag trong CSS: Trong HTML các bạn thường dùng các thẻ như <b> để in đậm text, <i> để in nghiêng text. Để CSS tác động vào nó ta sử dụng các tag tương tự: xem VD.
VD: ta có đoạn code
<?php
<b>Hướng dẫn tạo wap</b>
?>
Để css tác động lên nó ta viết
<?php
b {font-color: red;}
?>
Vậy là ta đã làm cho tất cả chữ nằm trong thẻ <b> thành màu đỏ.
* Cách chèn CSS vào wap:
<?php
<link type="text/css" rel="stylesheet" href="LINK CSS"/>
?>
Xong Bài 1.
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 đầ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) 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 (có thể tìm ở trang HocWebChuan).

Giờ mình sẽ viết 1 class chứa các thuộc tính cơ bản làm ví dụ.

<?php
.dead {
text-color: #0000ff; /*chữ xanh*/
font-weight: bold; /*chữ đậm*/
border: 1px solid #ff0000; /*đường viền*/
background: #000000; /*màu nền*/
?>

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.

<?php
border: 1px solid #000000; /*đường viền có độ mảnh 1px, kiểu solid, và màu là #000000 ĐEN*/
?>

Ngoài kiểu solid còn có: dashed, dotted.....
Mã màu thì google nhé.

<?php
padding-left: 10px; /*khoảng cách từ đường viền đến văn bản phía trong bên trái*/
?>

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

<?php
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*/
?>

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

<?php
//Chú thích trên 1 dòng
/* Chú thích trên nhiều dòng */
?>

Còn nhiều thuộc tính khác các bạn tìm hiểu thêm nhé