Bộ chọn CSS liền kề, bộ chọn phổ quát và cách sử dụng chúng. Kỹ thuật DOM: Các phần tử cha, con và hàng xóm
Bộ chọn phần tử liền kề chọn một phần tử nằm ngay sau phần tử khác trong mã tài liệu phần tử đã cho. Hãy lấy một đoạn mã html làm ví dụ.
Đoạn văn và trong đó béo phần tử, và đây là nghiêng yếu tố.
Có ba thẻ:
, Và . Thẻ Và lồng trong một thùng chứa
Họ là con của anh ấy. Nhưng trong mối quan hệ với nhau họ là láng giềng.
Cú pháp của bộ chọn liền kề là: bộ chọn của phần tử trước, theo sau là dấu "+", theo sau là bộ chọn của phần tử đang được chọn. Hãy làm việc với bộ chọn liền kề:
Đoạn văn và trong đó béo phần tử, và đây là nghiêng yếu tố.
Đây béo Và nhấn mạnh các yếu tố, hơn thế nữa nghiêng.
Trong ví dụ, bạn có thể thấy bộ chọn phần tử liền kề đã được kích hoạt trong đoạn đầu tiên. Đây là các thẻ Và đi lần lượt. Và trong đoạn thứ hai, thẻ được sử dụng giữa chúng , bây giờ có hai cặp thẻ liền kề khác: + Và + .
Lỗi trong trường hợp này sẽ là thẻ liền kề với thẻ
Gắn thẻ vào đây là con của thẻ
Và đến lượt anh ấy lại là cha mẹ .
Ví dụ dưới đây sẽ không hoạt động:
Đoạn văn và trong đó béo phần tử, và đây là nghiêng yếu tố.
Đây béo Và nhấn mạnh các yếu tố, hơn thế nữa nghiêng.
Ví dụ thực tế hơn
Chúng ta hãy xem xét kỹ hơn cách hoạt động của bộ chọn lân cận. ví dụ thực tế. Trong các bài viết lớn có chứa một số phần được đánh dấu bằng thẻ
, nên tăng lề trên (thuộc tính lề trên). Thụt lề 30px sẽ làm cho văn bản có thể đọc được. Nhưng nếu thẻ đến ngay sau đó , và phần này có thể nằm ở đầu bài viết, phần thụt lề trên cùng phía trên thẻ sẽ dư thừa. Vấn đề này có thể được giải quyết bằng cách sử dụng bộ chọn phần tử liền kề.
, và phần này có thể nằm ở đầu bài viết, phần thụt lề trên cùng phía trên thẻ sẽ dư thừa. Vấn đề này có thể được giải quyết bằng cách sử dụng bộ chọn phần tử liền kề.
Đây là mã html kèm theo ví dụ về cách hoạt động của bộ chọn phần tử liền kề.
Xin chào!
tiêu đề h2
tiêu đề h2
Văn bản của đoạn văn nói về những cuộc phiêu lưu đáng kinh ngạc.
tiêu đề h2
Văn bản của đoạn văn nói về những cuộc phiêu lưu đáng kinh ngạc.
tiêu đề h2
Văn bản của đoạn văn nói về những cuộc phiêu lưu đáng kinh ngạc.
Ngoài ra, bằng cách sử dụng công cụ chọn liền kề, sẽ rất thuận tiện để điều chỉnh mức thụt lề giữa tiêu đề và đoạn đầu tiên của phần, trong ví dụ của chúng tôi đây là các thẻ
Và
Cũng cần lưu ý rằng để giảm thụt đầu dòng, nên sử dụng các giá trị âm.
Bộ chọn liền kề trong CSS
Xin chào!
tiêu đề h2
Văn bản của đoạn văn nói về những cuộc phiêu lưu đáng kinh ngạc.
tiêu đề h2
Văn bản của đoạn văn nói về những cuộc phiêu lưu đáng kinh ngạc.
tiêu đề h2
Văn bản của đoạn văn nói về những cuộc phiêu lưu đáng kinh ngạc.
tiêu đề h2
Văn bản của đoạn văn nói về những cuộc phiêu lưu đáng kinh ngạc.
Bây giờ là ví dụ về cách sử dụng bộ chọn liền kề để chọn tất cả các thành phần của danh sách ngoại trừ thành phần đầu tiên.
Bộ chọn liền kề trong CSS
- Danh sách mục số 1.
- Danh sách mục số 2.
- Danh sách mục số 3.
- Danh sách mục số 4.
Đây là những gì sẽ xảy ra do ví dụ này:
Hình 1. Bài làm ví dụ số 5.
Vlad Merzhevich
Các thành phần của một trang web được gọi là liền kề khi chúng liền kề nhau trong mã tài liệu. Hãy xem xét một vài ví dụ về mối quan hệ phần tử.
Lorem ipsum đau khổ ngồi đi.
Trong ví dụ này thẻ là con của thẻ
Bởi vì nó ở bên trong thùng chứa này. Tương ứng
Đóng vai trò là cha mẹ
.
Lorem ipsum đau khổ ngồi amet.
Đây là các thẻ Và không chồng chéo dưới bất kỳ hình thức nào và thể hiện phần tử lân cận. Thực tế là chúng nằm bên trong container Không ảnh hưởng gì đến thái độ của họ cả.
Lorem ipsum dolor ngồi amet, người kết nối béo phì ưu tú.
Các thẻ lân cận ở đây là Và , Và Và . trong đó Và các phần tử liền kề không được xử lý vì có một vùng chứa giữa chúng
.
Để kiểm soát kiểu của các phần tử liền kề, hãy sử dụng ký hiệu dấu cộng (+) giữa hai bộ chọn. Cú pháp chung như sau.
Selector 1 + Selector 2 (Mô tả quy tắc kiểu)
Các khoảng trắng xung quanh dấu cộng là tùy chọn; kiểu trong ký hiệu này được áp dụng cho Bộ chọn 2, nhưng chỉ khi nó liền kề với Bộ chọn 1 và ngay sau nó.
Ví dụ 11.1 cho thấy cấu trúc các thẻ tương tác với nhau như thế nào.
Ví dụ 11.1. Sử dụng bộ chọn liền kề
HTML5 CSS 2.1 IE Cr Op Sa Fx
Bộ chọn liền kề
Lorem ipsum dolor ngồi amet, người kết nối giới thượng lưu béo bở.
Lorem ipsum dolor ngồi amet, người kết nối giới thượng lưu béo bở.
Kết quả của ví dụ được hiển thị trong Hình. 11.1.
Cơm. 11.1. Đánh dấu văn bản bằng màu bằng cách sử dụng bộ chọn liền kề
TRONG trong ví dụ này màu văn bản cho nội dung của vùng chứa thay đổi khi nó nằm ngay sau container . Trong đoạn đầu tiên, tình huống này được thực hiện nên từ “consectetuer” được hiển thị màu đỏ trong trình duyệt. Trong đoạn thứ hai, mặc dù có một thẻ , nhưng không có thẻ ở vùng lân cận không, vì vậy không có kiểu nào được áp dụng cho vùng chứa này.
Hãy xem xét một ví dụ thực tế hơn. Việc bao gồm nhiều chú thích và ghi chú khác nhau trong văn bản của một bài viết thường trở nên cần thiết. Thông thường, một lớp kiểu mới được tạo cho mục đích này và áp dụng cho đoạn văn, bằng cách này, bạn có thể dễ dàng thay đổi hình thức của văn bản. Nhưng chúng ta sẽ đi theo hướng khác và sử dụng các bộ chọn liền kề. Để làm nổi bật các nhận xét, chúng ta sẽ tạo lớp mới, hãy gọi nó là sic và áp dụng nó vào thẻ
. Đoạn đầu tiên sau tiêu đề như vậy được đánh dấu bằng màu nền và thụt lề (ví dụ 11.2). Diện mạo của các đoạn văn còn lại sẽ không thay đổi.
Ví dụ 11.2. Thay đổi kiểu đoạn văn
HTML5 CSS 2.1 IE Cr Op Sa Fx
Thay đổi kiểu đoạn văn
Phương pháp bắt sư tử trên sa mạc
Phương pháp tìm kiếm tuần tự
Hãy để sư tử có kích thước L x W x H, trong đó L là chiều dài của sư tử từ chóp mũi đến tua đuôi, W là chiều rộng của sư tử và H là chiều cao của nó. Sau đó, chúng tôi chia sa mạc thành một số hình chữ nhật cơ bản, kích thước của chúng trùng với chiều rộng và chiều dài của con sư tử. Xét rằng sư tử có thể không ở trong một khu vực nhất định, nhưng đồng thời ở hai trong số đó, lồng bắt phải có diện tích lớn hơn, cụ thể là 2L x 2W. Nhờ đó, chúng ta sẽ tránh được sai lầm chỉ có một nửa con sư tử bị nhốt vào chuồng, hay tệ hơn là chỉ có đuôi của nó.
Lưu ý quan trọng
Để đơn giản hóa việc tính toán, phần đuôi có thể bị loại bỏ và không được coi là sai số đo lường.
Kết quả của ví dụ này được hiển thị trong Hình. 11.2.
Cơm. 11.2. Thay đổi hình thức của một đoạn văn bằng cách sử dụng các bộ chọn liền kề
Trong ví dụ này, văn bản được định dạng bằng các đoạn văn (thẻ
), nhưng viết H2.sic + P chỉ đặt kiểu cho đoạn đầu tiên sau thẻ
, có một lớp có tên sic được thêm vào.
Các bộ chọn liền kề rất thuận tiện để sử dụng cho những thẻ mà thụt lề được tự động thêm vào để điều chỉnh mức độ thụt lề một cách độc lập. Ví dụ: nếu các thẻ xếp thành một hàng
Và , thì khoảng cách giữa chúng có thể được điều chỉnh dễ dàng bằng cách sử dụng các bộ chọn liền kề. Tình huống tương tự đối với các thẻ liên tiếp. Và
Và cả những trường hợp tương tự khác. Ví dụ 11.3 thay đổi khoảng cách giữa các thẻ được chỉ định theo cách này.
Ví dụ 11.3. Khoảng cách giữa tiêu đề và văn bản
HTML5 CSS 2.1 IE Cr Op Sa Fx
Bộ chọn liền kề
Tiêu đề 1
Tiêu đề 2
Đoạn văn!
Vì khi sử dụng các bộ chọn liền kề, kiểu này chỉ được áp dụng cho phần tử thứ hai nên kích thước của lề sẽ giảm bằng cách thêm giá trị âm cho thuộc tính lề trên. Trong trường hợp này, văn bản sẽ nổi lên, gần với phần tử trước đó hơn.
Câu hỏi để kiểm tra
1. Những thẻ nào trong mã này liền kề nhau?
Công thức axit sunfuric:H 2 VÌ THẾ 4
VÀ
- Và
- Và
- Và
- Và
2. Có sẵn mã HTML sau:
Định lý cuối cùng của Fermat
X N+Y N
= Z N
trong đó n là số nguyên > 2
Văn bản nào sẽ được tô sáng màu đỏ bằng kiểu SUP + SUP ( color: red; )?
- Chữ "n" thứ hai
- Chữ "n" thứ hai và thứ ba.
Ngày 12 tháng 7 năm 2011 lúc 01:14 chiều Ngữ nghĩa cho bộ chọn và bộ kết hợp CSS
- CSS
- Dịch
Cú pháp CSS rất đơn giản và bạn không cần phải có bằng Tiến sĩ về CNTT để hiểu nó. Tuy nhiên, nó là một trong số ít ngôn ngữ phổ biến không logic theo đúng nghĩa của từ này. Không giống như các ngôn ngữ lập trình web khác như JavaScript và PHP, Vấn đề về CSS không thể giải quyết được với sự giúp đỡ logic thông thường. Các thuật toán như "nếu X thì thực hiện Y, nếu không thì thực hiện Z" hoặc "chọn tất cả Y, sau đó thực hiện X với chúng" không thể được triển khai bằng ngôn ngữ như CSS. Nói một cách đơn giản, đó là ngôn ngữ được tạo ra để thiết kế, ngôn ngữ dành cho nhà thiết kế chứ không phải nhà phát triển. Một số lập trình viên giàu kinh nghiệm mà tôi từng làm việc cùng đã dành rất nhiều nỗ lực để học cách thành thạo CSS vì lý do này.
Học CSS bắt đầu bằng các lớp và ID cũng như cách sử dụng. và # để chỉ định trực tiếp các phần tử. Điều này là đủ để xây dựng một trang web đầy đủ chức năng, nhưng nó không phải là một giải pháp đủ linh hoạt trong trường hợp thay đổi thiết kế hoàn toàn. Chúng ta hãy xem xét một cách tiếp cận khác để quản lý những mặt hàng khó tiếp cận này.
Tổ hợp liên quan lân cận
Hãy bắt đầu với bộ chọn, thuận tiện trong tình huống khó khăn, - từ một tổ hợp liên quan lân cận. Một tổ hợp liên quan liền kề được biểu thị bằng cách kết nối hai phần tử bằng dấu +: H1+p
Thao tác này sẽ chọn phần tử p tiếp theo nằm ngay sau phần tử h1 trong DOM. Lý thuyết typographic gợi ý rằng chúng ta nên sử dụng thụt lề trong các đoạn văn bản, nhưng chỉ khi chúng theo sau một đoạn văn khác. Trong thực tế, điều này có thể được sử dụng để thụt lề tất cả các đoạn ngoại trừ đoạn đầu tiên:
p + p ( thụt lề văn bản: 1em; )
Điều này thuận tiện hơn nhiều so với việc đánh dấu đoạn đầu tiên bằng cách sử dụng class="first". Ba dòng, không có lớp học và hỗ trợ đầy đủ trình duyệt. Nếu bạn đặt các thẻ img liên quan đến nội dung của trang web bên trong thẻ p (trên thực tế, bạn nên làm như vậy), bạn có thể chỉ cần di chuyển lề trái của chúng trở lại bằng cách sử dụng giá trị âm -1em:
p + p img ( lề trái: -1em; )
Khá đơn giản phải không? Điều gì sẽ xảy ra nếu chúng ta muốn chọn dòng đầu tiên của tất cả các đoạn văn ngay sau tiêu đề mà không thay đổi tất cả các đoạn văn khác? Một lần nữa chúng ta có thể sử dụng lớp xem. Một bộ chọn đơn giản được tạo từ bộ kết hợp ghép liền kề và phần tử giả sẽ thực hiện công việc:
h1 + p::first-line ( font-variant: Small-caps; )
Lưu ý: Phần tử giả:dòng đầu tiên đã được sử dụng trong CSS 2.1, nhưng CSS 3 sử dụng ký hiệu:: để phân biệt giữa các lớp giả và phần tử giả.
Tổ hợp di truyền
Giao thức đánh dấu phổ biến là đặt các phần trong một số thành phần được đặt tên trong #page hoặc #wrap:
Xin chào các độc giả thân mến! Tiếp tục đi chủ đề CSS bộ chọn và hôm nay tôi sẽ cố gắng giải thích rõ ràng những gì bộ chọn CSS liền kề, và nó có vai trò gì? bộ chọn đa năng. Kiến thức về cơ chế sử dụng các loại Công cụ CSS sẽ cho phép bạn đạt được nội dung tài liệu tối ưu và nhỏ gọn, mô tả kiểu của các phần tử, là một trong những thành phần giúp quảng bá thành công tài nguyên của bạn, vì vậy trong mọi trường hợp, đừng bỏ qua cơ hội có được thông tin hữu ích về khái niệm bộ chọn và các loại khác nhau của nó.
Nếu bạn nhớ và theo dõi kỹ các ấn phẩm thì đã có nhiều loại bộ chọn được xem xét rồi; ; . Một lần nữa tôi khuyên bạn đừng bỏ bê việc học Khái niệm cơ bản về CSS, vì điều này sẽ mang lại cho bạn rất nhiều lợi ích trong tương lai.
Bộ chọn phổ quát
Bây giờ chúng ta hãy chuyển thẳng đến bản chất của ấn phẩm ngày nay. Đối với bộ chọn phổ quát, nó khá đơn giản nên tôi sẽ không nói nhiều về nó. Cú pháp viết quy tắc CSS sử dụng bộ chọn phổ quát như sau:
Ở đây toán tử “*” có nghĩa là chúng ta có một bộ chọn phổ quát. Nó được sử dụng khi cần cài đặt phong cách thống nhất cho tất cả các thành phần trên một trang web. Đôi khi một bộ chọn phổ quát là không cần thiết. Ví dụ: mục nhập .*class và .class hoàn toàn giống nhau trong những trường hợp này. Bây giờ chắc chắn là một ví dụ. Thông thường định nghĩa phổ biến nhất là phông chữ đơn, kích thước và màu sắc cũng như vị trí của văn bản thông thường trên trang blog hoặc trang web.
* ( họ phông chữ: Tahoma, Arial, Helvetica, sans-serif; /* Phông chữ văn bản */ color: #646464; /* Màu văn bản */ cỡ chữ: 75%; /* Kích thước văn bản */ text-align : trái; /* Vị trí văn bản */ )
Bằng cách này, bạn có thể xác định thiết kế văn bản cho tất cả các thành phần nằm trên trang. Tôi lưu ý cho trường hợp này kết quả sẽ tương tự nếu bạn sử dụng tên thay vì bộ chọn chung thẻ cơ thể, bao gồm các thẻ của tất cả các phần tử.
Bộ chọn CSS liền kề
Chà, bây giờ chúng ta hãy dành thêm một chút thời gian cho các bộ chọn lân cận. Các thành phần trên một trang web được xác định là liền kề khi chúng xuất hiện trực tiếp cạnh nhau trong mã tài liệu. Trong trường hợp này cú pháp Kiểu CSS trông như thế này:
Bây giờ, lấy một đoạn văn bản được xác định bởi thẻ p, sẽ bao gồm các thẻ b, i và big làm phần tử con, xác định định dạng của văn bản, phông chữ đậm, in nghiêng và phóng to tương ứng:
Đoạn này sử dụng gắn thẻ b, gắn thẻ tôi, thẻ lớn.
Và với sự trợ giúp của công cụ chỉnh sửa CSS và HTML được tích hợp sẵn trong phiên bản mới nhất mọi người trình duyệt phổ biến( , ) và là một dạng tương tự của plugin nổi tiếng dành cho Trình duyệt Firefox(), hãy chèn đoạn này vào bất kỳ đâu trên bất kỳ trang web nào (tôi đã làm điều này ngay trên trang của bài viết trước là đoạn đầu tiên). Ví dụ: công cụ này trong Chrome được gọi bằng cách chỉ cần nhấn phím F12. Nó có thể được sử dụng để củng cố tài liệu trong các tiêu đề một cách thực tế " Khái niệm cơ bản về HTML" và "Hướng dẫn CSS". Vì vậy, tôi chèn một đoạn văn bản làm đoạn đầu tiên:
Đoạn này sẽ mang tính thử nghiệm và sử dụng ví dụ của nó, chúng tôi sẽ xem xét ứng dụng bộ chọn liền kề. Như tôi đã nói, các thẻ b, i và big là con của thẻ đoạn p vì chúng đều nằm ngay bên trong vùng chứa p. Ở đây các thẻ liền kề là b và i, cũng như i và big. Bây giờ hãy áp dụng quy tắc CSS cho các bộ chọn liền kề:
B+i (màu: đỏ;) i+lớn (màu: xanh lá cây;)
Sau khi áp dụng các kiểu này, đoạn văn sẽ trông như thế này:
Điều này đúng với tất cả các thẻ trang web có chứa các phần tử b, i và big. Hơn nữa, b và i, i và big phải ở gần nhau; đối với các kết hợp khác, quy tắc CSS này sẽ không hoạt động. Tôi nghĩ bây giờ bạn đã rõ cách sử dụng các bộ chọn liền kề khi viết hoặc chỉnh sửa CSS tài liệu. Một lưu ý rất quan trọng khác: nếu bạn nhận thấy, trong trường hợp các phần tử liền kề, kiểu đã chỉ định chỉ được áp dụng cho phần tử thứ hai.
Ví dụ với đoạn văn đã được thảo luận rất rõ ràng và cho phép bạn nhanh chóng hiểu được bản chất của các bộ chọn liền kề trong CSS. Tuy nhiên, trong thực tế, các lĩnh vực ứng dụng khác của bộ chọn liền kề thường được sử dụng. Ví dụ, rất thường xuyên cần đưa một số đoạn văn bản vào nội dung của một bài viết, đặc biệt là có định dạng, chẳng hạn như chú thích cuối trang, ghi chú, v.v.
Với những mục đích này, họ thường tạo một lớp riêng biệt và áp dụng nó cho đúng đoạn văn. Nhưng một cách tối ưu hơn nhiều là sử dụng các bộ chọn liền kề. Ví dụ: trên blog của tôi có các kiểu được tạo để tạo kiểu cho tiêu đề h3 thông thường.
H3 ( cỡ chữ: 1.7em; /* Cỡ chữ */ text-align: center; /* Vị trí văn bản */ font-weight: normal; /* Độ dày văn bản bình thường */ họ phông chữ: Tahoma, Arial, Helvetica, sans-serif; /* Kiểu phông chữ */ màu: #646464; /* Màu văn bản */ )
Để làm nổi bật tiêu đề của một ghi chú hoặc chú thích cuối trang, hãy xác định một lớp đặc biệt, chẳng hạn như đặt:
H3.put ( color: red; /* Màu văn bản */ lề trái: 5px; /* Phần đệm bên trái */ lề trên: 0,5em; /* Phần đệm trên cùng */ phần đệm: 10px; /* Lề xung quanh văn bản */ căn chỉnh văn bản: trái; /* Vị trí văn bản */ )
Bây giờ chúng ta hãy sử dụng các bộ chọn liền kề để tạo kiểu đoạn chú thích cuối trang đặc biệt, đoạn này sẽ được đặt ngay bên dưới tiêu đề với kiểu "h3.put":
H3.put+p ( nền: #ffefd5; /* Màu nền */ lề trái: 15px; /* Đệm trái */ lề phải: 120px; /* Đệm phải */ lề trên: 0,5em; /* Phần đệm trên cùng */ phần đệm: 5px; /* Lề xung quanh văn bản */ )
Sử dụng lại công cụ chỉnh sửa Google Chrome, cái mà tôi đã ù tai các bạn (nhưng nó đáng giá), hãy nhập tiêu đề cho chú thích cuối trang, không quên đặt lớp put cho nó:
Chú ý!
Sau đó, chúng tôi viết nội dung của chú thích cuối trang:
Các tài liệu được trình bày trong ấn phẩm này rất quan trọng trong việc học những điều cơ bản về CSS ( bảng xếp tầng phong cách)
.
Sau tất cả các chuyển động này, chúng ta nhận được đoạn chú thích cuối trang sau trên trang web (tôi xin nhắc bạn rằng tôi đã chèn đoạn này vào cuối bài viết trước của tôi về bộ chọn con và ngữ cảnh):
Bây giờ trên blog hoặc trang web, khi bạn liên kết lớp “put” với bất kỳ thẻ h3 nào, chú thích cuối trang đó sẽ xuất hiện trên trang web. Hơn nữa, chỉ đoạn đầu tiên sau thẻ h3 có “class=“put”” mới được định dạng theo cách đặc biệt. Nhưng đó chính xác là những gì chúng ta muốn, phải không?
Với điều này, hãy để tôi hoàn thành hướng dẫn hôm nay, trong đó đưa ra thuật toán sử dụng các bộ chọn liền kề và phổ quát. Tôi hy vọng rằng bài viết này sẽ khuyến khích bạn, những độc giả thân yêu, đăng ký theo dõi
Thể loại
Không ảnh hưởng gì đến thái độ của họ cả.
Lorem ipsum dolor ngồi amet, người kết nối béo phì ưu tú.
, thì khoảng cách giữa chúng có thể được điều chỉnh dễ dàng bằng cách sử dụng các bộ chọn liền kề. Tình huống tương tự đối với các thẻ liên tiếp. Và
VÀ
= Z N
Thao tác này sẽ chọn phần tử p tiếp theo nằm ngay sau phần tử h1 trong DOM. Lý thuyết typographic gợi ý rằng chúng ta nên sử dụng thụt lề trong các đoạn văn bản, nhưng chỉ khi chúng theo sau một đoạn văn khác. Trong thực tế, điều này có thể được sử dụng để thụt lề tất cả các đoạn ngoại trừ đoạn đầu tiên:
p + p ( thụt lề văn bản: 1em; )
Điều này thuận tiện hơn nhiều so với việc đánh dấu đoạn đầu tiên bằng cách sử dụng class="first". Ba dòng, không có lớp học và hỗ trợ đầy đủ trình duyệt. Nếu bạn đặt các thẻ img liên quan đến nội dung của trang web bên trong thẻ p (trên thực tế, bạn nên làm như vậy), bạn có thể chỉ cần di chuyển lề trái của chúng trở lại bằng cách sử dụng giá trị âm -1em:
p + p img ( lề trái: -1em; )
Khá đơn giản phải không? Điều gì sẽ xảy ra nếu chúng ta muốn chọn dòng đầu tiên của tất cả các đoạn văn ngay sau tiêu đề mà không thay đổi tất cả các đoạn văn khác? Một lần nữa chúng ta có thể sử dụng lớp xem. Một bộ chọn đơn giản được tạo từ bộ kết hợp ghép liền kề và phần tử giả sẽ thực hiện công việc:
h1 + p::first-line ( font-variant: Small-caps; )
Lưu ý: Phần tử giả:dòng đầu tiên đã được sử dụng trong CSS 2.1, nhưng CSS 3 sử dụng ký hiệu:: để phân biệt giữa các lớp giả và phần tử giả.
Xin chào các độc giả thân mến! Tiếp tục đi chủ đề CSS bộ chọn và hôm nay tôi sẽ cố gắng giải thích rõ ràng những gì bộ chọn CSS liền kề, và nó có vai trò gì? bộ chọn đa năng. Kiến thức về cơ chế sử dụng các loại Công cụ CSS sẽ cho phép bạn đạt được nội dung tài liệu tối ưu và nhỏ gọn, mô tả kiểu của các phần tử, là một trong những thành phần giúp quảng bá thành công tài nguyên của bạn, vì vậy trong mọi trường hợp, đừng bỏ qua cơ hội có được thông tin hữu ích về khái niệm bộ chọn và các loại khác nhau của nó.
Nếu bạn nhớ và theo dõi kỹ các ấn phẩm thì đã có nhiều loại bộ chọn được xem xét rồi; ; . Một lần nữa tôi khuyên bạn đừng bỏ bê việc học Khái niệm cơ bản về CSS, vì điều này sẽ mang lại cho bạn rất nhiều lợi ích trong tương lai.
Bộ chọn phổ quát
Bây giờ chúng ta hãy chuyển thẳng đến bản chất của ấn phẩm ngày nay. Đối với bộ chọn phổ quát, nó khá đơn giản nên tôi sẽ không nói nhiều về nó. Cú pháp viết quy tắc CSS sử dụng bộ chọn phổ quát như sau:
Ở đây toán tử “*” có nghĩa là chúng ta có một bộ chọn phổ quát. Nó được sử dụng khi cần cài đặt phong cách thống nhất cho tất cả các thành phần trên một trang web. Đôi khi một bộ chọn phổ quát là không cần thiết. Ví dụ: mục nhập .*class và .class hoàn toàn giống nhau trong những trường hợp này. Bây giờ chắc chắn là một ví dụ. Thông thường định nghĩa phổ biến nhất là phông chữ đơn, kích thước và màu sắc cũng như vị trí của văn bản thông thường trên trang blog hoặc trang web.
* ( họ phông chữ: Tahoma, Arial, Helvetica, sans-serif; /* Phông chữ văn bản */ color: #646464; /* Màu văn bản */ cỡ chữ: 75%; /* Kích thước văn bản */ text-align : trái; /* Vị trí văn bản */ )
Bằng cách này, bạn có thể xác định thiết kế văn bản cho tất cả các thành phần nằm trên trang. Tôi lưu ý cho trường hợp này kết quả sẽ tương tự nếu bạn sử dụng tên thay vì bộ chọn chung thẻ cơ thể, bao gồm các thẻ của tất cả các phần tử.
Bộ chọn CSS liền kề
Chà, bây giờ chúng ta hãy dành thêm một chút thời gian cho các bộ chọn lân cận. Các thành phần trên một trang web được xác định là liền kề khi chúng xuất hiện trực tiếp cạnh nhau trong mã tài liệu. Trong trường hợp này cú pháp Kiểu CSS trông như thế này:
Bây giờ, lấy một đoạn văn bản được xác định bởi thẻ p, sẽ bao gồm các thẻ b, i và big làm phần tử con, xác định định dạng của văn bản, phông chữ đậm, in nghiêng và phóng to tương ứng:
Đoạn này sử dụng gắn thẻ b, gắn thẻ tôi, thẻ lớn.
Và với sự trợ giúp của công cụ chỉnh sửa CSS và HTML được tích hợp sẵn trong phiên bản mới nhất mọi người trình duyệt phổ biến( , ) và là một dạng tương tự của plugin nổi tiếng dành cho Trình duyệt Firefox(), hãy chèn đoạn này vào bất kỳ đâu trên bất kỳ trang web nào (tôi đã làm điều này ngay trên trang của bài viết trước là đoạn đầu tiên). Ví dụ: công cụ này trong Chrome được gọi bằng cách chỉ cần nhấn phím F12. Nó có thể được sử dụng để củng cố tài liệu trong các tiêu đề một cách thực tế " Khái niệm cơ bản về HTML" và "Hướng dẫn CSS". Vì vậy, tôi chèn một đoạn văn bản làm đoạn đầu tiên:
Đoạn này sẽ mang tính thử nghiệm và sử dụng ví dụ của nó, chúng tôi sẽ xem xét ứng dụng bộ chọn liền kề. Như tôi đã nói, các thẻ b, i và big là con của thẻ đoạn p vì chúng đều nằm ngay bên trong vùng chứa p. Ở đây các thẻ liền kề là b và i, cũng như i và big. Bây giờ hãy áp dụng quy tắc CSS cho các bộ chọn liền kề:
B+i (màu: đỏ;) i+lớn (màu: xanh lá cây;)
Sau khi áp dụng các kiểu này, đoạn văn sẽ trông như thế này:
Điều này đúng với tất cả các thẻ trang web có chứa các phần tử b, i và big. Hơn nữa, b và i, i và big phải ở gần nhau; đối với các kết hợp khác, quy tắc CSS này sẽ không hoạt động. Tôi nghĩ bây giờ bạn đã rõ cách sử dụng các bộ chọn liền kề khi viết hoặc chỉnh sửa CSS tài liệu. Một lưu ý rất quan trọng khác: nếu bạn nhận thấy, trong trường hợp các phần tử liền kề, kiểu đã chỉ định chỉ được áp dụng cho phần tử thứ hai.
Ví dụ với đoạn văn đã được thảo luận rất rõ ràng và cho phép bạn nhanh chóng hiểu được bản chất của các bộ chọn liền kề trong CSS. Tuy nhiên, trong thực tế, các lĩnh vực ứng dụng khác của bộ chọn liền kề thường được sử dụng. Ví dụ, rất thường xuyên cần đưa một số đoạn văn bản vào nội dung của một bài viết, đặc biệt là có định dạng, chẳng hạn như chú thích cuối trang, ghi chú, v.v.
Với những mục đích này, họ thường tạo một lớp riêng biệt và áp dụng nó cho đúng đoạn văn. Nhưng một cách tối ưu hơn nhiều là sử dụng các bộ chọn liền kề. Ví dụ: trên blog của tôi có các kiểu được tạo để tạo kiểu cho tiêu đề h3 thông thường.
H3 ( cỡ chữ: 1.7em; /* Cỡ chữ */ text-align: center; /* Vị trí văn bản */ font-weight: normal; /* Độ dày văn bản bình thường */ họ phông chữ: Tahoma, Arial, Helvetica, sans-serif; /* Kiểu phông chữ */ màu: #646464; /* Màu văn bản */ )
Để làm nổi bật tiêu đề của một ghi chú hoặc chú thích cuối trang, hãy xác định một lớp đặc biệt, chẳng hạn như đặt:
H3.put ( color: red; /* Màu văn bản */ lề trái: 5px; /* Phần đệm bên trái */ lề trên: 0,5em; /* Phần đệm trên cùng */ phần đệm: 10px; /* Lề xung quanh văn bản */ căn chỉnh văn bản: trái; /* Vị trí văn bản */ )
Bây giờ chúng ta hãy sử dụng các bộ chọn liền kề để tạo kiểu đoạn chú thích cuối trang đặc biệt, đoạn này sẽ được đặt ngay bên dưới tiêu đề với kiểu "h3.put":
H3.put+p ( nền: #ffefd5; /* Màu nền */ lề trái: 15px; /* Đệm trái */ lề phải: 120px; /* Đệm phải */ lề trên: 0,5em; /* Phần đệm trên cùng */ phần đệm: 5px; /* Lề xung quanh văn bản */ )
Sử dụng lại công cụ chỉnh sửa Google Chrome, cái mà tôi đã ù tai các bạn (nhưng nó đáng giá), hãy nhập tiêu đề cho chú thích cuối trang, không quên đặt lớp put cho nó:
Chú ý!
Sau đó, chúng tôi viết nội dung của chú thích cuối trang:
Các tài liệu được trình bày trong ấn phẩm này rất quan trọng trong việc học những điều cơ bản về CSS ( bảng xếp tầng phong cách)
.Sau tất cả các chuyển động này, chúng ta nhận được đoạn chú thích cuối trang sau trên trang web (tôi xin nhắc bạn rằng tôi đã chèn đoạn này vào cuối bài viết trước của tôi về bộ chọn con và ngữ cảnh):
Bây giờ trên blog hoặc trang web, khi bạn liên kết lớp “put” với bất kỳ thẻ h3 nào, chú thích cuối trang đó sẽ xuất hiện trên trang web. Hơn nữa, chỉ đoạn đầu tiên sau thẻ h3 có “class=“put”” mới được định dạng theo cách đặc biệt. Nhưng đó chính xác là những gì chúng ta muốn, phải không?
Với điều này, hãy để tôi hoàn thành hướng dẫn hôm nay, trong đó đưa ra thuật toán sử dụng các bộ chọn liền kề và phổ quát. Tôi hy vọng rằng bài viết này sẽ khuyến khích bạn, những độc giả thân yêu, đăng ký theo dõi
