css

Hướng dẫn tạo layout giao diện ba cột cho website Bài viết này mình sẽ bắt đầu hướng dẫn các bạn layout một giao diện hoàn chỉnh. Ở bài này mình sẽ hướng dẫn layout một giao diện ba cột đơn giản bằng HTML và CSS. Dưới đây hình ảnh giao diện ba cột sau khi chúng ta tiến hành xong việc layout...

Hướng dẫn tạo menu dọc đơn giản cho website Trong thiết kế web có hai dạng menu cơ bản là menu ngang và menu dọc. Ở bài trước mình đã hướng dẫn các bạn Tạo menu ngang đơn giản bằng CSS và HTML, tiếp bài viết hôm nay mình sẽ hướng dẫn các bạn xây dựng và hoàn thiện dạng menu thứ hai là menu dọc...

Hướng dẫn tạo menu ngang đơn giản cho website Bài viết này sẽ hướng dẫn các bạn tạo một menu ngang đơn giản bằng CSS và HTML. Nếu như bạn nào đã đọc các bài viết trước thì sẽ dễ hiểu và sẽ dễ dàng hơn. Đầu tiên chúng ta tạo file menu.html và thiết kế HTML để có được một menu ngang như sau...

Sự khác nhau giữa ID và Class trong CSS Trong CSS có hai trường phái (Nói vậy nó Sang) là Id và Class. Tuy chức năng của hai bạn này như nhau, nhưng giữa chúng có sự khác biệt rất rõ nét. Và nếu như chúng ta biết sử dụng chúng một cách hợp lý thì layout sẽ đạt đến trình độ cao và chuyên nghiệp...

Tổng hợp một số lệnh thường gặp trong CSS Bài viết này sẽ tổng hợp đến các bạn một số lệnh căn bản và thường hay gặp nhất trong CSS và để layout hoàn chỉnh một trang web thì không thể thiếu những lệnh này. 1. Lệnh margin: Lệnh margin nói một cách để các bạn dễ hiểu và hình dung là nó giúp...

Tìm hiểu cú pháp trong CSS Dưới đây là một ví dụ rất đơn giản của CSS, nó được viết để định dạng thẻ h3 của tài liệu sẽ có màu xanh dương h3 {color: blue;} Do vậy nếu bạn có code HTML như sau <h3>Đoạn văn bản này sẽ có màu xanh trong trình duyệt</h3> Về cơ bản cú pháp của CSS bao gồm 2 phần...

Tìm hiểu độ lớn thực sự của Box trong CSS Khi thiết kế giao diện nhiều cột sử dụng CSS thì độ lớn của các box rất quan trọng và chúng chịu ảnh hưởng rất lớn đến nhau. Nếu một box này bị phình to ra hơn kích thước bạn muốn, nó có thể đẩy box bên cạnh di chuyển sang hướng khác và hậu quả là cả...

Tìm hiểu kỹ thuật Clear và Float Clear và Float là kỹ thuật dùng rất nhiều trong thiết kế giao diện bằng CSS với hai tính năng cùng tên là Clear và Float. Float dùng để tách một thành phần bất kỳ khỏi cách hiển thị thông thường của nó để tạo chỗ cho những thành phần ở sau di chuyển lên và phủ...

Tìm hiểu Position Property trong CSS Khi đã sử dụng CSS để thiết kế giao diện thì Position Property là một trong những phần quan trọng nhất mà bạn cần hiểu rõ. Position Property chi phối mối tương quan giữa các thành phần của trang web. Có tất cả 4 giá trị cho Position property là: Static...

Tìm hiểu khái niệm Contextual Position Contextual Positioning là một khái niệm hết sức quan trọng mà bạn cần nắm vững nếu bạn muốn sử dụng CSS để thiết kế giao diện thay cho dùng bảng HTML. Nói nôm na thì Contextual Positioning có nghĩa là khi bạn định vị một thành phần bất kỳ sử dụng 4 giá trị...

Tìm hiểu và cách sử dụng Pseudo Class Pseudo (phát âm là: sju:dou) tiếng Việt có nghĩa là “giả, không thật”, sở dĩ nó được đặt tên là Pseudo Class hay gọi là “Class giả” là vì nó không được gắn liền với những thẻ XHTML như những class thông thường bạn đã biết. Pseudo Class sẽ tạo ra thay đổi...

Trình bày code CSS hợp lý Trong bài này chúng ta sẽ không bàn đến những tính năng thông thường của CSS mà trong bài này chúng ta sẽ xem xét đến những cách trình bày code CSS. Có rất nhiều cách bạn có thể chọn để trình bày trong CSS, nhưng chọn ra cách nào phù hợp với mình và luôn sử dụng nó là...

Thiết kế giao diện sử dụng Absolute Position Có một thực tế rằng Absolute Position tuy rất hay và mạnh nhưng lại chưa được sử dụng đúng với “thực lực” của nó. Đa phần người ta thường sử dụng Float và dùng Padding hoặc Margin để căn chỉnh các thành phần trong giao diện với nhau. Nhưng như bạn...

Tìm hiểu tính năng Vertical-align trong CSS Tính năng Vertical-align trong CSS được kế thừa từ “thời đại” sử dụng bảng để thiết kế giao diện. Hiện tại tính năng valign trong table đã bị “đào thải” và không còn được sử dụng đúng chuẩn web nữa. Nhưng thay vào đó CSS lại giới thiệu một tính năng...

Tìm hiểu và cách dùng display: inline-block Thông thường, khi bạn muốn tạo một list đối tượng nằm ngang thì bạn cần phải sử dụng float:left/right. Tuy nhiên, các bạn có thể sử dụng display:inline-block để làm điều đó một cách đơn giản hơn. Trong bài viết này mình sẽ giới thiệu các bạn cách sử...

Tổng quan về Sublime text 3 Các đây vài ngày thì mình đã được Sublime HQ thông báo Sublime Text 3 đã chính thức phát hành bản build beta 3047 và chính thức dành cho người dùng không cần đăng ký. ST3 rất tuyệt vời, tuy nhiên, các plugin của ST2 không thể dùng được trên ST3 và phải chờ một thời...

Tìm hiểu và áp dụng Icon fonts Sự phát triển không ngừng của công nghệ đã đẩy sự sáng tạo ngày càng trở nên tuyệt vời hơn. Từ khi các trình duyệt bắt đầu tích hợp @font-face thì các thiết kế trên website ngày trở nên phong phú và đầy màu sắc. Đặt biệt, trong giai đoạn hiện nay “Thiết kế phẳng”...

Tìm hiểu và áp dụng Web fonts Việc tạo ra một font chữ là việc đòi hỏi rất nhiều kiến thức, thời gian và chất xám. Do đó, các font chữ thường được thương mại hóa, nếu bạn sử dụng một font thương mại mà convert nó sang các định dạng khác nhau để dùng cho @font-face hoặc cúfont đều là hành động...

Tìm hiểu và áp dụng Cúfon Có tổng cộng 3 cách để áp dụng một font “ngoại” vào website của mình. Cúfon là một phương pháp rất hay. Hôm nay thì chúng ta sẽ tìm hiểu rõ hơn về phương thức hoạt động cũng như cách áp dụng Cúfon vào website của mình. Áp dụng cúfon vào website Bạn tiến hành...

Cách làm menu cố định khi scroll chuột Floating menu thực sự không phải là một thủ thuật gì mới và ghê gớm lắm đâu. Nó có từ rất lâu rồi và cách dùng nó cũng thực sự không quá khó. Trong bài viết này mình sẽ hướng dẫn các bạn tạo một floating menu cho website và áp dụng nó vào trong XenForo...