Hướng dẫn lập trình web với PHP - Ngày 4

1. Hướng dẫn lập trình Web
Ngày 4
Nguyễn Như Tuấn

2. Nội dung
CSS
Tham khảo http://www.w3schools.com/css/
1. Internal và External Style
2. Quy tắc viết style
3. Style về Text
4. Style về Layout
5. Các hiệu ứng đặc biệt
6. Các Tip and Trick: Menu, Clearfix

3. Thứ tự override CSS
– Định nghĩa style sau sẽ nạp chồng những định nghĩa trước
đó
– Để chống nạp chồng sử dụng từ khóa !important
– File style sau sẽ nạp chồng file style trước.
– Tất cả các element đều có thuộc tính giống nhau, ngoại
trừ một số thuộc tính riêng biệt.
– Về lý thuyết có thể sử dụng CSS để thay đổi các thuộc
tính của bất kỳ đối tượng HTML nào. Có thể hoán đổi vị trí
các thẻ cho nhau.
– Mỗi element đều có những thuộc tính mặc định. Mỗi một
trình duyệt sẽ quy định những thuộc tính mặc định là khác
nhau. Để tránh những lỗi không đồng nhất, cần sử dụng
file reset.css để đưa tất cả những thuộc tính mặc định đó
về một chuẩn duy nhất.

4. 3 Style Text
• Font chữ
font-family: Gotham, "Helvetica Neue",
Helvetica, Arial, sans-serif;
• Cỡ chữ
font-size: 16px;
• Kiểu chữ nghiêng
font-style: italic | normal;
• Kiểu chữ đậm
font-weight: bold | normal;

5. 3 Style Text
• Màu chữ
color: red | #FF0000;
Màu theo tên: red, blue, green.
Màu theo mã màu HEX: #FF0000, màu nào có
mã giống nhau thì chỉ cần viết 3 chữ cái đầu. Ví dụ,
màu trắng: #FFFFFF. Chỉ cần viết là #FFF là được.
• Chữ gạch chân, gạch ngang
text-decoration: underline;
underline: gạch dưới
line-through; gạch ngang
overline: gạch trên đầu
none: không gạch

6. 3 Style Text
• Lùi đầu dòng
text-indent: 40px;
• Đổ bóng
text-shadow: 1px 1px 1px #CCCCCC;
text-shadow: horizontal vertical radius color;
• CHỮ HOA, chữ thường
text-transform: uppercase | lowercase | capitalize |
none;
• Không xuống dòng
white-space: nowrap | normal;

7. 3 Style Text
• Khoảng cách dòng
line-height: 24px;
• Khoảng cách ký tự
letter-spacing: 2px;
• Khoảng cách từ:
word-spacing: 20px;

8. 3 Style Text
• Căn lề
text-align: left | right | center | justify
• Subscript và Superscript text
vertical-align: sub | super;

9. 3 Style Text
• Thực hành 1
– Trình bày đoạn văn bản truyện theo format:
• H1
– Căn giữa
– Kích cỡ chữ 30
– Kiểu chữ capitalize
• Các paragraph:
– Căn lề justify
– Khoảng cách dòng 22px
– Paragraph cuối cùng có kiểu chữ nghiêng
– Các paragraph chẵn có mầu chữ là bue
• Tìm tất cả các strong có class là ten-nuoc:
– Màu chữ đỏ
– Chữ viết HOA
• Tìm tất cả các strong có class là thuc-dan:
– Màu chữ theo mã mầu #999999
– Chữ thường hết
– Bỏ chữ đậm đi

10. 3 Style Text
• Thực hành 2
– Trình bày đoạn văn bản truyện theo format:
• H1
– Căn giữa
– Kích cỡ chữ 30
– Màu chữ blue
• Các paragraph:
– Lùi đầu: 30px
– Căn lề justify
– Khoảng cách dòng 22px

11. 3 Style Text
• Thực hành 3
– Trình bày đoạn văn bản theo yêu cầu: Ôn
tập lại những thuộc tính cho văn bản đã
học. Đọc yêu cầu và làm theo.