Bài 09: Tổng quan về CSS
1. Tổng quan về css CSS là viết tắt của cụm từ “Cascading Style Sheet” , nó là một ngôn ngữ quyết định cách trình bày của thẻ HTML trên trang web CSS quy định cách hiển thị nội dung của các thẻ HTML trên các trình duyệt gần như giống nhau, bằng cách quy định các thuộc tính cho ...
1. Tổng quan về css
- CSS là viết tắt của cụm từ “Cascading Style Sheet” , nó là một ngôn ngữ quyết định cách trình bày của thẻ HTML trên trang web
- CSS quy định cách hiển thị nội dung của các thẻ HTML trên các trình duyệt gần như giống nhau, bằng cách quy định các thuộc tính cho thẻ HTML đó.
- Mỗi một thuộc tính trong CSS sẽ định dạng một thành phần nhất định của thẻ HTML e.g như: font của chữ, đường viền, màu nền, căn chỉnh hình ảnh v.v..
2 .Tại sao lại sử dụng css trong thiết kế website
Css có thể tùy chỉnh bố cục định dạng hiển thị nội dung,màu sắc căn chỉnh màu nền,đường viền,đổ bóng… cho các thẻ html.
Nếu 1 website mà chỉ làm bằng html không sử dụng css thì website đó nhìn sẽ rất thô.Bạn có thể tưởng tượng nó như 1 cái nhà mà bỏ hết lớp vữa chát, lớp sơn bên ngoài chỉ còn lại mỗi bộ khung và gạch vữa.
CSS cung cấp cho bạn 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 cao nhất trong kết hợp các thuộc tính giúp mang lại hiệu quả
Ngoài ra, hiện tại CSS đã được hỗ trợ bởi tất cả các trình duyệt khác nhau.
3. Cách chèn css vào website
Trên thực tế thì chúng ta có tới 3 cách được sử dụng chèn CSS và website.
Cách 1: Chèn nội dung CSS vào trong cặp thẻ <style> </style> trong phần <head></head> của trang web.
<html>
<head>
<title>Tổng quan về CSS</title>
<style>
body{ background:red; }
h1{ color:blue; font-size:18px; }
</style>
</head>
<body>
<h1>Bài học Tổng quan về css</h1>
</body>
</html>
Cách 2: Chèn nội dung CSS vào trực tiếp vào thẻ mở html thông qua thuộc tính style.
<html>
<head>
<title>Tổng quan về css</title>
</head>
<body>
<h1 style="color:blue; font-size:18px;">Bài học Tổng quan về CSS</h1>
</body>
</html>
Cách 3: Lưu nội dung css ra 1 file riêng có phần mở rộng là .css và chèn file này vào website thông tin thẻ <link>,thường file css được chèn trong cặp thẻ <head></head>
Sau khi tạo file có tên style.css với nội dung ví dụ như sau:
body{ background:red; }
h1{ color:blue; font-size:18px; }
Lúc này chúng ta sẽ chèn file này vào website như sau.
<html>
<head>
<title>Tổng quan về css</title>
<link rel="stylesheet" href=“/style.css" type="text/css" />
</head>
<body>
<h1>Bài học Tổng quan về CSS</h1>
</body>
</html>
Trong ba cách trên thì cách nào nó cũng cho bạn một kết quả như bạn mong muốn. Tuy nhiên mỗi cách đều có những ưu và nhược điểm riêng. Nhưng tóm lại thì theo mình cách ba là hoàn hảo nhất vì giữa các page có thể định nghĩa các class. Gom nhóm được các thẻ ở các page khác nhau có những thuộc tính giống nhau.
