4883 fans
1036 reader
124 followers

Giới thiệu về CSS

Publish by: Demon Warlock
In category: CSS
31 comments

CSS là gì?

CSS là chữ viết tắt của Cascading Style Sheets, nó chỉ đơn thuần là một dạng file text với phần tên mở rộng là .css. Trong Style Sheet này chứa những câu lệnh CSS. Mỗi một lệnh của CSS sẽ định dạng một phần nhất định của HTML ví dụ như: font của chữ, đường viền, màu nền, căn chỉnh hình ảnh v.v..

Trước đây khi chưa có CSS, những người thiết kế web phải trộn lẫn giữa các thành phần trình bày và nội dung với nhau. Nhưng với sự xuất hiện của CSS, người ta có thể tách rời hoàn toàn phần trình bày và nội dung. Giúp cho phần code của trang web cũng gọn hơn và quan trọng hơn cả là dễ chỉnh sửa hơn.

Trước khi bắt đầu tìm hiểu thêm về CSS tôi muốn bạn biết một chút về thế mạnh của nó trong việc thiết kế web. Ví dụ nếu làm việc với HTML và bạn muốn font chữ của toàn bộ trang web là Arial. Bạn sẽ phải làm đi làm lại như thế cho tất cả các file .html mà bạn có. Nhưng nếu bạn sử dụng CSS, thì bạn chỉ cần làm một lần và tất cà các trang khác sẽ tự động được thay đổi.

Ba cách để định dạng trang web

Có ba cách bạn có thể sử dụng để định dạng trang web là: cục bộ, nhúng vào trang và liên kết đến một file CSS riêng biệt. Trong thực tế thì cách cuối cùng là liên kết đến một file riêng biệt được sử dụng phổ biến nhất. Nhưng bạn cũng nên biết về hai cách còn lại vì đôi khi bạn cũng phải sử dụng đến nó tuy không nhiều

1. Cục bộ – code CSS được chèn trực tiếp vào trong thẻ HTML

Cách định dạng cục bộ là bạn sử dụng code CSS chèn trực tiếp vào thẻ HTML và chỉ có tác động lên thẻ đó.

Ví dụ

<p style=”font-size:16pt; font-weight:bold; color:blue;”> 
Nếu bạn thêm code CSS vào trong thẻ này nó sẽ thay đổi cách hiển thị trên trình duyệt
</p>

2. Nhúng vào trang web

Cách thứ hai là bạn khai báo code CSS nằm trong cặp thẻ <style></style> được đặt ở phần <head></head> của tài liệu. Về cơ bản nó cũng chỉ có tác động cục bộ lên file mà bạn chèn đoạn code CSS này. Nó có phạm vi ảnh hưởng lớn hơn là cách chèn cục bộ được nói ở trên, nhưng nó không có ảnh hưởng đến các file khác trong cùng một trang web.

<head>
<title>Nhúng vào trang</title>
<meta http-equiv=”Content-type” content=”text/html; charset=utf-8″ />
<style type=”text/css”>
h1 {font-size: 16px;}
p {color:blue;}
</style>
</head>

3. Liên kết đến một file biệt lập

Thực tế cách cuối cùng này mới là thế mạnh thực sự của CSS bởi vì bạn chỉ cần tạo ra một file CSS và viết code chỉ một lần. Nó sẽ ảnh hưởng đến toàn bộ trang web chứ không chỉ ảnh hưởng đến một file .html đơn lẻ hoặc chỉ một thẻ trong hàng ngàn thẻ mà bạn có. Bằng cách này chúng ta có thể tách rời hoàn toàn những thành phần trình bày và nội dung ra khỏi nhau. Nếu bạn viết toàn bộ code CSS trong một file và liên kết nó đến những trang còn lại, thì việc thay đổi sửa chữa trang web trở nên cực kỳ đơn giản.

Để liên kết file CSS đến tất cả các file .html của bạn, bạn chỉ cần chèn đoạn code sau vào giữa thẻ <head></head> của tài liệu:

<link href="style_sheet.css" rel="stylesheet" type="text/css" />

Và trình duyệt sẽ tự động dùng file style_sheet.css để định dạng cho trang web của bạn. Tất nhiên trong file style_sheet.css bạn đã viết code CSS rồi.

Điều cuối cùng bạn cần biết về 3 loại hình sử dụng CSS là

Cục bộ > Nhúng vào trang > Liên kết đến một file biệt lập

Công thức trên có nghĩa là cách Cục bộ “đánh bại” cách Nhúng vào trang và Liên kết đến một file riêng biệt. Hoặc nói theo cách khác thì cách nhúng cục bộ là mạnh nhất, sau đó đến Nhúng vào trang và cuối cùng là liên kết đến một file biệt lập.

Demon Warlock

Tôi được sinh ra ở Việt Nam, nhưng hiện tại đang sống và làm việc tại Mỹ. Ngành tôi học không có liên quan gì đến thiết kế web. Nhưng đây là sở thích từ ngày còn là sinh viên du học, do vậy bây giờ dù cho đang đi làm nhưng tôi vẫn thích dùng thời gian rảnh rỗi của mình để học về thiết kế web. Như các bạn, tôi cũng việc mày mò tự học và khám phá.

http://upanhviet.net Nguyễn Duy Điềm

Các bạn cho mình hỏi với. Trong tut a DW có hướng dẫn đoạn code sau:
vậy cái file”style_sheet.css” m phải viết và lưu lại ở đâu? và gọi nó ra như thế nào hay nó là cái mặc định có trong CSS vậy. Ai trả lời hộ mình với
Nguyễn Duy Điềm

Các bạn cho mình hỏi với. Trong tut a DW có hướng dẫn đoạn code sau:
vậy cái file”style_sheet.css” m phải viết và lưu lại ở đâu? và gọi nó ra như thế nào hay nó là cái mặc định có trong CSS vậy. tks mọi người
ngocyen

Chào anh, em không biết làm thế nào để cắt 1 slideshow ảnh từ PSD sang HTML/CSS (vì đi phỏng vấn người ta bảo làm thì em chỉ có thể tạo file flash rồi chèn vào web nhưng làm vậy họ ko đồng ý và nói rằng phải dùng css, plug-in gì nữa).
vd: slide gồm có ảnh và các button tương ứng với trạng thái chuyển động của ảnh thì anh sẽ cắt nó như thế nào? anh có thể làm video hướng dẫn luôn được không (theo template nào cũng được ạh)? Cám ơn anh.
Vd: slideshow thế này thì cắt sao vậy anh?
http://www.symphonythemes.com/system/files/view_slideshow.png
- http://www.izwebz.com Demon Warlock
  
  Ồ cái đó là jquery, e xem trên phần featured của Izwebz a có video hướng dẫn đó. Hoặc search trong Izwebz với từ khóa jquery image silder. Đa phần là sử dụng jquery plugin gọi là image silder.
- http://www.izwebz.com Demon Warlock
  
  http://www.izwebz.com/video-tutorials/jquery-video-tutorials/jquery-content-slider-wordpress/
mèo ngố

Sao lâu quá ko có sách PSD2HTML vậy a? Hay a DW quên lời hứa với bọn e rồi ? Mong cầm trên tay quyển sách của a . Chúc a sức khỏe và nh niềm vui .
http://luckytour.vn luckytour

Chào anh! Em đang theo dõi rất nhiều Video của anh. Em thấy anh sử dụng Firebug trong Firefox… em đã cài đặt Firebug và sử dụng Edit CSS giống như anh trong các bài giảng. Nhưng không hiểu sao trình duyệt của em không tự thay đổi khi em chỉnh sửa các thuộc tính của CSS.
Anh có thể giúp em chỉnh sửa điều này để em có thể thực hành trực quan không ạ?
- thanh
  
  cái của bạn nói edit css là plugin web developer??
  - Ngọc Lan
    
    mình dùng nhưng không lưu lại được???
- chiu
  
  tot nhat la ban len download và setup lại trình duyệt.Nên dùng firefox rồi cài addon Firebug vào là OK.Firebufg cũng có tính năng Edit CSS ngay trên trình duyệt
Newbite

TKs a nhìu nhé sẽ ngốn hết các tài liệu Css 3sic của a nhanh nhất có thể . Chúc a sức khoe công tác tốt
http://bieberfc.com/wp võ anh Tuấn

Bài viết của bạn thực sự hữu ích, thank for share
http://building pladin-Rogue

Bó tay đại ca xem vừa hay, vừa buồn cười, chỉ được cái giống em! Chúc đại ca Dw sáng tác thêm nhìu bài hay hơn nữa nha! ^^
tuanict

Thanks!
CuongManh

thanks nhiều !!
Pingback: Giới thiệu về CSS « 77maylangthang77's Blog
Fuong Ngo

mấy hôm nay em học thiết kế web mà chưa tìm hiểu gì hết…đợi đến khi cho đồ án rồi em mới “vọc” hic hic…Nhưng giờ có anh DW rồi em sẽ không lo lắng gì nữa. Bài viết của anh cái nào cũng ngắn gọn và dể hiểu…hi hi hi. Thank you
viet

hay quá à
truongho

Hay quá, ngắn gọn, dễ hiểu
Phan Công Vinh

Rất cám ơn bạn !
http://bearsharks.com clackken.smith

Nếu bạn muốn là một Programer thì bạn nên học theo 2 hướng chính.
1. PHP
2. ASP. ASP.NET

- Theo tôi khuyên bạn nên theo PHP đơn giản vì nó thông dụng và được support nhiều, các hàm của nó cũng đễ học, và căn bản thì chỉ theo nguyên lý lập trình C.

- Nếu bạn theo PHP thì cũng nên học qua 1 khoá kỹ thuật lập trình C
- Nếu bạn theo ASP thì nên học VBBasic hoặc VB.NET nó sẽ hỗ trợ nhiều cho ASP.

- Đó là lời khuyên của tôi, bạn thì sao ^^
nguyen thanh nam

cho mình hòi tí … mình chưa từng qua trường lớp đào tạo web nhưng về HTML mình bít sơ vì có lấy sách vọc thử … mình ko biết với trình độ của mình hiện nay có học qua CSS nổi chưa nửa. . mong các huyng đệ hướng dẫn.. mà ko bít để trở thành chuyên viên web mình nên đi theo những bước nào : HTML–>CSS —> tới đâu nửa mình đang cần câu trả lời . thank tất cả mọi người
layla

Anh ơi sao em thấy web của anh {

#firebugBody .firebugCanvas là sao hả anh.
Em không hiểu mong anh giúp đỡ
http://babo.cz.cc uamnaruto

có mỗi cái đơn giản mà cứ như thịt trâu vậy
em giải thích rồi nhưng sao lại bị mất 1 đoạn
cục bộ là ba của nhúng vào trang , nhúng vào trang là ba của liên kết đến 1 file mới … ở đây giới thiệu để cho chúng ta hiểu nguồn gốc CSS thôi… cái gì cũng có nguồn gốc mà …
pn2design

Ác đưa code lên sao ấy nhĩ?
`__abENT__lt;style type=__abENT__quot;text__abENT__#8260;css__abENT__quot;__abENT__gt;`
`__abENT__#46;abc { color: green; }`
`__abENT__lt;__abENT__#8260;style__abENT__gt;`

`__abENT__lt;b style=__abENT__quot;color: red;__abENT__quot; class=__abENT__quot;abc__abENT__quot;__abENT__gt;What color is this?__abENT__lt;__abENT__#8260;p__abENT__gt;`
`__abENT__lt;b class=__abENT__quot;abc__abENT__quot; style=__abENT__quot;color: red;__abENT__quot;__abENT__gt;What color is this?__abENT__lt;__abENT__#8260;p__abENT__gt;`
pn2design

Đọc kỹ bài đi, sao mới đọc sơ qua đã muốn sửa rồi vậy? Đó là “Điều cuối cùng bạn cần biết về 3 loại hình sử dụng CSS” chứ đâu phải kết luận?
Cục bộ > Nhúng vào trang > Liên kết đến một file biệt lập <– thế này dúng rồi mà
Bác nào không hiểu em giải thích lại cho sáng mắt vậy
Nếu có nhiều định dạng cùng loại cho 1 đối tượng thì định dạng cục bộ sẽ "đánh bại" các định dạng kia… Tức là đối tượng sẽ ưu tiên có định dạng cục bộ.
Ví dụ nhá:
'

.abc { color: green; }

What color is this?
What color is this?
‘
Tất cả đều ra mày đỏ.
http://babo.cz.cc uamnaruto

Em xin giải thích tại sao là Cục bộ > Nhúng vào trang > Liên kết đến một file biệt lập mà không phải là Cục bộ < Nhúng vào trang ” chứ ai lại đi xuống “>”
Phải không ạ ???
manticohd

/*
Cục bộ > Nhúng vào trang > Liên kết đến một file biệt lập
*/

mình tưởng là :
Cục bộ < Nhúng vào trang < Liên kết đến một file biệt lập
- haitvpro
  
  Mình cũng nghĩ là Cục bộ < Nhúng vào trang < Liên kết đến một file biệt lập
  bác Demon xem lại rùi giải thích giùm!
- quynho
  
  Chính xác là Cục bộ < Nhúng < Tách biệt.
  
  Ví dụ bạn định nghĩa thuộc tính font-family ở cả 3 chỗ: trong file .css, trong phần head của trang HTML, và trong một thành phần (element) xác định nào đó (ví dụ chọn đại là p đi). Khi đó nếu bạn xác định thuộc tính này một giá trị ở mức thành phần (element – cục bộ) thì nó sẽ bỏ qua tất cả những định nghĩa trong phần head (nhúng) và tách biệt (.css).
  
  Nói nôm na là trình duyệt sẽ trang điểm một thành phần nào đó bằng sự định nghĩa gần nhất (mới nhất) mà nó thấy. Khi mở một trang web thì những phần tách biệt như css, js sẽ được nạp đầu tiên. Sau đó là những thành phần nhúng ngay trong tài liệu HTML ở phần head và cuối cùng là từng thành phần riêng biệt trong phần body.
http://hakhanhbk.tk Nguyễn khánh

Hic, sao bây giờ mới tìm thấy cái trang web này chứ, mất bao nhiêu tiền trong trường trực tuyến để học mấy cái này rồi, huhu

Izwebz store

Các series nên xem trên izwebz cho newbie

Khi vào izwebz chắc nhiều bạn cho rằng các bài viết trên izwebz đều không có hệ thống gì cả? Thực chất, các bài biết đều đi theo một series của riêng nó, ví dụ như PHP, HTML & CSS, PSD2HTML, Photoshop, illustrator,… Trong bài viết này, mình sẽ tổng hợp lại các series bài viết cần thiết cho một newbie.