Cú pháp CSS | Selector trong CSS PDF cu phap css

http://vietjack.com/css/index.jsp                                                                                                              Copyright  ©  vietjack.com     Cú pháp CSS CSS tạo thành từ Style Rule Các rule thơng dịch trình duyệt sau áp dụng tới phần tử tương ứng tài liệu bạn Style Rule bao gồm ba phần: • Selector: (hiểu nơm na chọn phần tử) Một selector thẻ HTML mà bạn áp dụng style cho Đó thẻ HTML nào, thẻ div, thẻ span, thẻ p, … • Property: (thuộc tính) Là property kiểu thuộc tính thẻ HTML Nói cách đơn giản tất thuộc tính HTML chuyển đổi thành CSS property Đó color, border • Value: Là giá trị gán cho property Ví dụ, color có giá trị làred #F1F1F1 etc Dưới cú pháp CSS chung: selector { property: value } Trong ví dụ trên, selector trỏ tới phần tử HTML h1 Đây phần tử mà muốn tạo style cho Khối khai báo Declaration bao gồm nhiều khối đặt phân biệt dấu chấm phảy Mỗi khối khai báo bao gồm tên CSS property (trong ví dụ color font-size) giá trị (trong ví dụ blue 12px) gán cho property http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     http://vietjack.com/css/index.jsp                                                                                                              Copyright  ©  vietjack.com     Bạn cần ý điều rằng, khai báo CSS luôn kết thúc với dấu chấm phảy phần khai báo bao quanh cặp dấu ngoặc ơm Trong ví dụ tiếp theo, tất phần tử chỉnh theo lề trái có màu màu đỏ: p { color: red; text-align: left; } Các loại Selector CSS (hoặc CSS Selector) Element Selector CSS Hiểu nôm na chọn phần tử Element Selector chọn phần tử dựa tên chúng Như ví dụ trên, chọn phần tử p (hay thẻ p – HTML, thẻ phần tử) áp dụng style cho phần tử Có nhiều cách chọn phần tử khác nhau, tùy theo mục đích bạn sử dụng Type Selector, Universal Selector, Descendant Selector p { text-align: center; color: red; } Type Selector CSS Cũng giống ví dụ trên, ví dụ sau áp dụng màu cho thẻ h1 h1 { color: #36CFFF; } Universal Selector CSS Nếu bạn muốn áp dụng style cho tất thẻ HTML tài liệu, bạn sử dụng cú pháp giống * { color: #000000; } Descendant Selector CSS Giả sử bạn muốn áp dụng style cho phần tử mà phần tử khác (phần tử phần tử mà nằm bên phần tử khác) Ví dụ sau áp dụng style cho phần tử vietjack nằm bên thẻ : ul em { color: #000000; } http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     http://vietjack.com/css/index.jsp                                                                                                              Copyright  ©  vietjack.com     Class Selector CSS Tương tự ID Selector, bạn áp dụng Style Rule cho phần tử dựa thuộc tính class phần tử Để chọn phần tử với class cụ thể, bạn viết dấu chấm (.) trước tên class phần tử Ví dụ định nghĩa Style Rule cho tất phần tử HTML với class= “center”: center { text-align: center; color: red; } Với trường hợp có nhiều phần tử với class, bạn muốn áp dụng style rule cho phần tử đó, bạn viết tên phần tử trước cú pháp trên, sau: div.center { text-align: center; color: red; } Các phần tử HTML tham chiếu tới nhiều class Do đó, bạn áp dụng nhiều Style Rule cho phần tử (chẳng hạn div) với class = “center” (như trên) class = “black” (để xác định màu đen chẳng hạn), sau: black DIV tạo style hai class center ID Selector CSS ID Selector sử dụng thuộc tính id phần tử HTML để chọn phần tử cụ thể Trong webpage, phần tử nên có id nhất, ID Selector sử dụng để lựa chọn phần tử #black { color: #000000; } Để lựa chọn phần tử với id cụ thể, bạn viết ký tự # (đọc ký tự hash) trước id phần tử h1#black { color: #000000; } Ví dụ áp dụng style rule cho phần tử có id= “para1”; #para1 { text-align: center; color: red; } Bạn xác định cụ thể ví dụ sau: http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     http://vietjack.com/css/index.jsp                                                                                                              Copyright  ©  vietjack.com     div#para1 { text-align: center; color: red; } Style Rule áp dụng cho phần tử div có id para1 Ngồi ra, bạn muốn áp dụng style rule cho phần tử mà (hay nằm trong) phần tử khác, bạn sử dụng: #para1 div { text-align: center; color: red; } Style Rule áp dụng cho phần tử div phần tử phần tử có id para1 Child Selector CSS Phần bạn tìm hiểu Descendant Selector Ngồi ra, có kiểu Selector mà giống với kiểu Bạn theo dõi ví dụ: body > p { color: #000000; } Style Rule áp dụng cho tất phần tử p mà trực tiếp phần tử body Các phần tử p khác nằm bên phần tử div td không bị tác động Attribute Selector CSS Bạn áp dụng style cho phần tử HTML có thuộc tính cụ thể Ví dụ sau áp dụng style rule cho tất phần tử input mà có thuộc tính type= “text” input[type = "text"]{ color: #000000; } Phương thức đem lại lợi thế: phần tử không bị tác động style rule trên, color áp dụng cho trường text Sau ví dụ số rule áp dụng cho Attribute Selector: • p[lang] : lựa chọn tất phần tử p mà có thuộc tính lang • p[lang="fr"] : lựa chọn tất phần tử p mà có thuộc tính lang có giá trị xác fr • p[lang~="fr"]: lựa chọn tất phần tử p mà có thuộc tính lang có giá trị có chứa từ fr http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     http://vietjack.com/css/index.jsp                                                                                                       Copyright â vietjack.com p[lang|="en"] : lựa chọn tất phần tử p mà có thuộc tính lang có giá trị xác en bắt đầu với en Multiple Style Rule CSS Bạn định nghĩa nhiều style rule cho phần tử Tuy nhiên, thay viết nhiều Style Rule riêng biệt để áp dụng cho phần tử, bạn viết gộp sau: h1 { color: #36C; margin-bottom: 1em; font-weight: normal; letter-spacing: 4em; text-transform: lowercase; } Như trên, tất cặp property value phân biệt dấu chấm phảy (;) Tùy theo phong cách mình, bạn viết chúng dòng hay nhiều dòng Nhưng tốt hết, code bạn dễ đọc dễ trì, bạn nên viết cặp dòng riêng biệt Khi lần nhìn vào ví dụ trên, bạn khơng hiểu property có tác dụng Hãy bình tĩnh, bắt đầu học mà Nếu bạn muốn biết tác dụng chúng, bạn tham khảo chi tiết tất property CSS Grouping Selector CSS Có tình xảy giả sử bạn muốn áp dụng style rule cho nhiều phần tử khác Nếu theo học trên, bạn phải viết style rule cho phần tử Như được, tưởng tượng số lượng phần tử lớn việc lặp lặp lại tốn nhiều thời gian Có cách tốt khơng Có Bạn nhóm tất phần tử lại, sau áp dụng style rule chung mà bạn muốn áp dụng cho chúng Đó ý nghĩa Grouping Selector CSS Bạn theo dõi ví dụ sau: h1, h2, h3 { color: #36C; font-weight: normal; margin-bottom: 1em; text-transform: lowercase; } letter-spacing: 4em; Style rule áp dụng cho phần tử h1, h2, h3 Bạn cần ý phần tử phải có dấu phảy (,) Đó cú pháp chung Sử dụng Grouping Selector giúp bạn tiết kiệm thời gian tối thiểu hóa lượng code mà bạn cần viết Tương tự, bạn muốn áp dụng cho nhiều class, bạn sử dụng nhiều Class Selector CSS ví dụ đây: http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     http://vietjack.com/css/index.jsp                                                                                                              Copyright  ©  vietjack.com     #content, #footer, #supplement { width: 200px; } position: absolute; left: 510px; Comment CSS Comment đóng vai trò quan trọng lập trình Nó cung cấp nhiều thơng tin hữu ích cho người đọc, giúp họ (hay bạn cần xem lại code) hiểu bạn thực Comment CSS bắt đầu với /* kết thúc với */ Comment trải rộng nhiều dòng Ví dụ: p { color: red; /* vi du ve comment nam tren mot dong */ align: center; } /* vi du ve comment nam tren nhieu dong */ text- Ví dụ p { color: red; /* Vi du ve comment tren mot dong */ text-align: center; } /* Vi du ve comment tren nhieu dong CSS */

Hoc CSS co ban tai VietJack!

Kết là: Hoc CSS co ban tai VietJack!   http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     ... dấu ngoặc ơm Trong ví dụ tiếp theo, tất phần tử chỉnh theo lề trái có màu màu đỏ: p { color: red; text-align: left; } Các loại Selector CSS (hoặc CSS Selector) Element Selector CSS Hiểu nôm na... color: #36CFFF; } Universal Selector CSS Nếu bạn muốn áp dụng style cho tất thẻ HTML tài liệu, bạn sử dụng cú pháp giống * { color: #000000; } Descendant Selector CSS Giả sử bạn muốn áp dụng... khác nhau, tùy theo mục đích bạn sử dụng Type Selector, Universal Selector, Descendant Selector p { text-align: center; color: red; } Type Selector CSS Cũng giống ví dụ trên, ví dụ sau áp dụng