10 bài học lập trình web phần 3

updated on 2023-05-27

Trong phần 3 này chúng ta sẽ tìm hiểu về một công cụ thiết kế web của HTML đó là CSS. CSS ra đời muộn hơn HTML một chút và nó là một công cụ bổ trợ cực mạnh cho phép có thể xây dựng các trang web nhiều mầu sắc, đa dạng và phong phú.

Bài 3: Thiết kế web với CSS và khái niệm cut html

Một nhân viên thiết kế web có thể dùng một phần mềm đồ họa như Photoshop hay corel để vẽ lên một giao diện web rất đẹp, nhưng để chuyển thiết kế đó cho một coder, anh ta sẽ bó tay vì giữa hình vẽ và trang web thực tế còn một khoảng cách khá xa. Đó là cut html và tạo css. Cut html là gì chúng ta sẽ nói ở phần cuối bài viết này, vậy còn css là gì? CSS là viết tắt của cụm từ Cascading Style Sheet. Cascading = thay thế, Style = kiểu cách, còn sheet, giống như excel sheet, làm một file trong đó mô tả phong cách gì sẽ thay thế cho cái gì.

Ví dụ: Trong HTML chúng ta biết là có thẻ h1, thẻ này thường được dùng  dùng để đánh dấu đoạn text tiêu đề và nó sẽ tăng cỡ chữ lên khoảng 50px và in đậm. Nếu bạn không thích phong cách này thì sao? bạn hoàn toàn có thể tạo lại phong cách cho thẻ h1 bằng css và điều chỉnh sang style là cỡ chữ 20 px, mầu xanh dương, và không in đậm. Hãy xem hiệu ứng chữ ở 2 tiêu đề dưới đây. Tiêu đề 1 dùng h1 nguyên bản html và tiêu đề 2 dùng h1 đã được thay thế bởi css.

Tiêu đề 1 - nguyên bản

Tiêu đề 2 - Đã dùng CSS

Cách dùng CSS

Có ba cách để đưa CSS vào một trang HTML, đó là

• css inline - đưa các lệnh điều khiển style trực tiếp vào thẻ html
• css internal - định nghĩa css ngay trong file html rồi gọi đến css mỗi khi cần dùng đến cho thẻ
• css external - định nghĩa css ra một file riêng có đuôi là .css và gọi đến từ file html.

Thứ tự trên cũng là thứ tự ưu tiên khi browser nhận thấy có 2 định nghĩa css trùng nhau. Chẳng hạn, nếu có 1 định nghĩa về mầu sắc trong css inline và trong css internal thì browser sẽ sử dụng định nghĩa của css inline và bỏ qua định nghĩa css internal. Vì thế bạn sẽ phải rất cẩn thận khi đặt tên cho các thành phần của css, tránh trùng nhau. Dưới đây chúng ta sẽ tìm hiểu 3 cách dùng css.

CSS inline: là cách định nghĩa các thuộc tính trực tiếp cho từng thẻ của html, theo mẫu như ví dụ sau:

Phân tích: trong ví dụ trên để đưa css vào thẻ h1 hay bất cứ thẻ nào khác chúng ta chỉ cần thêm khai báo style="" và trong khai báo đó chúng ta định nghĩa các thuộc tính của thẻ h1 bằng các giá trị css như color là mầu chữ, font-size là cỡ chữ... các định nghĩa này phải cách nhau bởi dấu chấm phảy (;).

CSS internal: Việc định nghĩa các thuộc tính css trong thẻ html sẽ làm cho trang html trở nên dài và rối rắm. Vì vậy có một cách khác làm cho cách viết trang css trở nên gọn hơn và thân thiện hơn đó là dành ra một khu vực riêng trong file html để định nghĩa các loại css. Khu vực này giới hạn giữa 2 thẻ mở và thẻ đóng style. Thẻ style thông thường được đặt ở phần head, tuy nhiên sau này các bạn sẽ thấy là các bạn có thể đặt style ở đâu tùy ý chứ không nhất thiết là phải trong thẻ head. Hãy xem ví dụ sau:

CSS external Trong thực tế, một trang web sinh động sẽ được điều khiển bởi rất nhiều định nghĩa css. Và việc đặt css internal trong cùng file html cũng sẽ trở nên không ồn. Vì vậy chúng ta nên dùng css theo cách thứ 3 đó là đặt các định nghĩa css ra một file riêng có phần mở rộng là .css, sau đó trong file html chỉ việc liên kết file css vào là xong theo như ví dụ sau:

File css: (style.css)

File html (index.html)

Lưu ý, trong ví dụ trên 2 file index.html và style.css phải đặt trong cùng một thư mục. Nếu khác thư mục thì trong thẻ link phải chỉ rõ đường dẫn đến file css.

Bây giờ các bạn hãy làm một bài tập nho nhỏ đó là gõ lại 2 file trong ví dụ trên và tạo thêm các thẻ p, thẻ a với các css riêng được định nghĩa trong file css.

Cấu trúc và định nghĩa CSS

Trong file css hoặc trong thẻ style chúng ta định nghĩa các thuộc tính cho các đối tượng trong file html theo kiểu hướng đối tượng, có nghĩa là một đối tượng bất kỳ sẽ được điều chỉnh bởi các thuộc tính nằm trong 2 dấu ngoặc { và }. Trong ví dụ sau chúng ta định nghĩa các thuộc tính cho thẻ a, và nếu các bạn chịu khó gõ lại ví dụ này trong file css bạn sẽ thấy nhiều điều thú vị về cách mà css thay đổi thẻ a như thế nào?

Diễn giải: trong các thuộc tính trên, hầu hết các bạn đều hiểu được ý nghĩa của nó, tôi chỉ giải thích vắn tắt về 2 thuộc tính là text-decoration: none; là để bỏ style gạch chân cổ điển của thẻ a. display: block; là để hiển thị thẻ a như một button dạng khối chứ không chỉ đơn thuần là text như ngầm định.

Trong khi định nghĩa các thuộc tính cho thẻ html bằng css, chúng ta lưu ý là có thể định nghĩa thuộc tính cho một thẻ như trên, và điều này sẽ ảnh hưởng đến tất cả các thẻ a trong css. Ngoài ra chúng ta có thể định nghĩa theo id của thẻ hoặc định nghĩa các thẻ thuộc cùng một nhóm.

Định nghĩa theo id:

Trong thế hệ HTML mới, các đối tượng trong file html đều có thể được gán định danh id để có thể gọi đến bằng javascript, bằng anchor hoặc để định nghĩa riêng biệt các thuộc tính css. Việc khai báo id cho thẻ html như mẫu sau:

Còn trong file css chúng ta khai báo như sau:

Khai báo này chỉ khác là đưa định danh #a1 vào và như vậy chúng ta sẽ thấy là chỉ các thẻ a nào với định danh id = "a1" sẽ bị ảnh hưởng bởi các khai báo trong css. còn các thẻ a khác thì không.

Định nghĩa theo class (nhóm)

Một cách khác để định nghĩa css cho một nhóm đối tượng đó là dùng class. Giả sử bạn muốn chỉ có 3 thẻ a trong file html chịu ảnh hưởng của css, còn các thẻ a khác sẽ dùng các định nghĩa default chúng ta sẽ khai báo một class trong css như sau:

Còn trong file html chúng ta xác định các thẻ thuộc nhóm class1 như sau:

Hãy gõ lại 2 đoạn code css và html trên để xem hiệu ứng ra sao.

Định nghĩa css theo trạng thái

Trong html, có một số thẻ được thể hiện khác nhau theo trạng thái khác nhau. Ví dụ thẻ a sẽ có mấy trạng thái là: normal, hover, active và selected. Chúng ta có thể dùng css để định nghĩa các thuộc tính thẻ a theo từng trạng thái khác nhau. Ví dụ dưới đây định nghĩa thẻ a khi ở trạng thái normal có thuộc tính là không gạch chân và chữ mầu xanh, còn khi di chuột qua thẻ a (trạng thái hover) thì sẽ xuất hiện gạch chân và chữ chuyển sang mầu tím.

Thẻ table, thẻ div và thẻ span

Khi cut html và khi thiết kế giao diện website, 3 thẻ trên được đặc biệt ưa chuộng. Thẻ table dùng để tạo ra các layout của website một cách ổn định vì các cột và các hàng có liên quan chặt chẽ với nhau và ít khi bị phá vỡ layout. Các bạn đã làm quen với việc layout một website bằng thẻ table này ở bài 2. Tuy nhiên website dùng nhiều table, đặc biệt là các table lồng nhau sẽ bị nặng. Vì thế sau này người ta có xu hướng dùng nhiều thẻ div (viết tắt của division) để làm layout cho website. Div nhẹ hơn khi tải trang so với table, nhưng phải kiểm soát tốt vị trí các div nếu không layout có thể bị vỡ. Div cũng tạo nên một cấu trúc lồng nhau sáng sủa và dễ đọc hơn so với dùng các table lồng nhau.

Còn span là một thẻ để kiểm soát một đoạn text bất kỳ mà không lấy giá trị ngầm định của html, có thể coi span là một thẻ trắng, không có format sẵn, và chỉ chịu ảnh hưởng của css.

Dưới đây, chúng ta sẽ làm lại bài tập của phần 2, nhưng không dùng thẻ table mà dùng hoàn toàn thẻ div và css.

Trước hết hãy vào link này để xem việc viết lại giao diện bài tập 2 sử dụng thẻ div như thế nào. Trong giao diện này có một số yêu cầu như sau:

• Không dùng thẻ table mà dùng div để mô tả các ô trong bảng
• Dùng thẻ span để in đậm 2 cụm từ trong phần nội dung chính
• Viết lại thẻ a cho các menu ở phần topmenu, sao cho menu được hiển thị dạng khối và không gạch chân chữ
  

Với bạn nào lần đầu tiên làm css thì bài tập này khó như ăn ớt vậy. Vì thế các bạn nên download code html và css ở đây về để tham khảo trước, sau đó phân tích các định nghĩa css để hiểu được cách làm layout css và có thể  tự mình thêm vào các định nghĩa css riêng để làm giao diện thêm sinh động và cá biệt hóa.

Lưu ý khi viết css chắc chắn bạn sẽ cần dùng đến tool pickpick để lấy mã mầu và đo các kích thước của các div để định nghĩa cho đúng với nguyên mẫu khi dùng table.