Cascading Style Sheets (CSS) cho phép bạn biến đổi giao diện các trang web của mình. Từ phông chữ và màu sắc đến khoảng cách và bố cục tổng thể, tất cả các cách thức của các công cụ thiết kế đều nằm trong tầm tay bạn. Mặc dù toàn bộ CSS là một ngôn ngữ phức tạp, nhưng chỉ có hai khái niệm cơ bản bạn cần hiểu để bắt đầu.
Tất cả bắt đầu với việc xác định chính xác phần nào của trang mà bạn muốn tạo kiểu.
Tệp CSS chứa một loạt các quy tắc mô tả cách định dạng tệp HTML. Mỗi quy tắc bao gồm hai phần: định kiểu gì và tạo kiểu như thế nào. Phần đầu tiên được kiểm soát bằng cách sử dụng một loạt thuật ngữ được gọi là “bộ chọn”.
Các ví dụ trong bài viết này bao gồm các khai báo kiểu, nhưng chúng không phải là trọng tâm: chính các bộ chọn là như vậy.
Trước đây, có ba cấp bộ chọn CSS (hoặc phiên bản) với các mức độ hỗ trợ trình duyệt khác nhau. Vào năm 2020, theo Can I Use , tất cả những thứ này đều có sẵn cho hơn 99% người dùng trên khắp thế giới.
Cấp độ 1 đã giới thiệu bốn loại bộ chọn cơ bản bao gồm một số lượng lớn các trường hợp, thậm chí ngày nay.
| Mẫu | Diêm |
|---|---|
E |
tất cả các phần tử E |
.c |
tất cả các phần tử có class = "c" |
#myid |
phần tử có id = "myid" |
E F |
một phần tử F bên trong một phần tử E |
| Lớp giả | |
E:link |
một siêu liên kết đến một trang chưa được truy cập trước đó |
E:visited |
một siêu liên kết đến một trang đã được truy cập |
E:active |
một siêu kết nối hiện được chọn |
| Yếu tố giả | |
E::first-line |
dòng đầu tiên được định dạng của một phần tử E |
E::first-letter |
chữ cái đầu tiên được định dạng của một phần tử E |
Bộ chọn đơn giản nhất là “bộ chọn loại”. Nó nhắm mục tiêu tất cả các bản sao của một phần tử, chẳng hạn như một đoạn văn hoặc văn bản in đậm:
p { margin-bottom: 0; } b { font-family: sans-serif; }
Thuộc tính class cho phép thêm ngữ nghĩa vào một phần tử HTML, chẳng hạn như một loại đoạn văn cụ thể. Các phần tử như vậy có thể được chọn trong CSS như sau:
.intro { font-weight: bold; }
Bộ chọn này sẽ phù hợp với:
…
Nhưng lưu ý rằng nó cũng sẽ khớp:
…Nếu bạn chỉ muốn nó áp dụng cho các đoạn giới thiệu, bạn có thể kết hợp bộ chọn loại và bộ chọn lớp:
p.intro { font-weight: bold; }
Thuộc tính id HTML phải là duy nhất trong một tài liệu, ví dụ: nếu bạn có:
…
Đó phải là phần tử duy nhất có id "nội dung". Bộ chọn ID cho phép bạn nhắm mục tiêu phần tử cụ thể đó trong tài liệu:
#contents { color: #333; }
Đúng là một "bộ tổ hợp", bởi vì bộ chọn này là khoảng trống ở giữa hai bộ chọn khác. HTML là phân cấp, như đã giải thích trong phần tổng quan của chúng tôi về DOM . Một bộ chọn hậu duệ cho phép một phần tử được xác định bằng ngữ cảnh của nó bên trong một phần tử khác:
table b { font-weight: normal; }
Bộ chọn giả nhắm mục tiêu các lớp hoặc phần tử không tồn tại rõ ràng nhưng vẫn được cung cấp sẵn. Hãy coi chúng như phần thưởng nội dung đặc biệt:
p::first-line { text-transform: uppercase; }
Sử dụng dấu phẩy để kết hợp các bộ chọn thành một danh sách nếu bạn muốn áp dụng cùng một bộ quy tắc cho mỗi bộ chọn. Thay vì:
th { padding: 1em; } td { padding: 1em; }
Bạn có thể viết:
th, td { padding: 1em; }
Biểu định kiểu là một loạt các quy tắc sử dụng bộ chọn để khớp với một phần tử, nhưng điều gì sẽ xảy ra khi nhiều quy tắc khớp với một phần tử nhất định? Hành vi kết quả được điều chỉnh bởi "tính cụ thể" xác định quy tắc nào được sử dụng trong một trường hợp như:
p.intro { color: black; } p { color: gray; }
Trong những trường hợp như vậy, quy tắc ưu tiên được xác định theo tính cụ thể của nó, như sau:
Khi tính toán độ cụ thể, mỗi cấp chỉ được xem xét nếu hai bộ chọn có cùng điểm ở cấp cao hơn, vì vậy “#contents” cụ thể hơn “article.news p.author.special” vì bộ chọn trước đây “thắng” trên bộ chọn ID.
Bản sửa đổi tiếp theo của bộ chọn CSS đã giới thiệu bộ chọn thuộc tính, mở rộng trên lớp giả & phần tử giả và thêm hai bộ tổ hợp mới.
| Mẫu | Diêm |
|---|---|
* |
bất kỳ yếu tố nào |
E > F |
một phần tử con F của một phần tử E |
E + F |
một phần tử F ngay trước phần tử E |
| Bộ chọn thuộc tính | |
E[foo] |
một phần tử E có thuộc tính "foo" |
E[foo="bar"] |
một phần tử E có thuộc tính "foo" chính xác là "bar" |
E[foo~="bar"] |
phần tử E có thuộc tính "foo" là danh sách các giá trị được phân tách bằng khoảng trắng, một trong số đó là "bar" |
E[foo|="en"] |
phần tử E có thuộc tính "foo" có danh sách giá trị được phân tách bằng dấu gạch nối bắt đầu bằng "en" |
| Lớp giả | |
E:first-child |
một phần tử E, con đầu tiên của cha mẹ của nó |
E:lang(fr) |
một phần tử thuộc loại E trong ngôn ngữ "fr" |
| Yếu tố giả | |
E::before |
nội dung được tạo trước nội dung của phần tử E |
E::after |
nội dung được tạo sau nội dung của phần tử E |
Dấu “*” khớp với bất kỳ phần tử nào. Nó thường không hữu ích như vậy, nhưng nếu bạn muốn đặt lại bất kỳ lề mặc định nào, chẳng hạn, bạn có thể làm như vậy:
* { margin: 0; }
Bộ chọn thuộc tính cho phép các kiểu được nhắm mục tiêu rất cụ thể, được lọc theo thuộc tính của phần tử:
a[title] { text-decoration: underline dotted; }
Tương tự như tổ hợp con cháu, nhưng tổ hợp này chỉ khớp với các con ngay lập tức, không ghép với bất kỳ con cháu nào thấp hơn cây. Ví dụ: “ul> li” sẽ chỉ khớp với văn bản “Phần 1” ở đây, chứ không phải “Phần 1.1”:
Section 1
Section 1.1Section 1.2h1 + p { font-weight: bold; }
Thường hữu ích để kiểm soát lề hoặc một đoạn giới thiệu không có một lớp cụ thể, bộ chọn này chỉ khớp với một phần tử nếu nó ngay sau phần tử khác. Trong ví dụ, chỉ đoạn đầu tiên ở đây sẽ được so khớp, không phải đoạn thứ hai:
Contents
some extra text
Introductory paragraph
Following paragraph
Lưu ý rằng bộ chọn này chỉ xem xét các phần tử — không phải văn bản — khi quyết định phần tử tiếp theo là gì.
Một số thuộc tính CSS kế thừa giá trị của chúng từ một phần tử tổ tiên. Trên thực tế, điều này có nghĩa là — ví dụ — việc đặt mặt phông chữ của phần tử “body” có nghĩa là mọi đoạn văn, bảng, v.v. cũng sử dụng cùng một mặt phông chữ đó.
Tất nhiên, đây chính xác là những gì bạn mong đợi, nhưng hãy xem xét một thuộc tính không kế thừa: ví dụ: “margin”. Bạn sẽ không muốn từng đoạn văn hoặc từng đoạn văn bản in đậm có cùng lề với toàn bộ tài liệu.
Liên quan: Ví dụ về mã CSS đơn giản mà bạn có thể học trong 10 phút
Một nguyên tắc chung là nhắm mục tiêu các phần tử nói chung là có ý nghĩa — không nhắm mục tiêu từng phần tử riêng lẻ khi một bộ chọn “body” đơn giản sẽ thực hiện.
Nhiều lớp giả khác đã được thêm vào trong cấp độ này, cùng với một số bộ chọn thuộc tính và bộ tổ hợp mới.
| Mẫu | Diêm |
|---|---|
E ~ F |
một phần tử F đứng trước một phần tử E |
| Bộ chọn thuộc tính | |
E[foo^="bar"] |
một phần tử E có thuộc tính "foo" bắt đầu bằng chuỗi "bar" |
E[foo$="bar"] |
một phần tử E có thuộc tính "foo" kết thúc bằng chuỗi "bar" |
E[foo*="bar"] |
một phần tử E có thuộc tính "foo" chứa chuỗi con "thanh" |
| Lớp giả | |
E:root |
một phần tử E, gốc của tài liệu |
E:nth-child(n) |
một phần tử E, con thứ n của phần tử cha của nó |
E:nth-last-child(n) |
một phần tử E, con thứ n của phần tử cha của nó, tính từ phần tử cuối cùng |
E:nth-of-type(n) |
một phần tử E, anh chị em thứ n của loại nó |
E:nth-last-of-type(n) |
một phần tử E, anh chị em thứ n của loại nó, tính từ phần tử cuối cùng |
E:last-child |
một phần tử E, con cuối cùng của cha mẹ của nó |
E:first-of-type |
một phần tử E, anh chị em đầu tiên của loại nó |
E:last-of-type |
một phần tử E, anh chị em cuối cùng của loại nó |
E:only-child |
một phần tử E, con duy nhất của cha mẹ của nó |
E:only-of-type |
một phần tử E, chỉ anh em cùng loại của nó |
E:empty |
một phần tử E không có phần tử con (bao gồm cả các nút văn bản) |
E:target |
phần tử E là mục tiêu của URI giới thiệu |
E:enabled |
phần tử giao diện người dùng E được bật |
E:disabled |
phần tử giao diện người dùng E bị vô hiệu hóa |
E:checked |
một phần tử giao diện người dùng E được chọn |
E:not(s) |
một phần tử E không khớp với bộ chọn đơn giản s |
Bạn có thể chọn các yếu tố với một thuộc tính bắt đầu với một giá trị nhất định: a[href^="https:"], kết thúc với một giá trị nhất định: img[src$=".gif"]hoặc chứa một giá trị: a[*="value"].
Các lớp giả bổ sung bao gồm “: last-child”, “: blank” (để khớp với một phần tử không có nội dung) và “: đã kiểm tra” khớp với một phần tử như đầu vào hộp kiểm, nhưng chỉ khi nó được chọn.
Tương tự như Bộ kết hợp anh chị em liền kề từ Cấp độ 2, điều này khớp với bất kỳ anh chị em nào đến sau anh chị em khác, không chỉ người tiếp theo:
h1 ~ p { font-size: 110%; }
Bây giờ bạn đã biết tất cả mọi thứ cần biết về cách chọn một phần của trang web bằng CSS. Giờ đây, bạn đã sẵn sàng tạo kiểu cho các trang của mình với rất nhiều thuộc tính CSS bao gồm mọi thứ từ màu sắc đến bố cục.
Tín dụng hình ảnh: Pankaj Patel / Unsplash
Trong khi bạn có thể sử dụng máy tính đồ họa trên máy tính của mình, trình thông dịch ngôn ngữ lập trình Python có thể đóng vai trò như một máy tính bàn. Đó là một trò đùa chạy phổ biến trong cộng đồng Python mà nó đã được đề cập trong hướng dẫn chính thức. Đây là cách bạn có thể sử dụng Python làm máy tính.
Là một lập trình viên, bạn nên chấp nhận những thách thức để tồn tại và xây dựng một số kỳ quan trong lĩnh vực phát triển hoặc lập trình. Do đó, nếu bạn đang muốn học một ngôn ngữ lập trình nâng cao để nâng cao kỹ năng nghề nghiệp của mình, thì Java là một trong những triển vọng tốt nhất.
Học một ngôn ngữ lập trình mới như Python sẽ trở nên dễ dàng nếu bạn có một lộ trình toàn diện nêu chi tiết những khái niệm nào cần học khi mới bắt đầu và cách tiến bộ hơn nữa để đạt được cột mốc quan trọng tiếp theo. Ngay cả những lập trình viên trung cấp cũng nên thường xuyên học lại những kiến thức cơ bản của họ để xây dựng nền tảng vững chắc cho bản thân.
Ngày nay, việc xây dựng một trang web hoặc ứng dụng điều chỉnh giao diện người dùng của nó tùy thuộc vào trình duyệt hoặc thiết bị. Có hai cách tiếp cận để đạt được mục tiêu này. Đầu tiên liên quan đến việc tạo các phiên bản khác nhau của trang web hoặc ứng dụng của bạn cho các thiết bị khác nhau. Nhưng nó không hiệu quả và có thể dẫn đến các lỗi không thể đoán trước.
Làm việc với các con số là một phần không thể thiếu trong lập trình. Mọi ngôn ngữ lập trình đều cung cấp hỗ trợ để thao tác với các con số theo nhiều cách khác nhau. Trong bài viết này, bạn sẽ học cách tìm tổng số chữ số trong một số nguyên bằng cách sử dụng các phương pháp lặp lại, dựa trên nhật ký và dựa trên chuỗi.
Vùng chứa rất có lợi cho việc phát triển, triển khai và quản lý phần mềm trong môi trường ảo. Docker hữu ích trong quá trình container hóa, nhưng nó không phải là nền tảng duy nhất xung quanh. Nếu bạn đang tìm kiếm một số lựa chọn thay thế cho Docker, không cần tìm đâu xa. Danh sách này giới thiệu một số lựa chọn thay thế Docker hiệu quả và giàu tính năng để sử dụng trong dự án tiếp theo của bạn.
SQL so với NoSQL: Cơ sở dữ liệu tốt nhất cho dự án tiếp theo của bạn là gì?
Nhúng các dịch vụ của bên thứ ba vào các bài đăng WordPress của bạn là một cách thú vị để thu hút sự quan tâm của khách truy cập. Nội dung được nhúng cũng cung cấp các dấu hiệu trực quan giúp quét dễ dàng hơn. WordPress đã làm cho việc thêm loại nội dung này trở nên dễ dàng.
Node.js là một môi trường thời gian chạy JavaScript cho phép bạn chạy JavaScript bên ngoài trình duyệt web, làm cho nó trở thành một lựa chọn phổ biến để phát triển tất cả các loại ứng dụng. Một phần của sự phổ biến của nó là do có rất nhiều gói NPM để giúp nhà phát triển dễ dàng trải nghiệm.
Solidity là ngôn ngữ lập trình được sử dụng bởi các hợp đồng thông minh trên chuỗi khối Ethereum. Nó là một ngôn ngữ lập trình hướng đối tượng, được định kiểu tĩnh.
Huy hiệu GitHub có thể tăng cường khả năng đọc của kho lưu trữ bằng cách cung cấp cho người dùng một cách nhanh chóng để nắm bắt các chỉ số về kho lưu trữ. Các huy hiệu có thể được nhúng vào README.md của bạn để làm rõ tầm quan trọng và sự cần thiết của dự án của bạn đối với các nhà phát triển khác. Kết quả là, độc giả có được ý tưởng thực sự nhanh chóng về kho lưu trữ bằng cách kiểm tra các huy hiệu đính kèm.
Ngày lễ kỷ niệm quốc tế là một cách tốt đẹp để công nhận các vấn đề xã hội, ngày lịch sử và sự nghiệp tương ứng. Ngày Quốc tế Lập trình viên tôn vinh vai trò của các lập trình viên trong việc cải thiện cuộc sống hàng ngày. Thế giới văn minh mà chúng ta đang sống là sản phẩm của quá trình làm việc chăm chỉ của các lập trình viên.
Cho dù là truy vấn cơ sở dữ liệu hay kết quả của các phép toán, phương pháp định dạng chuỗi Python cung cấp một cách năng động và hấp dẫn hơn để trình bày kết quả cho người dùng.
Đầu năm nay, Microsoft đã phát hành phiên bản xem trước của Visual Studio 2022 vào thế giới lập trình hoang dã. Đây là một tin tốt! Đó là một IDE cực kỳ phổ biến, nhưng do phải điều chỉnh hoặc thậm chí có thể là một cuộc đại tu, với tốc độ thay đổi trong hệ sinh thái DevOps mà nó đang phát triển mạnh.
Số liệu phần mềm là các thước đo được sử dụng để định lượng các khía cạnh khác nhau của phần mềm của bạn. Những khía cạnh này có thể bao gồm từ chi phí, chất lượng và hiệu quả của nhóm phát triển.
Là người dùng Windows, có lẽ bạn đã ít nhất một lần bắt gặp từ .NET Framework. Khung phần mềm do Microsoft phát triển cho phép bạn xây dựng và chạy các chương trình C #, C ++, F # và Visual Basic. Phiên bản .NET mới nhất là 4.8, nhưng máy tính của bạn có thể cần phiên bản .NET cũ hơn (như .NET 3.5) để chạy một số ứng dụng.
Nếu bạn là một nhà phát triển Python, bạn có thể hưởng lợi rất nhiều từ mảng các khung công tác có sẵn. Trong khi một số khuôn khổ phù hợp nhất với các hệ sinh thái lớn, những khuôn khổ khác chuyên phục vụ các mục tiêu phát triển cụ thể. Đọc tiếp để tìm hiểu các tính năng cơ bản, cách sử dụng và sự khác biệt giữa hai khung Python: Flask và CherryPy.
Nhiều lập trình viên thích giải quyết các vấn đề toán học phức tạp bằng cách sử dụng mã. Nó giúp rèn luyện trí óc và cải thiện kỹ năng giải quyết vấn đề. Trong bài viết này, bạn sẽ học cách tìm các hình vuông và hình khối hoàn hảo có n chữ số nhỏ nhất và lớn nhất bằng Python, C ++ và JavaScript. Mỗi ví dụ cũng chứa đầu ra mẫu cho một số giá trị khác nhau.
Việc chạy Python từ thiết bị đầu cuối thường không thể tránh khỏi. Tuy nhiên, nếu bạn mới cài đặt Python trên Windows 10 lần đầu tiên, thì việc chạy Python qua Windows Terminal chỉ có thể thực hiện được nếu nó được thêm vào biến môi trường Windows PATH.
Câu lệnh if là động lực của lập trình logic. Do đó, việc nắm bắt tốt hơn về Pythons nếu là một bổ sung đáng kể cho kỹ năng lập trình Python của bạn.
Trong khi bạn có thể sử dụng máy tính đồ họa trên máy tính của mình, trình thông dịch ngôn ngữ lập trình Python có thể đóng vai trò như một máy tính bàn. Đó là một trò đùa chạy phổ biến trong cộng đồng Python mà nó đã được đề cập trong hướng dẫn chính thức. Đây là cách bạn có thể sử dụng Python làm máy tính.
Là một lập trình viên, bạn nên chấp nhận những thách thức để tồn tại và xây dựng một số kỳ quan trong lĩnh vực phát triển hoặc lập trình. Do đó, nếu bạn đang muốn học một ngôn ngữ lập trình nâng cao để nâng cao kỹ năng nghề nghiệp của mình, thì Java là một trong những triển vọng tốt nhất.
Học một ngôn ngữ lập trình mới như Python sẽ trở nên dễ dàng nếu bạn có một lộ trình toàn diện nêu chi tiết những khái niệm nào cần học khi mới bắt đầu và cách tiến bộ hơn nữa để đạt được cột mốc quan trọng tiếp theo. Ngay cả những lập trình viên trung cấp cũng nên thường xuyên học lại những kiến thức cơ bản của họ để xây dựng nền tảng vững chắc cho bản thân.
Ngày nay, việc xây dựng một trang web hoặc ứng dụng điều chỉnh giao diện người dùng của nó tùy thuộc vào trình duyệt hoặc thiết bị. Có hai cách tiếp cận để đạt được mục tiêu này. Đầu tiên liên quan đến việc tạo các phiên bản khác nhau của trang web hoặc ứng dụng của bạn cho các thiết bị khác nhau. Nhưng nó không hiệu quả và có thể dẫn đến các lỗi không thể đoán trước.
Làm việc với các con số là một phần không thể thiếu trong lập trình. Mọi ngôn ngữ lập trình đều cung cấp hỗ trợ để thao tác với các con số theo nhiều cách khác nhau. Trong bài viết này, bạn sẽ học cách tìm tổng số chữ số trong một số nguyên bằng cách sử dụng các phương pháp lặp lại, dựa trên nhật ký và dựa trên chuỗi.
Vùng chứa rất có lợi cho việc phát triển, triển khai và quản lý phần mềm trong môi trường ảo. Docker hữu ích trong quá trình container hóa, nhưng nó không phải là nền tảng duy nhất xung quanh. Nếu bạn đang tìm kiếm một số lựa chọn thay thế cho Docker, không cần tìm đâu xa. Danh sách này giới thiệu một số lựa chọn thay thế Docker hiệu quả và giàu tính năng để sử dụng trong dự án tiếp theo của bạn.
SQL so với NoSQL: Cơ sở dữ liệu tốt nhất cho dự án tiếp theo của bạn là gì?
Nhúng các dịch vụ của bên thứ ba vào các bài đăng WordPress của bạn là một cách thú vị để thu hút sự quan tâm của khách truy cập. Nội dung được nhúng cũng cung cấp các dấu hiệu trực quan giúp quét dễ dàng hơn. WordPress đã làm cho việc thêm loại nội dung này trở nên dễ dàng.
Node.js là một môi trường thời gian chạy JavaScript cho phép bạn chạy JavaScript bên ngoài trình duyệt web, làm cho nó trở thành một lựa chọn phổ biến để phát triển tất cả các loại ứng dụng. Một phần của sự phổ biến của nó là do có rất nhiều gói NPM để giúp nhà phát triển dễ dàng trải nghiệm.
Solidity là ngôn ngữ lập trình được sử dụng bởi các hợp đồng thông minh trên chuỗi khối Ethereum. Nó là một ngôn ngữ lập trình hướng đối tượng, được định kiểu tĩnh.
