cascading style sheets

Sử dụng white-space để xử lý khoảng trắng dòng trong CSS Có khi nào bạn tự hỏi tại sao khi bạn gõ một mớ khoảng trắng bằng cách nhấn phím space liên tiếp cho đoạn văn mà bạn soạn ở chế độ html thì khi hiển thị nó cũng chỉ hiển thị là một khoảng trắng, thậm chí khoảng trắng bạn cố tình gõ ở đầu...

Tìm hiểu phần tử Pseudo-elements trong CSS Pseudo-elements được hiểu như phần tử ảo không thực sự tồn tại rõ ràng trong cây hồ sơ. Pseudo-elements có thể động. Trong CSS1 và CSS2 pseudo-elementss bắt đầu với dấu hai chấm ( : ), trong CSS3 thì có thêm hai dấu hai chấm ( :: ). :first-letter Bạn...

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...

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ị...

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ìm hiểu về Webkit Filters trong CSS3 CSS3 là một trong những công cụ tuyệt vời. Cách đây không lâu thì W3C đã phát hành ra bộ Filter Effects 1.0, tác dụng của nó giống gần như một số bộ lọc cơ bản của Photoshop (contract, grayscale, hue, ….) Trong bài này tôi sẽ giới thiệu với các bạn “CSS3...

Hướng dẫn cách tạo Accordion với CSS3 Bài viết này sẽ hướng dẫn các bạn cách tạo một Accordion với CSS3. Bước 1 – SETUP HTML <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>Accordion with CSS3</title> <link rel="stylesheet" type="text/css"...

Hướng dẫn cách chuyển đổi PSD sang CSS3 Chúng ta đều biết CSS3 có thể tạo ra được những hiệu ứng đẹp mắt và ấn tượng. Với CSS3, chúng ta có thể giảm bớt lượng hình ảnh sử dụng khi chuyển từ PSD sang HTML&CSS. Tuy nhiên, cũng thật khó có thể nhớ hết được tất cả các mã lệnh của CSS3. Chính ví...

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...