CSS em là ai?
Thursday, December 28, 2006 3:20:52 AM
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.








Đỗ Nam Khánhnamkhanh # Thursday, December 28, 2006 4:03:04 AM
~~> sợ quá, bác này bi giờ đề cao cảnh giác gớm
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
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ả
Phạm Minh Tuấntuanpm # Thursday, December 28, 2006 7:16:47 AM
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
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
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?
Phạm Minh Tuấntuanpm # Thursday, December 28, 2006 2:49:12 PM
Ô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
Susi & bố mẹmaihome # Monday, January 1, 2007 12:28:23 PM
Phạm Lâmphamlam # Monday, January 1, 2007 3:50:31 PM
Đỗ Nam Khánhnamkhanh # Tuesday, January 2, 2007 1:56:25 AM
Susi & bố mẹmaihome # Tuesday, January 2, 2007 3:23:33 AM
Đỗ Nam Khánhnamkhanh # Tuesday, January 2, 2007 3:43:32 AM
Một định nghĩa đơn giản về PHP:
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
Phạm Lâmphamlam # Tuesday, January 2, 2007 3:54:45 AM
Susi & bố mẹmaihome # Tuesday, January 2, 2007 7:25:50 AM
Phạm Lâmphamlam # Tuesday, January 2, 2007 7:44:05 AM
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
~~> http://my.opera.com/namkhanh/blog/index.dml/tag/Programming
Susi & bố mẹmaihome # Wednesday, January 3, 2007 2:54:53 AM
"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
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
˙·٠•● KID ●•٠·˙.nguyenvn56 # Wednesday, January 17, 2007 12:17:54 PM
Phạm Lâmphamlam # Thursday, January 18, 2007 1:21:06 AM
Người Địa ChấtNgDiaChat # Saturday, February 24, 2007 12:01:58 PM
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
Anonymous # Wednesday, March 7, 2007 11:33:18 AM
aphuvungxuoi # Monday, March 19, 2007 9:00:47 AM
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
.classname {..}
=> khi sử dụng thì gọi css bằng cách
#idname {...}
=> khi sử dụng thì gọi css bằng cách
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ỉ
aphuvungxuoi # Tuesday, March 20, 2007 9:47:41 AM
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
laztus84 # Wednesday, May 30, 2007 7:46:14 AM
ông anh vào xem và chỉ giáo hộ
grey lamtieutam_dede # Sunday, June 24, 2007 2:41:09 PM
grey lamtieutam_dede # Sunday, June 24, 2007 2:44:18 PM
Sunny Nguyen # Monday, July 2, 2007 2:53:40 AM
Susi & bố mẹmaihome # Thursday, July 12, 2007 3:49:32 PM
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
Phạm Lâmphamlam # Sunday, September 16, 2007 3:37:41 PM
grey lamtieutam_dede # Monday, September 17, 2007 10:49:37 PM
Lê Hoàn Huyên Mynhoxmy_sunflower # Tuesday, September 18, 2007 10:41:28 AM
grey lamtieutam_dede # Tuesday, September 18, 2007 10:54:54 PM
tranmanhlinh # Saturday, October 20, 2007 9:23:43 AM
Tài lliệu học css
hai Thôngtrhthong # Sunday, October 28, 2007 2:10:49 AM
Cảm ơn đại ca trước nghen
hai Thôngtrhthong # Sunday, October 28, 2007 2:12:42 AM
Mr. "Tr.Gjang"hotboysonla # Tuesday, November 20, 2007 4:11:22 PM
dup em voi nhe
hicccccccccccccccc
Anonymous # Tuesday, November 20, 2007 7:43:50 PM
Mr. "Tr.Gjang"hotboysonla # Thursday, November 22, 2007 7:33:22 AM
anh khong bao ho e voi ha?
Nguyễn Thanh Tútucan # Saturday, December 22, 2007 9:49:29 PM
Trang đó là :
http://www.cssyeah.com/css-basic.html
Phạm Lâmphamlam # Monday, December 24, 2007 1:46:27 AM
Lê Trung Hiếumua-thuy-tinh # Friday, August 1, 2008 4:20:56 PM
Sainewsai # Tuesday, March 17, 2009 9:27:01 AM
http://www.w3schools.com/
It's mengochoaht # Monday, July 27, 2009 1:10:02 AM
It's mengochoaht # Monday, July 27, 2009 1:13:06 AM
Minmin90 # Friday, August 7, 2009 4:01:10 AM
Originally posted by ngochoaht:
mở ra in bình thường mà chị