Hướng dẫn chi tiết học CSS cơ bản [Phần 3]

Hướng dẫn chi tiết học CSS cơ bản [Phần 3]
5 (2 votes)

Học CSS cơ bản thì việc tạo menu (ngang hay dọc) khá khó khăn đối với một số người bởi để tạo được một menu với CSS cần dùng khá nhiều kiến thức về CSS. Chính vì vậy, trong phần cuối này của serie học CSS cơ bản, tôi sẽ hướng dẫn các bạn cách tạo menu (ngang-dọc) với CSS rất đơn giản, dễ hiểu và hướng dẫn các bạn cách tạo một giao diện website.

Kỹ thuật tạo menu ngang cơ bản

Hướng dẫn tạo menu ngang cơ bản

Áp dụng những kiến thức mà tôi đã đề cập tới trong những phần trước của serie học CSS cơ bản, để tạo menu ngang bạn cần sử dụng thẻ <ul> để tạo khu vực menu và thẻ <li> để tạo mục con trong menu đó. Trước khi viết cấu trúc menu bằng HTML, tôi sẽ đặt menu vào trong thẻ với id là #menu.

Tiếp theo là thêm một đoạn CSS để reset CSS thuận tiện cho việc viết CSS về sau.

Bây giờ đến phần bao bọc menu (tức là thẻ <ul> trong #menu), bạn dùng thuộc tính list-style-type để xóa các dấu đầu dòng.

Kết quả:

học css cơ bản

Tiếp theo, bạn muốn các mục con nằm trên cùng một hàng ngang thì đưa các thẻ <li> về kiểu hiển thị inline-block.

Kiểu inline-block

Kết quả:

học css cơ bản

Và cuối cùng bạn thêm style cho các thẻ <a> và đưa kiểu hiển thị của thẻ này thành kiểu block để nó được phủ kín #menu ul

Kết quả:

học css cơ bản

học css cơ bản

Hướng dẫn tạo menu dropdown đơn giản

Tương tự như ví dụ trên, bây giờ tôi muốn ở mục Kiếm tiền online có thêm một vài menu con, vì vậy tôi sẽ thêm thẻ <ul> lồng bên trong item. Kiếm tiền online và thẻ <ul> mang class tên là sub-menu.

Thêm đoạn CSS như trong ví dụ trên để tạo menu đơn giản.

Kết quả:

học css cơ bản

Trước tiên, bạn cần ẩn .sub-menu đi.

Bây giờ bạn muốn tùy biến lại .sub-menu để nó không bị đẩy lên thì sử dụng thuộc tính position để tùy biến vị trí một phần tử mà không ảnh hưởng đến phần tử khác. Nhưng tôi muốn .sub-menu nằm gần menu mẹ thì tôi sẽ thiết lập #menu li thành kiểu relative bởi #menu li là item cấp lớn nhất.

Tiếp theo, thiết lập cho .sub-menu thành kiểu absolute để nó luôn nằm trong menu mẹ,

Cuối cùng thì bạn cho hiển thị .sub-menu khi rê chuột đến menu mẹ bằng việc sử dụng pseudo class là :hover. Để hiển thị ra chúng bạn gán display: block.

Đoạn #menu li: hover . sub-menu tức là khi bạn rê chuột vào #menu li thì nó sẽ thực hiện thay đổi cho .sub-menu.

Thêm đoạn CSS sau cho menu con bên trong để xóa margin không cần thiết.

Kết quả:

học css cơ bản

 

Kỹ thuật tạo menu dọc cơ bản

Tương tự như với menu ngang, bạn cũng áp dụng những kiến thức mà tôi đã nói tới trong những phần trước của serie học CSS cơ bản để tạo menu dọc. Đó là tạo danh sách với thẻ <ul> rồi xóa list-style-type cho các thẻ <li> bên trong là được.

Tạo menu dọc cơ bản

Tạo một danh sách menu như sau:

Thêm CSS cho #menu ul để thêm màu nền và bỏ đi các dấu đầu dòng.

Tiếp theo viết CSS cho các thẻ <li> để thêm chiều cao cho nó và thêm line-height bằng chiều cao để nó ở giữa block.

Cuối cùng viết CSS cho thẻ <a> và chuyển nó thành block.

Kết quả:

học css cơ bản

học css cơ bản

Tạo menu dọc có đổ xuống

Bạn bổ sung các menu con vào menu đơn giản trong ví dụ trên:

Sử dụng lại đoạn CSS ở phần trên:

Đến đây thì các mục con trong mục Kiếm tiền online bị lỗi hiển thị, để khắc phục vấn đề này bạn thêm đoạn CSS như sau:

Trước hết, đưa #menu li về kiểu hiển thị relative.

Chuyển #menu .sub-menu về kiểu absolute, tùy chỉnh vị trí hiển thị của nó thụt qua phải 250px (bằng chiều rộng của menu) và đưa nó về mép top của phần tử mẹ.

Kết quả:

học css cơ bản

Cuối cùng viết thêm CSS cho .sub-menu ẩn đi và hiện lên khi rê chuột vào #menu li chứa .sub-menu.

Kết quả:

học css cơ bản

học css cơ bản

học css cơ bản

Hướng dẫn tạo Layout đơn giản

Ở trên, tôi đã nói đến việc hướng dẫn các bạn cách tạo một Layout CSS đơn giản trong serie học CSS cơ bản này và trước khi bắt đầu thực hành tạo layout thì bạn cần chuẩn bị một số bức ảnh và file normalize.css để reset CSS.

Bắt đầu

Trước tiên, bạn hãy tạo một thư mục riêng và copy file normalize.css và thư mục img vào. Tiếp đó tạo thêm tập tin index.html (tập tin website) và style.css (chứa CSS của website).

học css cơ bản

Bây giờ bạn mở file index.html lên để viết HTML cho website.

Việc đầu tiên cần làm là khai báo loại tập tin, thẻ <html>, cặp thẻ <head><body>.

Thêm thẻ khai báo thông tin

Sau khi khai báo loại tập tin, thẻ <html>, thẻ <head>, thẻ <body> thì cần khai báo thông tin về tài liệu website như tiêu đề, mô tả và thêm hai tập tin style.cssnormalize.css để nó đọc CSS.

Bạn dùng cặp thẻ <head> để khai báo thông tin cho tài liệu HTML.

Tạo các khu vực trong website

Trong phần này của serie học CSS cơ bản, tôi sẽ tạo một layout đơn giản bao gồm các thành phần như menu, logo, khung giới thiệu, 3 khung nhỏ và footer. Vì vậy tôi sẽ thêm các thẻ div với các id và class như sau:

  • #cotainer: Phần này sẽ bao phủ toàn trang phòng khi bạn muốn tùy chỉnh chiều rộng của website thì có thể tùy chỉnh ở khu vực này là nó áp dụng cho toàn trang.
  • #menu: Khu vực hiển thị menu bên tay trái
  • #content: Khu vực hiển thị nội dung bên tay phải
  • #header: Hiển thị logo và slogan của website bên tay phải
  • #logo: Hiển thị logo
  • #slogan: Hiển thị slogan
  • .call-to-action: Hiển thị khung màu xám
  • .row: Khung bao bọc 3 cột phía dưới
  • #box1: Cột thứ 1
  • #box2: Cột thứ 2
  • #box3: Cột thứ 3
  • #footer: Phần chân của website

Trong cặp thẻ <body> tôi sẽ viết HTML như sau:

Viết nội dung cho từng phần

Phần #menu

Giống như tạo menu dọc, menu được khai báo bằng thẻ tạo danh sách trong khu vực #menu

Phần #content

Trong phần #content có 3 phần nhỏ là #header, .call-to-action, .row.

Phần #header

Ở phần tôi sẽ chèn logo từ thư mục img/ và một slogan như sau:

Phần .call-to-action

Phần .row

Phần #footer

Kết quả là ta đã có một văn bản thuần HTML như sau:

học css cơ bản

Viết CSS cho giao diện

Phần CSS đầu tiên mà bạn cần viết là thiết lập các thuộc tính cơ bản cho website như kiểu chữ, màu chữ, size, box-sizing,…

Chia khung cho website

Tiếp theo đến phần viết CSS cho #container và chia cột cho #menu.

Trong phần #container tôi sử dụng padding-left vì muốn nó có một khoảng trống bên trái trang. Ở phần #menu tôi sử dụng kiểu hiển thị là fixed để nó đứng cố định trên trang.

Kết quả:

học css cơ bản

Viết CSS cho #menu

Đầu tiên xóa các style của danh sách mặc định, xóa margin và padding.

Thêm chiều cao cho các mục trong menu.

Sau đó chuyển các thẻ liên kết về kiểu block, thêm các style cho chữ.

Thêm style khi rê chuột đến từng menu.

Kết quả:

học css cơ bản

Viết CSS cho #content

Trong phần này , tôi sẽ thêm padding để nó lùi về giữa và các nội dung tại phần #header, .call-to-action sẽ được căn giữa.

Thêm màu chữ cho slogan.

Thêm màu nền và viền cho .call-to-action.

Cuối cùng là chia cột trong .row để chia thành 3 cột. Thêm overflow: auto cho .row để clear float và thêm margin để cách xa các phần tử khác.

Tiếp theo, bạn viết CSS cho class .col để nó float sang trái và thêm margin để nó cách xa nhau. Ở đây có phần .row .col:last-child tức là tôi chọn cột .row .col cuối cùng để nó foat qua phải và xóa margin-right để trông cân đối hơn.

Viết CSS cho các ảnh để nó float sang bên trái chữ.

Kết quả:

học css cơ bản

Viết CSS cho #footer

Vậy là tôi đã hoàn thành việc tạo một Layout CSS đơn giản.

CSS Framework là gì và sử dụng như thế nào?

Qua các bài hướng dẫn trong serie học CSS cơ bản thì bạn cũng hiểu rằng viết CSS cho website không hề đơn giản và tốn khá nhiều công sức. Nhưng sau đây tôi sẽ giới thiệu đến các bạn cách làm được một giao diện website như ý muốn là sử dụng CSS Framework.

CSS Framework là gì?

CSS Framework là một công cụ hỗ trợ thiết kế giao diện website nhanh chóng và bắt mắt. CSS Framework là bộ mã nguồn CSS được viết một số chức năng nhất định và khai báo từng chức năng vào từng class riêng, để bạn dễ dàng áp dụng bằng cách thêm thành phần muốn sử dụng vào phần tử mà bạn muốn áp dụng.

Trong serie học CSS cơ bản này, tôi sẽ giới thiệu tới các bạn hai loại CSS chính là:

Grid System: Chức năng của Framework này là hỗ trợ bạn chia cột trong website nhanh chóng. Mỗi Gird System có từ 12 hoặc 24 cột trên một hàng.

CSS UI Framework: Loại framework này là một bộ các thành phần UI (User Interface) hoàn chỉnh như có sẵn CSS cho nút bấm, menu, form…

Nên sử dụng khi nào?

Grid System

Nếu bạn muốn tự viết CSS cho các thành phần trên website và chỉ cần framework hỗ trợ chia cột nhanh gọn. Ưu điểm là nhẹ vì không có nhiều CSS.

CSS UI System

Nếu bạn muốn dùng CSS như công cụ hỗ trợ làm giao diện website có sẵn CSS cho nút bấm, menu, form chữ…thì có thể dùng nó. Tuy nhiên bộ UI này nặng hơn rất nhiều so với Grid System.

Một vài CSS tiêu biểu và thông dụng

Bootstrap

học css cơ bản

  • Loại: CSS UI Framework
  • Cấp độ: Khó
  • Responsive: Có

Bootstrap là bộ UI Framework chi tiết và hỗ trợ gần như toàn bộ các thành phần trong website. Ngoài ra mọi người thích sử dụng Bootstrap bởi vì các style có sẵn cho các thành phần rất đẹp, bạn có thể xem các thành phần của nó tại đây. Và nó cũng hỗ trợ nhiều hiệu ứng Javascript với jQuery mà bạn có thể tham khảo tại đây.

960 Grid

học css cơ bản

  • Loại: Grid System
  • Cấp độ: Dễ
  • Responsive: Không

Pure CSS

học css cơ bản

  • Loại: CSS UI Framework
  • Cấp độ: Dễ
  • Responsive: Có

Bạn không cần đến một UI Framework nặng như Bootstrap mà vẫn có thể đảm bảo được các thành phần chính trên website như nút bấm, form, menu và grid thì Pure CSS khá phù hợp. Nó vẫn hỗ trợ đầy đủ Responsive như dùng khá đơn giản, cấu trúc class có sẵn cũng không nhiều.

Golden Grid System

học css cơ bản

  • Loại: Grid System
  • Cấp độ: Dễ
  • Responsive: Có

Cái này giống như 960 Grid.

Foundation

học css cơ bản

  • Loại: CSS UI Framework
  • Cấp độ: Trung bình
  • Responsive: Có

Giống với Bootstrap, đây là bộ UI Framework khá hoàn chỉnh hỗ trợ quy trình mobile-first, đặc biệt hỗ trợ thêm các kiểu menu cho mobile và cũng hỗ trợ nhiều hiệu ứng Javascript.

Tạo hiệu ứng chuyển động với transition

Tiếp tục với serie học CSS cơ bản, tôi sẽ giới thiệu đến các bạn một kỹ thuật khá phổ biến trong website đó là tạo các hiệu ứng chuyển động cho từng đối tượng được làm bằng CSS3.

Câu trúc khai báo trasition:

Lưu ý: Bạn cần khai báo thêm hai thuộc tính đi kèm 2 tiền tố -moz-webkit để nó hoạt động tốt trên các trình duyệt khác nhau. Ví dụ:

Ở đây, margin-left là thuộc tính mà bạn cần nó kích hoạt chuyển động nhưng nó chỉ có tác dụng với các hiệu ứng trong danh sách này, nếu bạn muốn nó áp dụng lên toàn bộ thuộc tính thì sửa nó thành all, 2s là thời gian chuyển động và 0.5s là thời gian trễ trước khi bắt đầu chuyển động, ease-in-out có nghĩa chuyển động nhanh lúc bắt đầu và chậm lúc kết thúc.

Trước đó bạn đã khai báo cho #box áp dụng hiệu ứng chuyển động rồi nhưng nó sẽ chưa chuyển động mà cần một sự kiện để kích hoạt nó. Tôi sẽ thêm CSS với pseudo-class là :hover và sửa giá trị margin-right để nó chuyển động theo giá trị mới.

Ví dụ:

học css cơ bản

học css cơ bản

Bạn cũng có thể thiết lập chuyển động cho nhiều thuộc tính khác nhau bằng cách như sau:

học css cơ bản

học css cơ bản

Thay đổi hình dạng với transform và transform-origin

Bên cạnh thuộc tính transition sử dụng để tạo các hiệu ứng chuyển động cho các phần tử trong website thì còn có thuộc tính transform có chức năng thay đổi hình dạng các phần tử block trong website và thường sử dụng đi kèm với thuộc tính transition.

Thay đổi hình dạng với transform

Với thuộc tính transform thì bạn có thể xoay, co giãn kích thước hoặc bóp nghiêng hình dạng của phần tử.

Cấu trúc như sau:

Ở đây, function() là tên hàm thay đổi hình dạng và giá trị của hàm.

Các hàm cơ  bản thay đổi hình dạng cho transform.

Xoay-roate()

Hàm rotate() giúp bạn thiết lập đối tượng bị xoay theo góc độ. Với hàm này bạn có thể thiết lập giá trị kiểu [n]deg (thiết lập giá trị góc) hoặc [n]turn (1 tun=360 độ).  Ví dụ:

học css cơ bản

học css cơ bản

Co giãn-scale()

Hàm scale() giúp bạn có thể thiết lập co giãn kích thước của phần tử dựa vào trục y (trục đứng) và trục x (trục nằm ngang), hàm sẽ được thiết lập là scaleX()scaleY() hoặc scale(X).

Ví dụ:

học css cơ bản

học css cơ bản

Kéo nghiêng-skew()

Bạn có thể kéo một đối tượng nghiêng dựa theo trục Y và trục X với hàm skewX()skewY(), giá trị bên trong là số [n]deg.

học css cơ bản

học css cơ bản

Tùy chỉnh tâm hình dạng với transform-origin

Thuộc tính transform-origin cho phép bạn dịch chuyển phần tử dựa vào kiểu thay đổi hình dạng ở transform.

Ví dụ: bạn dùng rotate() để xoay ảnh và khi dùng thêm transform-origin thì bạn có thể chỉnh độ lớn của vòng xoay tính từ tâm. Thuộc tính transform-origin phải đi kèm với thuộc tính transform và có thể áp dụng với bất kỳ hàm nào.

Thuộc tính transform-origin có 2 giá trị là X (phương thẳng đứng), Y (phương nằm ngang) và giá trị của nó dựa vào kích thước của phần tử.

học css cơ bản

học css cơ bản

Lời kết

Vậy là kết thúc phần cuối cùng của serie học CSS cơ bản. Và trong toàn bộ serie hướng dẫn học CSS cơ này, các bạn đã nắm được CSS là gì? Vai trò của nó đối với website như thế nào? Các khái niệm và thuộc tính cơ bản liên quan đến CSS cũng như biết cách để lên bố cục cho giao diện website, tạo menu và làm ra được một giao diện website đơn giản.

Hy vọng những kiến thức này sẽ giúp ích cho các bạn trong việc thiết kế website. Chúc các bạn thành công!

Xem tiếp bài trong Series<< Hướng dẫn chi tiết học CSS cơ bản [Phần 2]

About the Author Hưng Lê

VIP MEMBER
Xin chào các bạn. Tôi là Hưng, tôi có niềm đam mê cháy bỏng với công việc kiếm tiền online và thế giới internet. Tôi khao khát học hỏi những kiến thức mỗi ngày và sẵn lòng chia sẻ những gì mà tôi biết.

Xem thêm bài viết
Theo dõi Hưng

Đăng ký nhận hướng dẫn về MMO chất nhất và sớm nhất từ acuong.com không nên bỏ qua!

Leave a Comment:

Chia sẻ bài viết

Thích là nhích! Share luôn!

Facebook
Google+0