tin tức

Kỹ thuật lập trình HTML/CSS mới nhất 2020 - 04

17/04/2020 - Xem: 235
  • ::first-line | Chỉnh css cho dòng chữ đầu tiên

    Khi bạn muốn chỉnh giao diện cho dòng chữ đầu tiên cho đoạn văn bản bạn có thể sử dụng thuộc tính này.
    VD:
    p:first-line {
    color: lightcoral;
    }
  • ::first-letter | Chỉnh css cho chữ đầu tiên

    Tất nhiên có dòng đầu thì sẽ có ký tự đầu tiên của chữ, bạn muốn thay đổi css cho ký tự đầu thì sử dụng thuộc tính này.
    VD:
    p::first-letter {
    font-size: 200%;
    color: #8A2BE2;
    }
  • ::selection | Chỉnh css cho 1 đoạn văn bản được chọn

    Được sử dụng cho trường hợp bạn muốn thay đổi 1 đoạn văn bản do người sử dụng chọn.
    VD: bạn muốn khi người dùng chọn 1 đoạn văn bản thì văn bản có background màu vàng chẳng hạn thì có thể sử dụng như sau
    div::selection {
    background: yellow;
    }
  • :root | Chỉnh css cho thành phần gốc

    Đại loại nó sẽ chỉnh css cho thành phần báo ngoài cùng của tài liệu, nếu là trang HTML thì nó là thành phần HTML ngoài cùng, nếu là RSS nó là thành phần RSS ngoài cùng.
    Sở dĩ có cách này là chúng ta không quan tâm đến văn bản được thể hiện bởi dạng HTML hay RSS hay bất cứ dạng cấu trúc nào, nó sẽ áp dụng cho thành phần ngoài cùng của tài liệu
    VD: bạn muốn cả văn bản có nền màu vàng thì bạn chèn đoạn css sau vào
    :root {
    background: yellow;
    }
  • :empty | Chỉnh css cho thành phần rỗng

    Trong khi cắt HTML/CSS bạn muốn các thành phần không có giá trị cũng có thể áp dụng css riêng so với các thành phần có dữ liệu thì đây là công cụ cực hiệu quả.
    VD: bạn muốn thẻ div nào không có dữ liệu thì có thể biến mất khoảng chống trong giao diện chẳng hạn
    div:empty {
    display: none;
    }
  • :only-child | Chỉnh css cho thành phần con duy nhất

    Chỉnh css cho thành phần con là duy nhất
    VD:
    div p:only-child {
    color: red;
    }
    Thẻ div nào chỉ có 1 thẻ p bên trong nó thì nội dung trong thẻ p sẽ màu đỏ
  • :first-of-type | Chỉnh css cho thành phần loại thẻ đầu tiên

    Chỉnh css cho loại thẻ đầu tiên trong một vùng có nhiều loại thẻ khách nhau.
    VD: trong thẻ div có thẻ p1 --> span --> p2 --> label
    div:first-of-type {
    color: red;
    }
    Nội dung cho thẻ p1 sẽ có màu đỏ.
    VD: trong thẻ div có thẻ p1 --> p2 --> span --> label
    div:first-of-type {
    color: red;
    }
    Nội dung cho thẻ p1, p2 sẽ có màu đỏ (vì đều là loại thẻ p)
  • :last-of-type | Chỉnh css cho thành phần loại thẻ cuối

    Cũng như trên nhưng nó áp dụng ngược lại cho loại thẻ ở cuối
    VD: trong thẻ div có thẻ p1 --> span --> p2 --> label
    div:last-of-type {
    color: red;
    }
    Nội dung cho thẻ label sẽ có màu đỏ.
  • :nth-of-type(n) | Chỉnh css cho thành phần loại thứ n

    Chỉnh css cho thành phần loại ở vị trí thứ n giống với thuộc tính :nth-child(n)
    VD:trong thẻ div có thẻ p1 --> span --> p2 --> label
    div p:nth-of-type(2) {
    color: red;
    }
    Nội dung p2 sẽ có màu đỏ
  • :nth-last-of-type() | Chỉnh css cho thành phần thẻ loại cuối cùng

    Điều chỉnh css cho thành phần cuối cùng của loại thẻ này trong cùng 1 vùng
    VD:trong thẻ div có thẻ p1 --> span --> p2 --> label
    div p:nth-last-of-type() {
    color: red;
    }
    Nội dung trong thẻ p2 sẽ có màu đỏ
  • :not(thành phần) | Chỉnh css cho các thẻ không phải thành phần này

    Ta có thể chỉnh css cho các thẻ ngoài trừ thành phần đc khai báo
    VD:trong thẻ div có thẻ p1 --> span --> p2 --> label
    div:not(p) {
    color: red; }
    Nội dung trong thẻ span và label sẽ có màu đỏ

Liên kết

Tin được quan tâm nhất

Quản cáo