Phạm Lâm's Blog

Let me love you - http://phamlam.info

CSS em là ai?

, ,

CSS là gì? Một câu hỏi đơn giản thôi mà khá khó để trả lời. Bạn có thể vào google.com và gõ cụm từ define: CSS sẽ cho ra vô vàn kết quả.

Khi thế giới web mới ra đời người ta thường dùng các thẻ HTML để dàn trang. Việc dàn trang đó bao gồm chia trang web thành các bảng, ô, để add text, add ảnh, kiểu chữ, màu sắc... Khi mà công nghệ web ngày càng phát triển người ta nhận thấy việc dàn trang bằng các bảng ngày càng trở nên bất tiện. Khối lượng mã HTML lớn cùng việc khó khăn trong kiểm soát các vùng nội dung trên trang web (theo tôi biết) là những lý do khiến HTML ngày càng thất thế. Nếu bạn vào các website chuyên nghiệp của nước ngoài bạn sẽ việc dàn trang của họ hoàn toàn bằng các thẻ DIV của CSS mà không dùng các thẻ HTML, nếu có thì cũng rất ít.

Công nghệ CSS được đề cập đầu tiên bởi W3C vào năm 1996. Theo định nghĩa của W3C (Wide Web Consortium) CSS (từ viết tắt của Cascading Style Sheet tạm dịch là bảng kiểu xếp chồng) là một ngôn ngữ giúp người thiết kế web có thể add kiểu vào tài liệu web (như kiểu font chữ, màu sắc, khoảng cách vv..). Bạn có thể tạo ra kiểu một lần nhưng có thể dùng lại nhiều lần trong các tài liệu web tiếp theo. Ví dụ như nếu bạn muốn hiển thị một bức ảnh trong web với màu khung màu xanh, đường viền bức ảnh là đường kẻ liền thì bạn có thể định nghĩa khung đó thành một kiểu, giả dụ đặt tên là "frame" đi. Và sau đó khi bạn muốn các khung ảnh khác cũng có kiểu dáng như vậy thì bạn chỉ việc gọi kiểu mà bạn đã định nghĩa để sử dụng lại lần nữa. Cụ thể ở đây là gọi kiểu "frame".

Việc dàn trang bằng các thẻ DIV trên web là việc bạn phân vùng các khu vực trên trang web và gọi các kiểu xác định mà bạn đã định nghĩa trước. Thay vì việc dùng các bảng HTML bạn có thể dùng các thẻ DIV linh hoạt để phân hoạch các vùng khác nhau trên trang. Một thẻ
<DIV></DIV>
cũng giống như một phần của miếng ghép để tạo nên trang web hoàn thiện. Ưu điểm của các thẻ DIV là rất linh hoạt, các lớp có thể chồng lên nhau một phần hoặt nhiều phần. Đây là một điểm thú vị mà việc dàn trang bằng HTML không có được. Nhưng nhược điểm của CSS là việc kiểm soát chúng trên các trình duyệt web khác nhau khá khó khăn vì chính tính linh hoạt trên. Các trình duyệt hỗ trợ CSS đôi khi là khác nhau vì vậy nếu dàn trang không tốt thì việc hiển thị cực tệ. Nhưng bạn đừng lo, có khó khăn thì sẽ có người giải quyết khó khăn. Hiện nay tôi biết có một thứ gọi là hack CSS tức là giúp viết CSS hiển thị tốt trên các trình duyệt khác nhau. CSS không phải là một ngôn ngữ lập trình tới thời điểm này (theo tôi được biết).

Về tài liệu CSS thì khá nhiều trên mạng nhưng chủ yếu là bằng tiếng anh. Tôi còn nhớ khi tôi view source một trang web của nước ngoài mà không hề thấy một thẻ HTML tôi đã rú lên sao họ tài thế . Tôi đã lượn vòng khắp các diễn đàn của Việt Nam mong kiếm được quyển sách CSS nào bằng tiếng Việt nhưng mà vô vọng. Ở VN hiện nay tôi gần như là chưa thấy việc dàn trang hoàn toàn bằng CSS trên web mà vẫn sử dụng HTML kết hợp với CSS là chủ yếu. Để học CSS bây giờ chắc bạn phải biết tiếng anh rồi. Và thêm một điều nữa, hay down các trang web đã được dàn trang bằng CSS và các file .css về nghiên cứu, mày mò, trình độ của bạn sẽ tiến triển nhiều đấy. Tiếng anh của tôi rất kém và cũng không đủ thời gian để dịch sách cho các bạn. Google là một thế giới rộng lớn, hãy gõ từ learn CSS để tìm sách học. Tôi có một vài trang web khuyến cáo các bạn nên vào và đọc.

http://www.w3.org/Style/CSS/
http://css.maxdesign.com.au/
http://www.andybudd.com/links/cssweb_standards/
http://www.dezwozhere.com/links.html
http://www.cssbeauty.com/
http://www.csszengarden.com/

Và cũng tặng các bạn một quyển sách về CSS với tựa đề CSS Web Design for Dummies tạm dịch là "Thiết kế web bằng CSS cho người mới bắt đầu". Dung lượng 12,4 MB là file .pdf. Bạn có thể dùng Adobe Reader để đọc. Chúc các bạn học tập tốt, năm mới vui vẻ nhé. Download Here

Bài viết được tổng hợp và viết bởi Phạm Lâm. Xin ghi rõ nguồn và tác giả nếu bạn trích dẫn hoặc xuất bản bài viết này.

Gửi E-card từ blog Opera, tại sao không nhỉ?Công nghệ lăng xê blog

Comments

Đỗ Nam Khánhnamkhanh Thursday, December 28, 2006 4:03:04 AM

Bài viết được tổng hợp và viết bởi Phạm Lâm. Xin ghi rõ nguồn và tác giả nếu bạn trích dẫn hoặc xuất bản bài viết này.


~~> sợ quá, bác này bi giờ đề cao cảnh giác gớm bigsmile

Khối lượng mã HTML lớn cùng việc khó khăn trong kiểm soát các vùng nội dung trên trang web (theo tôi biết) là những lý do khiến HTML ngày càng thất thế


Cái này thì cũng tùy anh ạ! Lý do người ta dùng CSS đầu tiên là do nó có tính kế thừa, giảm nhẹ công việc design. Thứ 2 là nó load nhanh hơn HTML (chả biết tại sao p). Còn nói thật là em thấy việc kiểm soát CSS khó bỏ xừ, loạn xà bần. Do bi giờ người ta phân biệt rạch ròi giữa web design & web program nên nên nếu nói khó khăn trong kiểm soát nội dung thì hơi ko chính xác. Họ đều dùng template để làm web hết (template ở đây không phải là cái mẫu web như anh vẫn thường tham khảo trên templatemonster.com đâu mà nói chính xác thì phải là template engine)

Tra thử trên en.wikipedia thấy nó định nghĩa DIV: DIV, an HTML tag which implements a generic block level object. Mà DIV là thành phần quan trọng nhất của CSS => Nói cho cùng CSS vẫn là dạng HTML thôi, không có gì to tát cả! (nhưng mà đọc nó mình chả hiểu gì cả lol)

Phạm Minh Tuấntuanpm Thursday, December 28, 2006 7:16:47 AM

tất nhiên anh Nam Khánh nói đúng nhưng mà chỉ đúng 1 phần thôi.
hiện nay khi CSS dùng kết hợp với HTML thì nó đúng là không có gì to tát nhưng mà một khi nó được kết hợp với XML và Ajax thì gần như nó làm được mọi thứ giống trên nền desktop kể cả các service. nó còn được gọi 1 tên khác đó là công nghệ web 2.0. hiện nay thì nhiều người đang đi theo hướng đó và e cũng đang tính để đi theo hướng XML&CSS đây bigsmile. mình làm ra sản phẩm bằng 2 cái đấy là không lo thất nghiệp rồi bigsmile

2 anh không tin cứ thử sang bên Blogger hay MySpace mà xem. bọn nó dùng kết hợp giữa XML và CSS nên ở bên Blogger thay đổi được nhiều hơn ở Opera rất nhiều đặc biệt là có thể dùng link nhúng JavaScript vào trong Blog được. ví dụ Google Adsendce thì phải dùng JavaScript để đặt quảng cáo trên các trang web. nếu đem sang Opera thì chịu chết nhưng Blogger vẫn nhúng vào bình thường. còn nhiều thứ khác nữa nếu ai am hiểu nhiều nhiều về XML 1 chút thì sang bên blogger làm được nhiều thứ lắm.

Đỗ Nam Khánhnamkhanh Thursday, December 28, 2006 12:25:08 PM

Hix, chú Tuấn à "khi CSS dùng kết hợp với HTML thì nó đúng là không có gì to tát nhưng mà một khi nó được kết hợp với XML và Ajax" ~~> xem lại khái niệm về Ajax nhé (Asynchronous Javascript And Xml) bigsmile Vì thế chú viết XML và Ajax là sai roài. Ajax cũng chỉ là 1 tập hợp các công nghệ đã có trước đó thôi chứ không phải là 1 ngôn ngữ lập trình.

Còn về chuyện các trang có cho dùng Javascript hay không đâu có liên quan gì đến XML & CSS đâu. Opera không cho chú dùng JS cũng có lý do của nó cả đấy (hạn chế cả mã HTML), an toàn mà lại. Cứ hình dung xem nếu cho nhúng JS vào trang web, chú ko comment là lại tương nguyên 1 cái alert trong 1 vòng lặp vô tận vào đấy thì sao? lol

Phạm Minh Tuấntuanpm Thursday, December 28, 2006 2:49:12 PM

hix! Biết anh giỏi lý thuyết rồi, e không học lý thuyết, nói chung là cứ đưa code đây thì e code ngon còn lý thuyết thì chịu.
Ông CEO của Cisco có nói 1 câu khá hay là cái gì người ta vẫn còn lơ mơ thì mình có thể kiếm ăn được bằng cái đó, để đến khi người ta biết rõ nó là cái gì rồi thì khó làm ăn được lắm. Ajax hay web 2.0 cũng thế thôi giờ mọi người đang vẫn còn lơ mơ nhiều về nó lắm, cứ đi theo con đường đấy là không sợ chết đói rồi bigsmile

Susi & bố mẹmaihome Monday, January 1, 2007 12:28:23 PM

Các bạn cho hỏi: có nhiều trang web không thấy hiện .htm hay .html mà là .php ở dòng địa chỉ, vậy những trang đó có thể dùng kèm CSS được không?

Phạm Lâmphamlam Monday, January 1, 2007 3:50:31 PM

Tuấn với NK trả lời giúp anh câu hỏi này cái. Câu này khó quá anh bó tay không biết trả lời sao đây

Đỗ Nam Khánhnamkhanh Tuesday, January 2, 2007 1:56:25 AM

@maihome: Tất nhiên là PHP, ASp hay đuôi gì cũng đều dùng được CSS hết bạn ạ. Vì chúng là những server script, khi có yêu cầu thực hiện (gõ link vào dòng địa chỉ chẳng hạn) thì web server sẽ biên dịch file php đó rồi trả lại kết quả là 1 trang HTML => tóm lại là dùng được CSS bigsmile

Susi & bố mẹmaihome Tuesday, January 2, 2007 3:23:33 AM

@NamKhanh: Cám ơn đã giải đáp nhưng nói thật là tớ vẫn lờ mờ vì chưa biết php là cái gì. Có xem trên w3school thấy nó là một cách làm web. Cũng thử save as 1 số trang có đuôi php để xem code thì lại thấy html. Té ra là có thằng nó biên dịch lại.

Đỗ Nam Khánhnamkhanh Tuesday, January 2, 2007 3:43:32 AM

bigsmile PHP ngày trước được hiểu là Peronal Home Page nhưng về sau được hiểu theo nghĩa Hypertext Preprocessor.
Một định nghĩa đơn giản về PHP:

The PHP Hypertext Preprocessor is a programming language that allows web developers to create dynamic content that interacts with databases. PHP is basically used for developing web based software applications.


Hiểu nôm na là nội dung trang web sẽ được lấy ra từ trong cơ sở dữ liệu chứ ko phải là đính cứng ở 1 file html. Như blog này chẳng hạn, nếu bạn làm bằng web tĩnh thì ứng với 1000 bài viết, bạn cần có 1000 trang html. Còn nếu dùng web động (php) bạn chỉ cần 1 trang & lấy dữ liệu 1000 bài viết đó ở trong database ra là xong bigsmile

Phạm Lâmphamlam Tuesday, January 2, 2007 3:54:45 AM

Nam Khánh rất nhiệt tình. Cố lên yes

Susi & bố mẹmaihome Tuesday, January 2, 2007 7:25:50 AM

Lại cám ơn NK, Bên blog NK có bài nào về php không nhỉ? Chạy qua xem thử cái!

Phạm Lâmphamlam Tuesday, January 2, 2007 7:44:05 AM

Blog của hắn làm gì có.

Cứ định nghĩa kiểu tây như ku NK thì hơi khó hiểu. Nôm na thế này nhé PHP là một ngôn ngữ lập trình web, cũng giống như ASP là một ngôn ngữ lập trình web. Bạn cứ hiểu HTML là ngôn ngữ thiết kế web tĩnh thôi. Mỗi trang bạn vào người ta sẽ phải tạo ra một trang HTML khác biệt để đưa lên mạng. Nhưng với lập trình web động bằng ngôn ngữ ASP, PHP thì người lập trình xây dựng những khuôn mẫu HTML sẵn và chỉ việc gọi dữ liệu từ các bảng dữ liệu vào. Các dữ liệu đương nhiên được cập nhật dễ dàng. Điều đó giúp nhàn rất nhiều. Như NK nói, có 1000 bài thì không phải làm 1000 trang HTML nữa mà chỉ việc lấy lần lượt từ cơ sở dữ liệu mà thôi.

Việc bạn save các trang PHP về mà nó ra dạng HTML là vì trang PHP đó đã được biên dịch sang HTML để trả về cho người dùng cuối cùng là bạn. Dù bạn save thế nào chỉ thấy được các code HTML chứ ko thấy các code PHP. Oke?

Đỗ Nam Khánhnamkhanh Tuesday, January 2, 2007 8:10:54 AM

sad bạn vào blog của mình ở Tag Programming "hình như" cũng có 1 ít PHP thì phải!!!
~~> http://my.opera.com/namkhanh/blog/index.dml/tag/Programming

Susi & bố mẹmaihome Wednesday, January 3, 2007 2:54:53 AM

@Phamlam:

"Tuấn với NK trả lời giúp anh câu hỏi này cái. Câu này khó quá anh bó tay không biết trả lời sao đây "

Thì ra PL thử tài thử sức đồng đội. Vụ PHP xin được đầu hàng. Nghe nói muốn làm web bằng PHP còn cần phải biết thêm cơ sở dữ liệu v.v... Đúng là biển lớn thật. Không có vây, không có cánh chắc chảng bay mà cũng chẳng bơi ra biển lớn được rồi.

Thôi thì đứng nhìn vậy.

Phạm Lâmphamlam Wednesday, January 3, 2007 4:26:30 AM

@Maihome. Không phải tôi thử sức đồng đội đâu mà tôi "lười" thôi.

Bạn nên học thiết kế web bằng HTML trước đi trước khi học lập trình web. HTML cũng rất quan trọng đấy

Nguyễn Sĩ Hiếuluv_TPL_LHNH Saturday, January 6, 2007 11:39:00 AM

hix! Làm theo mấy cái hướng dẫn đó khó hiểu quá!

˙·٠•● KID ●•٠·˙.nguyenvn56 Wednesday, January 17, 2007 12:17:54 PM

chà, có lẽ là phải down về đọc dần thôi, chẹp chẹp, tình hình là đọc mấy cái tut không hiểu lắm, tại dập khuôn thì không thích, mà sáng tạo thì chưa biết bigsmile bigsmile :d có lẽ nên học đã. Thax về mấy cái link nhé bác Lâm

Phạm Lâmphamlam Thursday, January 18, 2007 1:21:06 AM

Thì phải tự học mà kiếm cơm đi chứ, ai học hộ chú nữa bây giờ.

Người Địa ChấtNgDiaChat Saturday, February 24, 2007 12:01:58 PM

Anh Lâm ơi , sao cái skin valentine của anh em mượn tạm k0 dùng được trong forum vậy . anh xem dùng em đi :

http://my.opera.com/12a6_0506/forums/

che em hỏi , anh mát bao lâu để làm cái blog này và bao lâu để tạo cái skin Valentine này ?
em cũng đang muốn tự học lập trình và thiết kế như anh đây nên em muốn so thử thời gian xem sao ấy àm .

Phạm Lâmphamlam Monday, February 26, 2007 1:20:17 AM

@NgDiaChat. Anh chỉ sửa cái skin này cho blog chứ không phải sửa cho forum em ạ. Để hiển thị tốt cho 4rum thì em cần phải chỉnh sửa thêm nữa nhé.

Anonymous Wednesday, March 7, 2007 11:33:18 AM

hongnhunghp2000 writes: Day la lan dau tien minh co t 1blog , hanh phuc qua.!!!1111111

aphuvungxuoi Monday, March 19, 2007 9:00:47 AM

các bạn ơi cho mình hỏi là khi sử dụng Lớp trong css mình học thì thấy cú pháp của nó là
tag.classname {....} hoặc #idname nhưng khi mình save một số trang web và lấy trang css của nó xem thì thấy nó viết là: #idname1 #idname2 {...} nhưng không hiểu đến lúc sử dụng lớp thì cú pháp như thế nào mong các bạn giúp đỡ

Đỗ Nam Khánhnamkhanh Monday, March 19, 2007 9:41:48 AM

Nói đơn giản, CSS sử dụng như sau:
.classname {..}
=> khi sử dụng thì gọi css bằng cách
<span class="classname">nội dung</span>

#idname {...}
=> khi sử dụng thì gọi css bằng cách
<span id="idname">nội dung</span>

Còn tại sao dùng ID & class thì...để hôm nào đẹp trời, mình với bạn mỗi thằng 1 cốc trà đá ngồi đàm đạo nhỉ lol

aphuvungxuoi Tuesday, March 20, 2007 9:47:41 AM

vấn đề là khi ta gọi nó thì #idname1 #idname2 {...} không được ấy chứ nó cũng giống như là:
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black } thì có thể hiểu là lớp navbar của thẻ Ul và thẻ li có cùng một định dạng không và như ở trên thì Idname1 và idname2 cũng có cùng một định dạng không mong bạn trả lời giúp chứ trà đá thì có thể nhưng địa lý thì chắc là không cho phép đâu!!!

Đỗ Nam Khánhnamkhanh Tuesday, March 20, 2007 10:07:18 AM


Bạn xem hình chắc đã rõ câu trả lời bigsmile

laztus84 Wednesday, May 30, 2007 7:46:14 AM

ôg anh ơi vào trang ưeb của em chỉ cho em cái cách làm màu nền của cả blog trùng vói màu của hai hình trên cùng và duois cùng vói...cho em cái code CSS để làm vói......my.opera.com/laztus84
ông anh vào xem và chỉ giáo hộ

grey lamtieutam_dede Sunday, June 24, 2007 2:41:09 PM

em thấy mình tệ hại vô cùng chẳng hiểu mấy anh nói jì nữa chắc là em phải học tập từ căn bản wá à huhu.
sad

grey lamtieutam_dede Sunday, June 24, 2007 2:44:18 PM

anh phạm lâm tài thịêt đó em bái sư đuợc ko hả?!!!!!!!!!!!!!!!!!
happy

Sunny Nguyen Monday, July 2, 2007 2:53:40 AM

Có đại ca nào làm web trong tagged.com chua dzây, tôi vào đó đăng ký tại khoản xong rồi, nhưng rối tinh rối mù...ko hiểu lắm, có bác nào sử dụng nó rồi thì làm ơn chỉ giáo

Susi & bố mẹmaihome Thursday, July 12, 2007 3:49:32 PM

Từ lúc hỏi PL, NK và các bạn về CSS và PHP đến giờ kể ra cũng hơi lâu.

Hôm nay quay lại là muốn khoe với các bạn là mình đã có 1 trang PHP gần chuẩn. Nói "gần" là vì CSS của mình đã đúng chuẩn W3C nhưng còn 1 lỗi: khi xuất ra định dang XHTML (như NK đã giải thích) thì thiếu mất cái "đóng" tag.

Mời các bạn duyệt thử www.thietbiloc.com

Lê Hoàn Huyên Mynhoxmy_sunflower Sunday, September 16, 2007 11:53:21 AM

anh na` , anh gioi that day cai ji ve blog cung bit het ..nguong mo ưa chung ah ...Anh có thể giúp em cái chiện này đc hem dzậy chài..Anh tao lại giùm em một cái theme màu đen cho blog của em đi được ko ?Cái này em chịu hem kiên trì mà mò ra được...^.^ Anh giúp em nhá ....CM lại cho em nha ^^

Phạm Lâmphamlam Sunday, September 16, 2007 3:37:41 PM

Cảm ơn em đã có lời khen nhưng việc tạo skin thì anh không thể vì anh ko có nhiều thời gian sad

grey lamtieutam_dede Monday, September 17, 2007 10:49:37 PM

chỉ em với

Lê Hoàn Huyên Mynhoxmy_sunflower Tuesday, September 18, 2007 10:41:28 AM

tiếc nhỉ ,blog của em theme màu trằng viết entry lên hem đẹp tí nèo hết,lại fải tạo hình nền cho bài viết mỗi lần entry...hix hix thật là khổ ...anh ko giúp em được....pó tay

grey lamtieutam_dede Tuesday, September 18, 2007 10:54:54 PM

hơi!chán wá đi...thui em đi học trước hôm nào rảnh làm lại

tranmanhlinh Saturday, October 20, 2007 9:23:43 AM

Có tài liệu học CSS tiếng Việt... các bạn có thể xem tại đây:

Tài lliệu học css

hai Thôngtrhthong Sunday, October 28, 2007 2:10:49 AM

Đại ca Phạm Lâm ơi, em đang lùng cuốn Cascading Style Sheets, designing for the Web, by Håkon Wium Lie and Bert Bos (2nd edition, 1999, Addison Wesley, ISBN 0-201-59625-3) mà tìm mãi không thấy, không biết đại ca có không share cho anh em với!
Cảm ơn đại ca trước nghen

hai Thôngtrhthong Sunday, October 28, 2007 2:12:42 AM

@tranmanhlinh: Cái link u đưa ra bị die rùi, mình tìm không ra cái tài lịu đó, nhớ gởi cái khác cho tụi tớ nghen

Mr. "Tr.Gjang"hotboysonla Tuesday, November 20, 2007 4:11:22 PM

anh oi lam the nao de cho cai khung o bai viet no da het.em lam mai ma no khong da ha
dup em voi nhe
hicccccccccccccccc

Anonymous Tuesday, November 20, 2007 7:43:50 PM

Anonymous writes: :cat: hay

Mr. "Tr.Gjang"hotboysonla Thursday, November 22, 2007 7:33:22 AM

eoeo
anh khong bao ho e voi ha?

Nguyễn Thanh Tútucan Saturday, December 22, 2007 9:49:29 PM

anh Lâm này, em xin góp 1 trang dạy những bước cơ bản về CSS bằng tiếng Việt.
Trang đó là :
http://www.cssyeah.com/css-basic.html

Phạm Lâmphamlam Monday, December 24, 2007 1:46:27 AM

Ồ, một trang về CSS bằng tiếng Việt, sẽ rất có ích cho những người mới học đấy.

Lê Trung Hiếumua-thuy-tinh Friday, August 1, 2008 4:20:56 PM

Em vào không được. Anh nào khá tiếng Anh thì vào luôn trang chủ của w3c mà học cho chắc. EM thử rồi, xem cũng không lấu lắm (còn hiểu thì tùy! bigsmile )

Sainewsai Tuesday, March 17, 2009 9:27:01 AM

xin bổ sung 1 trang web ko chỉ về css ma` còn về asp, php, sql, java, hướng đẫn rất căn bản và đễ hiểu
http://www.w3schools.com/

It's mengochoaht Monday, July 27, 2009 1:10:02 AM

Phạm lâm ơi, tài liệu em đưa chị dowload về nhưng không in được, làm sao hả em..chị muốn in ra về học hỏi mày mò e à..giúp chị nhé!!!

It's mengochoaht Monday, July 27, 2009 1:13:06 AM

chị mở file bằng foxit reader..Có cách nào chỉ cho chị với

Minmin90 Friday, August 7, 2009 4:01:10 AM

Originally posted by ngochoaht:

ngochoaht 27. July 2009, 08:13

chị mở file bằng foxit reader..Có cách nào chỉ cho chị với

mở ra in bình thường mà chị

Write a comment

You must be logged in to write a comment. If you're not a registered member, please sign up.

February 2012
S M T W T F S
January 2012March 2012
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29