Tìm hiểu sơ khởi về 1 trong 3 trụ cột của front-end web development: CSS

Submitted by superthin on 29/10/2017 - 21:03:39
Biểu tượng HTML, CSS, JavaScript

Gần đây, Thin muốn chỉnh sửa một số thứ liên quan đến blog này. Trước đây, nếu bạn đọc được ở đâu đó trên blog này, nếu Thin có nói rằng mù tịt Thin về web, đó là nói láo trắng trợn mà Thin phải thừa nhận. Một chút kiến thức về HTML, CSS, JavaScript mà Thin học mót được, xem ra còn tệ hại hơn cả việc mù tịt.

Lúc này đây, việc tìm hiểu về các thành phần của một trang web một cách bài bản hơn là điều nên làm, bởi để trở thành một blogger ai cũng dù ít dù nhiều đều phải trải qua việc "mông má" cho blog của mình. Một blogger không thể cứ luôn thuê mướn ngoài cho những công việc đắp vá vặt vãnh không tên cho những thứ tủn mủn trên blog của mình được.

HTML, CSS, JavaScript làm nên diện mạo của một trang web

Một trang web (cũng là mọi trang web) mà bạn thấy đây đó trên Internet, luôn luôn có chứa ba thành phần vừa kể. Trừ những trang web từ thời "khai thiên lập địa" hoặc quá đơn giản, thô sơ mới có việc chỉ thuần HTML.

Như vậy, "3 chân kiềng" này sẽ làm nên mọi trang web, theo cách như mô tả ở đây:

Một layout trang web

HTML sẽ làm nên khung sườn của trang web: đó là những đoạn mã được viết theo một quy tắc do tổ chức W3C đặt ra. Bạn hình dung tương tự như một bài nhạc được viết trên giấy với những dòng kẻ có các nốt nhạc, khi người nghệ sỹ đọc bản nhạc đó họ sẽ dùng nhạc cụ biểu diễn nên những âm thanh theo một giai điệu. Mã HTML người nhìn vào không thú vị như bài nhạc, nhưng khi trình duyệt web đọc vào, nó dựng nên hình dáng ban đầu của trang web.

CSS giúp trang trí cho trang web trở nên đẹp đẽ: thuở ban đầu, một trang web HTML được trang trí bằng cách viết các mô tả về màu sắc, định dạng kích thước chữ, hình ảnh đồ hoạ dính cứng vào trong mã. Nhưng dần dần, người ta nhận ra rằng việc làm như vậy thì rất ít linh hoạt, quá trình làm một trang web rất gian nan, không thể "sản xuất hàng loạt", mọi sửa đổi đều trở nên khó khăn, CSS đã ra đời. Lúc này, khi trình duyệt nạp HTML lên, nó sẽ tìm đến CSS để xem những quy định cụ thể cho từng đối tượng trong mã HTML cần được trang trí như thế nào: kích cỡ chữ to/ nhỏ, kiểu dáng đậm/ nghiêng, nếu là một hình chữ nhật trên trang web thì hình chữ nhật này có kích thước cố định hay co giãn, màu nền là màu gì,...

HTML không có CSS

JavaScript: nếu chỉ có HTML + CSS không thôi, thì một trang web xem ra không khác mấy với những bản thiết kế brochure được in ấn trên giấy, nó nằm bất động ở đó, nếu có những chuyển động này nọ cũng thật là khô cứng, ít tương tác với người dùng khi xem trang web. Như vậy, xem ra sự hữu ích của trang web là không nhiều ngoài việc cung cấp thông tin. JavaScript làm cho một trang web trở thành một ứng dụng thực sự, khiến cho người dùng có thể tương tác được với trang web, hoặc không tương tác trực tiếp đi nữa, những đoạn mã JavaScript giúp cho trang web có thể làm những cái như hoạt hình, phát âm thanh, kết hợp với CSS để biến trang web từ một tấm ảnh chụp thành đoạn phim.

CSS trông như thế nào?

Thin chỉ giới thiệu sơ ở mức cơ bản nhất, còn về nâng cao có nhiều bài viết khắp Internet, chỉ cần gõ vào Google cụm từ CSS intermediate and advanced sẽ ra hàng loạt bài để đọc/ học.

Sau đây là ví dụ về một trang web HTML (bạn hình dung là Thin có một quán cơm bình dân nho nhỏ, và làm trang web để giới thiệu quán cơm này đến thực khách):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>Trang web quán cơm bình dân của Thin</title>
        </head>
<body>
<div id="toan-cuc">
        <div id="banner"></div>
        <div id="menu-trai">
                <p>Thực đơn hôm nay</p>
                <ul>
                        <li>Cánh gà chiên nước mắm</li>
                        <li>Cá bống kho tộ</li>
                        <li>Thịt luộc + cà pháo + mắm tôm</li>
                        <li>Canh cá bông lau</li>
                </ul>
        </div>
        
        <div id="noi-dung">
                <p>Lời chào mừng đến với Cơm bụi Thin</p>
                <p>Xin chào mọi người!</p>
                <p>Đầu tiên cho Thin được gửi lời chào trân trọng và chúc ngon miệng 
                đến mọi thực khách ghé thăm quán cơm nhỏ này của Thin. 
                Chẳng giấu diếm gì quý vị, Thin vốn là một người làm công ăn lương 
                như quý vị đây, từng phải ăn trưa ở rất nhiều quán cơm đủ loại 
                và từng phải chạy loanh quanh thay đổi quán liên tục mới có thể "nuốt trôi".</p>
                <p><img alt="Hình một dĩa cơm gà" src="img/dia-com.jpg" width="50%" height="50%" /></p>
        </div>
 
        <div id="menu-phai">
                <p>Có gì xung quanh đây?</p>
                <ul>
                        <li>Tiệm làm tóc Thuỷ Beauty</li>
                        <li>Quán cà phê Cóc Da Trơn</li>
                        <li>Tạp hoá Smart Cat</li>
                        <li>Trà sữa Chin Zoohoo</li>
                        <li>Sửa chữa giày dép Bà Loan</li>
                </ul>
        </div>
        <div id="chan-trang">
                <p>Chịu trách nhiệm về nội dung: Mr. Thin.</p>
        </div>
</div>
 
</body>
</html>

Khi mở trang web trên để xem bằng trình duyệt web như Mozilla Firefox hoặc Google Chrome, sẽ ra:

Diện mạo trang web khi chưa có CSS

Đấy, ý định của Thin là làm trang web có các thành phần banner, hai menu trái, phải, nội dung nằm chính giữa, và chân trang. Nhưng kết quả lại ra thành một trang dài trộn lẫn như trên. Đây chính là lúc mà CSS cần phải được đưa vào.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>Trang web quán cơm bình dân của Thin</title>
        <style>
                body { font: 13px/150% Arial, Helvetica, sans-serif; }
                #banner { height: 100px; background-color: purple; }
                #menu-trai { width: 15%; float: left; }
                #noi-dung { width: 60%; margin: 0 10px; }
                #menu-phai { width: 15%; float: right; }
                #chan-trang { height: 40px; background-color: orange; }
        </style>
</head>
<body>
<div id="toan-cuc">
        <div id="banner"></div>
        <div id="menu-trai">
                <p>Thực đơn hôm nay</p>
                <ul>
                        <li>Cánh gà chiên nước mắm</li>
                        <li>Cá bống kho tộ</li>
                        <li>Thịt luộc + cà pháo + mắm tôm</li>
                        <li>Canh cá bông lau</li>
                </ul>
        </div>
        
        <div id="noi-dung">
                <p>Lời chào mừng đến với Cơm bụi Thin</p>
                <p>Xin chào mọi người!</p>
                <p>Đầu tiên cho Thin được gửi lời chào trân trọng và chúc ngon miệng 
                đến mọi thực khách ghé thăm quán cơm nhỏ này của Thin. 
                Chẳng giấu diếm gì quý vị, Thin vốn là một người làm công ăn lương 
                như quý vị đây, từng phải ăn trưa ở rất nhiều quán cơm đủ loại 
                và từng phải chạy loanh quanh thay đổi quán liên tục mới có thể "nuốt trôi".</p>
                <p><img alt="Hình một dĩa cơm gà" src="img/dia-com.jpg" width="50%" height="50%" /></p>
        </div>
 
        <div id="menu-phai">
                <p>Có gì xung quanh đây?</p>
                <ul>
                        <li>Tiệm làm tóc Thuỷ Beauty</li>
                        <li>Quán cà phê Cóc Da Trơn</li>
                        <li>Tạp hoá Smart Cat</li>
                        <li>Trà sữa Chin Zoohoo</li>
                        <li>Sửa chữa giày dép Bà Loan</li>
                </ul>
        </div>
        <div id="chan-trang">
                <p>Chịu trách nhiệm về nội dung: Mr. Thin.</p>
        </div>
</div>
 
</body>
</html>

Nhìn đoạn trên, bắt đầu từ chỗ <style> và kết thúc </style>:

1
2
3
4
5
6
7
8
&lt;style&gt;
                body { font: 13px/150% Arial, Helvetica, sans-serif; }
                #banner { height: 100px; background-color: purple; }
                #menu-trai { width: 15%; float: left; }
                #noi-dung { width: 60%; margin: 0 10px; }
                #menu-phai { width: 15%; float: right; }
                #chan-trang { height: 40px; background-color: orange; }
        &lt;/style&gt;

đó chính là CSS đã được thêm vào, lúc này, save lại file .html của ta, bấm F5 trên trình duyệt, diện mạo trang trông dã khá hơn một chút, như sau:

Tuy vẫn chưa đạt yêu cầu đặt ra, nhưng tác dụng CSS lên một trang web đã được thể hiện. Phần nào giúp ta cảm thấy thú vị hơn một chút khi học HTML vì hình dung được phần nào "thành quả" mà mình tạo ra.

Bài này Thin chỉ giới thiệu chừng đó. Hy vọng sẽ được trở lại chủ đề về web này trong một dịp khác.

Mời bạn xem thêm bài Làm thế nào để xây dựng một trang web?