CSS Cơ Bản Bài 1: Giới thiệu về CSS và cách khai báo CSS trong HTML
Nói nôm na thì CSS giúp cho người thiết kế website có thể dùng nó để làm trang web của họ đẹp hơn.
CSS là gì và ngồn gốc CSS
CSS là chữ viết tắt của cụm từ tiếng anh (Cascading Style Sheet), CSS được xuất hiện lần đầu vào năm 1996. CSS chỉ đơn thuần là một file có đuôi .css, trong file này chứa những câu lệnh css, mỗi câu lệnh css sẽ định dạng một thành phần nhất định của tài liệu HTML như màu sắc, font chữ, kích thước,.... Hiện nay đã có ba cách khai báo css.
Tác dụng của CSS
- Tách riêng phần định dạng và nội dung trang web.
- Giúp người thiết kế kiểm soát toàn bộ giao diện nhanh nhất và hiệu quả nhất.
- Giúp tiết kiệm công sức trong việc thiết kế website.
- Do được tách rời khỏi nội dung của trang web, nên các mã HTML sẽ gọn gàng hơn, thuận tiện hơn trong việc chỉnh sửa giao diện. Kích thước của file .html sẽ được giảm đáng kể. Hơn thế nữa sẽ được trình duyệt tải một lần và dùng lại nhiều lần (cache), do đó trang web sẽ được tải nhanh hơn.
Các cách khai báo CSS trong tài liệu HTML
- có 3 cách để khai báo CSS trong tài liệu HTML là: CSS cục bộ, CSS nội tuyến, CSS ngoại tuyến.
Tìm hiểu về 3 cách khai báo CSS
1. CSS cục bộ
- Viết CSS trực tiếp trong thẻ HTML, nội dung CSS sẽ nằm trong thẻ style="Nội dung css" , CSS cục bộ chỉ sẽ có tác dụng trong thẻ HTML được khai báo.
Ví dụ
<p>Hello.</p>
<p style="font-size: 16pt; color: red">Chào mừng bạn đến với Minh Quy Design.</p>
Như vậy css chỉ có tác dụng vào thẻ <p> thứ 2: "Chào mừng bạn đến với Minh Quy Design." sẽ có màu đỏ.
2. CSS nội tuyến
- CSS nội tuyến là phần mã CSS được khai báo trong cặp thẻ <style> </style> và đặt trong phần <head> </head> của tài liệu HTML. Khi sử dụng CSS nội tuyến sẽ có tác dụng lên file .html được khai báo và không ảnh hưởng đến các file khác.
Ví dụ
<style>
h1,h2,h3 {font-size: 14px;}
p {color:blue;}
</style>
3. CSS ngoại tuyến
Đây là cách khai báo CSS được sử dụng nhiều nhất trong thực tế. và cách khai báo này mới tận dụng được hết thế mạnh mà CSS mang lại, tách biệt hoàn toàn khỏi HTML, chỉ cần viết một file .CSS duy nhất và được sử dụng lại nhiều lần.
Nó có phạm vi ảnh hưởng toàn bộ đến toàn bộ website chứ không chỉ một file .html riêng biệt. Do đó mỗi khi bạn muốn thay đổi thuộc tính hiển thị của một thành phần nào đó trong website thì chỉ cần chỉnh sửa file .CSS thay vì phải chỉnh sửa tất cả các file .html tốn rất nhiều thời gian. Đến đây chúng ta đã thấy được sự cần thiết và hiệu quả mà CSS đem lại.
Để khai báo css ngoại tuyến, ta chỉ cần tạo một file có đuôi .css , sau đó chèn đoạn code sau trong phần
<head></head>code
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
Thứ tự ưu tiên trong CSS
Tại sao CSS lại có thứ tự ưu tiên?
- Chắc sẽ có khi trong thiết kế của mình bạn sẽ sử dụng không chỉ 1, mà 2 hay thậm chí là 3 kiểu khai báo CSS đã nói trên, lúc đó ta sẽ phải biết thứ tự ưu tiên của CSS để tùy biến tốt hơn.Thứ tự được ưu tiên trong CSS
CSS cục bộ » CSS nội tuyến » CSS ngoại tuyến » CSS của trình duyệt.
Lời kết:
Hi vọng bài viết này sẽ có ích cho bạn trong việc tùy biến và chỉnh sửa giao diện website. Nếu bạn không biết chút gì về css thì khó mà biến những ý tưởng trong đầu của bạn trở thành sự thật. Bài viết tiếp theo Minh Quy Design sẽ giới thiệu cho các bạn những thuộc tính cơ bản nhất trong css.Cảm ơn bạn đã ghé thăm Minh Quy Design.