thanh tuan

Đường dẫn: trang chủ Lập trình CSS Simple CSS - Bài 1: Giới Thiệu

Simple CSS - Bài 1: Giới Thiệu

Email In
1.1.  CSS là gì? 
Trong lĩnh vực xây dựng, chúng ta có trang trí nội thất; trong lĩnh vực thẩm 
mỹ - làm đẹp, chúng ta có kỹ thuật make-up; còn trong lĩnh vực thiết kế web chúng 
ta có CSS. Đây chỉ  là một định nghĩa giàu hình  ảnh của Pearl  thôi  (nhưng cũng 
thực tế nhỉ (smile). Còn CSS (Cascading Style Sheets mà Pearl tạm dịch là tờ mẫu 
theo Style Sheets)    là một ngôn ngữ quy định cách  trình bày cho các  tài  liệu viết 
bằng HTML, XHTML, XML, SVG, hay UML,…

1.2.  Tại sao CSS? 
Nếu bạn đã  từng học qua HTML  thì cũng biết HTML cũng hỗ  trợ một  số 
thuộc  tính định dạng   cơ bản cho  text, picture,  table, … nhưng nó không  thật sự 
phong phú và chính xác như nhau trên mọi hệ thống. CSS cung cấp cho bạn hàng 
trăm thuộc tính trình bày dành cho các đối tượng với sự sáng tạo cao trong kết hợp 
các thuộc tính giúp mang lại hiệu quả. Ngoài ra, hiện tại CSS đã được hỗ trợ bởi tất 
cả các trình duyệt, nên bạn hoàn toàn có thể tự tin trang web của mình có thể hiển 
thị hầu như “như nhau” dù  trên một hệ  thống  sử dụng Windows, Linux hay  trên 
một máy Mac miễn là bạn đang sử dụng một phiên bản trình duyệt mới nhất. 
Sử dụng  các mã định dạng  trực  tiếp  trong HTML  tốn hao nhiều  thời gian 
thiết  kế  cũng  như  dung  lượng  lưu  trữ  trên  đĩa  cứng.  Trong  khi  đó CSS  đưa  ra 
phương thức “tờ mẫu ngoại” giúp áp dụng một khuôn mẫu chuẩn từ một file CSS ở 
ngoài. Nó thật sự có hiệu quả đồng bộ khi bạn tạo một website có hàng trăm trang 
hay  cả  khi  bạn muốn  thay  đổi một  thuộc  tính  trình  bày  nào  đó. Hãy  thử  tưởng 
tượng bạn có một website với hàng trăm trang và bạn muốn thay đổi font chữ hay 
màu chữ cho một thành phần nào đó. Đó thật sự sẽ là một công việc buồn chán và 
tốn nhiều  thời gian. Nhưng với việc  sử dụng CSS việc đó  là hoàn  toàn đơn giản 
cũng như là bạn có một trò ma thuật nào đó. 
Ngoài ra, CSS còn cho phép bạn áp đặt những kiểu trình bày thích hợp hơn 
cho các phương tiện khác nhau như màn hình máy tính, máy in, điện thoại,…
CSS được cập nhật liên tục mang lại các trình bày phức tạp và tinh vi hơn.

1.3.  Học CSS cần những gì? 
Thật  sự không  có một điều kiện gì được quy định khi học CSS. Nhưng ở 
một khía cạnh nào đó  thì một sự chuẩn bị cho một cuộc hành  trình dù  là dễ nhất 
vẫn không thừa vì ít nhất nó sẽ giúp bạn làm tốt hơn. 
Hành  trang  thứ nhất mà bạn nên có  là một kiến  thức về HTML, nó không 
thật sự cần thiết nếu bạn chỉ dùng CSS để  trình bày cho một  trang HTML có sẵn 
(như  làm  skin  cho blog  chẳng hạn), nhưng bạn  vẫn  cần biết ý  nghĩa một  số  thẻ 
HTML, nó sẽ có ích khi bạn viết CSS. Tuy nhiên, nếu bạn muốn tự thiết kế, trình 
bày một trang web của riêng mình thì tùy theo quy mô trang web, bạn cần phải học 
thêm cả HTML, XHMTL, Javascript và một số ngôn ngữ lập trình web khác. 
Hành trang  thứ hai chính  là một  trình soạn  thảo văn bản để bạn có  thể viết 
mã CSS. Ở đây, Pearl khuyên bạn nên sử dụng một trình soạn thảo đơn giản như 
Notepad, Wordpad trong Windows hay Pico trong Linux, Simple Text trong Mac. 
Nó sẽ giúp bạn chắc là code là của bạn và không có bất kỳ một sự can thiệt nào từ 
chương trình như khi dùng DreamWeaver, FrontPage, Golive,… 
Hành trang thứ ba của bạn chính lả một phiên bản mới nhất của trình duyệt 
mà bạn thường dùng.  
Và một điều nữa mà Pearl muốn đề nghị đó là các bạn hãy dành một ít thời 
gian để  thực hành CSS sau mỗi bài học nó sẽ  thật sự có  ích cho bạn. Thực hành 
chẳng những  giúp bạn  vận dụng  nhuần  nhuyễn  các bài học mà  còn  có  tác dụng 
explain ngược lại những lý thuyết mà bạn chưa hiểu. 
Bây giờ nếu bạn đã  thật sự chuẩn bị chúng  ta hãy chuyển qua chương  tiếp 
theo để thật sự bước chân vào thế giới CSS.

Đầu  tiên, Pearl xin  thưa với  tất cả các bạn đọc giả  (hay những bạn nào có 
quyển sách này) đó  là Pearl không phải  là một chuyên gia về CSS mà chỉ  là một 
“tay ngang trong nghề” mà  thôi (cụ  thể  là Pearl cũng chỉ lên mạng học từ các  tài 
liệu tiếng Anh chứ cũng không phải qua trường lớp đào tạo bài bản gì cả). Còn về 
quyển sách này thì phải nói từ hồi đầu tháng 6 năm rồi (rối chuyện thế đấy, nhưng 
ai quen Pearl đều biết Pearl có  tính hay “tường  trình” vậy mà  (smile)), Pearl vào 
blog anh Tân thấy ảnh có dịch mấy bài tut CSS từ HTML.net mà trong bài mở đầu 

lại có ghi tên các “cao thủ” CSS trên Opera: chị Hiền, chị Liên, Phạm Lâm, và cả 
Pearl  (còn ai nữa không  thì quên  rồi,  tại ảnh giấu mấy bài này  rồi). Đúng  là  rối 
chuyện thật, chả nhẽ lại đi khiếu nại cái chuyện “Pearl chỉ là tay ngang thôi” sao. 
Thôi thì có người bảo mình là “cao thủ” cũng cứ chịu vậy, nhưng ngặt cái “có tiếng 
phải có miếng” chứ, các “cao thủ” kia thì điều có viết tut, tip hướng dẫn làm blog, 
sửa  skin  cả. Trong  khi  đó, mình  lại  chả  viết  gì  cho  cộng  đồng  thì  đâu  có  được 
(không phải Pearl  lười,  tại mấy người kia viết hết  rồi đó chứ, với  lại Pearl cũng 
không  thích viết  tut,  tip như họ,  trông cứ như công  thức nấu ăn vậy (big green)), 
nên Pearl mới nhào vô xin dịch mấy bài coi như là mình đóng góp tí đỉnh cho cộng 
đồng  (ặc, cũng  là có ý dụ dỗ các “cao  thủ” kia vào chia phần  thôi, cứ bao nhiêu 
“cao thủ” như thế này thì có thêm chục bài nữa cũng 1 tuần là xong (roll eyes)… 
ảnh mừng quá, cho dịch 2 bài cuối (chuối, người ta đang muốn làm ngay mà, bảo 
dịch bài cuối chẳng phải dụ dỗ Pearl lười biếng đó sao, mà kệ)… Tới cuối tháng 6, 
ảnh về quê nghỉ hè, về được rồi thì trốn biệt luôn, Pearl cũng quên mất luôn… tới 
tháng 8 mới thấy anh lên blog: không rảnh, lâu lâu về quên, cần thời gian với gia 
đình (ai đọc blog anh này cũng biết “người yêu vợ” rồi)… đã thế Pearl dịch tất cho 
xong… tới trung tuần tháng 8, bắt đầu dịch,… người học dở Anh văn mà dịch mau 
ghê,  dịch  hơn  10  ngày  là  hết  16  tut  luôn…  định  tháng  9,  biên  tập  lại  rồi  phát 
hành… Định  là  thế, nhưng  tới  tháng 9, Pearl cài  lại máy 1 phát,  rồi  lo  lùng  sục, 
nhồi nhét phần mềm, sách, nhạc vào lại ổ cứng, tốn những hai tuần,… quên tập 2, 
mấy bài  tut đó đành xếp xó  tiếp… Mãi  tới  tháng  rồi, cụ  thể  là sau Giáng Sinh 3 
ngày, Pearl lại lôi 16 bài dịch đó ra biên tập lại (hem phải tại siêng đột xuất, mà tại 
sắp  hết  năm  với  lại  đây  cũng  là  hoạt  động  kỷ  niệm  ngày  thành  lập WallPearl’s 
Blog), biên tới, biên lui tốn cả tuần mới xong. Đọc lại mới thấy, 16 tut của HTML 
dot net còn  thiếu nhiều cái  lắm. Thế  là  lại  lấy  thêm  tài  liệu  từ W3 School để bổ
khuyết, rồi lại muốn lấy thêm nhiều tài liệu khác thêm vô, thêm cả CSS3 vô, rốt lại 
trông nó hỗn hợp quá nên sau cùng Pearl phân ra 2 bản: 
  Bản Simple CSS Standard Edition: Bao gồm nội dung chủ yếu từ 16 tut của 
HTML.Net, chỉ bổ sung 1 số chỗ về cú pháp CSS và độ ưu tiên của CSS. 
  Bản Simple CSS Advanced Edition: Bao gồm nội dung của HTML.Net trộn 
với W3 School có thêm phần phụ lục về CSS3 và nhiều thứ cần thiết khác. 
Phần “tường trình” tới đây là kết thúc. Chắc chắn là ít có quyển sách nào lại 
có phần tường trình như quyển sách này (chí ít thì không có quyển sách in nào lại 
viết vụ này). Điều này chẳng qua là Pearl dở văn, không viết uốn éo, ẻo  lả được, 
chỉ biết viết theo những gì mình nghĩ, theo những gì mình biết thôi (smile) 
Do đây là lần đầu tiên Pearl thực hiện một quyển sách hướng dẫn về một đề 
tài tin học, hơn nữa do khả năng kiến thức, kiến văn hạn hẹp nên chắc chắn quyển 
sách này vẫn còn rất nhiều thiếu sót, nên Pearl rất mong nhận được ý kiến đánh giá 
của mọi người.  
Sau cùng, Pearl xin chân  thành gửi  lời cảm ơn  tới HTML.Net, W3 School, 
CSS3.Info và nhiều trang web khác đã cung cấp tài liệu để Pearl hoàn thành quyển 
sách này. Cảm ơn tất cả các bạn blogger đã ủng hộ, cổ vũ Pearl trong thời gian vừa 

qua. 

 (phpvn)
 

Những cây cầu nổi tiếng nhất thế giới

Sample image

đây là những cây cầu nổi tiếng nhất thế giới

Đọc thêm...

 

Những con đường nổi tiếng nhất thế giới

Đây là một số hình ảnh về những con đường nổi tiếng nhất thế giới

Đọc thêm... 

 

Những công trình nổi tiếng thế giới

Hình ảnh những công trình nổi tiếng nhất thế giới

Đọc thêm...

Hỗ trợ online

Hỗ trợ từ Admin
Thanh Tuấn

Thanh Tuấn

Tư vấn Admin
Thanh Tuấn

Thanh Tuấn

Liên kết logo

Chào mừng các bạn đã đến với ITHANAM.COM
thanh tuan 
thanh tuan
 
thanh tuan
 
thanh tuan 
thanh tuan 
thanh tuan 
Công nghệ thông tin Hà Nam 
Công nghệ thông tin Hà Nam 
Công nghệ thông tin Hà Nam