Html & Javascript 30-6-2015 Show Bộ chọn màu là một trong những chức năng thường xuất hiện trong trình soạn thảo văn bản mà chúng ta sử dụng để soạn thảo bài viết. Hôm nay mình sẽ chia sẻ cho các bạn cách tạo chức năng này với jQuery vài đoạn script và các bạn có thể nâng cao để sử dụng cho trang web hay blog của các bạn HTML Các bạn copy đoạn html bên dưới để làm chuẩn cho bảng chọn màu <div class="color-wrapper"> <p>Choose color (#hex)</p> <input type="text" name="custom_color" placeholder="#ffffff" id="pickcolor" class="call-picker"> <div class="color-holder call-picker"></div> <div class="color-picker" id="color-picker" style="display:none" ></div> </div> CSS Kế hoạch định dạng bảng màu của bạn với đoạn css sau .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); } jQuery Và đây chính là trái tim của bài viết, các bạn sử dụng đoạn script sau để ứng dụng hoàn tất var colorList = ['000000', '993300', '333300', '003300', '003366', '000066', '333399', '333333', '660000', 'FF6633', '666633', '336633', '336666', '0066FF', '666699', '666666', 'CC3333', 'FF9933', '99CC33', '669966', '66CCCC', '3366FF', '663366', '999999', 'CC66FF', 'FFCC33', 'FFFF66', '99FF66', '99CCCC', '66CCFF', '993366', 'CCCCCC', 'FF99CC', 'FFCC99', 'FFFF99', 'CCffCC', 'CCFFff', '99CCFF', 'CC99FF', 'FFFFFF']; var picker = $('#color-picker'); for(var i=0; i< colorList.length; i++) { picker.append('<li class="color-item" data-hex="'+ '#' + colorList[i] + '" style="background-color:' + '#' + colorList[i] + ';"></li>'); } // khi click vao bang mau, no se tu mat $('body').click(function(){ picker.fadeOut(); }); // click de xuat hien bang mau $('.call-picker').click(function(event){ event.stopPropagation(); picker.fadeIn(); picker.children('li').hover(function(){ var codeHex = $(this).data('hex'); $('.color-holder').css('background-color',codeHex); $('#pickcolor').val(codeHex); }); }); Đoạn code trên sử dụng thuật toán rất đơn giản trong việc chọn màu, mình hy vọng là qua bài viết này, các bạn có thể học hỏi thêm được nhiều kinh nghiệm trong việc sử dụng jQuery để tạo ra các hiệu ứng của riêng mình Trong hướng dẫn này, chúng tôi sẽ tạo Hộp thoại chọn màu bằng cách sử dụng thư viện GitHub được gọi là thư viện AmbilWarna. Thư viện này là một thư viện khá tốt và được đánh giá cao về ứng dụng sử dụng. Vì vậy, đây là hướng dẫn từng bước hoàn chỉnh việc tạo ứng dụng có sử dụng Hộp thoại Bộ chọn Màu Biết cách sử dụng CSS Selector (hay còn gọi là CSS Selector) là một kỹ năng bắt buộc của thiết lập giao diện người dùng Bộ chọn CSS là gì? CSS Selector đơn giản 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 Bộ chọn CSS giống như đường dẫn, chỉ định để 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 để chỉnh sửa, tạo kiểu cho phần tử HTML Bộ chọn CSS trong tệp CSS Qua bài viết này, bạn sẽ được khám phá về 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 Tại sao bạn cần biết 8 CSS Selector này?8 Type 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ề từng nhóm, bạn sẽ thấy có một đoạn mã HTML Hãy sử dụng đoạn mã HTML đó để 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ó vẫn tiếp tục được cập nhật 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 lục mục 1. Bộ chọn CSS cơ bảnBộ chọn CSS cơ bản (Basic CSS Selector) sử dụng chọn phần tử / lớp / 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 dùng để bạn chơi với Basic CSS Selector Mã HTML
.color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }1
> Lưu ý. Trước khi chuyển sang phần tiếp theo. Hãy nhớ rằng đang thực thi việc sử dụng 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é. And CSS Dinner là một trò chơi rất thú vị để bạn luyện tập sử dụng CSS Selector. Medium học lý thuyết về Selector (bên dưới đây) và dùng nó để vượt qua 32 Level này nhé Học CSS Selector qua Game CSS Diner > Tham khảo ngay các từ khóa học dưới đây để nhanh chóng làm chủ bộ kỹ năng lập trình Web. Học với giảng viên doanh nghiệp. Hỗ trợ công việc làm cuối khóa 2. Bộ chọn CSS hậu duệĐây là CSS Selector để chọn phần hậu duệ của bất kỳ phần tử nào Mã HTML
.color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }6
3 để chọn tất cả các phần tử hậu duệ.color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }8 Bộ chọn CSS trên mọi phần tử bên trong được chọn trong 6bộ chọn con. 7. Không giống với Any Descendant CSS Selector, CSS Selector này chỉ chọn hậu duệ trực tiếpTry test with CSS as after to view results nhé var colorList = ['000000', '993300', '333300', '003300', '003366', '000066', '333399', '333333', '660000', 'FF6633', '666633', '336633', '336666', '0066FF', '666699', '666666', 'CC3333', 'FF9933', '99CC33', '669966', '66CCCC', '3366FF', '663366', '999999', 'CC66FF', 'FFCC33', 'FFFF66', '99FF66', '99CCCC', '66CCFF', '993366', 'CCCCCC', 'FF99CC', 'FFCC99', 'FFFF99', 'CCffCC', 'CCFFff', '99CCFF', 'CC99FF', 'FFFFFF']; var picker = $('#color-picker'); for(var i=0; i< colorList.length; i++) { picker.append('<li class="color-item" data-hex="'+ '#' + colorList[i] + '" style="background-color:' + '#' + colorList[i] + ';"></li>'); } // khi click vao bang mau, no se tu mat $('body').click(function(){ picker.fadeOut(); }); // click de xuat hien bang mau $('.call-picker').click(function(event){ event.stopPropagation(); picker.fadeIn(); picker.children('li').hover(function(){ var codeHex = $(this).data('hex'); $('.color-holder').css('background-color',codeHex); $('#pickcolor').val(codeHex); }); });1 Trong khi đó, CSS Selector bên dưới sẽ không hoạt động vì class 8 trong HTML này không phải là hậu duệ trực tiếpvar colorList = ['000000', '993300', '333300', '003300', '003366', '000066', '333399', '333333', '660000', 'FF6633', '666633', '336633', '336666', '0066FF', '666699', '666666', 'CC3333', 'FF9933', '99CC33', '669966', '66CCCC', '3366FF', '663366', '999999', 'CC66FF', 'FFCC33', 'FFFF66', '99FF66', '99CCCC', '66CCFF', '993366', 'CCCCCC', 'FF99CC', 'FFCC99', 'FFFF99', 'CCffCC', 'CCFFff', '99CCFF', 'CC99FF', 'FFFFFF']; var picker = $('#color-picker'); for(var i=0; i< colorList.length; i++) { picker.append('<li class="color-item" data-hex="'+ '#' + colorList[i] + '" style="background-color:' + '#' + colorList[i] + ';"></li>'); } // khi click vao bang mau, no se tu mat $('body').click(function(){ picker.fadeOut(); }); // click de xuat hien bang mau $('.call-picker').click(function(event){ event.stopPropagation(); picker.fadeIn(); picker.children('li').hover(function(){ var codeHex = $(this).data('hex'); $('.color-holder').css('background-color',codeHex); $('#pickcolor').val(codeHex); }); });3 3. Nhiều bộ chọn CSSMultiple CSS Selector cho phép chúng ta chọn nhiều phần tử không liên quan với nhau Mã HTML 0
14. Bộ chọn CSS kết hợpBộ chọn CSS kết hợp 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 biến phổ biến nhất là nút hiệu ứng làm nổi bật khi được di chuột (di chuột) / nhấp (nhấp) bằng cách cung cấp cho chúng một lớp .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }60 Mã HTML 2
3Chúng ta có thể kết hợp nhiều thứ, không phải chỉ có lớp. (Nhớ là để chúng ta sát nhau) 45. Bộ chọn CSS anh chị emSibling CSS Selector nhắm chọn các thành phần anh chị em Mã HTML 0
6Lưu ý rằng CSS bên dưới sẽ không hoạt động vì class .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }63, mặc dù đó là anh chị em của .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }64, nhưng nó cách .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }64 2 phần tử 7
8Bạn thấy không, nó chọn cả thẻ .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }67 ở bên dưới vì chúng là thành phần anh chị em với nhau và có lớp là 8Lưu ý. This selector not active back The should CSS side not active 96. Bộ chọn CSS giảMã HTML 0
1You try to view. Mục tiêu của .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }81 có thành công không? 2không có gì xảy ra Điều này được mặc định là dù .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }82 có cha mẹ (div with class .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }83), nhưng .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }82 không phải là con đầu tiên (nó là con thứ 3) CSS dưới đây sẽ hoạt động vì 6 là con đầu tiên của .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }83 3
4
5Lưu ý mặc dù chúng ta có một số phần tử .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }67, chỉ phần tử cuối cùng được áp dụng vì các phần tử .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }67 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 áp dụng được
6Please try with the .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }67 section 7Bạn có thể thấy tại sao hai phần tử .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }67 thay đổi màu sắc?
8
9
Nghe có vẻ tương tự var colorList = ['000000', '993300', '333300', '003300', '003366', '000066', '333399', '333333', '660000', 'FF6633', '666633', '336633', '336666', '0066FF', '666699', '666666', 'CC3333', 'FF9933', '99CC33', '669966', '66CCCC', '3366FF', '663366', '999999', 'CC66FF', 'FFCC33', 'FFFF66', '99FF66', '99CCCC', '66CCFF', '993366', 'CCCCCC', 'FF99CC', 'FFCC99', 'FFFF99', 'CCffCC', 'CCFFff', '99CCFF', 'CC99FF', 'FFFFFF']; var picker = $('#color-picker'); for(var i=0; i< colorList.length; i++) { picker.append('<li class="color-item" data-hex="'+ '#' + colorList[i] + '" style="background-color:' + '#' + colorList[i] + ';"></li>'); } // khi click vao bang mau, no se tu mat $('body').click(function(){ picker.fadeOut(); }); // click de xuat hien bang mau $('.call-picker').click(function(event){ event.stopPropagation(); picker.fadeIn(); picker.children('li').hover(function(){ var codeHex = $(this).data('hex'); $('.color-holder').css('background-color',codeHex); $('#pickcolor').val(codeHex); }); });19 nhỉ? But not must be Để cảm nhận sự khác biệt của nó, hãy thử nghịch nó xem sao .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }10 Được rồi, đó không phải là một ví dụ hay vì nó cho thấy kết quả tương tự như var colorList = ['000000', '993300', '333300', '003300', '003366', '000066', '333399', '333333', '660000', 'FF6633', '666633', '336633', '336666', '0066FF', '666699', '666666', 'CC3333', 'FF9933', '99CC33', '669966', '66CCCC', '3366FF', '663366', '999999', 'CC66FF', 'FFCC33', 'FFFF66', '99FF66', '99CCCC', '66CCFF', '993366', 'CCCCCC', 'FF99CC', 'FFCC99', 'FFFF99', 'CCffCC', 'CCFFff', '99CCFF', 'CC99FF', 'FFFFFF']; var picker = $('#color-picker'); for(var i=0; i< colorList.length; i++) { picker.append('<li class="color-item" data-hex="'+ '#' + colorList[i] + '" style="background-color:' + '#' + colorList[i] + ';"></li>'); } // khi click vao bang mau, no se tu mat $('body').click(function(){ picker.fadeOut(); }); // click de xuat hien bang mau $('.call-picker').click(function(event){ event.stopPropagation(); picker.fadeIn(); picker.children('li').hover(function(){ var codeHex = $(this).data('hex'); $('.color-holder').css('background-color',codeHex); $('#pickcolor').val(codeHex); }); });30 😅 Hãy làm một ví dụ khác .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }11 Cái này thì tốt hơn So sánh với var colorList = ['000000', '993300', '333300', '003300', '003366', '000066', '333399', '333333', '660000', 'FF6633', '666633', '336633', '336666', '0066FF', '666699', '666666', 'CC3333', 'FF9933', '99CC33', '669966', '66CCCC', '3366FF', '663366', '999999', 'CC66FF', 'FFCC33', 'FFFF66', '99FF66', '99CCCC', '66CCFF', '993366', 'CCCCCC', 'FF99CC', 'FFCC99', 'FFFF99', 'CCffCC', 'CCFFff', '99CCFF', 'CC99FF', 'FFFFFF']; var picker = $('#color-picker'); for(var i=0; i< colorList.length; i++) { picker.append('<li class="color-item" data-hex="'+ '#' + colorList[i] + '" style="background-color:' + '#' + colorList[i] + ';"></li>'); } // khi click vao bang mau, no se tu mat $('body').click(function(){ picker.fadeOut(); }); // click de xuat hien bang mau $('.call-picker').click(function(event){ event.stopPropagation(); picker.fadeIn(); picker.children('li').hover(function(){ var codeHex = $(this).data('hex'); $('.color-holder').css('background-color',codeHex); $('#pickcolor').val(codeHex); }); });31. Bạn sẽ thấy rằng .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }67 ở giữa chuyển sang màu đỏ khi sử dụng var colorList = ['000000', '993300', '333300', '003300', '003366', '000066', '333399', '333333', '660000', 'FF6633', '666633', '336633', '336666', '0066FF', '666699', '666666', 'CC3333', 'FF9933', '99CC33', '669966', '66CCCC', '3366FF', '663366', '999999', 'CC66FF', 'FFCC33', 'FFFF66', '99FF66', '99CCCC', '66CCFF', '993366', 'CCCCCC', 'FF99CC', 'FFCC99', 'FFFF99', 'CCffCC', 'CCFFff', '99CCFF', 'CC99FF', 'FFFFFF']; var picker = $('#color-picker'); for(var i=0; i< colorList.length; i++) { picker.append('<li class="color-item" data-hex="'+ '#' + colorList[i] + '" style="background-color:' + '#' + colorList[i] + ';"></li>'); } // khi click vao bang mau, no se tu mat $('body').click(function(){ picker.fadeOut(); }); // click de xuat hien bang mau $('.call-picker').click(function(event){ event.stopPropagation(); picker.fadeIn(); picker.children('li').hover(function(){ var codeHex = $(this).data('hex'); $('.color-holder').css('background-color',codeHex); $('#pickcolor').val(codeHex); }); });33 Điều này là do .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }67 ở giữa là loại phần tử .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }67 đầu tiên trong số các anh chị em của nó
.color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }12
.color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }13 Please try with other section .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }14 Nếu chúng ta thay đổi nó thành var colorList = ['000000', '993300', '333300', '003300', '003366', '000066', '333399', '333333', '660000', 'FF6633', '666633', '336633', '336666', '0066FF', '666699', '666666', 'CC3333', 'FF9933', '99CC33', '669966', '66CCCC', '3366FF', '663366', '999999', 'CC66FF', 'FFCC33', 'FFFF66', '99FF66', '99CCCC', '66CCFF', '993366', 'CCCCCC', 'FF99CC', 'FFCC99', 'FFFF99', 'CCffCC', 'CCFFff', '99CCFF', 'CC99FF', 'FFFFFF']; var picker = $('#color-picker'); for(var i=0; i< colorList.length; i++) { picker.append('<li class="color-item" data-hex="'+ '#' + colorList[i] + '" style="background-color:' + '#' + colorList[i] + ';"></li>'); } // khi click vao bang mau, no se tu mat $('body').click(function(){ picker.fadeOut(); }); // click de xuat hien bang mau $('.call-picker').click(function(event){ event.stopPropagation(); picker.fadeIn(); picker.children('li').hover(function(){ var codeHex = $(this).data('hex'); $('.color-holder').css('background-color',codeHex); $('#pickcolor').val(codeHex); }); });38, thì nó hoạt động giống như var colorList = ['000000', '993300', '333300', '003300', '003366', '000066', '333399', '333333', '660000', 'FF6633', '666633', '336633', '336666', '0066FF', '666699', '666666', 'CC3333', 'FF9933', '99CC33', '669966', '66CCCC', '3366FF', '663366', '999999', 'CC66FF', 'FFCC33', 'FFFF66', '99FF66', '99CCCC', '66CCFF', '993366', 'CCCCCC', 'FF99CC', 'FFCC99', 'FFFF99', 'CCffCC', 'CCFFff', '99CCFF', 'CC99FF', 'FFFFFF']; var picker = $('#color-picker'); for(var i=0; i< colorList.length; i++) { picker.append('<li class="color-item" data-hex="'+ '#' + colorList[i] + '" style="background-color:' + '#' + colorList[i] + ';"></li>'); } // khi click vao bang mau, no se tu mat $('body').click(function(){ picker.fadeOut(); }); // click de xuat hien bang mau $('.call-picker').click(function(event){ event.stopPropagation(); picker.fadeIn(); picker.children('li').hover(function(){ var codeHex = $(this).data('hex'); $('.color-holder').css('background-color',codeHex); $('#pickcolor').val(codeHex); }); });39 Ngoài ra nếu chúng ta thay đổi nó thành 00, không có gì thay đổi. Đây là do không có phần tử .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }67 thứ 4 trong số các anh chị em
.color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }15 Chú ý, chúng ta có hai phần tử .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }67 đổi màu Điều này là do có hai phần tử .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }67 đây không có Anh / Chị / Em cùng loại 7. Bộ chọn giả (liên kết và đầu vào)Dưới đây là danh sách các bộ chọn pesudo khác. Chúng thường được liên kết với các liên kết ( 05) (mặc dù chúng có thể hoạt động với các phần tử không liên kết 06)Mã HTML .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }16
.color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }17 Not only active with thẻ 05. This option active with all second.color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }18
.color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }19
0Lưu ý khi bạn nhấp vào nó, nền (nền) sẽ thay đổi
18. Bộ chọn CSS thuộc tínhBộ chọn thuộc tính CSS (Attribute CSS Selector) được sử dụng để chọn thuộc tính HTML (HTML Attributes) Mã HTML 2
3
4
5
6
7Ok, đến đây, mình rất tiếc phải xin lỗi rằng Bạn đã biết quá nhiều về CSS SelectorTôi đã biết quá nhiều về CSS Selector 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ì
Vì thế, Bạn chỉ cần hiểu Bộ chọn CSS 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à Đánh dấu lại để đọc kĩ hơn bạn nhé Tham khảo https. //www. w3schools. com/cssref/css_selectors. asp HỌC VIỆN ĐẠO TẠO CNTT NIIT - ICT HÀ NỘI Học lập trình chất lượng cao (Từ năm 2002). Học thực tế + Tuyển dụng ngay Đc. Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội SĐT. 02435574074 - 0383. 180086 E-mail. xin chào@niithanoi. giáo dục. vn trang chủ. https. //Facebook. com/NIIT. CNTT-TT/ #niit #icthanoi #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #php #java #python |