Bộ chọn css tùy chỉnh. Bộ chọn trong CSS. Sự khác biệt giữa lớp và id là gì
CSS chứa các quy tắc kiểu được trình duyệt diễn giải và sau đó áp dụng cho các thành phần thích hợp trong tài liệu của bạn. Một quy tắc kiểu bao gồm ba phần:
- Bộ chọn là thẻ HTML mà kiểu sẽ được áp dụng. Đây có thể là bất kỳ thẻ nào, ví dụ:
hoặc
vân vân.
- Tài sản là một loại thuộc tính của thẻ HTML. Nói một cách đơn giản, tất cả các thuộc tính trong HTML đều được chuyển đổi thành thuộc tính CSS. Đây có thể là màu sắc, đường viền, phần đệm, v.v.
- Nghĩa- được đặt thành thuộc tính. Ví dụ: thuộc tính màu có thể là màu xanh lá cây, #008000, v.v.
Cú pháp của bộ chọn trong CSS như sau:
Bộ chọn (thuộc tính: giá trị)
Ví dụ. Bạn có thể đặt đường viền bảng như thế này:
Bảng ( border: 2px Solid #FF8C00; )
Cú pháp của bộ chọn ở đây là: bảng là bộ chọn và đường viền là thuộc tính và 2px Solid #FF8C00 là giá trị của thuộc tính đó.
Bạn có thể chỉ định bộ chọn những cách khác, vì nó sẽ thuận tiện cho bạn. Dưới đây là các loại bộ chọn.>
Bộ chọn tiêu chuẩn
Đây chính là bộ chọn mà bạn đã thấy ở trên. Một lần nữa, một ví dụ khác để tô màu cho tất cả các tiêu đề cấp một:
H1 ( màu: #8B4513; )
Bộ chọn phổ quát
Thay vì chọn các phần tử của một loại cụ thể, bộ chọn phổ quát khá đơn giản khớp với tên của bất kỳ loại phần tử nào:
* ( màu: #808080; )
Quy tắc này hiển thị nội dung của từng thành phần trong tài liệu của chúng tôi bằng màu xám.
Bộ chọn con cháu hoặc bộ chọn lồng nhau
Giả sử bạn chỉ muốn áp dụng quy tắc kiểu cho một phần tử nhất định khi nó nằm bên trong một phần tử nhất định thì các bộ chọn lồng nhau hoặc bộ chọn con cháu sẽ giúp bạn thực hiện điều này. Như trong ví dụ sau, quy tắc kiểu sẽ được áp dụng cho phần tử chỉ khi nó ở trong một thẻ
- .
Ul em ( color: #CD5C5C; )
Bộ chọn lớp
Bạn có thể đặt quy tắc kiểu cho các thành phần dựa trên thuộc tính lớp. Tất cả các phần tử có lớp này sẽ được định dạng theo một quy tắc nhất định.
Màu xanh (màu: #0000FF; )
lớp="màu xanh". Bạn có thể làm cho bộ chọn lớp cụ thể hơn một chút. Ví dụ:
H1.blue ( màu: #0000FF; )
với thuộc tính lớp="màu xanh".
Bạn có thể áp dụng nhiều bộ chọn lớp cho một phần tử. Hãy xem xét ví dụ sau:
Đoạn này sẽ được định dạng với các lớp trung tâm Và in đậm.
bộ chọn ID
Bạn có thể đặt quy tắc kiểu cho các thành phần dựa trên thuộc tính id. Tất cả các phần tử có ID này sẽ được định dạng theo một quy tắc nhất định.
#xanh (màu: #0000FF; )
Quy tắc này hiển thị nội dung trong tài liệu của chúng tôi bằng màu xanh lam cho mỗi thành phần có thuộc tính id="màu xanh". Bạn có thể làm cho bộ chọn id cụ thể hơn một chút. Ví dụ:
H1#xanh ( màu: #0000FF; )
Quy tắc này chỉ hiển thị nội dung màu xanh lam cho các phần tử
với thuộc tính id="màu xanh".
Sức mạnh thực sự của bộ chọn id là khi chúng được sử dụng làm cơ sở cho bộ chọn con cháu, ví dụ:
#blue h2 ( màu: #0000FF; )
Trong ví dụ này, tất cả các tiêu đề cấp hai sẽ xuất hiện màu xanh lam khi chúng ở trong các thẻ có thuộc tính id="màu xanh".
Bộ chọn con
Bạn đã biết bộ chọn con cháu. Có một loại bộ chọn khác rất giống với bộ chọn con nhưng có chức năng khác, đó là bộ chọn con. Hãy xem xét ví dụ sau:
Thân > p ( màu: #0000FF; )
Quy tắc này sẽ hiển thị tất cả các đoạn văn có màu xanh lam nếu chúng là phần tử con trực tiếp của phần tử
. Các đoạn văn khác được đặt bên trong các phần tử kiểu kháchoặcBộ chọn liền kề
Các phần tử HTML nối tiếp nhau được gọi là các phần tử liền kề. Hãy xem xét ví dụ sau:
Mạnh + em ( color: #0000FF; )
Quy tắc này sẽ hiển thị nội dung của thẻ màu xanh lam nếu nó đứng sau phần tử . Các thẻ khác , không theo sau thẻ , sẽ không có hiệu lực của quy tắc này.
Bộ chọn thuộc tính
Bạn cũng có thể áp dụng kiểu cho các thành phần HTML với các thuộc tính nhất định. Quy tắc kiểu bên dưới sẽ khớp tất cả các phần tử đầu vào có thuộc tính loại với văn bản giá trị:
Đầu vào ( màu: #0000FF; )
Ưu điểm của việc sử dụng bộ chọn thuộc tính là phần tử không thay đổi và màu chỉ được áp dụng cho các trường văn bản mong muốn.
Các quy tắc sau áp dụng cho bộ chọn thuộc tính:
- p - chọn tất cả các thành phần đoạn có thuộc tính lang.
- p - chọn tất cả các thành phần đoạn trong đó thuộc tính lang có giá trị chính xác là "ru".
- p - chọn tất cả các thành phần đoạn trong đó thuộc tính lang chứa từ "ru".
- p - chọn tất cả các thành phần đoạn trong đó thuộc tính lang chứa các giá trị chính xác là "ru" hoặc bắt đầu bằng "ru".
Một số quy tắc về phong cách
Bạn có thể cần xác định nhiều quy tắc kiểu cho một phần tử. Bạn có thể xác định các quy tắc này để kết hợp nhiều thuộc tính và các giá trị tương ứng của chúng thành một khối duy nhất, như trong ví dụ sau:
H1 ( màu: #00CED1; khoảng cách chữ: .2em; chuyển đổi văn bản: chữ thường; lề dưới: 2em; độ dày phông chữ: 700; )
Tất cả các cặp thuộc tính và giá trị được phân tách bằng dấu chấm phẩy (;). Bạn có thể lưu trữ chúng trên một dòng hoặc nhiều dòng. Để dễ đọc hơn, hãy giữ chúng trên các dòng riêng biệt.
Đừng lo lắng về các thuộc tính được đề cập trong khối trên. Những tính chất này sẽ được giải thích trong các bài học sau.
Nhóm các bộ chọn trong CSS
Bạn có thể tạo kiểu cho nhiều bộ chọn nếu muốn. Chỉ cần phân tách các bộ chọn bằng dấu phẩy, như trong ví dụ sau:
H1, h2, h3 ( color: #00CED1; khoảng cách chữ: .2em; chuyển đổi văn bản: chữ thường; lề dưới: 2em; font-weight: 700; )
Quy tắc kiểu này sẽ được áp dụng cho các phần tử h1, h2 và h3. Thứ tự của danh sách không quan trọng khi nhóm các bộ chọn. Tất cả các phần tử trong bộ chọn sẽ được áp dụng các khai báo tương ứng.
Bạn có thể nhóm các id bộ chọn khác nhau lại với nhau như bên dưới:
#header, #content, #footer (vị trí: tuyệt đối; chiều rộng: 300px; trái: 250px; )
Hôm nay chúng ta sẽ xem xét khái niệm về bộ chọn CSS và cách chúng ta có thể sử dụng chúng để rút ngắn phần đánh dấu HTML, làm cho nó sạch hơn.
Bộ chọn CSS là thành phần mà chúng ta sẽ áp dụng các thuộc tính CSS. Từ "bộ chọn" là tự giải thích; nó có nghĩa là sự lựa chọn.
P (màu: đỏ) khoảng div (nền: xanh) ul li (kiểu danh sách: không có)
Bộ chọn lớp và id
Trong ví dụ trên chúng ta có 3 bộ chọn - p, div span, ul li. Nghĩa là, toàn bộ tệp kiểu của chúng tôi bao gồm các bộ chọn và thuộc tính của chúng. Sẽ thuận tiện và trực quan nhất, đặc biệt đối với người mới bắt đầu, sử dụng tên lớp của thẻ hoặc mã định danh duy nhất của thẻ làm bộ chọn. Để gán một lớp hoặc mã định danh cho bất kỳ thẻ nào, chúng ta phải chỉ định nó trong số các thuộc tính của thẻ đó. Một thẻ cụ thể có thể có tối đa 1 ID và số lượng vô hạn các lớp học. Ví dụ:
văn bản trong div đầu tiênvăn bản trong div thứ haivăn bản trong div thứ baNhững gì bạn nên chú ý đến:
- Các lớp và mã định danh có thể được gán cho bất kỳ (tất cả) thẻ nào.
- Mỗi id là duy nhất và không thể lặp lại trong cùng một trang, không giống như các lớp!
- Lớp tương tự có thể được gán cho bất kỳ thẻ nào và có thể được lặp lại bao nhiêu lần trên một trang.
- Nếu chúng ta muốn gán một số lớp cho một thẻ cụ thể, chúng ta chỉ cần chỉ định chúng cách nhau bằng dấu cách.
- Tên của các lớp và mã định danh có thể giống nhau, nhưng ngoài tên thì sẽ không có điểm chung nào giữa chúng.
Làm cách nào để tham chiếu đến một lớp hoặc id trong tệp biểu định kiểu (CSS)?
Hãy xem một ví dụ:
#đầu tiên (màu: đỏ;) /* truy cập id có tên đầu tiên */.giây (màu: xanh;) /* truy cập vào lớp có tên thứ hai */#thứ nhất .thứ hai (màu: cam;) /* CHỈ truy cập vào lớp có tên thứ hai nếu nó nằm BÊN TRONG thẻ có mã định danh đầu tiên */.thứ nhất .thứ ba (màu: xám;) /* tham chiếu đến lớp có tên thứ ba CHỈ nếu nó nằm BÊN TRONG thẻ có lớp thứ nhất */
Trong trường hợp của chúng tôi, hai hướng dẫn cuối cùng sẽ không hoạt động vì chúng tôi không có các lớp được lồng bên trong các thẻ có thuộc tính nhất định. Như bạn có thể nhận thấy, để chỉ ra rằng chúng ta đang đề cập cụ thể đến id, chúng ta cần đặt dấu thăng (#) trước tên của nó mà không có dấu cách; nếu chúng ta đang đề cập đến một lớp thì chúng ta phải đặt dấu chấm (. ) trước tên lớp.
Việc sử dụng các lớp và mã định danh rất thuận tiện nhưng nó làm tăng khả năng đánh dấu HTML của chúng ta, lý tưởng nhất là chúng ta không nên sử dụng chúng, thay vào đó chúng ta sẽ sử dụng các kết hợp và nhóm các bộ chọn, phần còn lại của bài viết sẽ nói về chúng, nhưng ! Nhưng điều này hoàn toàn không có nghĩa là bạn nên từ bỏ hoàn toàn việc sử dụng các lớp và mã định danh, bạn chỉ nên nhớ rằng, thay vì tạo một lớp hoặc id mới, bạn có thể thực hiện bằng các kỹ thuật được mô tả bên dưới và chúng có thể cũng khá thuận tiện.
Sự khác biệt giữa lớp và id là gì?
Ngoài những khác biệt ở trên, cũng cần lưu ý rằng các thuộc tính được chỉ định bởi id có mức độ ưu tiên cao hơn các thuộc tính được gán cho lớp. Đó là, nếu chúng ta viết:
văn bản trong divaSau đó, màu văn bản sẽ trở thành màu đỏ, mặc dù thực tế là lớp mã thấp hơn và nếu chúng có mức độ ưu tiên bằng nhau thì văn bản sẽ chuyển sang màu xanh lam.
Theo cú pháp: trong trường hợp có lớp, chúng ta có thể chọn thẻ nào sẽ có lớp này, đối với trường hợp này, sau tên thẻ KHÔNG CÓ khoảng trắng, chúng ta phải tham chiếu đến lớp. Ví dụ:
Myclass (thuộc tính) /* sẽ áp dụng cho tất cả các thẻ chứa lớp myclass */ div.myclass (thuộc tính) /* sẽ chỉ áp dụng cho các thẻ div chứa lớp myclass */
Điều này cũng sẽ hoạt động với id, nhưng mục nhập như vậy là vô nghĩa, vì id không thể được lặp lại trên trang, điều đó có nghĩa là chỉ cần khai báo id mà không cần thẻ mà nó đề cập đến là đủ:
chữCó vẻ như chỉ còn lại một điểm khác biệt chưa xác định và nó liên quan đến một chủ đề mà tôi không định đề cập đến trong tương lai gần trên blog này - Javascript. Nhưng tôi vẫn phải nói với bạn điều này: nếu bạn muốn truy cập một phần tử bằng Javascript, thì việc có id cho phần tử này sẽ rất thuận tiện cho mục đích này. Để tham chiếu một phần tử theo lớp của nó trong Javascript, không có tính năng tích hợp sẵn như vậy, bạn sẽ phải sử dụng các hàm trợ giúp + tính năng này không phải lúc nào cũng có trên nhiều trình duyệt.
Điểm mấu chốt: chúng tôi sử dụng id và class, nhưng với mức độ vừa phải, luôn tự hỏi bản thân liệu có thể làm được nếu không có chúng hay không và điều đó nên làm như thế nào.
Bộ chọn liên quan
Phân khu p (màu: xanh lá cây;) /* Bộ chọn theo con */ p(màu: đỏ;) /* bộ chọn theo thẻ */
Nhưng như tôi đã viết ở bài viết trước, trong trường hợp đầu tiên, thuộc tính CSS sẽ được áp dụng cho tất cả các thẻ p được lồng vào BẤT KỲ độ sâu nào thẻ div. Nhưng điều gì sẽ xảy ra nếu chúng ta chỉ muốn áp dụng các thuộc tính cho con cháu trực tiếp, tức là ở cấp độ lồng nhau đầu tiên:
Cấp độ thứ ba
Người thừa kế trực tiếp (cấp độ đầu tiên)
Cấp độ thứ hai
Người thừa kế trực tiếp (cấp độ đầu tiên)
Trong trường hợp này, chúng ta phải sử dụng cái gọi là bộ chọn liên quan, dấu ngoặc nhọn được sử dụng để biểu thị nó, bạn có thể sử dụng dấu cách hoặc có thể bỏ chúng đi, tôi không khuyên bạn nên làm như vậy:
Div>p (màu: xanh lam;) /* chỉ là mức lồng nhau đầu tiên */ div p (màu: xanh;) /* tất cả các đoạn văn trong div */
Bộ chọn phổ quát
Chúng tôi đã giải quyết vấn đề này, chúng tôi đã có 3 loại bộ chọn trong kho vũ khí của mình, bây giờ tôi muốn kể cho bạn về một bộ chọn rất khác thường, nổi bật trong số những loại khác - đây được gọi là bộ chọn phổ quát, được biểu thị bằng dấu hoa thị (*):
* (lề: 0; phần đệm: 0;)
Đây là cách tôi bắt đầu mọi dự án mới và tôi khuyên bạn cũng nên làm như vậy. Bộ chọn chung áp dụng cho tất cả các thành phần trang (thẻ), nhưng không có mức độ ưu tiên nào (chỉ ở mức dưới đây không có mức độ ưu tiên nào cả). Nó thường được sử dụng để ghi đè các thuộc tính CSS mà trình duyệt đặt mặc định cho một số thẻ. Hãy tưởng tượng, điều này thực sự xảy ra! Theo mặc định, các trình duyệt đặt thuộc tính riêng cho khá nhiều thẻ, ví dụ: thẻ siêu liên kết màu văn bản màu xanh lam và gạch chân, họ đặt phần đệm cho thẻ nội dung, v.v. Chúng tôi hoàn toàn không cần phải nhớ, biết và sử dụng điều này, vì vậy chúng tôi loại bỏ ngay các thuộc tính tầm thường nhất bằng cách sử dụng bộ chọn phổ quát, tuy nhiên, tôi không khuyên bạn nên thêm bất cứ thứ gì khác vào nó (hoặc thêm, nhưng hãy cẩn thận), mặc dù nhỏ nhất (null ) của bộ chọn phổ quát, trong một số trường hợp, nó vẫn có thể ghi đè các thuộc tính khác cho bạn, vì vậy hãy ghi nhớ điều đó.
Nhân tiện, khi làm việc với bộ chọn, cũng như với bất kỳ công việc nào liên quan đến bố cục bố cục, việc sử dụng các phần tử trang xem sẽ rất thuận tiện. Nếu bạn chưa biết về những thứ như Opera Dragonfly, Firebug và trình kiểm tra web nói chung, thì không ngoa, bạn cần khẩn trương đọc bài viết tại liên kết trên! Và ai đã dùng những thứ tương tự rồi thì theo dõi mình nhé.
Lớp giả
Không giống như các lớp, các lớp giả không cần phải được chỉ định trong đánh dấu HTML; chúng được trình duyệt tự tính toán. Chúng tôi có 4 lớp giả tĩnh và 3 lớp giả động, ngoại trừ CSS 3, nhiều hơn nữa ở phần cuối. Những cái tĩnh bao gồm (:first-child, :link, :visited, :lang()):
Người thừa kế trực tiếp (cấp độ đầu tiên)
Cấp độ thứ ba
Người thừa kế trực tiếp (cấp độ đầu tiên)
Cấp độ thứ hai
Người thừa kế trực tiếp (cấp độ đầu tiên)
Kết quả:
Đương nhiên, bạn có thể kết hợp các bộ chọn theo ý muốn, ví dụ:
Div>span p:con đầu lòng (màu: xanh lá cây;) /*sẽ hoạt động nếu p là con đầu tiên của thẻ cha và nằm trong thẻ span là con trực tiếp của thẻ div */
Tên của lớp giả được trình bày ở trên đã nói lên đứa con đầu lòng - đứa con đầu lòng.
Hai lớp giả tĩnh sau đây chỉ áp dụng cho thẻ siêu liên kết (:link, :visited), chúng áp dụng các thuộc tính CSS tùy thuộc vào việc liên kết đã được một người dùng cụ thể truy cập hay chưa:
A: liên kết (màu: xanh;) /* đặt màu xanh lam cho các liên kết chưa được truy cập và theo mặc định chúng được gạch chân */ a:đã ghé thăm (màu: xanh lá cây; trang trí văn bản: không có;) /* Các liên kết đã truy cập sẽ có chữ màu đỏ, hãy bỏ phần gạch chân */
Lớp giả:lang() được sử dụng để cung cấp kiểu dáng khác nhau tùy thuộc vào ngôn ngữ. Ngôn ngữ mà thiết kế nên áp dụng được chỉ định trong ngoặc. Ví dụ: điều này có thể được sử dụng để chỉ định các kiểu trích dẫn khác nhau trong dấu ngoặc kép:
Q:lang(de) (trích dẫn: "\201E" "\201C";) /* trích dẫn tiếng Đức */ q:lang(en) (dấu ngoặc kép: "\201C" "\201D";) /* trích dẫn tiếng Anh */ q:lang(ru) (dấu ngoặc kép: "\00AB" "\00BB";) /* trích dẫn tiếng Nga */
Đây có lẽ là loại bộ chọn duy nhất mà tôi chưa từng sử dụng.
Các lớp giả động
Các lớp giả động là :active, :hover, :focus. Các lớp giả động được kích hoạt bởi một hành động cụ thể trên trang, chúng hoạt động cho tất cả các thẻ chứ không chỉ cho các liên kết, như nhiều người nghĩ và thậm chí tuyên bố trong blog của họ! Hãy xem xét ứng dụng của họ:
P:hoạt động (nền: đỏ;) /* kiểu sẽ được áp dụng cho thẻ khi bạn nhấp vào thẻ (nhấp chuột) */đầu vào: tiêu điểm (chiều rộng: 400px;) /* kiểu sẽ được áp dụng cho phần tử hiện có tiêu điểm (ví dụ: hoạt động đối với các trường nhập văn bản: vùng văn bản, đầu vào). Trong trường hợp này, khi lấy nét, chiều rộng của đầu vào sẽ bằng 400 pixel, thuận tiện sử dụng để tạo hiệu ứng đẹp mắt là kéo dài trường bằng cách nhấp chuột. */ div:hover (nền: xanh lá cây;) /* Được kích hoạt khi con trỏ di chuột qua một phần tử, chủ yếu được sử dụng để tạo hiệu ứng đẹp mắt khi di chuột qua các liên kết. */
Áp dụng những phong cách này cho ví dụ của chúng tôi ở trên và bạn sẽ tự mình thấy được.
Bộ chọn liền kề
Bộ chọn liền kề là hàng xóm gần nhất bên dưới mã, không phải con! Bộ chọn rất thuận tiện:
văn bản trong đoạn của div đầu tiên
văn bản trong đoạn BÊN NGOÀI div
văn bản trong khoảngvăn bản trong đoạn div thứ hai
một lần nữa đoạn văn nằm ngoài div
Kết quả:
Bộ chọn liền kề tổng quát
Các bộ chọn liền kề tổng quát hoạt động giống hệt như các bộ chọn liền kề thông thường, ngoại trừ các thuộc tính không chỉ áp dụng cho hàng xóm đầu tiên bên dưới mà còn cho tất cả các hàng xóm được chỉ định bên dưới:
văn bản trong divađoạn văn
đoạn văn
đoạn văn
văn bản trong khoảngđoạn văn
đoạn văn
đoạn trong diva
đoạn trong diva
văn bản trong khoảngđoạn văn
Kết quả:
Bộ chọn thuộc tính
Bộ chọn thuộc tính cho phép chúng tôi truy cập các thẻ có thuộc tính chúng tôi cần hoặc thậm chí một giá trị cụ thể:
P (thuộc tính) /* áp dụng cho tất cả các thẻ p có thuộc tính căn chỉnh */ p (thuộc tính) /* trong đó giá trị của thuộc tính căn chỉnh là center */ p (thuộc tính) /* trong đó giá trị của thuộc tính căn chỉnh bắt đầu ở giữa */ p (thuộc tính) /* trong đó giá trị của thuộc tính căn chỉnh chứa tâm */ p (thuộc tính) /* trong đó site có thể nằm trong số các từ khác được phân tách bằng dấu cách () */ p (thuộc tính) /* trong đó giá trị của thuộc tính lớp chỉ bao gồm hoặc bắt đầu bằng từ site, theo sau là dấu gạch nối và phần còn lại của giá trị ( hoặc ) */ p (thuộc tính) /* trong đó giá trị của thuộc tính căn chỉnh kết thúc bằng center */
Các lớp giả CSS 3
Bạn đã làm quen với tất cả các bộ chọn chính và điều này là đủ đối với bạn trong vài ngày đầu tiên. Tuy nhiên, trong CSS 3, nhiều lớp giả mới đã xuất hiện, giờ đây chúng ta không chỉ có thể lấy con đầu tiên mà còn có thể lấy bất kỳ con nào khác, chúng ta có thể đi ngược lại, không lấy con đầu tiên mà là con cuối cùng, v.v. và kể từ đó trở đi. Tất cả điều này rất thuận tiện và thiết thực, ngoại trừ việc bạn có thể gặp vấn đề với các phiên bản IE cũ hơn. Hãy tập trung toàn bộ sức lực của chúng ta và xem qua tất cả các bộ chọn còn lại để sau này bạn có thể ghi nhớ chúng khi tạo bố cục của riêng mình.
:last-child – tương tự như:first-child, nhưng không lấy con đầu mà lấy con cuối.
:only-child – sẽ hoạt động nếu phần tử (thẻ) là con duy nhất.
:only-of-type - sẽ hoạt động nếu phần tử (thẻ) là con duy nhất thuộc loại của nó.
:nth-child() – đề cập đến trẻ em theo số thứ tự, bạn có thể truy cập tất cả các số chẵn hoặc số lẻ. Ví dụ:
đoạn văn
đoạn văn
đoạn văn
văn bản trong khoảngđoạn văn
đoạn văn
đoạn văn
đoạn văn
đoạn văn
đoạn văn
Kết quả:
:nth-last-child – hoạt động tương tự như phần trước nhưng báo cáo bắt đầu từ cuối.
:first-of-type – con đầu tiên thuộc loại của nó trong cha mẹ trực tiếp.
:last-of-type – con cuối cùng thuộc loại của nó trong cha mẹ trực tiếp.
:empty – sẽ hoạt động đối với những thẻ không chứa một ký tự đơn (không có văn bản).
:not() – ném ra một ngoại lệ cho các phần tử đã cho. Ví dụ:
đoạn văn với lớp học
đoạn văn
đoạn văn
đoạn văn với lớp học
Kết quả:
Quản lý các trường, biểu mẫu, nút radio và hộp kiểm trong CSS
:enabled - áp dụng cho các thành phần giao diện có thể truy cập như biểu mẫu, nút, công tắc, v.v. Theo mặc định, tất cả các thành phần giao diện đều có thể truy cập được.
:disabled - áp dụng cho các thành phần giao diện bị vô hiệu hóa như nút, biểu mẫu, v.v. Các thành phần giao diện bị tắt nếu bạn thêm thuộc tính bị vô hiệu hóa vào chúng trong HTML hoặc bị vô hiệu hóa = "bị vô hiệu hóa" trong XHTML.
:checked – áp dụng cho các thành phần giao diện như radio và hộp kiểm khi chúng ở vị trí bật.
Yếu tố giả
Các phần tử giả, tương tự như các lớp giả, được trình duyệt tự động tính toán; chúng ta không cần phải lo lắng về điều này. Để không nhầm lẫn các phần tử giả với các lớp giả trong đặc tả CSS 3, người ta đã quyết định sử dụng dấu hai chấm kép thay vì một dấu hai chấm như trường hợp trong CSS 2. Do đó, trên Internet, bạn có thể tìm thấy giả -các phần tử có cả dấu hai chấm đơn và dấu hai chấm kép - cả hai tùy chọn đó đều đúng. Tuy nhiên, để tương thích tốt hơn với IE, nên sử dụng dấu hai chấm đơn.
:first-line – dòng đầu tiên bên trong một phần tử khối hoặc bảng.
:first-letter – chữ cái đầu tiên bên trong phần tử khối.
Điểm mấu chốt: bây giờ bạn đã biết và có thể sử dụng toàn bộ sức mạnh của biểu định kiểu xếp tầng, nhưng điều này không có nghĩa là bạn cần phải vội vàng tạo bố cục trang web ngay lập tức bằng cách sử dụng nhiều bộ chọn, lớp giả và phần tử giả như bạn đã học ngày hôm nay. Tôi đã liệt kê tất cả các công cụ có thể và bạn chỉ nên chọn những công cụ cần thiết nhất cho mình.
Lợi ích của việc tối ưu hóa HTML bằng CSS
Một phần quan điểm của tất cả những điều trên là loại bỏ việc sử dụng phổ biến các thuộc tính lớp và id trong HTML, từ đó để lại mọi thứ cho các biểu định kiểu hùng mạnh.
Các tệp kiểu bên ngoài, như các tệp Javascript bên ngoài, được lưu trữ hoàn hảo trong bộ nhớ đệm, điều đó có nghĩa là khi truy cập bất kỳ trang nào trên trang web của bạn lần đầu tiên, trình duyệt của người dùng sẽ ghi nhớ các tệp này và không tải chúng xuống nữa, không giống như chính trang đó, nghĩa là, đánh dấu HTML, hình ảnh và văn bản của bạn mà trình duyệt tải xuống nhiều lần. Điều tương tự cũng áp dụng cho các công cụ tìm kiếm, chúng không quan tâm chút nào đến các tệp bên ngoài của bạn, nhưng chúng quan tâm đến khối lượng và nội dung đánh dấu HTML của bạn. Các công cụ tìm kiếm phải thu thập dữ liệu toàn bộ cấu trúc của trang và lợi ích tốt nhất của bạn là giúp họ làm điều này, tập trung nỗ lực vào nội dung chứ không phải vào một bức tường đánh dấu rườm rà bao gồm một loạt các lớp và mã nhận dạng, hoặc tệ hơn - Trình xử lý sự kiện Javascript và kiểu CSS trực tiếp trong thuộc tính thẻ (và điều này vẫn xảy ra).
Bạn có thể tranh luận với tôi, họ nói, chúng tôi có thể buộc trình duyệt máy khách tải xuống tất cả các tệp, hình ảnh được kết nối vào môi trường cục bộ của nó, lưu trữ toàn bộ trang, v.v. Trong bối cảnh như vậy, một chuyện vặt vãnh như vậy hoàn toàn bị mất, nhưng bằng cách này hay cách khác, bằng cách giảm đánh dấu HTML càng nhiều càng tốt, bạn chỉ thắng mà không mất gì ngoại trừ một thói quen có thể xảy ra.
Tóm lại: nhờ tối ưu hóa và giảm HTML, chúng tôi đạt được rất ít lợi ích về tốc độ tải trang và SEO (tối ưu hóa công cụ tìm kiếm), cũng như mã sạch hơn.
Igor. Cập nhật: ngày 30 tháng 10 năm 2018.
Bài viết mở đầu của phần này cung cấp thông tin chung về, bao gồm mô tả về cách kết nối kiểu với mã HTML của trang web (tài liệu), xác định sự hiện diện của một số thành phần nhất định trên trang web.
Trong ấn phẩm này, chúng ta sẽ xem xét cách soạn và viết chính xác các thuộc tính CSS cho tất cả các thành phần để trình duyệt có thể nhận dạng và hiển thị chúng một cách chính xác trên trang.
Cụ thể, chúng ta hãy xem quy tắc một kiểu nói chung là gì, bao gồm bộ chọn, cũng như các thuộc tính và giá trị của chúng.
Cú pháp và các tùy chọn viết quy tắc CSS
Vì các biểu định kiểu xếp tầng, mặc dù là một ngôn ngữ chuyên biệt, vẫn có thể rút ra sự tương đồng giữa một bộ quy tắc CSS và văn bản đơn giản, trong đó mỗi từ bao gồm các chữ cái, một câu bao gồm các từ và chính đoạn văn bản bao gồm các câu .
Với sự liên kết trực quan này, chúng ta có thể rút ra một chuỗi logic liên quan đến cấu trúc CSS (theo ý kiến khiêm tốn của tôi, đây là cách tối ưu nhất):
- giá trị (hoặc tham số), được thể hiện bằng số, mã màu, tên phông chữ, v.v., theo cách tương tự của chúng tôi, có thể được coi là các chữ cái;
- Đơn vị cấu trúc của CSS là tài sản, xác định phần diện mạo của một thành phần trên trang (màu sắc, phông chữ văn bản, kích thước, mức thụt lề, vị trí, v.v.), tương ứng với các giá trị cụ thể (một hoặc nhiều). Ở đây, sự kết hợp giữa tên thuộc tính và tham số của nó có thể được so sánh với một từ (cũng có thể bao gồm một hoặc nhiều chữ cái) trong một đoạn văn bản tiêu chuẩn;
- Quy tắc CSS - bộ chọn(tên kiểu) cùng với tập hợp thuộc tính CSSđối với mỗi phần tử, nó xác định hoàn toàn thiết kế và vị trí của nó trên trang. Được liên kết về mặt cấu trúc với một câu (một tập hợp các từ riêng lẻ trong văn bản thông thường);
- một bộ sưu tập đầy đủ tất cả các quy tắc CSSđối với một tài liệu cụ thể (trang web) đảm bảo nó hiển thị chính xác trong trình duyệt. Hãy so sánh điều này với một đoạn văn bản đã hoàn thành.
Có lẽ sự liên kết mà tôi đề xuất hơi xa vời nhưng tôi nghĩ nó vẫn sẽ giúp người mới bắt đầu hiểu được cấu trúc chung của ngôn ngữ CSS.
Vì vậy, mỗi thuộc tính được gán một giá trị (tham số) cụ thể và có thể có một vài giá trị trong số đó. Tập thuộc tính (quy tắc) tương ứng được áp dụng cho một bộ chọn cụ thể. Về mặt sơ đồ, một quy tắc CSS có thể được hiển thị như sau::
Một bộ chọn được đặt phía trước, sau đó đặt các dấu ngoặc nhọn (mở và đóng), giữa đó có các thuộc tính CSS với các giá trị được gán, tên của mỗi thuộc tính được phân tách khỏi tham số tương ứng của nó bằng dấu hai chấm. Tất cả các thuộc tính cùng với giá trị của chúng được phân tách bằng dấu chấm phẩy. Hãy xem một ví dụ trực tiếp:
Nội dung ( cỡ chữ: 14px; nền: #00ff00 url("west.png") lặp lại-x; )
Xin lưu ý rằng thuộc tính nền có một số giá trị: màu nền (#00ff00), đường dẫn đến hình nền ("west.png") và độ phân giải để lặp lại theo chiều ngang (repeat-x). Bạn có thể nhận thấy rằng tùy chọn ghi này hơi khác so với sơ đồ được trình bày ở trên.
Trên thực tế, không có sự mâu thuẫn nào ở đây. Vì CSS không nhạy cảm với dấu cách, ngắt dòng hoặc tab nên các quy tắc kiểu có thể được viết theo nhiều cách khác nhau để phù hợp với các tình huống cụ thể.
Ví dụ: một mục nhập quy tắc mở rộng, một mẫu vừa được trình bày, là thuận tiện nhất cho việc nhận thức và do đó thường được sử dụng để nghiên cứu các kiểu hoặc trong tệp style.css "thô", được tạo cho một mục nhập mới trang web và do đó vẫn chưa được hoàn thiện. Có một biến thể khác của mục nhập quy tắc CSS tương tự này:
Nội dung ( cỡ chữ: 14px; ) nội dung ( nền: #00ff00 url("west.png") lặp lại-x; )
Như bạn có thể thấy, bộ chọn giống nhau được lặp lại cho mỗi thuộc tính. Đây không phải là lỗi vì những lý do đã đề cập ở trên, nhưng định dạng viết quy tắc này làm lộn xộn mã và làm phức tạp nhận thức của nó, và do đó thực tế không được sử dụng.
Một phiên bản mở rộng của ký hiệu có thể được trình bày mà không cần gạch nối:
Nội dung ( cỡ chữ: 14px; nền: #00ff00 url("west.png") lặp lại-x; )
Nhưng đó không phải là tất cả. Có thể bỏ qua tất cả dấu cách cũng như ký tự phân tách (dấu chấm phẩy) sau thuộc tính cuối cùng (trước dấu ngoặc nhọn đóng). Đây cũng là một dạng quy tắc CSS hoàn toàn hợp pháp, ít đồ sộ hơn, tốt cho việc tối ưu hóa trang web nhưng khó đọc hơn:
Nội dung(cỡ chữ:14px;nền:#00ff00 url("west.png") lặp lại-x)
Khi thiết kế trang web đã sẵn sàng và tất cả các thay đổi cần thiết đã được thực hiện đối với tệp kiểu CSS, chúng sẽ được điều chỉnh tương ứng để tối ưu hóa tài nguyên web và tất cả các khoảng trắng sẽ tự động bị xóa. Việc này có thể được thực hiện thủ công nhưng tại sao lại lãng phí thời gian quý báu một cách vô lý như vậy? Xét cho cùng, ngay cả đối với một trang web nhỏ, tệp style.css có thể chứa nhiều quy tắc kiểu.
Bộ chọn, Thuộc tính và Áp dụng Kiểu
Tôi đã lưu ý rằng theo thời gian, HTML và CSS ngày càng hội tụ chặt chẽ hơn. Nếu vào buổi bình minh của Internet ở dạng hiện tại, sự xuất hiện của các thành phần trên trang web được mô tả bằng cách sử dụng các thuộc tính của thẻ đánh dấu siêu văn bản thì ngày nay việc sử dụng phương pháp như vậy được coi là quá thường xuyên, vì mã HTML bị quá tải thường không đóng góp gì. để tối ưu hóa hợp lý các trang của trang web, bao gồm cả việc gây hại cho việc quảng bá SEO của nó.
Khối có văn bản màu xanh lá cây được bao quanh bởi khungCSS (mã định danh được đặt trước biểu tượng băm):
#area (màu: xanh lá cây; đường viền: 2px Solid #d6c99a)
Các tùy chọn sau có thể chứa cả bộ chọn thẻ và các lớp có mã định danh.
Tại sao các tùy chọn kích thước này lại cần thiết? Thực tế là giải pháp tốt nhất không phải lúc nào cũng sử dụng các giá trị tương đối tiêu chuẩn, bao gồm cả tỷ lệ phần trăm. Đôi khi sẽ có lợi hơn nếu liên kết kích thước phông chữ với chiều cao và chiều rộng của cửa sổ trình duyệt. Giả sử, nếu chiều cao khung nhìn là 800px thì 1vh = 8px và nếu chiều rộng là 1500px - 1vw = 15px.
Đơn vị vmin và vmax được xác định bởi kích thước tối thiểu và tối đa của khu vực tương ứng theo chiều cao và chiều rộng. Mẫu: Chiều cao cửa sổ trình duyệt là 700px và chiều rộng là 1300px. Trong trường hợp này vmin = 7px và vmax = 13px.
Khi thiết lập kích thước, bạn phải chỉ định đơn vị (ví dụ: chiều cao: 55px), nếu không trình duyệt sẽ hiển thị không chính xác các phần tử tương ứng. Các giá trị bằng 0 không áp dụng cho quy tắc này; chúng có thể được chỉ định theo hai cách (phần đệm: 0 hoặc phần đệm: 0px); vì những lý do rõ ràng, tùy chọn đầu tiên chiếm ưu thế áp đảo ở vị trí dẫn đầu.
Quan tâm
Tôi quyết định đề cập riêng đến loại đơn vị này. Ở trên tôi đã nói về lợi ích của việc sử dụng giá trị tương đối khi thiết lập thuộc tính. Điều này hoàn toàn áp dụng cho lãi suất.
Bảng (chiều rộng: 100%; /* Chiều rộng bảng tính theo phần trăm */)
Các mục phần trăm được sử dụng khá thường xuyên, đặc biệt khi cần đặt giá trị tương ứng với giá trị gốc hoặc khi kích thước phụ thuộc vào một số trường hợp bên ngoài nhất định. Ví dụ: chiều rộng phần tử bằng 100% sẽ thích ứng với màn hình của nhiều loại thiết bị và được hiển thị chính xác ở đó.
Từ khóa
Chúng ta hãy xem xét một số từ đóng vai trò là tham số thuộc tính và xác định vị trí hoặc hình thức này hoặc hình thức khác của một phần tử. Dưới đây là một số ví dụ minh họa.
1. Giá trị thuộc tính căn chỉnh văn bản, giúp căn chỉnh văn bản theo chiều ngang: center | biện minh | trái | đúng | bắt đầu | kết thúc. Đây là một ví dụ với tham số biện minh:
P (căn chỉnh văn bản: căn đều)
Ký hiệu này có nghĩa là văn bản đoạn văn được căn chỉnh cả bên trái và bên phải:
2. Màu hiện tại- khớp với giá trị thuộc tính màu của phần tử hiện tại và chỉ định màu cho các khu vực không nhận được màu theo mặc định. Giả sử một thùng chứa có lớp "bl-2" được lồng trong "bl-1":
Giá trị currentColor chỉ định màu nềnVà phong cách được chỉ định cho cả hai:
Bl-1 ( đệm: 10px; /* Lề xung quanh vùng chứa bên trong */ nền: currentColor; /* Màu nền */ ) .bl-2 ( color: blue; /* Màu văn bản */ đệm: 10px; /* Lề xung quanh văn bản */ nền: #ccc; /* Màu nền */ )
Nếu không có màu văn bản nào được chỉ định cho một phần tử (thuộc tính “color”) thì theo mặc định đoạn văn bản sẽ có màu đen (trong hầu hết các phần tử). trình duyệt phổ biến). Trong ví dụ của chúng tôi, đối với vùng chứa bên ngoài (“bl-1”) bị thiếu màu. Kết quả là, khi chỉ định giá trị “currentColor”, nền của vùng chứa này sẽ trở thành màu đen:
3. Thừa kế- Cái này từ khóa làm tham số của các giá trị tương ứng của phần tử cha. Vật mẫu:
Giá trị kế thừa xác định sự kế thừa của thuộc tínhVà các quy tắc CSS cho nó:
Bl-1 ( viền: 4px màu đỏ đặc; đệm: 10px; ) .bl-2 ( viền: kế thừa; đệm: kế thừa; )
Kết quả là thiết kế đường viền và phần đệm đã được chuyển từ khối cha (bl-1) sang khối bên trong (bl-2):
4. Ban đầu- được sử dụng trong trường hợp cần thiết lập các tham số ban đầu của thuộc tính. Ví dụ: nó giúp khôi phục các giá trị mặc định do trình duyệt đặt hoặc xác định thông số ban đầu, đã được thay đổi do sự kế thừa. Ví dụ:
Tùy chọn thuộc tính CSS
Có rất nhiều ý nghĩa khác nhau quyết định phong cách nhất định, xác định vẻ bề ngoài các thành phần trên một trang web.
Đọc thêm chi tiết
Và phong cách cho nó:
H2 ( màu: #2e15d1; họ phông chữ: Verdana, sans-serif; ) p ( màu: xanh lá cây; ) .init ( màu: ban đầu; họ phông chữ: ban đầu; )
Bằng cách sử dụng lớp "init", hình thức của đoạn đoạn p được đính kèm trong thẻ span và tiêu đề dưới cùng H2 được thay đổi để phù hợp với cài đặt kiểu dáng mặc định của chúng.
5. Bỏ đặt là một tham số về cơ bản là sự “lai” giữa kế thừa và ban đầu. Xác định tham số thuộc tính là kế thừa nếu thuộc tính được kế thừa từ cha mẹ, nếu không thì là thuộc tính ban đầu.
ví dụ 1(hoạt động như kế thừa):
Màu văn bản xanh lục - kế thừa giá trị của thuộc tính "color" cho lớp "zzz"
Màu văn bản là màu đỏ theo giá trị của thuộc tính "color" cho thẻ p
P (màu: đỏ) .zzz (màu: xanh lá cây) .xxx p (màu: chưa đặt)
Theo quy định Quy tắc CSS thuộc tính màu sắc được kế thừa vì vậy, "unset" trong ví dụ của chúng tôi sẽ trả về màu văn bản màu xanh lục cho vùng chứa "xxx" là con của "zzz":
Ví dụ 2(hoạt động như ban đầu):
Màu khung là đen - giá trị mặc định
Màu đường viền (màu xanh) được đặt trong thuộc tính của vùng chứa div
Div ( border: 2px màu xanh đậm; lề-dưới: 10px; lề trên: 10px; phần đệm: 10px; ) .xxx ( border-color: unset; )
Vì theo quy tắc của tờ định kiểu tài sản biên giới không được thừa kế, thì “border-color: unset” sẽ trả màu đường viền về giá trị mặc định, tức là nó trở thành màu đen.
URL hoặc địa chỉ
Tham số này chứa và được sử dụng khi bạn cần, ví dụ, để trỏ đến một tệp hình ảnh (đọc bằng cách sử dụng Thẻ HTML hình ảnh). Trong trường hợp này nó được sử dụng từ khóa url(), trong đó giữa dấu ngoặc và đường dẫn đến tệp đồ họa được chỉ định:
Nội dung ( nền: url(https://site/images/star.jpg) không lặp lại; /* Đường dẫn tuyệt đối */ ) div ( nền: url(images/globus.jpg) không lặp lại; /* Đường dẫn tương đối * / )
Thời gian
Ví dụ: nó được sử dụng khi triển khai các hiệu ứng hoạt hình (vâng, trên CSS thuần túy bây giờ bạn có thể tạo những thứ như vậy), trong đó các tham số được chỉ định bằng giây (s) hoặc mili giây (ms). Giá trị có thể là số nguyên hoặc phân số. Đồng thời, chúng ta phải nhớ rằng không được có khoảng cách giữa số và đơn vị đo (2s, 50ms)./p>
Hãy xem một ví dụ.
Và theo đó, phong cách cho nó:
Đang tải ( width: 440px; lề: auto; đệm: 20px; nền: #c49746; color: #fff; text-align: center; ) .spin ( display: inline-block; width: 70px; Height: 70px; border: 10px double #ccc; border-right: 10px double trong suốt; bán kính đường viền: 70px; /* Animation */ animation: spin 5s tuyến tính 0s vô hạn bình thường; ) /* Đặt xoay */ @keyframes spin ( từ ( biến đổi: xoay( 0deg); ) thành ( biến đổi: xoay(360deg); ) )
TRÊN trang này Bạn không chỉ có thể nhìn vào kết quả mà còn có thể cố gắng chỉnh sửa một số thuộc tính, có thể nói, trong thực tế, nói chung, hãy thử nghiệm. Đương nhiên, những người mới bắt đầu nghiên cứu các biểu định kiểu xếp tầng vẫn khó hiểu và tính đến sự tinh tế của hoạt hình, nhưng chắc chắn sẽ có phần tiếp theo, vì vậy hãy nhớ đăng ký các tài liệu mới để có được thứ bạn muốn đúng hạn. Nhưng hãy tiếp tục.
Dây
Loại tùy chọn này cho phép bạn thêm các đoạn văn bản. Chuỗi phải được đặt trong dấu ngoặc kép (đơn hoặc kép). Hơn nữa, nếu bạn cần đặt một từ hoặc cụm từ trong dấu ngoặc kép bên trong một chuỗi thì có thể kết hợp các loại dấu ngoặc kép này.
Giả sử, nếu bạn đưa toàn bộ dòng vào dấu nháy đơn, thì đoạn văn bản bên trong sẽ được nhân đôi và ngược lại. Nó cũng được phép sử dụng cùng loại, chỉ trong trường hợp này cần phải thoát dấu ngoặc kép bên trong bằng cách thêm dấu gạch chéo ngược “\” trước chúng:
- thuộc tính: "chuỗi 'nội dung'"
- thuộc tính: "chuỗi 'nội dung'"
- thuộc tính: "chuỗi\"nội dung\""
Để bắt đầu, mã HTML:
Phiên bản hiện tại bài viết.
Và bây giờ là các phong cách:
Mới::sau ( nội dung: "đã cập nhật"; màu: đỏ; )
Màu sắc
CSS có thể được sử dụng để chỉ ra màu sắc cho các thuộc tính khi tạo quy tắc CSS. thông số khác nhau. Chúng ta hãy xem xét ngắn gọn về từng người trong số họ:
1. Tên. Đúng, không phải tất cả các sắc thái đều có thể được chỉ định theo cách này mà chỉ một số sắc thái (“đỏ” - đỏ, “xanh” - xanh lá cây, “đen” - đen, “cam” - cam, “vàng” - vàng, “ ô liu” - ô liu và một số loại khác). Chúng cũng có thể được phân loại là từ khóa.
P (màu sắc: xanh lá cây)
2. thập lục phân ( mã thập lục phân) . Cơ sở của hệ thập lục phân, trái ngược với hệ thập phân nổi tiếng, là 16 ký tự: 10 số (từ 0 đến 9) và 6 chữ cái đầu tiên của bảng chữ cái Latinh (A, B, C, D, E, F ). Các chữ cái từ A đến F tương ứng với các số từ 10 đến 15.
P (màu: #f8f9e3)
3.1. RGB— bạn có thể đặt giá trị màu dựa trên hệ thập phân. Tên phương pháp này là tên viết tắt của ba màu chính có liên quan: R ed (màu đỏ), G reen (màu xanh lá cây), B lue (màu xanh). Các sắc thái của mỗi màu nằm trong khoảng từ 0 đến 255. Để sử dụng hệ thống này, bạn cần viết rgb ở phía trước và chỉ ra từng thành phần màu trong ngoặc: rgb (240, 0, 180). Cũng có thể sử dụng tỷ lệ phần trăm:
Div ( màu nền: rgb (210, 0, 90); màu: rgb (100%, 50%, 15%); )
3.2. RGBA- Phiên bản mở rộng của phương pháp RGB trước đó, nó chứa kênh alpha đặt độ trong suốt của phần tử trong phạm vi từ 0 đến 1. Tham số "0" hoàn toàn trong suốt và "1" hoàn toàn mờ đục.
Phần thân (màu nền: rgba (255,255,255,.9))
4.1. HSL— tên của phương pháp này cũng không gì khác hơn là một từ viết tắt bao gồm các chữ cái đầu tiên của ba từ: H ue (hue), S bão hòa (bão hòa) và L sự nhẹ nhàng (sự nhẹ nhàng). Chính những đặc điểm này cùng nhau quyết định màu sắc cuối cùng. Trong trường hợp này, bóng nằm ở một vị trí cụ thể trên bánh xe màu:
Vì toàn bộ vòng tròn là 360°, mỗi màu sắc (sắc độ) tương ứng với một giá trị rất cụ thể theo độ từ 0° đến 359°. Trong trường hợp này, các thông số của các sắc thái chính như sau: 0° - đỏ, 120° - xanh lá cây, 240° - xanh lam.
Độ bão hòa và độ sáng được đo bằng phần trăm (từ 0 đến 100%). Đối với bão hòa, tham số 0 có nghĩa là không dải màu, và 100% là mức tối đa màu bão hòa. Làm sao nhiều giá trị hơnđộ sáng, tông màu càng nhạt, 0 tương ứng với màu đen và 100% tương ứng với màu trắng.
Div (màu nền: hsl(40,90%,15%))
4.2. HSLA- tương tự như RGBA, nó là phiên bản mở rộng của HSL, có thêm chỉ báo độ trong suốt.
Div (màu: hsla(120,100%,50%,0.6))
Góc quay hoặc nghiêng
Trong CSS, các đặc điểm góc (dựa trên hình tròn) có thể được sử dụng làm tham số cho một số thuộc tính nhất định. Dưới đây là các đơn vị được sử dụng:
- độ - độ(1 vòng tròn đầy đủ là 360 độ);
- tốt nghiệp - tốt nghiệp(vòng tròn đầy đủ 400grad);
- radian - rad. Toàn bộ một vòng tròn bằng 2π (xấp xỉ 6,2832rad);
- lần lượt - xoay(1 lượt bằng 1 lượt đầy đủ).
Điều quan trọng cần lưu ý là giá trị âm có thể được sử dụng. Dưới đây là ví dụ minh họa kèm theo thông số của một số góc (góc quay):
Để rõ ràng, hãy sử dụng các đặc tính xoay để thực hiện Gradient điền nền và đặt nó trên trang như một trong những thành phần của mẫu của chúng tôi văn bản cụ thể:
Đổ nền gradient.
Bây giờ hãy tạo quy tắc CSS cho nền này:
Nội dung ( nền: #f5e573; nền: gradient tuyến tính(-5deg, #f5e573, #f7f4db 50%, #f7f6eb); )
Bạn có thể đánh giá kết quả tại trang này và thực hành ở đó, chỉnh sửa các kiểu theo ý muốn. Điều này cũng sẽ hữu ích cho việc đạt được các kỹ năng thực tế.
Xin chào các độc giả thân mến. Trong các bài viết trước, chúng ta chủ yếu nghiên cứu các thuộc tính kiểu CSS. Hiện có rất nhiều trong số họ. Một số đặt tham số phông chữ, số khác đặt tham số nền và số khác nữa đặt tham số thụt lề và khung.
Trong bài viết này chúng ta sẽ nói về bộ chọn kiểu. Trong một trong những bài viết chúng tôi đã đề cập đến. Hôm nay chúng ta sẽ xem xét thêm một số loại bộ chọn không liên kết rõ ràng quy tắc kiểu với thành phần trang web. Đây được gọi là bộ chọn đặc biệt. Có một số loại trong số họ.
Bộ kết hợp trong CSS (Bộ chọn liền kề, con và bối cảnh)
Máy kết hợp là một loại bộ chọn CSS liên kết quy tắc kiểu với thành phần trang web dựa trên vị trí của nó so với các thành phần khác.
Biểu tượng tổ hợp đầu tiên thêm(+) hoặc bộ chọn liền kề. Plus được đặt giữa hai bộ chọn:
<селектор 1> + <селектор 2> { <стиль> }
Phong cách trong trường hợp 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à đến ngay sau nó. Hãy xem một ví dụ:
mạnh mẽ + tôi (
}
...
Đây là văn bản bình thường. Đây là văn bản in đậm, văn bản thô, văn bản màu đỏ
Đây là văn bản bình thường. Đây là văn bản in đậm, văn bản thô, và đây là văn bản bình thường.
Kết quả:
Kiểu được mô tả trong ví dụ sẽ chỉ được áp dụng cho văn bản đầu tiên được đính kèm trong thẻ , bởi vì nó xuất hiện ngay sau thẻ .
Bộ kết hợp dấu ngã(~) cũng áp dụng cho các bộ chọn liền kề, nhưng lần này có thể có các phần tử khác giữa chúng. Trong trường hợp này, cả hai bộ chọn phải được lồng trong cùng một thẻ cha:
<селектор 1> ~ <селектор 2> { <стиль> }
Kiểu này sẽ được áp dụng cho bộ chọn 2 cái nào nên theo sau bộ chọn 1. Hãy xem xét một ví dụ:
mạnh mẽ~tôi(
màu đỏ; /* Màu chữ đỏ */
}
...
Đây là văn bản bình thường. Đây là văn bản in đậm, văn bản thô, văn bản màu đỏ quy tắc chọn liền kề được áp dụng cho nó.
Đây là văn bản bình thường. Đây là văn bản in đậm, văn bản thô, và đây là dòng chữ màu đỏ.
Kết quả:
Như bạn có thể thấy, lần này quy tắc kiểu hoạt động cho cả hai văn bản được đính kèm trong thẻ , mặc dù thực tế là trong trường hợp thứ hai giữa thẻ Và đáng giá .
Bộ kết hợp > đề cập đến bộ chọn con. Cho phép bạn liên kết kiểu CSS với một thành phần trang web được lồng trực tiếp vào một thành phần khác:
<селектор 1> > <селектор 2> { <стиль> }
Phong cách sẽ bị ràng buộc với bộ chọn 2, được lồng trực tiếp vào bộ chọn 1.
div > mạnh mẽ (
}
...
Đây là văn bản bình thường. Đây là văn bản in nghiêng đậm.
Đây là văn bản bình thường. Và đây là văn bản in đậm thông thường.
Và kết quả:
Như bạn có thể thấy trong hình, quy tắc kiểu chỉ ảnh hưởng đến thẻ đầu tiên , được lồng trực tiếp trong thẻ
. Và cha mẹ trực tiếp của thẻ thứ hai là thẻ, vì vậy quy tắc không áp dụng cho anh ta.
Tiếp theo chúng ta sẽ xem xét bộ chọn ngữ cảnh<пробел> . Nó cho phép bạn liên kết một kiểu CSS với một phần tử được lồng trong một phần tử khác và có thể có bất kỳ mức độ lồng nhau nào:
<селектор 1> <селектор 2> { <стиль> }
Kiểu này sẽ được áp dụng cho bộ chọn 2, nếu nó được lồng vào trong bộ chọn 1.
Hãy xem xét ví dụ trước, chỉ khi Mô tả CSS quy tắc áp dụng bộ chọn ngữ cảnh:
div mạnh mẽ(
kiểu chữ: in nghiêng /* in nghiêng */
}
...
Đây là văn bản bình thường. Đây là văn bản in nghiêng đậm.
Đây là văn bản bình thường. Và đây cũng là chữ in nghiêng đậm.
Văn bản thuần túy và chỉ cần in đậm văn bản
Kết quả:
Như bạn có thể thấy, lần này quy tắc ảnh hưởng đến cả hai thẻ , ngay cả cái được lồng trong vùng chứa
và trong một đoạn văn. Gắn thẻ , được lồng đơn giản trong một đoạn văn
quy tắc css không hoạt động chút nào
Bộ chọn theo thuộc tính thẻ
Bộ chọn thuộc tính là các bộ chọn đặc biệt liên kết một kiểu với một phần tử dựa trên việc nó có chứa một thuộc tính nhất định hay có một giá trị nhất định hay không. Có một số tùy chọn để sử dụng các bộ chọn như vậy.
1. Bộ chọn thuộc tính đơn giản
Giống như:
<селектор>[<имя атрибута тега>] { <стиль> }
Và liên kết kiểu với các thành phần trong đó thuộc tính đã chỉ định được thêm vào. Ví dụ:
mạnh(
màu đỏ;
}
...
ô tôđây là một động cơ cơ khí không có đường ray phương tiện giao thông">phương tiện giao thông đường bộ có ít nhất 4 bánh xe.
Kết quả:
Trong hình bạn có thể thấy quy tắc css (màu văn bản màu đỏ) được áp dụng cho phần tử mạnh, thuộc tính được thêm vào tiêu đề.
2. Bộ chọn thuộc tính có giá trị
Cú pháp của bộ chọn này như sau:
<селектор>[<имя атрибута тега>=<значение>] { <стиль> }
Ràng buộc phong cách tới các phần tử có thẻ có thuộc tính được chỉ định tên Và nghĩa. Ví dụ:
Một(
màu đỏ;
cỡ chữ: 150%;
}
...
.ru" target="_blank">Liên kết trong cửa sổ mớiKết quả:
Như bạn có thể thấy, cả hai thành phần của loại siêu liên kết đều có thuộc tính mục tiêu, nhưng quy tắc css phóng to văn bản liên kết lên gấp rưỡi và thay đổi màu của nó thành màu đỏ sẽ được áp dụng cho thẻ thuộc tính của ai mục tiêu có ý nghĩa "_trống".
3. Một trong nhiều giá trị thuộc tính
Một số giá trị thuộc tính có thể được phân tách bằng dấu cách, chẳng hạn như tên lớp. Để đặt quy tắc kiểu khi giá trị bắt buộc có trong danh sách các giá trị thuộc tính, hãy sử dụng bộ chọn sau:
[<имя атрибута тега>~=<значение>] { <стиль> }
<основной селектор>[<имя атрибута тега>~=<значение>] { <стиль> }Kiểu này được áp dụng nếu thuộc tính có giá trị bắt buộc hoặc là một phần của danh sách các giá trị được phân tách bằng dấu cách. Ví dụ:
{
màu đỏ;
cỡ chữ: 150%;
}
...
Điện thoại của chúng tôi: 777-77-77
Địa chỉ của chúng tôi: Moscow St. Xô Viết 5
Bạn sẽ nhận được kết quả sau:
Quy tắc áp dụng cho một phần tử có giá trị thuộc tính bao gồm: lớp học có một ý nghĩa điện thoại.
4. Dấu gạch nối trong giá trị thuộc tính
Dấu gạch nối được cho phép trong giá trị định danh và lớp. Để liên kết một kiểu với các thành phần có giá trị thuộc tính có thể chứa dấu gạch nối, bạn có thể sử dụng cấu trúc sau:
[thuộc tính|="giá trị"] ( kiểu )
Bộ chọn[thuộc tính|="giá trị"] ( style )Kiểu này được áp dụng cho những phần tử có giá trị thuộc tính bắt đầu bằng giá trị được chỉ định, theo sau là dấu gạch nối. Ví dụ:
{
màu đỏ;
cỡ chữ: 150%;
}
...
Kết quả:
Trong ví dụ này, quy tắc kiểu chỉ áp dụng cho các thành phần danh sách có tên lớp bắt đầu bằng giá trị "thực đơn- ".
5. Giá trị thuộc tính bắt đầu bằng văn bản cụ thể
Bộ chọn này đặt kiểu cho một phần tử nếu giá trị thuộc tính thẻ bắt đầu bằng một giá trị cụ thể. Có thể có hai lựa chọn:
[<имя атрибута тега>^=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> }Trong trường hợp đầu tiên phong cácháp dụng cho tất cả các phần tử có thẻ có thuộc tính được chỉ định tên và một giá trị bắt đầu bằng chỉ định chuỗi con. Trong trường hợp thứ hai điều tương tự, chỉ một số yếu tố nhất định quy định tại bộ chọn chính. Ví dụ:
Một(
màu xanh lá cây;
độ dày phông chữ: đậm;
}
...
Kết quả:
Ví dụ minh họa cách hiển thị liên kết ngoài và liên kết nội bộ khác nhau. liện kết ngoại luôn bắt đầu bằng dòng “http://”. Do đó, trong bộ chọn, chúng tôi chỉ ra rằng kiểu sẽ chỉ được áp dụng cho các liên kết có thuộc tính href bắt đầu với ý nghĩa http://.
6. Giá trị thuộc tính kết thúc bằng văn bản nhất định
Liên kết một kiểu với các phần tử có giá trị thuộc tính kết thúc bằng văn bản đã chỉ định. Có cú pháp sau:
[<имя атрибута тега>$=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }Trong trường hợp đầu tiên phong cácháp dụng cho tất cả các phần tử có thuộc tính với quy định tên và có ý nghĩa kết thúc bằng từ được chỉ định chuỗi con. Trong trường hợp thứ hai, điều tương tự, chỉ với phần được chỉ định bộ chọn. Bằng cách này, ví dụ, bạn có thể hiển thị định dạng khác nhau Hình ảnh đồ hoạ. Ví dụ:
IMG (
đường viền: màu đỏ đặc 5px;
}
...
Ảnh GIF
Định dạng ảnh png
Kết quả:
Trong ví dụ này, tất cả các hình ảnh có phần mở rộng gif sẽ được hiển thị với đường viền màu đỏ dày 5 pixel.
7. Giá trị thuộc tính chứa chuỗi được chỉ định
Bộ chọn này liên kết kiểu với các thẻ có giá trị thuộc tính chứa văn bản cụ thể. Cú pháp:
[<имя атрибута тега>*=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }Phong cách liên kết với các phần tử có thuộc tính Với tên được chỉ định và giá trị của nó chứa giá trị được chỉ định chuỗi con. Ví dụ:
IMG (
đường viền: màu đỏ đặc 5px;
}
...
Hình ảnh từ thư mục thư viện
Hình ảnh từ thư mục khác
Kết quả:
Trong ví dụ này, kiểu được áp dụng cho ảnh được tải từ thư mục "phòng trưng bày".
Đó là tất cả về bộ chọn thuộc tính. Tất cả các phương pháp trên có thể được kết hợp với nhau:
Bộ chọn[attribute1="value1"][attribute2="value2"] ( style )
Ngoài ra, hãy để tôi nhắc bạn về các bộ chọn CSS đặc biệt:
- sử dụng các ký hiệu “+” và “~” được hình thành;
- biểu tượng ">" liên kết phong cách cssĐẾN công ty con thẻ;
- biểu tượng<пробел>tạo ra bộ chọn bối cảnh.
Trong các bài viết sau, chúng ta cũng sẽ xem xét các phần tử giả và các lớp giả cung cấp công cụ đắc lực quản lý phong cách.
Thế thôi, hẹn gặp lại.
Vlad Merzhevich
Các phần tử 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 theo bất kỳ cách nào và đại diện cho các phần tử liền kề. 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, hãy tạo một lớp mới, 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ẻ
, trong đó 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ác thẻ liên tiếp
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.
Những ghi chú cuối cùng
