CSS (Cascading Style Sheets) được sử dụng để qui định cách trình bày cho các tài liệu viết bằng HTML, XHTML, XML, SVG, hay UML,… Trong thiết kế web khi chúng ta cần định dạng một một đối tượng theo mong muốn của chúng ta, chúng ta cần sử dụng Css để tạo lập các định dạng này và áp đặt vào đối tượng cần định dạng.
CSS cung cấp cho chúng ta hàng trăm thuộc tính trình bày dành cho các đối tượng với sự sáng tạo trong kết hợp các thuộc tính giúp mang lại hiệu quả cao. Ngoài ra, CSS đã được hỗ trợ bởi tất cả các trình duyệt, nên chúng ta hoàn toàn có thể tự tin trang web của mình có thể hiển thị “như nhau” trên mọi hệ điều hành.
Selector{
property: value;
}
Trong đó:
Ví dụ:
body{
background:#FFF;
color:#FF0000;
font-size:14pt;
}
Để thêm css vào file html, chúng ta có thể khai báo trực tiếp css vào trong file html cần sử dụng css. Cách này chúng ta gọi là internal css.
Theo các này chúng ta nhận thấy:
Cú pháp:
<style>
Selector{
property: value;
}
</style>
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
h1 {
color: orange;
font-size: 18px;
}
</style>
<h1>Trần Vĩnh Xuyên!</h1>
</body>
</html>
Để thêm css vào file html, chúng ta có thể khai báo một file css riêng và sau đó chúng ta nhúng file css này vào trong file html cần sử dụng css. Cách này chúng ta gọi là external css.
Theo các này chúng ta nhận thấy:
Theo các này chúng ta lần lược thực hiện theo các bước sau:
Cú pháp:
<link rel="stylesheet" href="filecss.css">
Tạo file "dinhdang.css"
h1 {
color: orange;
font-size: 18px;
}
Nhúng file "dinhdang.css" vào nơi cần sử dụng.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="dinhdang.css"> </head> <body> ... </body> </html>
Áp đặt định dạng vào đối tượng.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="dinhdang.css"> </head> <body> <h1>Trần Vĩnh Xuyên!</h1> </body> </html>
Ngoài hai cách trên, để thêm css vào đối tượng, chúng ta có thể áp vừa khai báo vừa áp đặt trực tiếp css vào đối tượng cần sử dụng css. Cách này chúng ta gọi là inline css.
Cú pháp:
<TagName style=" property: value; property: value; ..." > </TagName>
Trong đó:
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 style="
color: orange;
font-size: 18px;">
Trần Vĩnh Xuyên!
</h1>
</body>
</html>
Trong quá trình tạo lập css, chúng ta sẽ có nhu cầu ghi chú các định dạng mà chúng ta đã tạo nên: ý nghĩa của định dạng, ngày tạo định dạng,... để thời gian sau chúng ta đọc lại chúng ta có thể hiểu nhanh và rõ các định dạng mà chúng ta tạo ra.
Ví dụ:
<style>
h1 {
color: orange;
/*thay đổi màu
chữ thành màu cam*/
font-size: 18px;
/*thay đổi cỡ chữ
thành 18px*/
}
</style>
Trong quá trình tạo lập css, chúng ta sẽ có nhu cầu khai báo đơn vị cho các thuộc tính mà chúng ta cần định dạng. Vì thế chúng ta phải nắm được các đơn vị mà chúng ta cần cài đặt vào.
| Đơn vị | Ý nghĩa |
|---|---|
| % | Phần trăm |
| In | Inch (1 inch = 2.54 cm) |
| cm | Centimeter |
| mm | Millimeter |
| pc | Pica (1 pc = 12 pt) |
| px | Pixels (điểm ảnh trên màn hình máy tính) |
| pt | Point (1 pt = 1/72 inch) |
| em | Là đơn vị tham chiếu tỷ lệ so với phần tử mẹ của nó dựa vào giá trị của thuộc tính font-size. Ví dụ chúng ta đặt cho font-size cho phần tử mẹ của nó là 19px thì nếu chúng ta sử dụng đơn vị là em trong khu vực phần tử đó thì 1em = 19px. |
| rem | Đơn vị tham chiếu tỷ lệ so với phần tử gốc của một website dựa vào thuộc tính font-size, nghĩa là sẽ biến đổi tùy theo giá trị của thuộc tính font-size trong thẻ lt;html>. Cũng như rem, nếu chúng ta khai báo font-size cho thẻ <html> là 16px thì 1rem = 16px. |
Trước khi thực thi CSS cho một trang web. Trình duyệt sẽ đọc toàn bộ CSS mà trang web có thể được áp dụng, bao gồm: CSS mặc định của trình duyệt, file CSS bên ngoài liên kết vào trang web (external css), CSS nhúng trong thẻ <style> (internal css) và các CSS nội tuyến (inline css).
Sau đó, trình duyệt sẽ tổng hợp toàn bộ CSS này vào một CSS ảo, và nếu có các thuộc tính CSS giống nhau thì thuộc tính CSS nào nằm sau sẽ được ưu tiên sử dụng.
Theo nguyên tắc đó trình duyệt sẽ ưu tiên theo trình tự:
Trích dẫn: (http://khonggiankythuat.com)
