• 4809 fans
  • 1036 reader
  • 122 followers
CSS Selectors
  • 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

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 Website facebook twitter user_email

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 :D

  • 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 :D

    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 :D

  • 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

  • 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. :D

  • 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 :D
      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 :D

  • 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) :D

  • 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 :D
    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 :D ).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 :D . Đ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
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.

Izwebz facebook group

Social connect

Recent Comments

Archives