|
07 Bây giờ ta sẽ đi sâu vào phần Style cho nội dung (content). Trong phần này chủ yếu là định hình font chữ, khổ chữ, khoảng cách (padding, margin...)
Trong file Css thành phần body được định nghĩa riêng và thường được đặt trên đầu để trình duyệt có thể tìm và định hình ngay.
body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
color: #666666;
background: #ffffff;
}
Để trình bày nội dung cho đẹp, ta định dạng cho h2 và p sẽ cách dòng chữ bên dưới 1 khoảng 15px
|
|
08 Ở phần trước chúng ta đã có được phần nội dung của cột bên phải và đưa phần nội dung đó nằm ở vị trí mình muốn. Trong phần này chúng ta sẽ bắt đầu làm đến phần Header. Đây có thể coi là phần quan trọng tạo nên phong cách của cả website. Nếu làm tốt phần này thì giao diện của website nhìn sẽ rất bắt mắt.
Trước tiên ta tách phần logo và phần header thành 2 bức ảnh khác nhau.
{mosimage}
Và logo được cắt riêng.
|
|
Vậy là chúng ta đã có một trải nghiệm mới về CSS thông qua cách mà CSS điều khiển và cung cấp các thuộc tính cho một đối tượng trên website (đối tượng có thể là một đoạn văn bản, hình ảnh hay dòng kẻ, thậm chí là từng ký tự).
Cấu trúc của CSS rất đơn giản, bao gồm 3 thành phần chính là Đối tượng - Thuộc tính - Giá trị.
#abc { padding-top: 10px; }
Trong ví dụ trên ta có thể thấy đối tượng đặt tên là abc và được ép cho cách mép trên 10px.
Ngoài ra các bạn còn thấy dấu "#" đứng trước tiên, đó là quy định của CSS để hiểu đối tượng abc được markup trên file X(HTML) là một ID, có nghĩa là trên toàn bộ trang web thì đối tượng abc là duy nhất. Sở dĩ tôi phải nói thêm về ID để các bạn không bị lầm tưởng giữa ID và CLASS (2 cái này khác nhau hoàn toàn nhé).
|
|
|
|
