|
Sau khi nhận được nhiều e-mail của một số bạn muốn tìm hiểu về CSS, yêu cầu muốn được biết về ứng dụng của CSS trong thiết kế web, một số bạn muốn được biết quy trình thiết kế một website sử dụng CSS để định dạng và style cho các thành phần trong 1 trang web.
Trong bài viết này tôi sẽ chia ra làm nhiều phần để các bạn dễ hình dung và có thể hiểu được một cách chân thực nhất về bản chất của một website và cách chúng ta style chúng theo ý muốn của designer.
Nếu trước đây các bạn chưa bao giờ sử dụng hay chưa từng biết đến CSS thì tôi nghĩ bạn nên đọc các định nghĩa về CSS tại W3C. Tôi sẽ không dịch những bài viết từ W3C ra tiếng Việt vì tôi nghĩ việc đọc và hiểu các tài nguyên kiến thức trên internet là điều bắt buộc bạn phải tự trang bị. |
|
Xin chào, trong phần 2 này chúng ta sẽ bắt đầu với cấu trúc file của một website bao gồm những gì?. Đơn thuần, website của bản có thể có nhiều phần, hay đơn giản chỉ là 1 file index.html. Nhưng để tiếp theo phần một, chúng ta bắt đầu tạo 1 cấu trúc chứa các file của website.
02
Cấu trúc này bao gồm 2 thư mục con là CSS chứa file tenfile.css và thư mục images chứa ảnh. Ngoài cùng là 1 file index.html
|
|
Phần 3 chúng ta sẽ đưa các thành phần cơ bản của website như Header, Main Navigation... vào file index.html ở dạng thẻ Div.
03
Chèn thẻ Div vào giữa body và đặt cho nó id="page-container" . Nội dung thẻ Div là dòng chữ "Hello World"
<body>
<div id="page-container">
Hello world.
</div>
</body>
|
|
04Trong phần này ta bắt đầu gán các thuộc tính của CSS cho từng div để có được những thông số cơ bản như màu nền, chiều cao, float ...
#header {
background: blue;
height: 150px;
}
#sidebar-a {
background: darkgreen;
}
#content {
background: green;
}
#footer {
background: orange;
height: 66px;
}
|
|
05Ở phần trước chúng ta đã đưa nội cung vào content và bị vấn đề là phần text bị tràn qua cột bên phải . Sau đây ta sẽ tìm hiểu nguyên nhân tại sao và làm thể nào để fix nó.
Nguyên nhân ở đây là ta mới chỉ quy định cho div content kích thước chiều ngang. Đến đây ta làm một phép tính đơn giản 760px chiều rộng của toàn bộ div page-container - đi 280px chiều rộng của div Sidebar, như vậy còn 480px. Ta cũng đã thiết lập chiều rộng của div container là 480px, như vậy bây giờ ta chỉ cần đặt thuộc tính margin để div container nằm cách đường biên phải 1 khoảng 280px
|
|
|
|
