logo
Hỗ trợ: 24/7
Điện thoại: 098 984 8886
Email: info@thuonghieuweb.com

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

4/5 1136 votes
updated on 2020-10-20

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.

 



   
 
Có thể bạn muốn xem thêm....

Những điều cần biết khi xây dựng website

Xây dựng một website không đơn giản chỉ là một gian hàng hay một tờ rơi. Bạn cần phải làm mọi cách để website của mình hướng tới khách hàng, và quan trọng hơn cả, là làm sao để nội dung của bạn có sức lan tỏa nhanh chóng trong môi trường mạng từ đó lôi kéo khách hàng đến với website của bạn

Xem chi tiết

Những điều cần biết về dịch vụ email với tên miền riêng

Email tên miền riêng là email gắn với tên miền của doanh nghiệp kiểu như tennhanvien@tencongty.com. Email tên miền riêng sẽ tạo sự chuyên nghiệp và tin cậy khi giao dịch, đồng thời có thể cấp phát cho nhân viên khi mới đi làm, thu hồi lại khi nhân viên đó thôi việc và lưu trữ được mọi giao dịch trên email mà không sợ nhân viên đổi mật khẩu, mang theo hòm thư khi rời công ty...

Xem chi tiết
Đội ngũ lập trình viên, kỹ thuật viên và seo-er của Thương Hiệu Web cam kết

Hỗ trợ 24/7

Hỗ trợ khách hàng 24 giờ 1 ngày, 7 ngày 1 tuần qua điện thoại, email và chat online

Hoàn tiền 100%

Trong thời gian 45 ngày sử dụng dịch vụ, nếu quý khách không hài lòng!

Cam kết uptime 99.99%

Nếu dịch vụ của quý khách bị gián đoạn, chúng tôi sẽ cộng thêm 1 tháng sử dụng

KHÁCH HÀNG NÓI VỀ CHÚNG TÔI

Một đơn vị xây dựng web tận tâm và chuyên nghiệp!

"Thương Hiệu Web là đơn vị thiết kế website có năng lực, tôn trọng và có trách nhiệm với khách hàng, đặt mình vào vị trí khách hàng để mang lại cho khách hàng nhiều giá trị từ chính dịch vụ của mình. Với tôi, Thương Hiệu Web là một lựa chọn hợp lý!" Chị Nguyễn Phượng, TP kinh doanh, Công Ty Cổ Phần Quản Lý Công Trình Đô Thị Hải Dương.

Xem bình luận trên FB
Sitemap Điều khoản sử dụng Chính sách riêng tư
Bản quyền thuộc về công ty cổ phần truyền thông số VDATA
Tầng 2, tòa nhà 71 Hoàng Cầu, Đống Đa, Hà Nội
Điện thoại: (04) 3990 9643 - Email: info@vdata.com.vn
Giấy chứng nhận ĐKKD số: 0102766780, do Sở KHĐT Tp Hà Nội cấp ngày 28/04/2009

Online