Giáo Trinh:
https://drive.google.com/file/d/1h2K2_Of0rHzpp8aEzeHH1lkOZ32JAFBx/view
Giáo trình tự dịch:
https://docs.google.com/document/d/16f0Y2onLuQdZaNIS3ZihEKc8bfu2sOhg959XRddBuww/edit
1 Mở đầu
1.1 Về tài liệu này
Tài liệu này thích hợp cho người chưa biết gì về làm web, và muốn học (hoặc tự học) để có thể theo nghề làm web.
Để có thể đọc, hiểu và làm theo được nội dung của tài liệu này, người đọc phải có kiến thức cơ bản về HTML. Có thể học HTML cơ bản qua tài liệu “Học làm web_Phần 1_HTML cơ bản” của cùng tác giả.
Lang thang trên mạng, thấy mô hình Bloom[1], thử chiếu mô hình này vào việc học và làm web xem sao, có thể hiểu nôm na là để tìm hiểu và làm việc trong lĩnh vực web cần trải qua các bước sau, Biết > Hiểu > Vận dụng > Phân tích > Tổng hợp > Đánh giá, xem thêm phần giải thích dưới đây:
Đánh giá (evaluation) | Đánh giá được giải pháp đó là hợp lý hay không |
Tổng hợp (synthesis) | Gắn kết các thành phần lại để tạo ra một hệ thống mới |
Phân tích (analysis) | Nhận biết được nguyên lý tổ chức, hiểu được sự gắn kết của các thành phần |
Vận dụng (application) | Áp dụng vào làm thực tế, áp dụng trong các tình huống khác nhau |
Hiểu (comprehension) | Hiểu được tại sao lại phải làm như thế |
Biết (knowledge) | Nhớ và làm theo |
Nếu có thời gian, người đọc nên vào google, gõ từ khóa “ngu ngơ học làm web”, để xem qua loạt bài “Ngu ngơ học làm web”, đây là tài liệu ghi lại quá trình tự học để làm web, trong đó có rất nhiều các bài hướng dẫn từng bước, đó là bước “nhớ và làm theo” của mô hình Bloom, qua việc làm theo, người học sẽ biết được để làm web cần các công cụ gì, sử dụng các công cụ đó như thế nào, bước đầu có những khái niệm ở mức cơ bản.
Sau khi biết phải dùng các công cụ gì, dùng nó như thế nào rồi, loạt bài “học làm web” là bước hiểu, nghĩa là “tại sao lại làm như thế”?
Vì là tài liệu ghi chép theo kiểu tự học, nên không tránh khỏi sự hạn chế về kiến thức, kĩ năng, nhận định…v.v mong người đọc đọc trong tâm thế hoài nghi.
2 CSS căn bản
Sau khi đã có kiến thức cơ bản về HTML, đã có thể sử dụng các phần tử, các thuộc tính và giá trị để cấu trúc hóa và thêm ngữ nghĩa cho nội dung của trang web. Nói ngắn gọn là đã biết sử dụng HTML để tạo được phần nội dung cho trang web.
Nếu xem trang web là một ngôi nhà, thì tới thời điểm này, đã có thể làm được phần thô của ngôi nhà. Giờ sẽ học thêm các kiến thức để có thể trang trí cho ngôi nhà.
Phần này sẽ tìm hiểu các khái niệm, thuật ngữ cơ bản của CSS; sử dụng CSS trong văn bản, phông chữ, màu sắc, nền, bố cục trang web và các kiến thức liên quan khác.
Học CSS là học cách bố trí, hiển thị, trang trí các nội dung của một trang web. Lưu ý, từ “CSS” có khi được sử dụng như là một động từ, có khi lại được sử dụng như một danh từ; ví dụ: “bạn hãy CSS cái hình đó đi” (sử dụng CSS như một động từ), hoặc “dùng CSS để định dạng cái hình đó” (sử dụng CSS như một danh từ).
2.1 Tổng quan về CSS
CSS (Cascading Style Sheets) là một kĩ thuật được W3C đưa ra để trình bày (trang trí) (presentation) tài liệu viết bằng HTML.
Có thể xem CSS là một ngôn ngữ riêng biệt với cú pháp riêng, được sử dụng để tìm và định dạng các phần tử HTML.
2.1.1 Lợi ích khi dùng CSS
Một số lợi ích khi sử dụng CSS để trình bày nội dung trang web:
– Lợi ích lớn nhất khi dùng CSS là nhờ việc tách phần mã định dạng (trình bày) các phần tử ra khỏi mã HTML nên việc bảo trì và kiểm soát bố cục của trang web sẽ thuận lợi hơn, và có thể dễ dàng thay đổi các “phong cách” khác nhau cho trang web.
– Tiết kiệm thời gian: nhờ tính linh hoạt khi thiết lập các thuộc tính cho một phần tử, nên có thể viết mã CSS một lần, sau đó áp dụng cho một nhóm các phần tử HTML, thậm chí có thể sử dụng lại cho nhiều trang HTML.
– Dễ nâng cấp giao diện: chỉ cần thay đổi CSS là mọi phần tử trong các trang web sẽ được thay đổi tự động
– Rút ngắn thời gian tải trang: nhiều trang có thể cùng chia sẻ một CSS nên sẽ giảm được dung lượng của website, giúp tải về nhanh hơn
– Khả năng định dạng, trang trí tốt hơn rất nhiều so với việc sử dụng HTML
– Khả năng tương thích tốt với các loại trình duyệt và thiết bị
2.1.2 Cách làm việc với CSS
Để làm việc với CSS cần ba bước sau:
– Tạo một tài liệu HTML
– Viết định dạng cho các phần tử HTML (viết CSS)
– Gắn CSS vào tài liệu HTML. Khi trình duyệt hiển thị trang web, nó sẽ dựa vào CSS để định dạng các phần tử HTML.
Sau đây là diễn giải chi tiết ba bước trên,
Tạo một tài liệu HTML
Sau khi học về HTML căn bản, đã biết cách viết một tài liệu HTML, điều quan trọng cần nhớ là phải chọn phần tử cho phù hợp, có ngữ nghĩa để biểu diễn mỗi nội dung. Ngoài ra, HTML cũng đã cấu trúc hóa các nội dung (structural layer), khi đã có cấu trúc rồi, bước tiếp theo sẽ tạo ra phần định dạng (presentation) và áp phần định dạng này vào cấu trúc có sẵn.
Việc nắm được cấu trúc của một tài liệu HTML và mối quan hệ (cha-con-anh em) giữa các phần tử là yếu tố quan trọng để có thể áp dụng CSS lên chúng.
Để tiện cho việc tìm hiểu và thực hành về CSS, phần này sẽ tạo ra một tài liệu HTML đơn giản sau. (lưu ý: cái hình twenties.gif trong đoạn mã dưới đây, có thể thay thế bằng hình bất kì với kích thước là 90 x 140px)
[twenties.html]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The Back of the Twenty Dollar Bill</title>
<style type="text/css">
/* type the styles below this line */
</style>
</head>
<body>
<h1>The Back of the New $20</h1>
<p>Have you seen the "Series 2004 $20 Notes"? The U.S. Treasury has rolled out yet another revamp of the U.S. twenty dollar bill in an effort to stop those pesky counterfeiters once and for all. It features high-tech fake-busting elements like a watermark, a security thread, and color-shifting ink. It also features crappy design.</p>
<p>I'm not going to concern myself here with a critique of the front of the bill (my friend Jeff says "it looks like something got spilled on it."). It's the <em>back</em> of the note that's driving me crazy.</p>
<h2>Too Many 20s</h2>
<p><img src="twenties.gif" width="90" height="140" alt="20s closeup. If you are not seeing this image, check to make sure the file twenty_20s is in the same directory as this document" /><p>
<p>In particular, it's all those little 20s haphazardly sprinkled in the white space. They are nails-on-a-chalkboard to my visual design senses.</p>
<p>Are they supposed to be another security feature? ("They'll <em>NEVER</em> be able to duplicate this $20... look at those 20s... they're all <em>OVER</em> the place!") Did they let a summer intern at the Bureau of Engraving and Printing design it? ("Hey, let Jimmy try it!") Were they concerned the $20 bill might be confused with a $10? ("What this 20 needs is a LOT more 20s.")</p>
<h2>Connect-the-Dots</h2>
<p>There must be more to it. My theory: the new 20s contain subliminal connect-the-dots messages, like tiny constellations. So, perhaps the 20s connect to form a secret message designed to stimulate the economy ("SPEND MORE") or boost patriotism ("WE'RE NO.1").</p>
<p>I'm not sure I've successfully cracked the code, so I'm asking for your help. I encourage you all to get a new $20 bill, connect the dots to find the message on the back (pencil is best), and mail it to me for review. Together, we can get to the bottom of this.</p>
</body>
</html>
Viết mã CSS
Để định dạng phần tử HTML sẽ sử dụng các luật (rules hoặc rule sets), đây là các chỉ dẫn để mô tả cách hiển thị một phần tử hoặc nhóm phần tử.
Một luật bao gồm hai phần: phần “lựa chọn” phần tử và phần “quy định” cách thức hiển thị của phần tử tương ứng.
Ví dụ sau là một đoạn mã CSS gồm hai luật, luật đầu quy định tất cả các phần tử h1 của tài liệu sẽ có chữ màu xanh, luật sau quy định tất cả các phần tử p của tài liệu sẽ có kiểu chữ là sans-serif và chữ nhỏ.
h1 { color: green; }
p { font-size: small; font-family: sans-serif; }
Trong thuật ngữ của CSS,
– Phần lựa chọn phần tử được gọi là selector (bộ chọn)
– Phần quy định cách thức hiển thị được gọi là declaration (khai báo)
– Phần khai báo bao gồm các cặp “thuộc tính: giá trị” (property: value), được bao lại bằng dấu ngoặc nhọn ({})
– Giữa thuộc tính và giá trị có một dấu hai chấm (:) và một khoảng trắng
– Cuối mỗi cặp “thuộc tính: giá trị” là dấu chấm phẩy (;)
Xem hình minh họa,
Bộ chọn
Trong đoạn mã CSS ở ví dụ trên, bộ chọn chính là hai phần tử h1 và p. Đây được gọi là bộ chọn dựa theo loại phần tử (element type), là kiểu bộ chọn cơ bản nhất. Nội dung trong phần khai báo của mỗi luật sẽ tác động lên tất cả các phần tử h1 và p tương ứng trong tài liệu HTML. Ở phần sau sẽ tìm hiểu thêm các bộ chọn phức tạp hơn. Trong CSS, việc xác định đúng bộ chọn và sử dụng bộ chọn một cách hợp lý là một kĩ năng quan trọng cần để ý.
Khai báo
Ở phần trên đã mô tả chi tiết cú pháp của một khai báo. Vì CSS không quan tâm tới các khoảng trắng và dấu xuống hàng dư thừa, vì vậy với khai báo gồm nhiều cặp “thuộc tính: giá trị” thì nên viết mỗi cái trên một hàng để dễ quan sát.
Ví dụ,
p { font-size: small; font-family: sans-serif; }
Sẽ viết là,
p {
font-size: small;
font-family: sans-serif;
}
Với mỗi loại bộ chọn sẽ có các thuộc tính chuẩn đi kèm, và với mỗi thuộc tính sẽ có những giá trị phù hợp, các phần sau sẽ làm quen với một số thuộc tính và giá trị này, đồng thời học cách để sử dụng chính xác và hiệu quả.
Bắt đầu từ phần thực hành này sẽ sử dụng các Text editor chuyên nghiệp và miễn phí, khuyến khích sử dụng Visual Studio Code hoặc Sublime Text.
Lab2.1.a (exercise 11-1, p.211, [3])
[1] https://tusach.thuvienkhoahoc.com/wiki/H%E1%BB%87_th%E1%BB%91ng_ph%C3%A2n_lo%E1%BA%A1i_c%C3%A1c_m%E1%BB%A5c_ti%C3%AAu_c%E1%BB%A7a_Bloom
.jpg)
.jpg)
){kind=link}
0 Nhận xét