Tìm hiểu về CSS basic: Các quy tắc chỉ dẫn

Tìm hiểu về CSS basic: Các quy tắc chỉ dẫn

Bạn có thể ít dùng những quy tắc chỉ thị, chỉ dẫn này nhưng nếu bạn hiểu thì cũng có thể vận dụng vào code css của mình hoặc chí ít thì bạn cũng hiểu được code nói gì để bạn không khỏi thắc mắc khi đọc thấy ai dùng tới nó. Những quy tắc này thường được đặt tại dòng đầu tiên trên trang code css của bạn.

@charset:

Bạn dùng để khai báo mã encoding sử dụng cho các css bên ngoài ví dụ @charset "ISO-8859-15".

@import

Bạn dùng để liên kết với một file css khác, dùng quy tắc này bạn có thể gom tất cả các file css ngoài liên kết vào một file.

@import url("css/main.css");
@import "local.css";

@media

Bạn dùng để khai báo rằng đoạn code bạn muốn dùng cho trường hợp in ấn (print) hay hiển thị trên trình duyệt (screen).

@media print {
  body {
    padding: 1in;
   border: 0.5pt solid #666;
}
}

@page

Quy tắc này dùng để canh lề mặc định cho trang của bạn cái này thì thường dùng cho trường hợp in ấn các giá trị cũng tuân theo cách viết shorthand, bạn có thể đặt.

@page {
  margin: 2.5cm; /* mặc định tất cả trang */
}
@page :left {
  margin-left: 5cm; /* chỉ bên trái trang */
}
@page :right {
  margin-right: 5cm; /* chỉ bên phải trang */
}
@page :first {
  margin-top: 8cm; /* dành cho phần top của trang đầu tiên */
}

@font-face

Được định nghĩa trong css2 nhưng sau đó được bỏ trong css2.1, còn hiện tại thì nó được giới thiệu  lại trong css3, có nhiều thuộc tính sử dụng nhưng hữu dụng nhất là để liên kết đến một font ở bên ngoài có thể là liên kết tuyệt đối hay tương đối,  điều này giúp bạn không phụ thuộc vào font trên máy người dùng cuối.

@font-face {
  font-family: "Example Font";
  src: url("http://www.example.com/fonts/example");
}
h1 {
  font-family: "Example Font",sans-serif;
}
Tags: 
Bạn thấy bài viết này như thế nào?: 
Average: 10 (1 vote)
Ảnh của Khanh Hoang

Khanh Hoang - Kenn

Kenn is a user experience designer and front end developer who enjoys creating beautiful and usable web and mobile experiences.

Bình luận (0)

 

Add Comment

Filtered HTML

  • Các địa chỉ web và email sẽ tự động được chuyển sang dạng liên kết.
  • Các thẻ HTML được chấp nhận: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Tự động ngắt dòng và đoạn văn.

Plain text

  • No HTML tags allowed.
  • Các địa chỉ web và email sẽ tự động được chuyển sang dạng liên kết.
  • Tự động ngắt dòng và đoạn văn.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
Hướng dẫn tạo Drupal 7 Content Type Search Block chỉ với 5 Steps

Hướng dẫn tạo Drupal 7 Content Type Search Block chỉ với 5 Steps

Since the content type I needed to search for was already indexed by the search module, I wanted to stick with core Drupal searching. I didn’t really want to mess with altering an advanced search form, so I came up with the following solution, which only took 5 easy steps.

Chỉ mất 15 phút để làm Drupal integration test

Chỉ mất 15 phút để làm Drupal integration test

This post will help you write and run your first Drupal integration test using Red Test framework in less than 15 minutes

Hướng dẫn chèn JS và CSS assets vào Drupal 8 theme năm 2015

Hướng dẫn chèn JS và CSS assets vào Drupal 8 theme năm 2015

In the example below global-stylingis a name of a library (a file or collection of files) that is used for global styles

Công ty diệt chuột T&C

 

Diet con trung