CSS hoạt động như thế nào?
Trong bài học này bạn sẽ học cách để tạo ra một trang CSS đầu tiên. Bạn sẽ biết được một vài đoạn code CSS mẫu cơ bản và cần thiết để sử dụng trên trang HTML .
Có rất nhiều các thuộc tính được sử dụng trong Cascading Style Sheets (CSS) tương tự như HTML. Vì vậy, nếu bạn đã sử dụng HTML để dàn trang bạn có thể dễ dàng làm quen với chúng. Nào, bây giờ chúng ta hãy xem xét một ví dụ cụ thể.
Cú pháp CSS cơ bản
Bạn nói với chúng tôi, bạn thích một trang web có phông nền màu đỏ, vậy thì tôi sẽ làm điều đó như thế nào?
Nếu sử dụng HTML chúng ta có thể thực hiện như sau:
<body bgcolor="#ffffff" text="#000000" >
Kết quả tương tự nếu bạn sử dụng CSS như thế này
body {background-color: #ffffff; color:#000000}
Cú pháp của CSS được chia làm 3 phần. phần bộ chọn (selector), phần thuộc tính (property), phần giá trị (value).
selector {property: value}
Cách áp dụng CSS vào tài liệu HTML
Có tất cả 3 cách để áp dụng CSS vào tài liệu HTML, tất cả sẽ được trình bày tiếp theo, tuy nhiên chúng tôi khuyến nghị bạn nên dùng cách thứ 3, lý do cũng sẽ được giải thích ở dưới đây.
Phương pháp 1: Kiểu nội tuyến / In-line (the attribute style)
Nếu bạn chọn cách này, để có kết quả tương tự như ví dụ ở trên, bạn sẽ phải làm như sau
<html> <head> <title>Bài tậo CSS</title> </head> <body style="background-color:#ff0000"> <h1>Trang này có nền màu đỏ</h1> </body>
Xem trên trình duyệt
Phương pháp 2: Kiểu cục bộ / Internal (the tag style)
Đây cũng là một cách để áp dụng CSS vào trang HTML bằng cách sử dụng thẻ <style>
trong đoạn <head>
…</head>
hoặc <body>
…</body>
<html> <head> <title>Bài tậo CSS</title> <style type="text/css"> body {background-color: #FF0000} </style> </head> <body> <h1>Trang này có nền màu đỏ</h1> </body>
Phương pháp 3: Ngoại tuyến, liên kết ngoài / External (link to a style sheet)
Đây cũng là cách phổ biến nhất được nhà thiết kế web sử dụng, trong suốt các bài hướng dẫn tiếp theo, chúng tôi khuyến khích bạn sử dụng phương pháp External. Lợi thế khi sử dụng phương pháp này đó là bạn có thể kiểm soát các kiểu trình bày hoặc bố cục dàn trang tất các văn bản HTML một cách thống nhất bằng cách thay đổi trên một trang CSS.
CSS liên kết ngoài thật chất là một tập tin văn bản (text) có phần mở rộng là .css, cũng như các tập tin khác, nó có thể được lưu trữ trên ổ cứng hoặc trên máy chủ tùy theo mục đích sử dụng của bạn.
Trong ví dụ dưới đây chúng ta sẽ đặt tên tập tin CSS này là style.css ở trong thư mục style như sau:
Để liên kết tập tin style.css vào tài liệu HTML có tên default.htm, chúng ta có thể chèn đoạn code bên dưới vào phần header của tập tin HTML, giữa hai thẻ <head>
…</head>
, thuộc tính href chính là đường dẫn liên kết đến vị trí của tập tin style.css
<html> <head> <title>Bài tậo CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Trang này có nền màu đỏ</h1> </body>
Liên kết này khai báo cho trình duyệt biết rằng phải tham chiếu tập tin CSS trước khi hiển thị trang HTML. Cách sử dụng này sẽ giúp chúng ta có thể liên kết một tập tin CSS đến nhiều trang HTML. Nói một cách khác, chỉ với một tập tin CSS, chúng ta có thể kiểm soát bố cục, dàn trang trên rất nhiều tài liệu HTML khác nhau.
- Kiểu nội tuyến / In-line (the attribute style)
- Kiểu cục bộ / Internal (the tag style)
- Kiểu liên kết ngoài / External (link to a style sheet)
- Kiểu mặc định của trình duyệt
Mức độ ưu tiên sẽ giảm dần từ trên xuống dưới.
Hãy thực hành những gì bạn vừa học
Bạn hãy mở chương trình Notepad và tạo ra hai tập tin với nội dung bên dưới, chắc chắn rằng bạn phải lưu đúng tên và phần mở rộng .html và .css
default.htm
<html> <head> <title>Bài tậo CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Trang này có nền màu đỏ</h1> </body>
style.css
body { background-color: #FF0000;}
Bây giờ bạn hãy lưu cả hai cùng một thư mục, sau đó mở tập tin default.htm với trình duyệt bất kỳ, bạn sẽ có được một trang web với phông nền màu đỏ như ý muốn. Chúc mừng bạn đã tạo thành công tập tin CSS đầu tiên, hãy xem tiếp bài 3 để tìm hiểu thêm các thuộc tính của CSS nhé!