Cách chọn các phần tử HTML để tạo kiểu với CSS
Chức năng cốt lõi của CSS được thực hiện bởi hai tính năng: tầng và tính đặc hiệu . Cascade giải quyết cách các thuộc tính CSS được đọc và áp dụng cho các phần tử. Tính cụ thể hướng trình duyệt tìm ra phần tử chính xác và áp dụng các kiểu. Điểm bắt đầu của tính cụ thể là một bộ chọn , cho trình duyệt biết phần tử nào cần tìm. Khi nói đến việc tạo kiểu, một trang web hoặc trang web càng lớn, thì nhu cầu về các bộ chọn cụ thể hơn, hoặc độ cụ thể cao hơn.Chọn đúng phần tử và cung cấp các kiểu trực quan phù hợp là cơ sở của việc viết mã CSS. Khi nào bạn cần điều chỉnh giao diện của một phần tử trên trang web, sử dụng bộ chọn là key .
Hướng dẫn này sẽ xây dựng bộ kỹ năng của bạn và giúp bạn phát triển các trang web trực quan phong phú bằng cách chỉ cho bạn cách chọn yếu tố phù hợp trong một tình huống nhất định. Bạn sẽ bắt đầu bằng cách sử dụng bộ chọn kiểu để chọn các phần tử HTML để tạo kiểu. Sau đó, bạn sẽ kết hợp các bộ chọn để xác định và áp dụng các kiểu chính xác hơn. Cuối cùng, bạn sẽ group một số bộ chọn để áp dụng các kiểu giống nhau cho các phần tử khác nhau.
Yêu cầu
Làm quen với các khái niệm về tầng và tính cụ thể khi chúng áp dụng cho CSS.
Tệp HTML trống được lưu trên máy local của bạn dưới dạng
index.htmlmà bạn có thể truy cập từ editor và trình duyệt web bạn chọn. Để bắt đầu, hãy xem hướng dẫn Cách cài đặt dự án HTML của bạn và làm theo Cách sử dụng và hiểu các phần tử HTML để biết hướng dẫn về cách xem HTML trong trình duyệt của bạn. Nếu bạn chưa quen với HTML, hãy thử toàn bộ loạt bài Cách tạo trang web trong HTML .Tệp CSS trống có tên
styles.csslưu trên máy local của bạn trong cùng folder vớiindex.html.
Cài đặt HTML
Trong bước đầu tiên này, bạn sẽ cài đặt HTML mà bạn sẽ tạo kiểu trong suốt phần còn lại của hướng dẫn. Mục đích của HTML trong hướng dẫn này là cung cấp các yếu tố và tình huống khác nhau để tạo kiểu.
Mở index.html trong editor và thêm HTML bản soạn sẵn sau để cung cấp mã cơ sở cần thiết cho file :
<!doctype html> <html> <head> <link href="styles.css" rel="stylesheet" /> </head> <body> </body> </html> Phần tử <link /> đã tải trong file styles.css , vì vậy hãy đảm bảo file đó cũng đã sẵn sàng.
Bây giờ, bạn cần một số nội dung. Bắt đầu bằng cách thêm các phần tử <header> và <article> vào bên trong phần tử <body> . Trong khối mã sau, các phần được đánh dấu sẽ giúp bạn xác định những gì mới hoặc đã thay đổi:
<!doctype html> <html> ... <body> <header></header> <article></article> </body> </html> Mối quan hệ giữa các phần tử <body> và <header> được gọi là cha và con , vì phần tử <header> được lồng bên trong các <body> . Điều này cũng nghĩa là <header> và <article> có mối quan hệ anh em ruột thịt , vì chúng ở cùng mức lồng nhau trong các <body> .
Tiếp theo, bạn sẽ thêm một phần tử con trong <header> để đặt <header> cho trang:
... <header> <h1>About Coral Reefs</h1> </header> ... Bên trong <article> , thêm bốn phần tử con: một phần tử <header> và ba phần tử <section> . Phần tử <article> cung cấp cái được gọi là mốc , chỉ định cho trình duyệt để hỗ trợ những người sử dụng công nghệ hỗ trợ. Chỉ nên có một <header> trong một mốc. Trong trường hợp này, <header> sẽ chứa tiêu đề cho bài viết này của trang. Các <section> tử <section> sẽ chứa các khối thông tin khác nhau:
... <article> <header></header> <section></section> <section></section> <section></section> </article> ... Bây giờ, hãy cung cấp một tiêu đề trong <header> cho <article> . Sử dụng <h2> ở đây vì nó hoạt động một cách hợp lý như một tiêu đề cấp hai bên dưới <header> của <body> <header> với một tiêu đề cấp cao nhất. Thêm <strong> xung quanh từ "Đa dạng sinh học" để nhấn mạnh văn bản. Khi bạn tải index.html trong trình duyệt của bạn , văn bản này trông sẽ không khác gì do mặc định của trình duyệt. Bạn sẽ tạo kiểu này sau để phân biệt giữa tiêu đề và <strong> văn bản.
... <article> <header> <h2>Coral Reef <strong>Biodiversity</strong></h2> </header> ... </article> ... Tiếp theo, thêm vào nội dung phần đầu tiên. Đây sẽ là hai đoạn văn, được chứa trong <p> cung cấp một số chi tiết về các rạn san hô. Trong đoạn đầu tiên, hãy thêm <em> và thẻ <strong> xung quanh một số cụm từ để nhấn mạnh nội dung đó:
... <article> <header> ... </header> <section> <p>Coral reefs are teeming with life. They are known as the <em>rainforests of the sea</em> with how many various speieces live within their waters. The defining feature of these ecosystems are the plant-like coral, which are really colonies of tiny invertabrates called <strong>polyps</strong>.</p> <p>Sadly, many reefs around the world are in danger due to rising ocean temperatures, pollution, and overfishing.</p> </section> ... </article> ... Trong phần thứ hai, thêm <h3> cho tiêu đề cho phần này của bài viết. Giống như <h2> trước đây, nó được đặt là <h3> vì nó là một tập hợp con của nội dung. Trong <h3> , thêm <strong> xung quanh một cụm từ trong tiêu đề như trong <h2> . Sau đó, viết ra một danh sách không có thứ tự bằng cách sử dụng <ul> để xác định danh sách và <li> để xác định từng mục trong danh sách. Trong một trong các mục danh sách, hãy bọc nội dung trong <strong> :
... <article> <header> ... </header> <section> ... </section> <section> <h3><strong>Animal Life</strong> in a Coral Reef</h3> <ul> <li>Angelfish</li> <li>Clownfish</li> <li>Octopus</li> <li><strong>Sharks</strong></li> <li>Barracuda</li> </ul> </section> ... </article> ... Với phần cuối cùng, hãy cài đặt nội dung tương tự như phần thứ hai với tiêu đề phần <h3> và phần tử <strong> xung quanh một từ trong tiêu đề. Thay vì danh sách không có thứ tự, hãy tạo một danh sách có thứ tự với <ol> để xác định danh sách, nhưng vẫn xác định từng mục bằng <li> . , ở một trong các mục danh sách, hãy thêm một phần tử <strong> xung quanh nội dung:
... <article> <header> ... </header> <section> ... </section> <section> ... </section> <section> <h3>Sammy's <strong>Favorite</strong> Reef Food</h3> <ol> <li>Sea Grass</li> <li><strong>Kelp</strong></li> <li>Sea Grapes</li> <li>Sea Lettuce</li> </ol> </section> </article> ... Lưu file của bạn.
Điều đó bao gồm HTML cho hướng dẫn này và cung cấp các yếu tố mà bạn có thể bắt đầu viết các kiểu. Đến đây bạn đã hoàn thành với index.html , hãy để nó mở trong editor để tham khảo khi cần. Sau đó, mở index.html trong trình duyệt của bạn để xem các kiểu mặc định của trình duyệt, kiểu này sẽ xuất hiện tương tự như hình ảnh sau:
Tiếp theo, bạn sẽ áp dụng các kiểu cho trang HTML mà bạn đã tạo.
Chọn phần tử bằng công cụ chọn loại
Trong phần này, bạn sẽ làm việc với bộ chọn kiểu , thường được gọi là bộ chọn phần tử. Bộ chọn loại tìm các phần tử trên trang theo tên thẻ, làm cho nó rộng nhất về mặt cụ thể. Bạn sẽ viết một số bộ chọn để tìm hiểu độ rộng của bộ chọn này trên khắp trang index.html .
Đầu tiên, hãy xem index.html trong trình duyệt. Trang này trông như thế nào khi sử dụng mặc định của trình duyệt. Đây là những kiểu được định nghĩa do trình duyệt cung cấp để cung cấp thông tin trực quan cho nội dung của trang. Đây là một nơi khởi đầu hữu ích cho các phong cách; trong các ví dụ phía trước, bạn sẽ chỉ sửa đổi một vài thuộc tính để tùy chỉnh giao diện của trang.
Tiếp theo, mở file styles.css trong editor . Phông chữ mặc định của trình duyệt thường là phông chữ serif , một thuật ngữ kiểu chữ dùng để chỉ các phần cuối trang trí trên các ký tự, giống như các phông chữ trong Times New Roman . Để thay đổi phông chữ trên toàn bộ trang, bạn có thể thực hiện thay đổi ở một nơi.
Tạo một kiểu bộ chọn cho HTML <body> yếu tố bằng lệnh ra từ trong thẻ, body , tiếp theo là khai mạc và bế cú đúp xoăn. Bên trong dấu ngoặc nhọn, thêm một dòng mới và sau đó thêm thuộc tính CSS font-family với giá trị sans-serif . Việc bổ sung họ font-family này sẽ thay đổi phông chữ cho toàn bộ tài liệu thành phông chữ sans serif . Không giống như phông chữ serif, phông chữ sans serif thiếu các đầu trang trí trên các ký tự, chẳng hạn như trong Helvetica hoặc Arial :
body { font-family: sans-serif; } Khi bạn đã thực hiện những thay đổi này, hãy lưu styles.css và làm mới trình duyệt của bạn để xác minh văn bản đã thay đổi thành phông chữ sans-serif mặc định của trình duyệt. Lý do phông chữ thay đổi trên toàn bộ trang là do một tính năng của CSS được gọi là kế thừa . Kế thừa là khi một phần tử con kế thừa các giá trị thuộc tính từ phần tử mẹ, trừ khi được chỉ định khác. Tính năng này không ảnh hưởng đến tất cả các thuộc tính hoặc phần tử CSS, nhưng nó đáng chú ý nhất trong số các thuộc tính ảnh hưởng đến văn bản.
Tiếp theo, điều chỉnh font-weight của các phần tử <h2> và <h3> trên trang. Theo mặc định, trình duyệt áp dụng các kiểu để làm cho các phần tử này trở thành phông chữ đậm. Tạo một bộ chọn kiểu h2 và h3 và trong mỗi bộ thêm thuộc tính font-weight với giá trị normal . Điều này sẽ thay đổi giá trị mặc định từ đậm sang trọng lượng bình thường:
body { font-family: sans-serif; } h2 { font-weight: normal; } h3 { font-weight: normal; } Lưu và quay lại trình duyệt của bạn và làm mới trang index.html . Nội dung của các phần tử <h2> và <h3> đã thay đổi từ đậm sang trọng lượng phông chữ bình thường, ngoại trừ văn bản trong <strong> phần tử. Đây là trường hợp giá trị rõ ràng được đặt cho font-weight trong trình duyệt mặc định, vì vậy phần tử <strong> không kế thừa thay đổi đối với phần tử mẹ của nó.
Mục đích chính của bất kỳ thiết kế nào là hỗ trợ giao tiếp. Trong trường hợp này, thiết kế đang làm việc để nhấn mạnh một phần cụ thể của nội dung thông qua sự tương phản về trọng lượng phông chữ. Tiếp theo, bạn sẽ áp dụng màu sắc để giúp khuyến khích sự tương phản này. Bắt đầu với bộ chọn loại em và áp dụng background-color yellow để tạo hiệu ứng tô sáng. Tiếp theo, để giúp thu hút sự chú ý hơn nữa đến <strong> nội dung, hãy tạo bộ chọn loại strong với thuộc tính color được đặt thành red :
... h3 { font-weight: normal; } em { background-color: yellow; } strong { color: red; } Lưu styles.css và refresh index.html trong trình duyệt của bạn để tìm những thay đổi bạn đã thực hiện đối với thiết kế của trang web. Như thể hiện trong hình ảnh sau, toàn bộ văn bản trên trang đã thay đổi thành phông chữ sans-serif, các tiêu đề nội dung <h2> và <h3> không còn in đậm nữa, tất cả <strong> nội dung phần tử bây giờ có màu đỏ, và nội dung phần tử <em> có nền đánh dấu màu vàng:
Trong bước này, bạn đã làm việc với nhiều bộ chọn kiểu để tạo các kiểu cụ thể cho từng bộ chọn. Bộ chọn loại yêu cầu trình duyệt tìm một phần tử theo tên của phần tử và là công cụ cụ thể rộng nhất. Tiếp theo, bạn sẽ tìm hiểu về cách đơn giản hóa CSS của bạn thông qua việc sử dụng các group bộ chọn .
Chọn phần tử bằng bộ chọn bộ kết hợp
Trong phần này, bạn sẽ làm việc với bộ chọn tổ hợp để thực hiện lựa chọn phần tử cụ thể hơn. Bộ chọn này sử dụng mối quan hệ lồng nhau của các phần tử HTML để chọn phần tử thích hợp. Bạn sẽ sử dụng bộ chọn này để làm cho cùng một loại phần tử trông khác khi được chứa trong các loại phần tử khác.
Mở index.html trong trình duyệt. Khi bạn xem qua các kiểu, thường xuyên có những mảng màu đỏ do bộ chọn strong đang áp dụng color: red; cho tất cả các version của <strong> trên trang. Trong bước này, bạn sẽ thực hiện để thay đổi giá trị color trên <strong> phần tử khi chúng đáp ứng các tiêu chí nhất định, dựa trên tổ tiên của chúng, một loạt các mối quan hệ của phần tử cha và con.
Một bộ chọn tổ hợp được xác định bởi một ký tự khoảng trắng giữa các bộ chọn, với cách đọc tổ tiên HTML từ trái sang phải. Bộ chọn ngoài cùng bên phải là mục tiêu dự kiến. Điều này có thể phức tạp hoặc đơn giản đến mức cần thiết để xác định phạm vi hoặc cung cấp đủ tính cụ thể cho phần tử dự kiến. Để hiểu cách hoạt động của bộ chọn tổ hợp, hãy mở styles.css và thêm vào cuối file một bộ chọn loại p theo sau là dấu cách, sau đó là một bộ chọn kiểu strong theo sau là dấu ngoặc nhọn mở và đóng:
... p strong { } Đây là bộ chọn tổ hợp đang nhắm đến đến <strong> các phần tử là con cháu tổ tiên của phần tử <p> . Điều này nghĩa là phần tử <p> không nhất thiết phải là phần tử root của phần tử <strong> để bộ chọn tổ hợp này là true. Bây giờ thay đổi màu của <strong> các phần tử đáp ứng tiêu chí này bằng cách đặt thuộc tính color trong bộ chọn tổ hợp:
... p strong { color: coral; } Lưu các thay đổi và quay lại trình duyệt để làm mới index.html .
Tiếp theo, thêm nhiều màu sắc khác nhau cho các phần tử <strong> trong toàn bộ file . Bắt đầu với <strong> phần tử là con của <h3> và chuyển các phần tử đó thành blue :
... p strong { color: coral; } h3 strong { color: blue; } Cuối cùng, để thêm một số màu khác, hãy thay đổi màu cho <strong> các phần tử trong danh sách không có thứ tự thành dodgerblue , là màu xanh lam nhạt phong phú và màu của <strong> các phần tử trong danh sách có thứ tự thành green . Đây là nơi hữu ích để hiểu các yêu cầu tổ tiên của bộ chọn tổ hợp. Bạn có thể nghĩ rằng bạn cần phải viết ra ul li strong và ol li strong để nhắm đến các yếu tố này một cách chính xác. Nhưng điều này có thể được đơn giản hóa thành ul strong và ol strong vì ul và ol đủ cụ thể:
... h3 strong { color: blue; } ul strong { color: dodgerblue; } ol strong { color: green; } Quay lại trình duyệt của bạn và nhấn làm mới. Các <strong> phần tử trong danh sách không có thứ tự bây giờ là một màu xanh nhạt giàu và <strong> phần tử trong danh sách đặt hàng bây giờ là một màu xanh lá cây, như đã thấy trong hình dưới đây:
Trong phần này, bạn đã tìm hiểu về bộ chọn tổ hợp. Bạn đã sử dụng bộ chọn với hai bộ chọn loại nhiều lần để tạo màu tùy chỉnh cho các trường hợp khác nhau của <strong> phần tử. Phần tiếp theo sẽ xem xét cách đơn giản hóa CSS của bạn bằng cách áp dụng các kiểu tương tự cho nhiều loại phần tử với group bộ chọn .
Chọn nhiều phần tử với group bộ chọn
Trong phần này, bạn sẽ chọn các phần tử HTML bằng cách sử dụng một group bộ chọn . Có một nguyên tắc lập trình được gọi là Không lặp lại chính mình , hoặc KHÔ. Mục đích của mã DRY là viết mã dễ bảo trì hơn. Sử dụng group bộ chọn là một trong những cách nhanh nhất để đưa nguyên tắc DRY vào thực tế khi viết CSS.
Mở styles.css trong editor . Trước đó trong hướng dẫn, bạn đã viết ra hai kiểu để thay đổi trọng lượng mặc định của trình duyệt từ bold thành normal :
... h2 { font-weight: normal; } h3 { font-weight: normal; } ... Vì các bộ chọn loại h2 và h3 có cùng thuộc tính và giá trị trong khối bộ chọn, điều này có thể được hợp nhất với một group bộ chọn. Một group bộ chọn được thực hiện bằng cách đặt dấu phẩy giữa các bộ chọn. Trong trường hợp này, bạn có thể xóa khối bộ chọn h3 , sau đó thêm dấu phẩy rồi thêm dấu phẩy vào bộ chọn loại h3 sau bộ chọn loại h2 . Có thể hữu ích nếu đặt mỗi bộ chọn trên một dòng mới để giúp danh sách dễ đọc.
... h2, h3 { font-weight: normal; } ... Mở trình duyệt và reload index.html để xác minh không có gì thay đổi. Cả h2 và h3 hiện chia sẻ cùng một phong cách nhờ khối bộ chọn. Tuy nhiên, bạn không bị giới hạn trong việc giữ các kiểu dáng giống nhau. Bạn vẫn có thể có các bộ chọn loại h2 và h3 riêng lẻ để cung cấp các kiểu cụ thể cho từng phần tử. Tạo từng bộ chọn loại này, sau đó thêm màu khác vào từng khối bộ chọn:
... h2, h3 { font-weight: normal; } h2 { color: maroon; } h3 { color: navy } ... Làm mới index.html trong trình duyệt của bạn để thấy rằng h2 và h3 vẫn có cùng kiểu chia sẻ về font-weight normal , nhưng có các thuộc tính color riêng lẻ của chúng.
Group bộ chọn không giới hạn ở một loại bộ chọn cụ thể và có thể kết hợp nhiều loại bộ chọn khác nhau để có cùng kiểu dáng. Tính năng group này được dùng theo bất kỳ cách nào. Để đưa các bộ chọn đã thảo luận vào, hãy thêm một trong các bộ chọn tổ hợp vào group bộ chọn h2, h3 .
... h2, h3, ol strong { font-weight: normal; } ... Sau khi làm mới index.html trong trình duyệt của bạn, phần tử <strong> trong danh sách được sắp xếp sẽ không còn được in đậm nữa và thay vào đó sẽ có font-weight normal , như trong hình ảnh sau:
Lưu ý Với group bộ chọn, bạn có thể kết hợp các kiểu khác nhau lại với nhau thành một khối bộ chọn. Nhưng cần có sự cân bằng giữa CSS KHÔ và CSS có thể đọc được của con người, với một phương pháp hay nhất là ở khía cạnh con người có thể đọc được. Như một ví dụ điển hình, có thể viết một số bộ chọn group lớn để không có thuộc tính đơn lẻ nào được lặp lại, nhưng điều đó sẽ khó hiểu hơn đối với các nhà phát triển. Trong trường hợp này, tính dễ đọc của nhà phát triển được ưu tiên.
Trong phần này, bạn đã làm việc với bộ chọn group và biến các thuộc tính CSS lặp lại thành một khối bộ chọn duy nhất. Bạn cũng đã thêm vào bộ chọn tổ hợp với một group bộ chọn để ghi các thuộc tính có thể sử dụng lại với độ đặc hiệu cao.
Kết luận
Trong hướng dẫn này, bạn đã tìm hiểu về các bộ chọn cơ sở cần thiết để viết CSS. Như vậy, bạn có thể tìm thấy một cách hiệu quả một phần tử trên trang có CSS được lồng sâu trong HTML và tạo kiểu cụ thể cho nó. Bạn cũng đã học về nguyên tắc lập trình DRY, rất hữu ích để viết CSS ngắn gọn và dễ quản lý. Các bộ chọn này có thể được ghép nối với nhiều bộ chọn CSS khác để đi đến phần tử và tình huống chính xác mà bạn muốn tạo kiểu.
Nếu bạn muốn đọc thêm các hướng dẫn CSS, hãy xem trang chủ đề CSS của ta .
Các tin liên quan
Cách tạo chân trang tĩnh bằng HTML và CSS (Phần 7)2020-10-14
Tổng quan về Trang web HTML và CSS Trình diễn của Chúng tôi
2020-10-12
Cách tạo kiểu cho HTML phần tử div với CSS
2020-10-12
Cách tạo bảng trong HTML
2020-10-12
Cách điều chỉnh nội dung, phần đệm, đường viền và lề của một phần tử HTML bằng CSS
2020-10-12
Cách sử dụng thuộc tính Rel cho thẻ neo trong HTML
2020-10-12
Cách thêm các thực thể HTML trong Thuộc tính nội dung CSS
2020-10-12
Tham chiếu cú pháp thẻ liên kết HTML cho tệp CSS bên ngoài
2020-10-12
Cách tạo nhận xét HTML
2020-10-12
Cách điều chỉnh nội dung, phần đệm, đường viền và lề của một phần tử HTML bằng CSS
2020-10-12
