Lập trình html-css độ ưu tiên, đặt biến, hàm, lớp giả, phần tử giả trong css

27/05/2022 159 lượt xem

Độ ưu tiên trong css

+ Các cách gọi css có điểm cao hơn sẽ có độ ưu tiên lớn hơn

1. Internal và External code css nào chạy sau(gọi sau – viết mới hơn) sẽ được ưu tiên
2. Inline: 1000 <h1 style=”color:red”>Điểm 1000</h1>
3. #id: 100
4. .class: 10
5. tag(h1, h2, p, lable): 1
6. Equal specificity: lặp lại css, các selector sẽ được cộng vd: h1#id.class = 111
7. Universal selector: 0 thẻ chung cho tất cả Vd: * {color:red;}
8. Inherited: 0 kế thừa. Các thẻ con sẽ ăn css của thẻ cha

Đặt biến trong css

+ Đặt các biến trong thẻ root

:root{
   --h3-color: red;
}
//Gọi biến
h3{ color: var(--h3-color); }

//Biến local
#content{
  --content-color: blue;
  h3{ color: var(--content-color); }
}

Hàm(function) trong css

• var() tạo biến
• linear-gradient(): dải màu vĩ dụ từ đỏ tới xanh
• rgba(): màu trong suốt
• rgb(): màu như mã hexa
• calc(): tính toán chiều rộng, cao
• attr(): lấy giá trị thuộc tính

a::after{
  content: attr(href) //Kq: Website: https://readtoshare.com
}

<a href="https://readtoshare.com">Website: </a>

Lớp giả(pseudo-calsses)

• :root
• :hover
• :active
• :first-child
• :last-child

Đây là những lớp giả phổ biến nhất mà bạn có thể sẽ sử dụng

Lớp giả	Mục tiêu
:active	một phần tử đang được kích hoạt bởi người dùng (ví dụ: được nhấp vào). Chủ yếu được sử dụng trên các liên kết hoặc nút
:checked	hộp kiểm, tùy chọn hoặc các loại đầu vào radio được bật
:default	mặc định trong một tập hợp các lựa chọn (như, tùy chọn trong một lựa chọn hoặc các nút radio)
:disabled	một phần tử bị vô hiệu hóa
:empty	một phần tử không có con
:enabled	một phần tử được kích hoạt (đối lập với:disabled)
:first-child	đứa con đầu lòng của một nhóm anh chị em
:focus	phần tử có tiêu điểm
:hover	một phần tử di chuột
:last-child	đứa con cuối cùng của một nhóm anh chị em
:link	một liên kết chưa được truy cập
:not()	bất kỳ phần tử nào không khớp với bộ chọn được chuyển. Ví dụ:not(span)
:nth-child()	một phần tử phù hợp với vị trí được chỉ định
:nth-last-child()	một phần tử phù hợp với vị trí cụ thể, bắt đầu từ cuối
:only-child	một phần tử không có anh chị em nào
:required	một phần tử biểu mẫu vớirequiredtập thuộc tính
:root	Đại diện chohtmlthành phần. Nó giống như nhắm mục tiêuhtml, nhưng nó cụ thể hơn. Hữu ích trongBiến CSS.
:target	phần tử khớp với phân đoạn URL hiện tại (để điều hướng bên trong trang)
:valid	các phần tử biểu mẫu đã xác thực thành công phía máy khách
:visited	một liên kết đã được truy cập

Phần tử giả(pseudo-elements)

• ::before
• ::after
• ::first-letter
• ::first-line
• ::selection: Chọn: bôi đen đoạn văn sẽ có background và color màu gì