4809 fans
1036 reader
122 followers

CSS Selectors

Publish by: Demon Warlock
In category: CSS/HTML
33 comments

Tutorial Details
Độ khó: Trung Bình
Thời gian: 22:23 Phút
File size: 60 phút
Yêu cầu: Phù hợp cho tất cả các đối tượng lập trình viên

Mediafire download

CSS Selectors là một khái niệm hết sức quan trọng trong CSS. Những property của CSS nếu bạn có quên hoặc không biết thì có thể google là ra. Nhưng nếu bạn không nắm rõ khái niệm về CSS Selectors thì giống như bạn đi đường mà không biết đường vậy. Nếu không biết đường rất có thể bạn quẹo nhầm đường, đi sai địa chỉ hoặc thậm chí còn không tới đích. Còn nếu không rõ về khái niệm CSS Selectors thì bạn sẽ không hướng tới đối tượng mà mình muốn được, code CSS không như ý muốn, lạm dụng Class và ID, code CSS khó hiểu và phức tạp …

Trong Video tutorial này tôi sẽ chỉ ra những khái niệm cơ bản nhất của CSS Selectors. Tuy video chưa thể bao quát hết tất cả các CSS Selectors, nhưng tôi cũng đã cố gắng chọn ra những Selectors quan trọng nhất và hay được sử dụng nhất.

Trong bài này tôi sẽ hướng dẫn đến những Selector như sau:

Khái niệm về quan hệ “gia đình” trong CSS
Universal selector
Type selectors
Class selectors
ID selectors
Giống và khác nhau giữa Class và ID
Descendant selectors
Child selectors
Universal selectors
Adjacent sibling selectors
Attribute selectors
Pseudo-classes

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á.

Nguyễn Viết Vũ

Anh DW có thể cho em xin cài file html a dùng làm hướng dẫn của video này để em làm theo cho nó trực quan không ạ? em là newbie
Nguyễn Viết Vũ

Bài giảng hay lắm anh DW. nghe khúc ông bà cô chú nhớ tới hài Vì sao tôi điên của Nhật Cường
http://www.facebook.com/mango8x Ola Shalala Là Ta

web học online tuyệt voi, thank DW rat nhieu )
pham van nha

Trang hoc webcoban huu ich nhat ma minh tung biet .Cam on ban
Anh Hào

Cảm ơn Demon Warlock…mình đã học được rất nhiều từ site bạn…Mong sẽ có nhiều tutorial bổ ích nữa…
AnNhii

rất trân thành cảm ơn anh với bài viết rất chia sẻ và hữu ích cho mọi người hi vọng anh sẽ cho ra nhiều video đóng góp cho cộng đồng và 1 lần nữa cảm ơn anh !
>>> em nghĩ anh lên dùng phần mềm quay destop và ghi được cả tiếng như phần mềm Camtasia studio sẽ cho kết quả hình ảnh rõ nét hơn

Thân mến !
Nguyễn Duy Điềm

A ơi, cái phần ID và class a có nói nhầm 1 chỗ ở đoạn 10’50s. Cái ID nó không thể trùng nhau được mà a! a giải thích thế thì thành ra có nhiều cái có thẻ trùng ID. E đóng góp thế không biết đúng hay sai. tks a!
- http://www.izwebz.com Demon Warlock
  
  Có gì sai đâu nhỉ? Vì a nói viết hoa và viết thường mà …
steven

thank rất nhìu các video của a rất hữu ích và dễ hiểu
http://4tony.wordpress.com Tùng

Thích a nói vì anh phát âm tiếng anh chuẩn
thanhfca5

hum nay tình cờ lên mạng để tìm hiểu về làm web. Gặp được trang web như thế này làm e rất vui. Vì e rất thích học các cái này nhưng lại rất ghét đọc sách, có video rất tiện, mà học thấy thú vị rất nhiều. Cảm ơn a đã truyền bá cho chúng e kiến thức. Mà a đang dùng phần mềm gì để soạn html và css vậy? a cho e phần mềm đó được không?
cuong it

thanks so much. i love you very much.
thanh kha

kai anh demon walock hai vai chuong. em la em thick anh rui do. co facebook o cho em joi
nhduy

cho em hỏi 2 cách viết #id khác gì cách viêt #id vậy ạ.
vd: ul# topnav và #topnav ul
- nhduy
  
  cho em hỏi 2 cách viết tên-thẻ#id khác gì cách viêt #id tên-thẻ vậy ạ.
  vd: ul# topnav và #topnav ul
- Quanzu
  
  *ul#topnav : thẻ div topnav nằm trong list ul mà bạn khai báo
  *#topnav ul: chỉ style cho ul nằm trong Div có id là #topnav..Các ul khác không nằm trong #topnav sẽ không bị ảnh hưởng
Tiến

Software anh dùng để viết CSS trong này là gì vậy ạ ^^
- giang coi
  
  Ui.Video hay quá.Mình cũng muốn hỏi câu này
  - http://duongpho.net MrV2m
    
    Câu hỏi đã được trả lời rồi http://www.izwebz.com/faqs/ ngay câu đầu tiên đó.

xaviet

em wên đặt code trong thẻ

[html]
<div class="a">
  <div class="b">blah...blah</div>
  <div class="c">cah...cah...</div>
</div>

xaviet

anh Hưng, ở trên a có nói về phần chỉ định tag ảnh hưởng cho id và class (VD: div#a hay là p.b). E thắc mắc là mình có chỉ định được phạm vi ảnh hưởng giữa class với id hay class với class đc không anh ?
Vd ở đây mình có cấu trúc như sau:

blah…blah
cah…cah…

css nên khai báo thế nào để class a chỉ ảnh hưởng đến b mà ko ảnh hưởng đến c
Giả sử mình chì thay đổi màu chữ trong từng class.
http://izwebz.com Mai Xuân Tuyên

Chào anh DW.Sau khi em đã học xong html và css cũng khá một chút rồi giờ có thể viết được một trang web chưa anh,hay là em phải học thêm những gì nữa?
- http://it2hut.net nhtera
  
  @Mai Xuân Tuyên
  Đối với Web tĩnh thì có thể làm được rồi
  Bạn học thêm javascript (JQuery) để tạo các tương tác sinh động hơn.
  Còn web động thì bạn phải học php hay asp.net, jsp … mới làm được
ninjacoderz

hi! được đấy bạn ạ! không biết có làm giảng viên trường nào không! chứ nếu bạn đi dậy thì đắt khách phải biết~~
pham duy

anh Demon Warlock ,xin chỉ em cách tính tiền trực tuyến trên web site bằng Webservice với , em đang làm đồ án Aptech Sem 3 ma không bít tính tiền làm sao.

Em tha thiết xin anh chỉ gấp. Em cám ơn anh nhiều lắm .
hung

Mình lần đầu vào izwebs thấy rất thú vị qua những video của bạn, nhưng mình thấy bị lẫn lộn giữa các bài học CSS, chưa biết bài nào là bất đầu và kết thúc ở đâu (kết thúc có lẽ là finish with css)
http://www.izwebz.com Demon Warlock

Em xem bài Menu đa cấp với jQuery và CSS nhé

http://www.izwebz.com/video-tutorials/menu-tha-xuong-da-cap-jquery-css/
hoainam

Anh DW cho em hỏi cái
Em muốn làm dạng Dropdown Menu nhưng mà thêm hiệu ứng khi nó Drop ( ví dụ:Từ từ Drop chứ không đùng cái bật ra như bình thường ).Anh cho em xin cái ví dụ. Thanks anh nhiều !
kaylaximuoi

Xem cái này bùn cười quá đi mất… =)).. anh đưa ví dụ để liên tưởng dễ hiểu mà cuối cùng em tập trung bên nội dung ví dụ hơn là liên hệ với bài giảng.. tự nhiên kiu ng ta lên tát rồi đuổi về.. rồi gì mà em họ con bạn của chị dâu vợ anh rể… =))
http://www.izwebz.com Demon Warlock

Làm gì mà “một số điểm” em . Điểm tương đồng duy nhất là ở Phần sidebar. Cái này cũng một phần là trung lặp ý tưởng bởi vì Anh rất thích tông màu Cam, trắng và đen. Ban đầu phần sidebar của izwebz trong Photoshop không dính liền vào phần nội dung, nhưng sau đó vì cái tab navi bị đẩy xuống dưới nên Anh mới “bắt chước” cho liền vào.

Nhưng anh cũng phải thừa nhận mình chịu ảnh hưởng và học khá nhiều từ Chris Coyier. Biết trang đó từ ngày mới thành lập. Ý tưởng tập trung vào phần video tutorial cũng bắt nguồn từ trang đó.
nhtera

Phong cách theme hiện tại em thấy 1 số điểm tương đồng với site này: css-tricks.com
nhtera

Câu chuyện về người tên Hùng của anh mắc cười quá !
Em đang mong chờ ngày ra đời Series về tạo WordPress Theme từng ngày ^_^ . Cố gắng lên anh nhé !
Chúc anh sức khỏe để cho ra đời tutorials
hay hơn nữa .
tuanit85

Luôn luôn ủng hộ nhiệt tình cho các tutorial của bạn.

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.