Quy tắc @import At-rules trong CSS

Quy tắc @import trong CSS được dùng để thiết lập thông tin kiểu cho một phương tiện mục tiêu cụ thể bằng cách chỉ định media types sau URL của bảng định kiểu được nhập.

Cú pháp

Cú pháp như sau:

@import url ("/* đường dẫn tệp */") mediatypes {    CSS-Code; }

Ví dụ cho quy tắc CSS @import:

Tài liệu HTML

Ví dụ

<!DOCTYPE html> <html> <head> <style type="text/css"> @import url(screen.css) screen; @import url(print.css) print; </style> </head> <body> <p> Vivamus commodo, dolor eu porttitor sagittis, orci nisl consectetur ipsum, vel volutpat nibh lectus at erat. Cras scelerisque faucibus tellus aliquam commodo.Donec sem urna, facilisis at ipsum id, viverra sollicitudin est. Nam rhoncus sollicitudin lorem, a accumsan purus varius eget. </p> <p class="two">In ultrices lectus nisi. Nulla varius ex ut tortor congue viverra. Sed sodales vehicula leo, vitae interdum elit vehicula nec. Donec turpis nunc, iaculis et nisi sit amet, feugiat lacinia metus. </p> <p>Suspendisse eget ligula et risus lobortis ornare id at elit. Suspendisse potenti. Vivamus pellentesque eleifend pellentesque. Vestibulum neque ante, iaculis a sagittis et, fermentum at metus.</p> </body> </html>

Tài liệu CSS (screen.css)

p { color: navy; font-style: italic; } .two { color: #c303c3; font-size: 20px; } body { background-color: honeydew;} CSS document (print.css): p { color: red; font-style: italic;} .two { color: #989898; font-size: 40px; }

Kết quả

Khi tài liệu hiển thị trong screen mediatype:

Khi tài liệu hiển thị trong print mediatype:

Ví dụ khác cho quy tắc CSS @import:

Tài liệu HTML

Ví dụ

<!DOCTYPE html> <html> <head> <title>CSS @import rule</title> <style type="text/css"> @import url(all.css) all; </style> </head> <body> <p>Tôi đồng ý với không gian chung</p> <p class="noneFloat">Tôi muốn không gian riêng</p> <p>Tôi cũng đồng ý với không gian chung</p> <p>Tôi cũng vậy</p> </body> </html> CSS document (all.css): p {    float: left;    margin: 10px;    padding: 10px;    color:white;    background-color: #48C9B0;    border: 4px solid #145A32; } p.noneFloat{    float: none;    clear: both;    color: #34495E; }

Kết quả