CSS là gì

sổ bé hơn, nó sẽ đẩy chữ xuống dưới và những chữ còn lại vẫn sẽ được IN HOA.
Absolute Position trong thiết kế giao diện
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 cũng đã biết, giao diện với Float rất mong manh. Chỉ cần sai chút xíu là cả giao diện có thể bị vỡ.
Đó là chưa kể đến những bất cập của Float như phải clear float và đôi khi nó thực sự rất khó quản lý. Nhưng không hiểu vì lý do tại sao Float được sử dụng rất rộng rãi và vượt ra ngoài dự định ban đầu của những người phát triển CSS. Đầu tiên Float chỉ được thiết kế để đưa hình ảnh vào những vị trí thích hợp. Nhưng dần dà nó được sử dụng khá phổ biến trong thiết kế giao diện.
Nói vậy không phải là tôi không thích Float hoặc sử dụng Float là không tốt, mà sự thực thì tôi cũng sử dụng Float khá nhiều trong thiết kế giao diện. Nhưng nếu dùng nó kết hợp với Absolute Position trong CSS thì giúp giao diện của bạn có thể tương thích với nhiều trình duyệt mà không cần phải áp dụng hack cho IE. 
Trong bài này chúng ta sẽ tìm hiểu sơ qua về Absolute Position trong Relative Position. Tôi đã có một video về Contextual Positioning nói rất rõ về mối liên hệ giữa Relative Position và Absolute Position. Nhưng vì đây là khái niệm hết sức quan trọng do vậy trong bài này tôi cũng nói lại một chút.
Ở ví dụ dưới đây tôi sử dùng Absolute Position để định vị 3 thẻ div nằm trong thẻ div lớn là #wrapper. 
view source
print?
1
2
         
3
4
         
5
6
         
7
Với Absolute Position bạn có thể sử dụng các giá trị: px, em và % và với các vị trí: top, right, bottom và left. Tuy nhiên trong thực tế bạn chỉ cần 2 giá trị là top và left (hoặc right) thì cũng đủ để định vị một thành phần rồi.
Mẹo nhỏ: Nếu trong quá trình định vị tọa độ với Absolute bạn phải làm đi làm lại nhiều lần. Thì nay bạn có thể sử dụng addon Firebug để định vị chính xác đến từng Pixel. Tôi có làm một video hướng dẫn cách sử dụng Firebug.
Ở ví dụ trên thẻ div#wrapper có position: relative, nó sẽ đóng vai trò làm thành phần bao quanh cho 3 thẻ div có position: absolute nằm bên trong nó. Nếu ta bỏ giá trị position: relative ở thẻ div#wrapper đi thì 3 thẻ div ở trong sẽ như “hươu lạc mẹ” và chạy toán loạn hết. Uhm! thực ra cũng không toán loạn mà nó sẽ nhận body làm mẹ nuôi và định vị theo “bà mẹ” mới này.
Chính vì thế điều quan trọng nhất trong khi sử dụng Absolute Position là xác định thành phần bao quanh và đặt position của nó thành relative
Nghe cũng hay mà bạn có ví dụ trong thực tế không?
Tôi biết là bạn sẽ hỏi do vậy tôi đã chuẩn bị trước một giao diện được sử dụng Absolute Position cho bạn tham khảo. Bạn sẽ dễ dàng nhận thấy ở giao diện này có một tấm hình lớn choán hết phần Header và nó nằm “chông chênh” ở giữa. Đây là ví dụ hoàn hảo về sử dụng Absolute Position để định vị các thành phần.
Ngoài ra các thành phần còn lại như thanh di chuyển ở trên và dưới, logo và phần Featured đều được sử dụng Absolute Position. Tôi đã thử trong IE 6, 7 và 8 và hầu như không phải hack bất cứ phần nào ngoại trừ phần PNG hack cho IE 6. Nếu giao diện này làm bằng Float thì sẽ ít nhất là cũng phải hack cái Double Margin của IE.
Bạn có thể download ví dụ này về để xem phần code HTML và CSS
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 khác nghe tên hoàn toàn giống với valign là Vertical-align. Chính vì điều này nên đã gây ra một số hiểu lầm về nó. Trong bài này chúng ta sẽ xem xét cách sử dụng vertical-align trong CSS.
Trên thực tế rất ít khi bạn phải sử dụng tính năng vertical-align trong CSS trừ khi bạn đang thiết kế bảng với dữ liệu cần căn chỉnh vào giữa dòng. Nhưng theo kinh nghiệm cá nhân tôi, khi làm giao diện tôi rất ít khi sử dụng vertical-align bởi vì nó thực sự không cần thiết. Do chúng ta có thể sử dụng padding và margin để điều khiển nó tới vị trí mà mình muốn. Nhưng với những người mới học CSS và vừa thoát ra khỏi cách thiết kế bằng bảng thì cái “lối mòn” cũ vẫn chưa hoàn toàn bỏ được. Chính vì vậy nhiều người mới hỏi tại sao khi sử dụng vertical-align: middle trong thẻ div nó lại không cho kết quả như mong muốn.
Nói chung cách sử dụng vertical-align trong CSS để căn chỉnh một thành phần không phải là table cell cũng không hề đơn giản mà cũng lắm nhiêu khê. Có nhiều cách hoàn toàn không tương thích với các trình duyệt đặc biệt là IE (kể cả IE 8). Vậy nên khi quyết định sử dụng vertical-align để căn chỉnh thành phần trong block element như bạn nên suy nghĩ cho kỹ. Tuy nhiên vì bạn vẫn muốn làm hoặc bắt buộc phải làm thì dưới đây là một số cách bạn có thể áp dụng được.
Cách 1: Biến thành table cell
Trong cách này chúng ta sẽ biến một thẻ thành một table cell và do đó có thể áp dụng vertical-align bình thường. Cái hay của cách này là ngắn gọn và lẹ nhưng nó không tương thích với trình duyệt IE (kể cả IE 8 beta). Cho nên bạn cũng cần suy nghĩ ở đây.
view source
print?
1
2
3
     Lorem ipsum dolor sit amet.
4
5
view source
print?
1
#container {display: table;}
2
#content {display: table-cell; vertical-align: middle;}
Cách 2: Sử dụng margin và absolute position
Trong cách này chúng ta sẽ sử dụng absolute position để định vị thành phần và dùng margin giá trị âm để bù lại khoảng mình đẩy xuống. Cái hay trong cách này là tương thích với mọi trình duyệt, không cần thêm một thẻ div nữa. Nhưng mỗi khi trình duyệt bị thu nhỏ quá, nội dung sẽ biến mất.
view source
print?
1
2
3
     Lorem ipsum dolor sit amet.
4
5
view source
print?
1
#container {position: relative;}
2
#content {
3
position:absolute;
4
top:50%; height:200px;
5
margin-top:-100px; /* giá trị âm bằng một nửa chiều cao */
6
}
Cách 3: sử dụng line-height
Đây là cách có khi được sử dụng nhiều nhất bởi vì nó đơn giản nhất và tương thích với mọi trình duyệt. Nhưng nó chỉ có thể áp dụng với những thành phần chỉ có một dòng chữ và thành phần chứa nó có độ cao cụ thể.
view source
print?
1
2
     Lorem ipsum dolor sit amet.
3
view source
print?
1
#content {
2
 height:200px;
3
#content p {
4
line-height: 200px;
5
}
Kết luận
Ở bài này tôi giới thiệu với bạn 3 cách để căn chỉnh theo chiều dọc một thành phần. Cách nào cũng có điểm mạnh và điểm yếu và bạn hãy tùy từng trường hợp mà áp dụng sao cho hợp lý. Nhưng trên thực tế một đoạn văn không nhất thiết phải nằm giữa một thẻ div mới đẹp. Chính vì thế trừ trường hợp bắt buộc, tránh sử dụng vertical-align cho nó đỡ rắc rối.
Thành phần Block và Inline
Khái niệm về Inline và Block là một khái niệm hết sức cơ bản nhưng cũng cực kỳ quan trọng trong CSS. Hiểu được từng đặc điểm của mỗi thành phần là chìa khóa quan trọng để bạn có thể vận hành CSS theo ý muốn. Trong bài này tôi sẽ nói về chức năng của từng thành phần. Tuy nhiên tôi sẽ vẫn giữ nguyên từ chuyên ngành là Block và Inline mà không dịch ra tiếng Việt là “khối” và “trong dòng” nghe cùi quá.
Khi các thành phần HTML được hiển thị trên trình duyệt nó thường có 2 cách hiển thị là theo Block và Inline. Nói hình tượng để bạn dễ hiểu thì các thành phần Block giống như một bàn cờ và các thành phần Inline là quân cờ. Các quân cờ nằm trong bàn cờ và bàn cờ thì không bao giờ nằm trong quân cờ. Đây cũng là một nguyên tắc cơ bản nhất của Inline và Block. Thành phần inline có thể nằm trong thành phần Block, nhưng Block không thể nằm trong thành phần Inline.
Lý thuyết thì là vậy nhưng hơi mơ hồ khó hiểu, cách tốt nhất là chúng ta học từ ví dụ ở dưới.
Ví dụ về Block
Thẻ và là hai thành phần mặc định Block phổ biến nhất. Chỉ khi bạn khai báo trong CSS và muốn biến nó thành inline với Property là Display: inline thì nó mới thành inline. Ví dụ tôi có một thẻ như sau:
Bạn sẽ thấy dòng chữ này chiếm hết độ rộng của thành phần mẹ chứa nó và tự động xuống hàng mới
Nếu tôi viết tiếp thì dòng mới sẽ bị đẩy xuống dưới dù cho nó được viết cùng hàng với dòng ở trên nằm trong thẻ 
Các thành phần Block bao gồm
: Là thành phần trắng dùng để làm “hộp” chứa. ….: Các headings: Thẻ này dùng để mở đầu và kết thúc một đoạn văn bản., , : hiển thị danh sách., , và 
Ví dụ về thành phần Inline
Ví dụ tôi có một đoạn văn như sau, và trong đó tôi có một cặp thẻ , nó không bắt thành phần nằm trong nó phải xuống hàng mà nó chỉ “nhẹ nhàng” chui vào giữa và sống hạnh phúc trong đó. Cũng giống như quân cờ nằm trong bàn cờ vậy.
Các thành phần inline bao gồm
, , , 
Ví dụ hình mặt cười này sẽ xuất hiện ở trong dòng mà không ép chữ xuống hàng mới. Nó chỉ chiếm khoảng không gian tối thiểu mà nó cần. Giống như quân cờ chỉ chiếm một khoảng không gian nhất định của nó mà thôi. Chứ nó không ảnh hưởng đến bàn cờ.
Display Property
Cái hay của CSS là bạn không chỉ bị ép buộc sử dụng giá trị mặc định của từng thành phần. Mà bạn có thể thay đổi cách hiển thị của nó theo ý mình. Ví dụ một thành phần theo mặc định là dạng Inline nhưng bạn có thể biến nó thành block với CSS tương ứng là Display: block. Đây chính là một phần rất quan trọng trong thiết kế giao diện. Nó mở ra một chân trời mới với các cách sắp xếp thành phần mà chỉ bị giới hạn bằng khả năng thiết kế của bạn.
Được áp dụng nhiều nhất là khi bạn sử dụng làm menu như rất nhiều trang web. Ở mặc định nếu bạn có một list như sau:
view source
print?
1
2
Home
3
About
4
Services
5
FAQs
6
Contact
7
Nó sẽ xuất hiện như sau ở trình duyệt
Home
About
Services
FAQs
Contact
Nếu bạn muốn nó xuất hiện trong cùng một hàng thì bạn có thể khai bao CSS như sau:
view source
print?
1
.menuNav li {
2
display:inline;
3
background-color:#eee;
4
border:1px solid red;
5
margin:0; padding:0px 10px;
6
}
Bạn cũng có thể tham khảo thêm video tutorial tôi đã làm về Display Property trong CSS để hiểu thêm chi tiết.