Hướng dẫn css color select - chọn màu css
Show
Đã đăng vào thg 1 23, 2019 2:08 SA 3 phút đọc 3 phút đọc Việc tạo style cho select sao cho đồng đều trên các trình duyệt là một việc khá khó khăn. Có rất nhiều cách để giải quyết, như style cho phần tử parent, add thêm pseudo-elements và thậm chí sử dụng cả Javascript để dựng một select - kiểm soát các yếu tố khác nhau để dễ style hơn. Nhưng hầu như các cách giải quyết trên rất khó để dùng và duy trì, chưa kể việc còn các yếu tố phần tử bên ngoài khác tác động đến. 1. Ví dụ Dưới đây là các kiểu select css đơn lập mà không dùng đến các phần tử bọc ngoài hay sử dụng pseudo-elements (ngoại trừ select dành cho IE10+). Các ví dụ có thể xem trong link demo này. 2. Code Dưới đây là HTML và CSS tham khảo:
3. Lưu ý cho phần CSS
Dùng rule này trên IE10 và IE11 có thể ẩn được phần arrow mặc định và dùng được phần arrow đã được custom lại. 4. Hiển thị trên các trình duyệt Và đây là kết quả. Trong một số trình duyệt như IE9 và các phiên bản IE cũ hơn, icon design có vẻ không được đẹp lắm những vẫn có thể sử dụng và đủ ổn để đáp ứng cho các mục đích cơ bản. Link bài viết tham khảo tại đây All rights reserved Biết cách sử dụng các Bộ chọn CSS (hay còn gọi là CSS Selector) là một kỹ năng bắt buộc của lập trình viên front end.Bộ chọn CSS (hay còn gọi là CSS Selector) là một kỹ năng bắt buộc của lập trình viên front end. CSS Selector là gì?CSS Selector là gì? Hiểu đơn giản CSS Selector là thứ cho phép bạn nhắm mục tiêu tới các phần tử HTML để áp dụng các thuộc tính CSS cho chúng.CSS Selector là thứ cho phép bạn nhắm mục tiêu tới các phần tử HTML để áp dụng các thuộc tính CSS cho chúng. CSS Selector giống như là đường đẫn, chỉ định để cho CSS biết bạn đang muốn điều chỉnh, tạo kiểu cho phần tử HTML nào vậy. Đây là file HTML và file CSS. Và bạn sẽ viết CSS để điều chỉnh, tạo kiểu cho phần tử HTML.
CSS Selector trong file CSS Qua bài viết này, bạn sẽ được tìm hiểu về 8 Loại CSS Selector phổ biến nhất.8 Loại CSS Selector phổ biến nhất. Chỉ với 8 Bộ chọn CSS này mình tin rằng bạn còn biết nhiều hơn một lập trình viên Frontend chuyên nghiệp.8 Bộ chọn CSS này mình tin rằng bạn còn biết nhiều hơn một lập trình viên Frontend chuyên nghiệp. Tại sao bạn cần biết 8 CSS Selector này?8 Loại CSS Selector Phổ biến nhất Mặc dù có rất nhiều CSS Selector khác, nhưng mình thấy chúng thiếu tổ chức, thiếu ví dụ hoặc có quá nhiều thông tin. Đó là lý do tại sao mình nhóm CSS Selector này thành 8 loại chung. Khi bắt đầu tìm hiểu về mỗi nhóm, bạn sẽ thấy có một đoạn mã HTML. Hãy sử dụng đoạn mã HTML đấy để thử nghiệm loại CSS Selector được giới thiệu trong nhóm. Lưu ý: Danh sách này không đầy đủ và nó còn tiếp tục được update. Nhưng về cơ bản, nó sẽ đáp ứng hầu hết các nhu cầu sử dụng CSS Selector của bạn. Mục lục:
1. Basic CSS SelectorBộ chọn CSS cơ bản (Basic CSS Selector) sử dụng chọn element / class / id. (Basic CSS Selector) sử dụng chọn element / class / id. Chúng được sử dụng thường xuyên nhất và dễ nhớ nhất. ... Như đã nói từ trước, đây là code HTML sử dụng để cho bạn chơi với Basic CSS Selector. Code HTML:
> Lưu ý: Trước khi chuyển sang phần tiếp theo. Hãy nhớ là thực hành sử dụng các CSS Selector đã được giới thiệu để thử nghiệm với mã HTML ở trên xem có thành công không bạn nhé.Lưu ý: Trước khi chuyển sang phần tiếp theo. Hãy nhớ là thực hành sử dụng các CSS Selector đã được giới thiệu để thử nghiệm với mã HTML ở trên xem có thành công không bạn nhé. Và CSS Dinner là một trò rất thú vị để bạn luyện tập sử dụng CSS Selector. Vừa học lý thuyết về các Selctor (bên dưới đây) và dùng nó để vượt qua 32 Level này nhé.CSS Dinner là một trò rất thú vị để bạn luyện tập sử dụng CSS Selector. Vừa học lý thuyết về các Selctor (bên dưới đây) và dùng nó để vượt qua 32 Level này nhé.
Học CSS Selector qua Game CSS Dinner 2. Descendant CSS SelectorĐây là các CSS Selector để chọn hậu duệ của bất kỳ phần tử nào.CSS Selector để chọn hậu duệ của bất kỳ phần tử nào. Code HTML:
Chúng ta có thể kết hợp với 6 để chọn tất cả các phần tử hậu duệ:Chúng ta có thể kết hợp với 0 CSS Selector trên chọn mọi phần tử bên trong Child Selector: 0. Không giống như Any Descendant CSS Selector, CSS Selector này chỉ chọn hậu duệ trực tiếp.Thử nghiệm với CSS như sau để xem kết quả nhé: 1 Trong khi đó, CSS Selector bên dưới sẽ không hoạt động vì class 23. Multiple CSS SelectorMultiple CSS Selector cho phép chúng ta chọn nhiều phần tử không liên quan với nhau. cho phép chúng ta chọn nhiều phần tử không liên quan với nhau. Code HTML: 3
44. Combination CSS SelectorConbination CSS Selector cho phép bạn chọn thành phần rất cụ thể bằng nhiều tham chiếu. cho phép bạn chọn thành phần rất cụ thể bằng nhiều tham chiếu. Trường hợp sử dụng phổ biến nhất là hiệu ứng làm nổi bật button khi được di chuột (hovered) / nhấp (clicked) bằng cách cung cấp cho chúng một class 3.Code HTML: 5
6 7CSS Selector trên chọn mọi phần tử bên trong .hello { color: red; }9 Child Selector: Code HTML: 3
9 0
1 Child Selector: Thử nghiệm với CSS như sau để xem kết quả nhé: Trong khi đó, CSS Selector bên dưới sẽ không hoạt động vì class 23. Multiple CSS SelectorCode HTML: 3
44. Combination CSS Selector 5Conbination CSS Selector cho phép bạn chọn thành phần rất cụ thể bằng nhiều tham chiếu. Trường hợp sử dụng phổ biến nhất là hiệu ứng làm nổi bật button khi được di chuột (hovered) / nhấp (clicked) bằng cách cung cấp cho chúng một class 3.Combination CSS Selector: 4. Cho phép chọn phần tử chứa cả A và B. Cú pháp trông giống như Descendant CSS Selector, ngoại trừ phần này không có khoảng trắng. 6
7
8Sibling CSS Selector nhắm chọn các phần tử anh chị em. Bộ chọn Anh / Chị / Em liền kề (Nghiêm ngặt): 5. Nhắm mục tiêu một phần tử anh chị em được đặt ngay sau phần tử đó.
9 Bộ chọn Anh / Chị / Em liền kề (Không nghiêm ngặt): 0 Bạn thấy không, nó chọn cả thẻ
2
Bạn đoán thử xem. Nhắm mục tiêu Chẳng có gì xảy ra. Điều này là do mặc dù 5 có cha mẹ (div với class 6), nhưng 5 không phải là con đầu tiên (nó là con thứ 3). 3 CSS dưới đây sẽ hoạt động vì Chọn phần tử con cuối cùng: A:last-child. Hoạt động như 2, ngoại trừ thay vì chọn phần tử con đầu tiên, nó chọn phần tử con cuối cùng. 4 Chỉ chọn phần tử con: A:only-child. Chọn tất cả A là con duy nhất của cha mẹ nó. Tương tự như bộ chọn phần tử con đầu tiên ( id="hola-id" class="hola-class">Hola World class="hello-class">Hello World class="hello-class again-class">Hello Again World Lưu ý mặc dù chúng ta có một số phần tử 0, chỉ phần tử cuối cùng được áp dụng vì các phần tử 0 khác không phải là phần tử con duy nhất của cha mẹ chúng.Nói cách khác, phần tử con có anh chị em thì không được áp dụng.
5
6Hãy thử với phần tử khác. 7 Nếu chúng ta thay đổi nó thành Ngoài ra nếu chúng ta thay đổi nó thành 03, không có thay đổi gì. Đây là do không có phần tử 0 thứ 4 trong số các anh chị em.
8 Chú ý, chúng ta có hai phần tử Điều này là do có hai phần tử 0 này không có Anh / Chị / Em cùng loại.7. Pesudo-Selector (links và input) Dưới đây là danh sách các pesudo selector khác. Chúng thường được liên kết với các liên kết ( Code HTML: 9
0 Không chỉ hoạt động với thẻ 1
2
3Lưu ý khi bạn click vào nó, nền (background) sẽ thay đổi.
48. Attribute CSS SelectorBộ chọn thuộc tính CSS (Attribute CSS Selector) sử dụng để chọn thuộc tính HTML (HTML Attributes). (Attribute CSS Selector) sử dụng để chọn thuộc tính HTML (HTML Attributes). Code HTML: 5
6
12. Chọn phần tử bạn đang tập trung vào nó. Thường được sử dụng với 13.
8
9
0 Link Selector: 8. Attribute CSS SelectorBộ chọn thuộc tính CSS (Attribute CSS Selector) sử dụng để chọn thuộc tính HTML (HTML Attributes). Bộ chọn thuộc tính cơ bản: Bộ chọn thuộc tính cụ thể:
Ok, đến đây, mình rât tiếc phải xin lỗi rằng: Bạn đã biết quá nhiều về CSS Selector...CSS Selector là gì và ghi nhớ một số Bộ chọn CSS phổ biến ở trên là quá đủ. Mi đã biết quá nhiều về CSS SelectorChia sẻ và Bookmark lại để đọc kỹ hơn bạn nhé! Với 8 Bộ CSS Selector này mình tin rằng đáp ứng đầy đủ cho bạn trong quá trình lập trình web / app. Thậm chí, với các nguyên tắc viết CSS mang lại hiệu suất tốt như Nguyên tắc Độ đặc hiệu thấp thì: Nên sử dụng CSS Selector cùng một độ đặc hiệu (như là Và đặt tên class theo nguyên tắc BEM để quản lý Các CSS Selector càng sâu, càng cụ thể càng làm giảm hiệu suất. Vì thế, Bạn chỉ cần hiểu CSS Selector là gì và ghi nhớ một số Bộ chọn CSS phổ biến ở trên là quá đủ. Nếu thấy hay thì hãy Chia sẻ và Bookmark lại để đọc kỹ hơn bạn nhé! Tham khảo: https://www.w3schools.com/cssref/css_selectors.asp https://guide.freecodecamp.org/css/tutorials/css-selectors-cheat-sheet/ https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors |