VietTuts

Tự Học Lập Trình Online

  • Home
  • Java
  • Servlet
  • JSP
  • Struts2
  • Hibernate
  • Spring
  • MyBatis
  • Java WS
  • C
  • C++
  • C#
  • Python
  • PHP
  • Excel
  • VBA
  • Web
    • JavaScript
    • JQUERY
    • JSON
    • AJAX
    • CSS
    • HTML
    • HTML5
    • Node.js
    • Angular 7
  • SQL
    • MySQL
    • SQL Server
  • Misc
    • Eclipse
    • Phần mềm tiện ích
    • Cấu trúc DL&GT
    • Selenium Test

CSS Tuts

CSS là gì? Cú pháp CSS Bộ chọn CSS Liên kết css với html Đơn vị đo trong CSS Mã màu trong CSS Comment trong CSS

CSS Các thuộc tính

CSS Background CSS Border Font trong CSS Định dạng văn bản (Text) trong CSS Image trong CSS Link trong CSS Bảng trong CSS Căn lề trong CSS List trong CSS Thuộc tính padding trong CSS Con trỏ trong CSS Thuộc tính outline trong CSS Kích cỡ trong CSS Scrollbar trong CSS Thuộc tính visibility trong CSS Căn chỉnh vị trí trong CSS Thuộc tính z-index trong CSS Pseudo Class trong CSS Pseudo Element trong CSS Các quy tắc trong CSS Kiểu Media trong CSS Layout trong CSS Validation trong CSS

CSS nâng cao

Giới thiệu CSS3 Bo tròn góc trong CSS Border Image trong CSS
1 / 3
❮ ❯

Các quy tắc trong CSS


Pseudo Element trong CSS
Layout trong CSS

Bài này chúng ta sẽ tìm hiểu về các quy tắc trong CSS:

  • Quy tắc @import: sử dụng quy tắc này để import các Style Sheet vào trong Style Sheet hiện tại.

  • Quy tắc @charset: xác định bộ ký tự mà Style Sheet sử dụng.

  • Quy tắc @font-face: miêu tả bề mặt font sử dụng trong tài liệu.

  • Quy tắc !important chỉ rằng đây là một Rule được định nghĩa bởi người dùng, và nên nhận quyền ưu tiên cao nhất và ghi đè các giá trị của cùng thuộc tính mà được xác định bởi người khác.

Ghi chú: Ngoài các quy tắc trên, còn có một số quy tắc khác sẽ được trình bày trong các chương tiếp theo.


Nội dung chính

  • Quy tắc @import trong CSS
  • Quy tắc @charset trong CSS
  • Quy tắc @font-face trong CSS
  • Quy tắc !important trong CSS

Quy tắc @import trong CSS

Sử dụng quy tắc @import giúp bạn import các Style từ các Style Sheet khác vào trong Style Sheet hiện tại. Quy tắc này nên xuất hiện ngay phần đầu tiên của Style Sheet và giá trị của nó sẽ là một URL trỏ đến Style Sheet cần import.

Quy tắc này có thể được viết theo một trong hai cách sau:


<style tyle="text/css">
   <!--
   @import "main.css";
   hoac
   @import url("main.css");
   .......va mot so qui tac CSS khac .....
   -->
</style>

Ý nghĩa của quy tắc @import là cho phép bạn phát triển các Style Sheet dựa trên một Module nào đó. Bạn có thể tạo ra nhiều Style Sheet và sau đó include chúng bất cứ nơi đâu bạn cần.



Quy tắc @charset trong CSS

Nếu bạn muốn tạo Webpage mà sử dụng một bộ ký tự nào đó ngoài tập ASCII hoặc ISO-8859-1, bạn có thể thiết lập quy tắc @charset tại phần bắt đầu của Style Sheet để chỉ rằng Webpage của bạn sử dụng sử dụng bộ ký tự đó.

Quy tắc @charset phải được viết tại phần đầu của một Style Sheet (phải là ở phần đầu tiên, cho dù trước nó là một dấu cách thì cũng không được). Giá trị được lưu giữ trong trích dẫn và nên là một trong các bộ ký tự chuẩn. Ví dụ:


<style tyle="text/css">
   <!--
   @charset "iso-8859-1"
   .......mot so quy tắc CSS khac .....
   -->
</style>

Quy tắc @font-face trong CSS

Quy tắc @font-face được sử dụng để miêu tả bề mặt font được sử dụng trong Webpage. Quy tắc @font-face cũng có thể được sử dụng để định nghĩa vị trí của một font để download, mặc dù với một giới hạn cụ thể.

Nói chung, quy tắc @font-face là khá phức tạp, và mình đề nghị bạn không nên sử dụng nó, trừ khi bạn thật sự là một chuyên gia về CSS.

Ví dụ:


<style tyle="text/css">
   <!--
   @font-face {
      font-family: "Scarborough Light";
      src: url("http://www.font.site/s/scarbo-lt");
   }
   @font-face {
      font-family: Santiago;
      src: local ("Santiago"),
      url("http://www.font.site/s/santiago.tt")
      format("truetype");
      unicode-range: U+??,U+100-220;
      font-size: all;
      font-family: sans-serif;
   }
   -->
</style>


Quy tắc !important trong CSS

Bạn hãy nhìn lại từ CSS là viết tắt của Cascading Style Sheets, tức là các Style được áp dụng theo cùng một thứ tự như khi chúng được đọc bởi trình duyệt. Style đầu tiên được áp dụng và sau đó là thứ hai, và …

Quy tắc !important bao gồm các quy tắc mà luôn luôn được áp dụng. Tức là, khi sử dụng quy tắc !important này, bạn nói cho trình duyệt rằng giá trị của thuộc tính mà có quy tắc này là luôn luôn được áp dụng, bất kể giá trị của thuộc tính này do người khác thiết lập hay do mặc định là gì.

Ví dụ, trong Style Sheet sau, một lập trình viên nào đó xác định màu văn bản cho một đoạn văn là màu đen:


<style tyle="text/css">
   <!--
   p { color: #000000; }
   -->
</style>

Tuy nhiên, bạn thấy rằng màu này là chưa thích hợp và bạn muốn thay đổi thành màu đỏ, bạn có thể viết như sau:


<html>
<head>
<meta charset="UTF-8">
  <style tyle="text/css">
	 p { color: #ff0000 !important; }
	 p { color: #000000; }
  </style>
</head>
<body>
  <p>Ví dụ quy tắc !important trong CSS</>
</body>
</html> 

Kết quả: Phần định nghĩa mà bao gồm quy tắc !important sẽ luôn luôn được áp dụng.


Pseudo Element trong CSS
Layout trong CSS

Recent Updates

Sắp Tết 2024 Rồi! - Còn bao nhiêu ngày nữa là đến tết 2024?Border Image trong CSSBo tròn góc trong CSSGiới thiệu CSS3Layout trong CSSCác quy tắc trong CSSPseudo Element trong CSSPseudo Class trong CSSThuộc tính z-index trong CSSCăn chỉnh vị trí trong CSSThuộc tính visibility trong CSSScrollbar trong CSSKích cỡ trong CSS

VietTuts on facebook

Học Lập Trình Online Miễn Phí - VietTuts.Vn
Danh Sách Bài Học

Học Java | Hibernate | Spring
Học Excel | Excel VBA
Học Servlet | JSP | Struts2
Học C | C++ | C#
Học Python
Học SQL

Bài Tập Có Lời Giải

Bài tập Java
Bài tập C
Bài tập C++
Bài tập C#
Bài tập Python
Ví dụ Excel VBA

Câu Hỏi Phỏng Vấn

201 câu hỏi phỏng vấn java
25 câu hỏi phỏng vấn servlet
75 câu hỏi phỏng vấn jsp
52 câu hỏi phỏng vấn Hibernate
70 câu hỏi phỏng vấn Spring
57 câu hỏi phỏng vấn SQL

Scroll back to top

Copyright © 2016 VietTuts.Vn all rights reserved. | Liên hệ | Chính sách - riêng tư | sitemap.html | sitemap_index.xml