Ví dụ 1:
Css:
ul li: first-letter{magin-left:10px}
Ví dụ 2:
Css:
ul li: first-child{background-color:white}
Tương tự: đổi first thành last thì li cuối cùng sẽ được định dạng
Ví dụ 3:
HTML:
<div id="a" name="hello" >Hello</div>
Css:
div#a[name="hello"]{background-color:blue}
Dịch ra là: tìm cái div có id là a và có thuộc tính name là hello thì được định dạng nền là blue
Ví dụ 4:
HTML:
<div class="tintuc"> Tin trong nước </div> <div class="tintuc"> Tin nước ngoài </div> <div class="tintuc bongdatrongnuoc"> Tin bóng đá trong nước </div> <div class="tintuc bongdanuocngoai"> Tin bóng đá nước ngoài </div>
CSS:
div.tintuc: not([class*="bongda"]){background-color: red}
Ký tự * : ý nói là cái class có cụm từ "bongda", có thể là bongdatrongnuoc, bongdanuocngoai, bongdatumlum, miễn sao là có cụm từ "bongda".(* cụm từ đại diện)
Not: nghĩa là không có
Dịch ra là: Tìm các div có class là tintuc mà không có class thứ hai có cụm từ "bongda"
Kết quả là: div thứ nhất và thứ hai có nền màu đỏ.
Ngược lại: xóa chữ not đi thì trở về giống với ví dụ 3
Ví dụ 5:
before, after : để chèn nội dung được tạo vào trước hay sau nội dung đã có của một thành phần nào đó.
Cú pháp Css:
tag:before{
content:"text can them"
}
hoặctag:before{
content: url(images/arrow.png)
}
Html:<html> <head></head> <body> <p>HỌC WEB CHUẨN</p> </body> </html>
Hiển thị trình duyệt khi chưa có CSS:
HỌC WEB CHUẨN
Css:
p:after {
content: ": kiến thức nhỏ cho web hiện đại.";
}
Hiển thị trình duyệt khi có CSS:
HỌC WEB CHUẨN: kiến thức nhỏ cho web hiện đại
a
Không có nhận xét nào:
Đăng nhận xét