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

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

Trong phần 1 của serie học CSS cơ bản, tôi đã giới thiệu tới các bạn CSS là gì? Vai trò của nó đối với website, các khái niệm cơ bản liên quan đến CSS, các đơn vị đo lường trong CSS và những thuộc tính trang trí cho văn bản. Và để tiếp tục serie học CSS cơ bản, tôi sẽ hướng dẫn các bạn cách lên bố cục cho giao diện website bằng cách sử dụng kỹ thuật CSS layout.

Phần tử Block (khối) và Inline (nội dòng)

Trong serie học CSS cơ bản này, để thuận tiện khi học về kỹ thuật CSS layout và các kỹ thuật nâng cao thì bạn cần phải hiểu rõ thế nào là Block và Inline.

học css cơ bản

học css cơ bản

Block là gì?

Block hay còn gọi là phần tử khối dùng chỉ các thẻ HTML có chức năng tạo khu vực hay khối. Khối này có nghĩa là một thẻ khi bạn khai báo nó sẽ hiển thị ở các dòng riêng biệt bao gồm nội dung bên trong. Ở trong serie học HTML cơ bản tôi đã giới thiệu tới các bạn một số thẻ block như <p>, <ul>, <ol>, <h1>,…Và trong phần 2 của serie học CSS cơ bản này, tôi sẽ giới thiệu đến các bạn một thẻ cũng vô cùng quan trọng trong CSS là thẻ div và nó giúp bạn tạo một khu vực dễ dàng để viết CSS.

Inline là gì?

Inline hay còn gọi là phần tử nội dòng để chỉ các thẻ HTML mà khi khai báo nội dung nó vẫn nằm chung một dòng với các văn bản khác. Các thẻ inline thường dùng như thẻ b,strong ,,i …ngoài ra còn có thẻ  span nếu muốn gộp nhóm các phần tử mà không ảnh hưởng gì đến văn bản chung trong một hàng.

Tại sao cần hiểu rõ về Block và Inline?

Khi dựng bố cục website sử dụng CSS, nếu bạn không nắm rõ về Block và Inline thì bạn sẽ gặp rất nhiều khó khăn. Ví dụ như bạn sẽ không biết sử dụng thẻ divspan như thế nào cho phù hợp hoặc không thể tự ý sửa kiểu hiển thị cho một số phần tử,…

Thẻ div và tạo bố cục cho website

Ở trên khi nói đến Block và Inline tôi có nhắc tới thẻ div và nó là một thẻ được sử dụng rất thường xuyên mà tôi chưa đề cập tới trong serie học HTML cơ bản . Vì vậy, tôi sẽ nói đến thẻ div trong serie học CSS cơ bản này.

Ý nghĩa của thẻ div

Thẻ div được dùng để tạo ra một khu vực theo kiểu Block trên website.

học css cơ bản

Thông thường website có 4 phần chính là header ( hiển thị logo, banner), content (hiển thị nội dung), sidebar (cột cạnh phần nội dung), footer (khu vực chân của website). Tôi sẽ tạo ra 4 thẻ div với 4 id khác nhau. Ví dụ:

học css cơ bản

học css cơ bản

học css cơ bản

học css cơ bản

Có nghĩa là nếu bạn muốn gom nhóm nhiều thành phần trên website vào một khu vực thì sử dụng thẻ div.

Box Model và các thuộc tính

Tiếp tục với serie học CSS cơ bản, chúng ta sẽ cùng tìm hiểu về Box Model. Box Model được sử dụng để mô tả về khoảng cách của mỗi phần tử trên website, tức là nó được dùng để tinh chỉnh khoảng cách hiển thị cho từng phần tử trên website.

Những thành phần quan trọng của kỹ thuật Box Model trong CSS:

  • Margin: Khoảng cách tính từ bên ngoài của phần tử.
  • Border: Đường viền của phần tử.
  • Padding: Khoảng cách tính từ bên trong của phần tử.
  • Content: Nội dung.

Trong 4 thành phần này thì phần content sẽ không có thuộc tính CSS đại diện vì nó là nội dung trong phần tử, 3 phần còn lại có các thuộc tính CSS đại diện như sau:

Padding

Padding dùng để thiết lập khoảng cách tính từ phần content trở ra viền của phần tử và nó được khai báo trong CSS theo tuần tự top right bottom left, giá trị là số đi kèm đơn vị đo lường.

Ví dụ:

học css cơ bản

học css cơ bản

Trong ví dụ trên tôi đã sử dụng padding để tạo khoảng cách cho top và bottom là 20px, còn right và left là 15px. Ngoài ra thuộc tính padding còn có 4 thuộc con khác là padding-top, padding-bottom, padding-right, padding-left.

Border

Border là thuộc tính dùng để tạo viền cho phần tử. Cấu trúc của thuộc tính border như sau:

Ví dụ: tôi tạo một viền có kích thước là 0.5 px, kiểu trơn, màu viền là màu xanh.

Trong border hỗ trợ một số type như solid, dotted, double, groove, ridge, inset, outset. Thẻ border cũng có các thẻ con khác như border-top, border-bottom, border-rightborder-left.

Margin

Margin có nhiệm vụ tạo khoảng cách từ Border trở ra ngoài.Ví dụ:

học css cơ bản

học css cơ bản

Margin chính là khoảng trắng giữa #box1#box 2. Trong phần CSS tôi có gắn margin: 20px 0 0 0 #box2 có nghĩa là nó sẽ tạo ra một khoảng trắng trên đầu của #box2 và nó cũng có các thuộc tính con như margin-top, margin-bottom, margin-rightmargin-left.

Kiểm tra Box Model với Developer Tools

Để bật Developer Tools bạn nhấn F12 và trỏ chuột vào phần như dưới đây sẽ thấy nó nằm bên phải.

học css cơ bản

Trong khung trên, vùng màu xanh là Content, xanh lá là Padding, cam là Border và màu da là Margin.

Để xem thông tin của phần tử  thì ấn vào nút tìm kiếm phần tử.

học css cơ bản

Giờ bạn có thể rê chuột đến một phần tử trên website và nhấp vào để xem Box Model, bạn có thể nhấp vào từng ô giá trị trong khung Box Model và thay đổi giá trị của nó nhưng nó sẽ mất sau khi bạn refresh trình duyệt.

học css cơ bản

Thuộc tính tùy chỉnh kích thước

Khi làm việc với CSS Layout hay cụ thể là làm việc với Box Model thì ngoài việc tinh chỉnh cách hiển thị cho mỗi phần tử thì bạn cần phải thiết lập kích thước cho các phần tử như thiết lập chiều rộng và chiều cao cho một phần tử nào đó.

Dưới đây là các thuộc tính giúp bạn thiết lập chiều rộng và chiều cao của phần tử:

học css cơ bản

  • length: kiểu giá trị kèm theo các đơn vị như px, pt, em, rem, %
  • none: bỏ thiết lập
  • auto: tự động tính dựa theo chiều còn lại
  • inherit: kế thừa giá trị đã thiết lập trước đó cho thuộc tính

Lưu ý: Chỉ có thể thiết lập kích thước với các phần tử Block, Table và các đối tượng như hình ảnh, video, flash,… nhưng không thể thiết lập kích thước cho các phần tử Inline.

Đối với các thuộc tính min-*, max-* tức là nó sẽ căn độ dài của phần tử dựa trên nội dung bên trong nhưng sẽ có kích thước tối thiểu/tối đa được phép sử dụng.

Ví dụ: Bạn có phần #content, trong #content có phần #post và thiết lập chiều rộng cho #post là 600px. Nếu bạn đặt thuộc tính max-width cho #content là 500px thì phần #post cũng chỉ dãn tối đa được 500px.

Tìm hiểu box-sizing

Khi sử dụng Padding và Border, nếu bạn đặt thêm thuộc tính widthheight để thiết lập kích thước thì khung phần tử sẽ bị biến đổi kích thước.

Ví dụ: Box có kích thước width là 400px và height là 400px, nếu bạn đặt thêm padding là 20px thì khung của bạn sẽ có kích thước là 440×440 px. Có nghĩa là nếu cộng thêm padding là 20px thì khung của bạn sẽ tự động cộng thêm 40px (20px cho top và 20px cho bottom, tương tự với left và right).

Và trong serie học CSS cơ bản này, tôi sẽ hướng dẫn các bạn cách giữ nguyên kích thước của phần tử dù có cộng thêm padding và border bằng cách sử dụng thuộc tính box-sizing bởi box-sizing là thuộc tính giúp bạn tính toán và làm chủ kích thước của một phần tử dựa theo thuộc tính width và height được thiết lập bên trong, có nghĩa là thuộc tính widthheight là kích thước đã bao gồm cả padding và border.

Lưu ý cách viết

box-sizing là thuộc tính trong CSS3 nên phải viết thành 3 lần với các tiền tố khác nhau:

  • box-sizing: dành cho trình duyệt IE8, Opera 7, Firefox và Google Chrome bản mới
  • -moz-box-sizing: dành cho Firefox bản cũ
  • -webkit-box-sizing: dành cho Google Chrome bản cũ

Các giá trị của box-sizing

  • content-box: là giá trị mặc định, tức là giá trị width và height chỉ áp dụng cho khu vực nội dung bên trong, không áp dụng cho padding, margin và border.
  • border-box: nếu thiết lập giá trị này thì giá trị width và height sẽ áp dụng cho cả khu vực nội dung, padding và border nhưng không áp dụng cho khu vực margin.
  • padding-box: Với giá trị này thì width và height chỉ áp dụng cho phần nội dung và padding, không áp dụng cho phần border và margin.

Chú ý: padding-box chỉ áp dụng được trên trình duyệt Firefox

học css cơ bản

học css cơ bản

Sử dụng box-sizing cho toàn bộ phần tử

Khi viết CSS cho website, bạn nên sử dụng box-sizing với giá trị là border-box cho toàn bộ phần tử để các phần tử có được kích thước chính xác khi khai báo, việc này để tránh cộng thêm border và padding dễ gây rối.

Để thiết lập box-sizing: content-box cho toàn bộ phần tử, bạn dùng vùng chọn là *

Màu nền và ảnh nền

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 loại thuộc tính khá hay và giúp cho website của bạn trở nên đẹp hơn, đó là thuộc tính thêm màu nền và ảnh nền cho website hoặc phần tử dạng block.

Màu nền với thuộc tính background-color

Thuộc tính background-color giúp bạn thiết lập màu nền bằng CSS và giá trị là tên màu hoặc mã màu HEX/RBG.

học css cơ bản

học css cơ bản

Ảnh nền với thuộc tính background-image

Bạn sử dụng thuộc tính background-image để thêm ảnh nền. Ví dụ:

học css cơ bản

học css cơ bản

Lưu ý: Đối với các giá trị loại URL thì bạn cần phải có một hàm url() để bọc đường dẫn URL.

Bạn cũng có thể thêm nhiều ảnh nền trên cùng block bằng việc sử dụng nhiều giá trị url() và các giá trị cách nhau bởi dấu phẩy. Ví dụ:

Tùy chỉnh lặp lại ảnh nền với background-repeat

Khi sử dụng ảnh nền, mặc định hình ảnh sẽ lặp đi lặp lại theo cả chiều ngang và dọc cho đến khi lấp toàn bộ phần tử. Nhưng bạn cũng có thể tùy chỉnh lại việc lặp lại ảnh nền thông qua thuộc tính background-repeat. Các giá trị của nó bao gồm:

  • no-repeat: Không lặp
  • repeat-x: Lặp theo chiều ngang
  • repeat-y: Lặp theo chiều dọc
  • space: Lặp đều theo cả chiều ngang và dọc, ảnh nền cách nhau bằng khoảng trắng
  • repeat: Mặc định

VÍ dụ:

học css cơ bản

học css cơ bảnhọc css cơ bản

Đổi vị trí ảnh nền với thuộc tính background-position

Để đổi vị trí hiển thị của ảnh nền bạn sử dụng thuộc tính background-position. Nó bao gồm một vài giá trị sau:

  • top: hiển thị ở đầu phần tử
  • bottom: hiển thị bên dưới phần tử
  • left: hiển thị bên trái phần tử
  • right: hiển thị bên phải phần tử
  • center: hiển thị chính giữa phần tử

y-x: tùy biến vị trí hiển thị theo tọa độ, giá trị đứng trước là y và đứng sau là x.

Với thuộc tính này thì bạn có thể sử dụng tối đa cùng lúc hai giá trị. Ví dụ bạn muốn ảnh nằm chính giữa bên trên phần tử thì giá trị sẽ là center top.

Chia cột với float và clear float

Trong phần này của serie học CSS cơ bản, tôi sẽ giới thiệu tới các bạn một kỹ thuật rất quan trọng trong CSS Layout, đó là cách chia cột trên CSS.

Chia cột trong CSS là gì?

Chia cột trong CSS có nghĩa là bạn thiết lập cho những phần tử con trong một phần tử mẹ nằm trên cùng một hàng. Ví dụ tôi muốn phần nội dung có 2 cột thì tôi sẽ cần tạo ra 3 cái, một gọi là phần tử mẹ hay container, 2 thẻ div còn lại gọi là column (cột).

Trong ví dụ này, tôi có phần #content chứa 2 cột là #post#sidebar. Ở đây, tôi dùng thêm class container cho #content vì sau này nếu muốn chia thêm cột cho các phần tử khác thì có thể dùng lại class này.

Các bước chia cột trong CSS

Để chia cột trong CSS, bạn cần làm đầy đủ các bước sau:

1. Các cột đều phải có một container, tức là phần tử mẹ.

2. Thiết lập chiều rộng cho container.

3. Thiết lập chiều rộng cho hai cột, tổng chiều rộng của hai cột phải bằng hoặc nhỏ hơn chiều rộng của container.

4. Sử dụng box-sizing: box-border để tính toán kích thước chính xác.

5. Sử dụng thuộc tính float với giá trị left hoặc right để đẩy phần tử qua trái hoặc phải.

6. Tiến hành clear  float.

Cách chia cột trong CSS

Trước tiên, tôi sẽ thiết lập chiều rộng cho class container

Tiếp theo, thiết lập chiều rộng cho #post và #sidebar

học css cơ bản

Giờ tôi muốn #sidebar nằm bên phải của #post, vì vậy tôi sẽ thêm cho #sidebar một thuộc tính float với giá trị là right.

Đồng thời, tôi muốn #post nằm bên trái của #sidebar thì tôi sẽ thêm cho #post thuộc tính float với giá trị là left.

Kết quả:

học css cơ bản

học css cơ bản

Như bạn thấy ở đây thì #post#sidebar đã nhảy ra ngoài container. Để 2 cột này hiển thị trong container thì tôi sẽ tiến hành clear float.

Clear float là gì?

Khi bạn sử dụng thuộc tính float tức là bạn đã thiết lập cho một phần tử được đẩy sang trái hoặc  sang phải và các phần tử gần đó có thể hiển thị bao bọc xung quanh nó. Nhưng nếu bạn float toàn bộ các phần tử trong một container thì container sẽ hiển thị bao bọc xung quanh các phần tử được float. Vì vậy mới bị lỗi như  trong ví dụ trên.

Khi tiến hành float các phần tử, bạn cần tạo ra điểm kết thúc tức là bạn muốn nó không float ở đâu nữa hay trong CSS gọi là clear float.

Tùy theo từng trường hợp mà sử dụng các cách clear float cho phù hợp.

Cách 1. Sử dụng thẻ div trống

Với cách này thì bạn sẽ tạo ra một class riêng để clear float và khai báo thêm một thẻ div của class này và đặt nó ở bên dưới của cột cuối cùng.

Ví dụ đoạn CSS cho class tên là .clear:

Thuộc tính clear này không cho phép các phần tử float xuống nó, các giá trị của nó bao gồm left, right, bothnone.

Ở đây,tôi sẽ khai báo thẻ div với class tên là clear và đặt nó ở cột dưới cùng.

Kết quả:

học css cơ bản

học css cơ bản

Cách 2. Sử dụng overflow

Với cách này thì bạn không cần chỉnh sửa HTML mà chỉ cần thêm overflow: auto; cho container.

học css cơ bản

học css cơ bản

Reset CSS là gì? Tại sao cần reset CSS?

Khi học HTML cơ bản  thì bạn đã biết trình duyệt đã mặc định để hiển thị một vài thẻ HTML thành văn bản đầy đủ, nó cũng mặc định thêm một vài quy tắc như có chứa padding, margin,…trên trang tài liệu HTML và mỗi loại trình duyệt sẽ hiển thị khác nhau do có những quy tắc hiển thị riêng.

Vì vậy, khi viết CSS nên đưa toàn bộ các giá trị của phần tử trên website về 0 và xóa đi một số định dạng có sẵn để có thể viết lại CSS theo ý muốn, giúp website hiển thị tốt trên tất cả các trình duyệt. Và công việc này gọi là Reset CSS.

Cách reset CSS

Cách đơn giản nhất để reset CSS là thêm đoạn dưới đây vào tập tin CSS thì có thể đưa toàn bộ giá trị của Box Model về 0.

Có cách khác giúp tối ưu hơn cho việc reset CSS là sử dụng các bộ Reset CSS có sẵn.

Các bộ Reset CSS thông dụng

Cách sử dụng các bộ Reset CSS này là copy code bỏ vào đầu file CSS.

normalize.css

Đặc điểm của bộ Reset CSS này là điều chỉnh các phần tử trên website hiển thị phù hợp với tất cả trình duyệt, xóa margin và padding mặc định, có style cho các thẻ như <sub>, <sup>, <code>,…

Reset CSS 2.0

Bộ Reset CSS này thích hợp cho những người muốn tự tay viết lại CSS cho toàn bộ các thành phần trong website.

Tùy biến hiển thị danh sách

Trong serie học HTML cơ bản  thì các thẻ list trong HTML sẽ hiển thị dựa trên quy tắc hiển thị của trình duyệt cho các thẻ đó. Như thẻ <ol> là hiển thị danh sách có đánh số, <ul> hiển thị dấu chấm tròn cho mỗi mục con bên trong. Nhưng trong serie học CSS cơ bản này, bạn có thể tùy biến lại cách hiển thị của nó bằng cách sử dụng thuộc tính list-style.

Quy tắc viết thuộc tính list-style

cấu trúc:

  • list-style-type: Thay đổi loại hiển thị của danh sách
  • list-style-position: Tùy chỉnh vị trí hiển thị cho các dấu đầu dòng của mục con bên trong danh sách hoặc bên ngoài danh sách.
  • list-style-image: Sử dụng hình ảnh làm các dấu đầu dòng cho danh sách

Sử dụng thuộc tính này cho phần tử nào?

Những thuộc tính tôi giới thiệu sau đây đều dùng để tùy biến hiển thị cho các phần tử <li> trên website.

list-style-type

Với giá trị này bạn sẽ thiết lập hiển thị cho các dấu đầu dòng trên thẻ <li>. Nó bao gồm một số thuộc tính thông dụng như sau:

  • disc: Kiểu nút tròn có nền bên trong.
  • circle: Kiểu nút tròn có viền nhưng không có nền.
  • squre: Kiểu ô vuông có nền.
  • decimal: Kiểu số thứ tự.
  • lower-roman: Kiểu số La Mã in thường.
  • upper-roman: Kiểu số La Mã in hoa.
  • none: Xóa các dấu đầu dòng

Ngoài ra còn rất nhiều giá trị khác mà bạn có thể xem thêm tại đây.

học css cơ bản

học css cơ bản

list-style-position

Với thuộc tính này thì chỉ có  2 giá trị:

  • inside: Hiển thị dấu đầu dòng bên trong block.
  • outside: Hiển thị dấu đầu dòng bên ngoài block.

học css cơ bản

học css cơ bản

list-style-image

học css cơ bản

học css cơ bản

Viết ngắn gọn vào list-style

Sau khi đã biết cách sử dụng 3 thuộc tính trên, bây giờ bạn có thể viết tất cả các giá trị đó vào thuộc tính list-style như sau:

Sử dụng list-style cho các phần tử khác

Thuộc tính list-style chỉ áp dụng được cho các phần tử <li> vì mặc định nó hiển thị theo kiểu list item. Nếu bạn muốn sử dụng cho các phần tử khác thì phải chuyển nó thành kiểu hiển thị list item thông qua thuộc tính display: list-item. Ví dụ:

học css cơ bản

học css cơ bản

Tùy biến loại phần tử với display

Trong phần đầu của serie học CSS cơ bản tôi đã nói về Block và Inline là gì và tầm quan trọng của nó trong việc thiết kế bố cục cho website. Và làm thế nào để chuyển từ inline sang block và ngược lại ? Giải pháp ở đây là sử dụng thuộc tính display.

Các giá trị cơ bản của thuộc tính display bao gồm:

  • inline: Chuyển phần tử về hiển thị trên cùng một hàng.
  • inline-block: Chuyển phần tử về hiển thị trên cùng một hàng nhưng vẫn kế thừa các đặc tính của block như thêm background, tùy chỉnh kích thước…
  • block: Chuyển phần tử về hiển thị kiểu block.
  • list-item: Chuyển phần tử về hiển thị như một mục danh sách.
  • none: Ẩn phần tử đi không cho hiển thị.

Còn một vài giá trị khác bạn có thể tham khảo tại đây.

Ví dụ:

học css cơ bản

học css cơ bản

Position và Absolute-Relative

Tiếp nối serie học CSS cơ bản, tôi sẽ giới thiệu đến các bạn thuộc tính position, thuộc tính này giúp bạn di chuyển một phần tử nào đó mà không làm ảnh hưởng đến bố cục của website, tức là nó giúp tùy chỉnh khu vực hiển thị cho phần tử và việc tùy chỉnh này không ảnh hưởng đến các phần tử khác.

Giá trị của thuộc tính position

Các gái trị của thuộc tính position bao gồm:

  • relative: Thiết lập một phần tử sử dụng các thuộc tính position mà không ảnh hưởng đến hiển thị ban đầu.
  • absolute: Thiết lập vị trí của phần tử nhưng nó luôn nằm trong phần tử mẹ là relative.
  • fixed: Hiển thị luôn đi theo trình duyệt khi cuộn trang.
  • static: Chuyển phần tử về hiển thị theo kiểu mặc định.

Khi thiết lập xong một phần tử sử dụng position, bạn dùng thêm một số thuộc tính để căn chỉnh vị trí. Có 4 thuộc tính position là:

  • top: Căn chỉnh vị trí hiển thị của phần tử từ trên xuống dưới.
  • bottom: Căn chỉnh vị trí hiển thị của phần tử từ dưới lên trên.
  • left: Căn chỉnh vị trí hiển thị của phần tử từ trái qua phải.
  • right: Căn chỉnh vị trí hiển thị của phần tử từ phải qua trái.

Ví dụ kiểu relative

học css cơ bản

học css cơ bản

Ví dụ kiểu absolute

Với kiểu absolute thì bạn cần có một phần tử mẹ kiểu relative và giá trị thấp nhất của nó tính từ lề của phần tử mẹ. Ví dụ, vùng màu xanh là vùng được thiết lập kiểu relative còn hình ảnh là kiểu absolute.Khi đưa các thuộc tính position về giá trị 0 thì nó vẫn nằm trong phần tử mẹ.

học css cơ bản

học css cơ bản

Ví dụ kiểu fixed

Trong ví dụ này, tôi tạo ra một danh sách và đưa các mục con thành kiểu inline và position kiểu fixed để nó luôn đi theo trình duyệt khi cuộn trang.

học css cơ bản

học css cơ bản

 

Một số Pseudo đơn giản

Đây có thể nói là phần hướng dẫn chi tiết từng tính năng trong CSS cuối cùng của serie học CSS cơ bản. Trong phần này tôi sẽ giới thiệu qua về Pseudo Class – một tính năng trong CSS3.

Pseudo Class là gì?

Pseudo Class được sử dụng để viết CSS cho một trạng thái nào đó của một phần tử như viết CSS đổi màu liên kết khi rê chuột vào, đổi thuộc tính một phần tử khi nhấp vào,…pseudo class được khai báo tại vùng chọn, đặt đằng sau vùng chọn và ngăn cách bởi dấu (:). Ví dụ: #link: hover

Một số Pseudo Class thông dụng

  • :hover: Chọn trạng thái khi rê chuột vào một phần tử.
  • :visited: Sử dụng cho liên kết, chọn liên kết khi được truy cập.
  • :link: Sử dụng cho liên kết, chọn liên kết khi chưa nhấp vào.
  • :active: Chọn phần tử khi họ chọn/nhấp vào.

Ví dụ về pseudo class đơn giản

học css cơ bản

học css cơ bản

Lời kết

Kết thúc phần 2 của serie học CSS cơ bản, tôi đã giới thiệu đến các bạn những kiến thức cơ bản nhưng cũng khá chi tiết trong việc lên bố cục giao diện cho website bằng kỹ thuật CSS Layout. Phần tiếp theo và cũng là phần cuối cùng của serie học CSS cơ bản, tôi sẽ hướng các bạn cách tạo các loại menu cơ bản cho website và thực hành làm một giao diện website đơn giản. Cùng đón đọc nhé!

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

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