Thực đơn
trang chủTừ

Bộ chọn CSS là chữ thường. Bộ chọn trong CSS. Những thẻ nào trong mã này liền kề nhau?

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 theo nhiều cách khác nhau mà bạn thấy phù hợp. 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 thành phần nhất định khi nó ở bên trong yếu tố cụ thể, thì các bộ chọn lồng nhau hoặc bộ chọn con sẽ giúp bạn thực hiện việc 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ác

      hoặc

    Bộ 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 phần tử HTML bằng 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; )

    CSS - Biểu định kiểu xếp tầng.

    Chú ý! Bạn không có quyền xem văn bản ẩn.


    Thế giới CSS- đây là một thế giới kỳ diệu của sự kết hợp vô tận giữa các thuộc tính và hình thức (kiểu dáng) của các đồ vật và thành phần. Và nhân vật quan trọng nhất trong CSS “kỷ niệm sự sống” này chính là Bộ chọn CSS.

    Bộ chọn trong CSS - thuật ngữ và định nghĩa

    Như bạn đã biết, phong cách ( vẻ bề ngoài và thuộc tính) -elements
    có thể có , và .

    Các kiểu dựng sẵn Các kiểu dựng sẵn được chỉ định trực tiếp trong các thẻ HTML và có lẽ là cách dễ nhất để sử dụng chúng. Hiệu ứng của kiểu nội tuyến chỉ áp dụng cho phần tử HTML có thẻ mở được chèn (được nhúng). Ví dụ: đây là mã: chữ- sẽ chỉ tạo nền màu đỏ bên trong phần tử span và không có gì hơn thế. Kết quả - văn bản Kiểu bên trong Kiểu bên trong được chỉ định dưới dạng mã độc lập, mã này có thể nằm trong mã nguồn của trang web ở bất kỳ đâu nó muốn - ở đầu trang, ở cuối hoặc ở giữa. Ví dụ về mã kiểu nội bộ:
    Kiểu dáng bên ngoài Lựa chọn khó khăn nhất là kiểu dáng bên ngoài. Khi sử dụng kiểu bên ngoài, mã cho từng kiểu được viết trong một tệp bên ngoài có phần mở rộng “.css”. Có thể có một số tệp như vậy và chúng có thể được đặt ở bất kỳ đâu, ngay cả trên một trang web khác.

    Không giống như kiểu nội tuyến, hiệu ứng của mã kiểu bên trong và bên ngoài được áp dụng cho toàn bộ trang web cùng một lúc. Trong trường hợp này, trên chính trường của trang web có thể có số lượng lớn các phần tử HTML tương tự khác nhau. Để cho trình duyệt biết chính xác thành phần nào thuộc về một kiểu cụ thể, công nghệ CSS sử dụng các lớp, lớp giả, mã định danh và bộ chọn. Do đó, "bộ chọn CSS" là một biểu tượng tiện ích để mô tả một phần tử hoặc nhóm phần tử áp dụng quy tắc kiểu đã chỉ định.

    Ghi chú Công bằng mà nói, cần lưu ý rằng những thứ như lớp và mã định danh thuộc về mã HTML nhiều hơn là kiểu CSS. Và chỉ có “bộ chọn CSS” và các lớp giả mới thực sự là sự phát triển CSS. Đó chính xác là những gì chúng ta đang nói đến.

    Bộ chọn trong CSS - “suy nghĩ dọc theo cây”

    Dựa vào những điều trên, cá nhân tôi đã định nghĩa khái niệm thuật ngữ “selector in CSS” như sau:

    "bộ chọn trong CSS" là một dấu hiệu dịch vụ cho trình duyệt biết vị trí và cách áp dụng kiểu phần tử HTML đã chỉ định.

    Như trong cuộc sống bình thường, nó chỉ có nghĩa là một lựa chọn tầm thường của một phần tử HTML để gán kiểu tiếp theo (giao diện, thuộc tính, v.v.).

    Tại sao bạn cần bộ chọn trong CSS?

    Bộ chọn trong CSS là một loại - Kết nối với đường dẫn giữa mã CSS và HTML. Bằng cách đặt bộ chọn (bằng cách chọn một phần tử), chúng tôi chỉ ra cho trình duyệt vị trí, đối tượng và quy tắc để áp dụng các thuộc tính (kiểu CSS) được chỉ định. Để chuyển từ mọt sách sang thực hành, có lẽ sẽ phù hợp nếu bạn nhớ cuộc sống trong CSS mà không cần bộ chọn.

    Thuộc tính chung trong CSS
    (cuộc sống không có sự lựa chọn)

    Cuộc sống không có bộ chọn là có thể! Nhưng đây có phải là cuộc sống? Nếu không có bộ chọn, Cascading Style Sheets (CSS) sẽ mất hoàn toàn ý nghĩa của chúng. Đầu tiên, chỉ có thể viết tên của thẻ thực từ đặc tả thực hiện có vào tên lớp mà không cần bộ chọn. Thứ hai, bản ghi như vậy sẽ áp dụng hoàn toàn cho tất cả các thẻ có tên được chỉ định trên trang HTML, chỉ có thể tìm thấy ở đó.

    Ví dụ: một bản ghi như:

    A(background:#000;) - sẽ sơn tất cả các liên kết trên trang bảng đen(background:#000;) - sẽ sơn tất cả các bảng trên trang màu đen div(background:#000;) - sẽ sơn tất cả các khối màu đen ( divs ) trên một trang web, v.v.
    Nói tóm lại, tất cả các kiểu và thuộc tính CSS được chỉ định sẽ được áp dụng không có chọn lọc mà trên toàn cầu, lan tỏa hiệu ứng của chúng đến tất cả các thẻ trang cùng một lúc...

    Tất nhiên, việc ghi âm không có bộ chọn như vậy có sức hấp dẫn riêng. Suy cho cùng, đây là cách CSS khai báo các kiểu chung cho tất cả các đối tượng HTML. Ví dụ phổ biến nhất của việc khai báo các thuộc tính toàn cục là việc thiết lập lại các thụt đầu dòng (lề và phần đệm) trên nhiều trình duyệt. Mã CSS của nó trông giống như thế này: html,body,div,ul,li,dl,dt,h1,h2,h3,h4,h5,h6(margin:0;padding:0;), mặc dù có thể có những lựa chọn khác. Một ví dụ phổ biến khác về cài đặt (kiểu) chung ảnh hưởng đến tất cả các đối tượng HTML trên trang là định dạng các đối tượng mới trên nhiều trình duyệt: đầu trang,phần,chân trang,sang một bên,điều hướng,bài viết(hiển thị:khối;). Ở đây, một lần nữa, các lựa chọn khác cũng có thể thực hiện được.

    Tuy nhiên, trong mọi trường hợp, tất cả những thứ này sẽ là kiểu CSS chung được đặt cho toàn bộ tài liệu web - các thuộc tính áp dụng cho tất cả các thẻ và thành phần được chỉ định trang HTML. Nhưng để Cài đặt CSS chỉ ảnh hưởng đến phần tử hoặc nhóm mong muốn được chỉ định phần tử HTML- yêu cầu bộ chọn.

    Bộ chọn trong CSS là gì

    Hãy tóm tắt.

    Đầu tiên. Mã của chính phần tử HTML và mã kiểu của nó có thể ở dạng Những nơi khác nhau trang web, trang web và thậm chí trên các trang web khác nhau.

    Thứ hai. Để xác định một phần tử HTML, nó được cung cấp một lớp hoặc mã định danh, mã này được thêm vào mã của phần tử HTML.

    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, nhưng vẫn là một ngôn ngữ, nên có thể so sánh 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à đoạn văn bản- từ các đề xuất.

    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;
    • cấu trúc Đơn vị 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, tuy nhiên, đối với tôi, nó vẫn sẽ giúp những người mới bắt đầu hiểu được cấu trúc chung 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, dấu ngắt dòng hoặc tab nên các quy tắc kiểu có thể được viết bằng nhiều ngôn ngữ nhất. những cách khác, được sử dụng trong 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 cùng tùy chọn này Mục CSS quy tắc:

    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, cùng một bộ chọn đượ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). Điều này cũng khá chính đáng Hình dạng CSS quy tắc, í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)

    Sau khi thiết kế trang web đã sẵn sàng và mọi thứ đã được nhập sự thay đổi cần thiết trong các tệp kiểu CSS, chúng được điều chỉnh tương ứng để tối ưu hóa tài nguyên web, đồng thời 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 một 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 cũng vậy sử dụng thường xuyên Phương pháp này được xem xét vì mã HTML quá tải thường không góp phần tối ưu hóa đúng cách các trang của trang web, điều này cũng 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 khung

    CSS (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? Sự thật là không phải lúc nào cũng vậy giải pháp tốt nhất là việc sử dụng tiêu chuẩn giá trị tương đối, bao gồm cả tiền lãi. Đô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 giá trị cực tiểu và kích thước tối đa các vùng có 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. Ý nghĩa, bằng 0, ĐẾN quy tắc này không áp dụng, 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 hiển nhiên, phương án đầu tiên dẫn đầu với lợi thế áp đảo.

    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 hầu hết các màn hình. các thiết bị khác nhau và 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ền

    Và 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ính

    Và 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. Giả sử nó giúp khôi phục các giá trị, được cài đặt bởi trình duyệt theo mặc định 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 sự xuất hiện của các thành phần trên 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 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 ta sẽ trả về màu xanh lá cây văn bản 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 thuộc tính 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 có hình ảnh (đọc với sử dụng HTML thẻ img). 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 số 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.

    Ví dụ: nếu bạn đặt toàn bộ dòng trong dấu ngoặc đơn thì đoạn văn bản bên trong sẽ nằm trong dấu ngoặc kép 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

    Nhiều tham số khác nhau có thể được sử dụng để biểu thị màu sắc cho các thuộc tính khi viết quy tắc CSS. 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 được đưa ra ví dụ minh họa với các thông số của một số góc (xoay):


    Để rõ ràng, hãy sử dụng các đặc tính xoay để thực hiện Gradient điền nền và là một trong các thành phần của mẫu, chúng tôi sẽ đặt một số văn bản nhất định trên trang:

    Đổ 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ế.

    Trong bài học trước chúng ta đã tìm hiểu các cách Kết nối CSS. Bây giờ chúng ta hãy chuyển sang ngôn ngữ.

    Giống như bất kỳ ngôn ngữ nào khác, CSS có cú pháp riêng nhưng cực kỳ đơn giản. Chỉ bao gồm hai thành phần:

    1. Bộ chọn(chọn đối tượng chúng ta sẽ làm việc. Ví dụ: tiêu đề, div, bảng, v.v.)
    2. Khối kiểu- mô tả một hoặc nhiều thuộc tính của một đối tượng - màu sắc, kích thước, v.v. Bao gồm trong dấu ngoặc nhọn ()

    Chúng ta thấy tiêu đề là một bộ chọn như thế nào; trong khối kiểu, thuộc tính màu văn bản được gán ( màu sắc) - màu xanh da trời.
    Khối kiểu bao gồm của cải Và ý nghĩa của chúng, được phân tách khi liệt kê dấu chấm phẩy (;), như trong ví dụ dưới đây.


    Bây giờ chúng tôi đang thêm một cái nữa tài sản - định dạng văn bản (phông chữ). Trong đó chúng tôi đưa ra nghĩa cỡ chữ - 20 pixel.

    Ví dụ về CSS

    Tạo một thư mục ở bất cứ đâu, ví dụ: Bài 2. Tạo một tập tin trong đó phong cách.css. Copy toàn bộ đoạn code bên dưới vào đó. Trong mã CSS, chúng tôi đặt thuộc tính cho thẻ và tiêu đề

    Và

    .

    Mã CSS(tài liệu phong cách.css)

    Thân hình(
    nền:màu xám;
    màu trắng;
    }
    h1(màu:#0085cc;)
    h2(màu:trắng;)
    Xin lưu ý rằng sẽ không có sự khác biệt cho dù khối kiểu được viết theo dòng (h1,h2) hay theo cột (nội dung). Cả hai tùy chọn sẽ hoạt động. Chọn những gì phù hợp với bạn nhất.

    Bây giờ hãy tạo một tệp HTML. Không quan trọng tên là gì, điều quan trọng chính là đường dẫn đến tệp có mã CSS được chỉ định chính xác. Được chỉ định tương tự như trong các liên kết, đường dẫn đến hình ảnh. Ví dụ bên dưới hiển thị đường dẫn (style.css) đến cùng thư mục với tệp html. Tức là cả hai file phải nằm trong cùng một thư mục.

    Mã HTML



    Ví dụ về CSS



    tiêu đề h1


    tiêu đề h2



    Kết quả của mã có thể được nhìn thấy tại liên kết dưới đây.

    Bộ chọn CSS

    Trong các ví dụ trên, các bộ chọn được phần tử trang: phần thân, h1, h2. Tuy nhiên, có những tình huống khi bạn cần làm việc với một phần tử cụ thể chứ không phải với tất cả chúng. Ví dụ: tất cả các tiêu đề đều có màu xanh lam và một tiêu đề ở cuối có màu đen. Có nhiều loại bộ chọn khác nhau cho việc này. Chúng ta hãy xem xét kỹ hơn về họ.

    Số nhận dạng

    Mã mặt hàng là một bộ chọn được gán cho một phần tử và làm cho nó trở thành duy nhất. Đặt bằng cách sử dụng id tham số.

    Đoạn này được gán một id. Nó sẽ có những đặc tính độc đáo.


    Các tùy chọn văn bản sẽ vẫn ở mặc định.


    Hãy xem một ví dụ

    Mã HTML và CSS



    Ví dụ về CSS



    Văn bản sẽ có màu xanh vì có id


    Màu văn bản sẽ vẫn giữ nguyên như mặc định.



    Đầu tiên, trong kiểu của tất cả các đoạn văn, thuộc tính màu được đặt thành màu đen và văn bản của đoạn có id "blue" sẽ có màu xanh lam. Bộ chọn trong trong trường hợp này bao gồm một phần tử (p - đoạn văn), dấu phân cách (# - ký hiệu định danh) và tên định danh (màu xanh).

    Điều quan trọng cần lưu ý là về mặt lý thuyết, mã định danh chỉ được cấp cho một phần tử mà chúng ta muốn cấp các thuộc tính duy nhất. Có, trong một số trình duyệt, việc cung cấp cùng một ID cho hai thành phần có thể có tác dụng. Tuy nhiên, điều này sẽ không xảy ra ở mọi nơi.

    Nếu bạn muốn đặt kiểu cho một số thành phần, bạn nên sử dụng các lớp học.

    Các lớp học

    Lớp học là bộ chọn cho phép bạn áp dụng kiểu cho một hoặc nhiều phần tử. Ví dụ: id chỉ áp dụng cho một phần tử duy nhất. Giá trị là tên của phần tử.

    Hãy xem một ví dụ:

    Mã HTML và CSS



    Ví dụ về CSS



    Màu văn bản là màu đen.



    Văn bản màu xanh.


    Văn bản được in đậm và có màu xanh.


    Màu văn bản là màu đen.



    Kết quả là một đoạn văn có mã định danh ( nhận dạng) màu xanh lam sẽ có văn bản màu xanh lam, các phần tử có lớp học màu xanh lam sẽ được tô đậm và xanh lam. Và tất cả các yếu tố khác P sẽ có phông chữ màu đen.

    Như bạn có thể thấy, lớp này có thể được áp dụng nhiều lần. Theo đó, tất cả các phần tử sẽ có các thuộc tính được mô tả cho lớp này.

    Bộ chọn hợp nhất

    Bộ chọn hợp nhất (.) là bộ chọn có thể được gán cho các loại phần tử khác nhau, ví dụ: tiêu đề, đoạn văn và khối (div). Tùy chọn phổ biến nhất. Trước đây, chúng tôi đã sử dụng cấu trúc trong mã CSS p # xanh Và p.blue, nghĩa là, đầu tiên họ chỉ ra loại phần tử (p - đoạn văn), sau đó là mã định danh hoặc chính lớp đó. Vì vậy, bạn có thể chỉ định việc xây dựng đơn giản hơn, hãy bắt đầu ngay với .màu xanh da trời. Một bộ chọn tương tự sẽ không chỉ được áp dụng cho các đoạn văn mà còn cho các phần tử khác.

    Mã HTML và CSS



    Ví dụ về CSS



    Tiêu đề có mã định danh.

    Màu văn bản là màu đen.


    Văn bản được in đậm và có màu xanh.


    Chữ trong khối cũng được in đậm và có màu xanh

    Nhắn tin vào phần tử nội tuyến cũng đậm và xanh



    Kết quả là một bộ chọn thống nhất, trong trường hợp này là lớp .màu xanh da trời, chúng tôi đã áp dụng cho cả đoạn văn (p), khối (div) và phần tử dòng (span). Kết quả ở mọi nơi đều giống nhau - văn bản được in đậm và có màu xanh lam.

    Bộ chọn ngữ cảnh

    Bộ chọn ngữ cảnh là bộ chọn chọn một phần tử trong một nhóm các phần tử khác. Chính tả được đánh dấu bằng một khoảng trắng. Để dễ dàng hơn, hãy chuyển thẳng sang một ví dụ. Giả sử chúng ta muốn văn bản in đậm có trong đoạn văn được đánh dấu bằng một số màu khác.

    Mã HTML và CSS



    Ví dụ về CSS


    Màu văn bản là màu đen. Nhưng thẻ phông chữ đậm không được đề cập ở đây.


    Văn bản in đậm thông thường, không có trong đoạn văn. Vì vậy, màu sắc của nó không thay đổi.

    Và chú ý!!! Đoạn có một cụm từ phông chữ màu xanh đậm



    Theo đó, chỉ những dòng chữ in đậm (mạnh) ở đoạn văn (p) mới được bôi xanh.

    Nhóm bộ chọn

    Nhóm bộ chọn- đây là cấu trúc biểu định kiểu trong đó khối khai báo kiểu xử lý một hoặc nhiều phần tử được đề cập trước đó và thêm thuộc tính mới.

    Văn bản rất khó hiểu. Tốt hơn hết là lấy ngay một ví dụ.

    H1, h2, h3( màu: xanh; )
    h1(cỡ chữ:18px; )
    h2(cỡ chữ:16px; )
    h3(cỡ chữ:14px; )
    Ở dòng đầu tiên chúng tôi đề cập ngay đến một số yếu tố. Để truy cập nhiều phần tử cùng một lúc, bạn cần liệt kê chúng trong bộ chọn bằng dấu , (dấu phẩy) và dấu cách. KHÔNG cần có dấu phẩy hoặc dấu cách trước mục cuối cùng được liệt kê..

    Bằng cách đề cập tiếp theo đến các phần tử này, chúng tôi thêm các giá trị thuộc tính mới cho chúng. Trong trường hợp này, kích thước phông chữ.

    Mã HTML và CSS



    Ví dụ về CSS


    tiêu đề h1


    tiêu đề h2


    tiêu đề h3



    Kết quả là tất cả các tiêu đề sẽ có màu xanh lam. Tuy nhiên, các kích thước khác nhau, bởi vì các mục tiếp theo trong biểu định kiểu đã đưa ra các tiêu đề có kích thước khác nhau.

    Việc sử dụng nhóm là một vấn đề gây tranh cãi. Giữa những lợi ích Có thể lưu ý rằng có thể tránh được các phần lớn của mã, phần lớn sẽ tự trùng lặp trong nội dung. Trong số những nhược điểm, chúng ta có thể nói rằng việc sử dụng mã như vậy, trong đó các thuộc tính được thêm vào phần tử này hoặc phần tử khác ở những nơi khác nhau, khá rắc rối và bất tiện. Tất nhiên, với cách viết tuần tự phù hợp, bạn có thể tránh được những nhược điểm như vậy, nhưng đó lại là một câu hỏi khác.

    Cám ơn vì sự quan tâm của bạn! Bài học đã kết thúc!


    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 chúng ta sẽ áp dụng 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ên
    văn bản trong div thứ hai
    văn bản trong div thứ ba

    Nhữ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 đá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 diva

    Sau đó, 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 có nghĩa vụ phải báo cáo với bạn: nếu bạn muốn truy cập một phần tử có sử dụng Javascript, thì với mục đích này sẽ rất thuận tiện nếu có id cho phần tử 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 chức năng phụ+ nó không phải lúc nào cũng tương thích với nhiều trình duyệt.

    Điểm mấu chốt: chúng tôi sử dụng id và class, nhưng có chừng mực, 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, các 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 (bên dưới chỉ 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 và gạch chân màu xanh, thẻ cơ thể họ đặt các trường (phần đệm), 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 hành động nhất định 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ố trên 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ử chứa khoảnh khắc này 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 cho hiệu ứng đẹp Mở rộng trường bằng cách nhấp vào. */ 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 đoạn div thứ hai

    văn bản trong khoảng

    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() – tạo một ngoại lệ cho 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ọ thực hiện việc 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 ngay 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.