Bài viết này đưa ra một chủ đề thú vị và quan trọng được gọi là Người lựa chọn và theo dõi nó với một minh chứng thực tế hỗ trợ. Các gợi ý sau sẽ được đề cập trong bài viết này,
- Tạo kiểu các phần tử HTML
- Bộ chọn CSS
- Bộ chọn ID CSS
- Bộ chọn lớp CSS
- Bộ chọn phổ quát CSS
- Bộ chọn nhóm CSS
Vì vậy, hãy để chúng tôi bắt đầu,
Tạo kiểu các phần tử HTML
Hãy hiểu CSS là gì trước khi chúng ta chuyển sang bộ chọn CSS. Nếu HTML được coi như một bộ xương, thì CSS (Cascading Style Sheets) giống như cơ bắp và làn da. Bộ não là JavaScript. Vì vậy, đối với một trang web, các kiểu CSS về cơ bản là bố cục và thiết kế. Ngay từ việc định vị hình ảnh và văn bản đến kích thước phông chữ và màu nền, CSS kiểm soát cách các phần tử HTML trông như thế nào trong trình duyệt.
Bạn có thể hiểu CSS tốt hơn, nếu bạn nắm rõ về CSS selectors. Các bộ chọn này cho phép bạn nhắm mục tiêu các phần tử HTML cụ thể để bạn có thể áp dụng kiểu phù hợp cho chúng.
Hãy để chúng tôi hiểu cách chúng tôi có thể chọn các phần tử HTML,
Làm thế nào để chọn các phần tử?
Giả sử, bạn muốn một tiêu đề nhất định được tạo kiểu khác với phần còn lại của nội dung trong một trang web. Bây giờ, bằng cách sử dụng bộ chọn CSS, bạn có thể nhắm mục tiêu phần tử HTML đó để tạo kiểu khác. Bộ chọn CSS giúp xác định các phần tử áp dụng một bộ quy tắc CSS nhất định. Có nhiều loại bộ chọn CSS khác nhau cho phép bạn chọn chính xác các phần tử bạn muốn tạo kiểu. Bạn có thể tạo kiểu chung cho toàn bộ trang web và sau đó làm việc theo cách của bạn để tạo kiểu cho các phần tử khác của trang.
Các bộ chọn là một phần của quy tắc CSS và các bộ chọn này xuất hiện ngay trước phần khai báo các khối CSS. Để hiểu rõ hơn, bạn có thể tham khảo hình ảnh bên dưới.
Tiếp tục với bài viết Bộ chọn CSS
Bộ chọn CSS
Bộ chọn này cho phép bạn chọn một phần tử HTML theo tên của nó.
Hãy xem xét đoạn mã dưới đây:
p {text-align: center color: magenta}Phong cách này sẽ được áp dụng trên mọi đoạn văn.
Đoạn 1
Đoạn văn bản 2
Mã này sẽ cung cấp cho bạn kết quả sau:
Kiểu này sẽ được áp dụng trên mọi đoạn văn
Đoạn 1
Đoạn văn bản 2
Trong đoạn mã trên, các phần tử HTML đã được căn giữa và có màu 'đỏ tươi'.
Tiếp tục với bài viết Bộ chọn CSS
Bộ chọn ID CSS
Bằng cách chọn thuộc tính id của một phần tử HTML, bạn có thể chọn phần tử cụ thể đó. Vì id là duy nhất cho một trang, bạn có thể chọn phần tử phù hợp bằng cách sử dụng thuộc tính id.
Bạn có thể chọn phần tử HTML bằng cách sử dụng “#” theo sau là id của phần tử đó. Ví dụ: “#firstname” chọn phần tử có id là “firstname”.
Hãy xem xét đoạn mã sau:
# para1 {text-align: center color: orange}Chào thế giới
c ++ sắp xếp mảng các int
Đoạn này sẽ không bị ảnh hưởng.
Đầu ra cho đoạn mã trên là:
Chào thế giới
Đoạn này sẽ không bị ảnh hưởng.
Như bạn có thể thấy trong đầu ra ở trên, bằng cách bao gồm id = ”para1 ″, chúng tôi có thể thay đổi màu của phần tử đó thành màu cam. Phần tử khác không có điều này vẫn không bị ảnh hưởng.
Tiếp tục với bài viết Bộ chọn CSS
Bộ chọn lớp CSS
Sử dụng bộ chọn lớp, bạn có thể chọn các phần tử HTML có thuộc tính lớp cụ thể. Bạn có thể xác định bộ chọn bằng cách sử dụng một dấu chấm (ký hiệu đầy đủ) theo sau là tên lớp. Ví dụ: .intro chọn các phần tử mà lớp là “phần giới thiệu”. Một điều cần lưu ý là bạn không bao giờ có thể bắt đầu tên lớp bằng một số.
Hãy xem xét đoạn mã sau:
.center {text-align: center color: pink}Tiêu đề này có màu hồng và được căn giữa.
Đoạn văn này có màu hồng và được căn giữa.
Đầu ra của đoạn mã trên là:
Tiêu đề này có màu hồng và được căn giữa.
Đoạn văn này có màu hồng và được căn giữa.
Bạn có thể sử dụng bộ chọn lớp CSS cho một phần tử cụ thể. Nếu bạn chỉ muốn một phần tử cụ thể được tạo kiểu, thì bạn có thể sử dụng tên phần tử cùng với bộ chọn lớp.
Ví dụ: hãy xem xét đoạn mã sau:
p.center {text-align: center color: pink}Tiêu đề này không bị ảnh hưởng
Đoạn văn này có màu hồng và được căn giữa.
Đầu ra của đoạn mã trên là:
Tiêu đề này không bị ảnh hưởng
Đoạn văn này có màu hồng và được căn giữa.
Như bạn có thể thấy trong đầu ra, tiêu đề h2 không bị ảnh hưởng bởi kiểu. Vì chúng tôi đã chỉ định 'p.center', chỉ có đoạn văn bị ảnh hưởng bởi phong cách.
Tiếp tục với bài viết Bộ chọn CSS này,
Bộ chọn phổ quát CSS
Loại bộ chọn này có thể được coi là một ký tự đại diện chọn tất cả các phần tử trong trang. Nó chọn tất cả các phần tử trên trang và nó được chỉ định bởi “*”.
Ví dụ: hãy xem xét đoạn mã dưới đây:
* {color: darkgreen font-size: 30px}Đây là một bài kiểm tra (phông chữ nhỏ hơn)
Đây là một đoạn văn.
Đầu ra cho đoạn mã trên là:
Chào thế giới
Đây là một bài kiểm tra (phông chữ nhỏ hơn)
Đây là một đoạn văn.
Như bạn có thể thấy trong đầu ra, tất cả các phần tử được xác định bằng bộ chọn nhóm có cùng định nghĩa kiểu - chúng được căn giữa và màu phông chữ là màu lục lam.
Điều này đưa chúng ta đến phần cuối của bài viết này.
Kiểm tra của chúng tôi đi kèm với đào tạo trực tiếp do người hướng dẫn và trải nghiệm dự án thực tế. Khóa đào tạo này giúp bạn thành thạo các kỹ năng làm việc với công nghệ web back-end và front-end. Nó bao gồm đào tạo về Phát triển Web, jQuery, Angular, NodeJS, ExpressJS và MongoDB.
Có một câu hỏi cho chúng tôi? Vui lòng đề cập đến nó trong phần bình luận của bài viết và chúng tôi sẽ liên hệ lại với bạn.