Thế mạnh của CSS
- Tách riêng phần định dạng ra khỏi nội dung trang web.
- CSS 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. Nó giúp bạn tiết kiệm công sức rất nhiều trong việc thiết kế giao diện.
- 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, giúp bạ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 cũng đượ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 nhiều lần (cache), do đó giúp trang web được load nhanh hơn.
Các cách khai báo CSS trong tài liệu HTML.
Chúng ta có 3 cách để khai báo CSS trong tài liệu HTML là CSS cục bộ, CSS nội tuyến và CSS ngoại tuyến:
1. CSS cục bộ
Viết mã CSS trực tiếp trong thẻ HTML, cụ thể là trong thuộc tính style, CSS cục bộ chỉ có tác dụng trong thẻ HTML được khai báo.
Ví dụ;
<p style="font-size: 16pt; color: blue">Đoạn văn bạn sẽ bị ảnh hưởng khi khai báo CSS cục bộ.</p>
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> và đặt trong phần <head> của tài liệu HTML.
Khi sử dụng CSS nội tuyến nó sẽ có tác dụng lên file html được khai báo nhưng không ảnh hưởng đến các file khác trong cùng một website.
<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 tài liệu HTML, người thiết kế chỉ cần viết một file CSS duy nhất mà sử dụng nhiều lần trong ứng dụng của họ.
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 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 này thay vì phải chỉnh sửa tất cả các file .html trong ứng dụng. Đế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 style.css chẳng hạn, sau đó chèn đoạn code sau trong phần <head></head> của trang web.
<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 cần nắm bắt đến thứ tự ưu tiên của CSS.
Thứ tự ưu tiên trong CSS như sau:
CSS cục bộ » CSS nội tuyến » CSS ngoại tuyến » CSS mặc định của trình duyệt.
Để hiểu hơn về thự tự ưu tiên của CSS ta xét ví dụ sau:
Giả sử trong tài liệu HTML ta có mã HTML như sau
<p>Nội dung sẽ được hiển thị theo khai báo của CSS</p>Và khai báo CSS như sau
CSS cục bộ
<p style="color:red">Nội dung sẽ được hiển thị theo khai báo của CSS</p>CSS nội tuyến có mã như sau
p{ color: green }CSS ngoại tuyến như sau
p{ color: black }
Thì lúc này đoạn văn bản được hiện thị với màu đỏ. Bởi vì ta thấy thành phần được khai báo CSS cục bộ lên sẽ được ưu tiên hơn CSS nội tuyến và CSS ngoại tuyến.
Tương tự như thế, khi ở ví dụ trên nếu ta không khai báo CSS cục bộ thì đoạn văn bản sẽ được hiện thị là màu xanh. Bởi vì CSS nội tuyến được ưu tiên hơn, tiếp theo nếu CSS nội tuyến không được khai báo thì CSS ngoại tuyến mới có tác dụng.
Sử dụng CSS như thế nào?
#id_ {Bạn hãy chú ý đoạn code trên, các thuộc tính quy định màu nền (background), màu chữ (color), phông chữ (font), cở chữ (font-size)... chính là css được đặt cho thành phần chứa Class (.class_) và ID (.id_). Các bạn có thể tìm hiểu thêm thông tin về ID và Class trong CSS-HTML
background:#f4f4f4;
color:#000000;
font:tahoma;
font-size:14px;
}
.class_ {
background:#f4f4f4;
color:#000000;
font:tahoma;
font-size:14px;
}
Để css phát huy tác dụng, chúng ta sẽ phải tạo ra 1 module đặt trong thẻ <body> và </body>
# Ví dụ:
<div class='Ten-Class'> Nội dung hiển thị bên trong</div>
<div id='Ten-Id'> Nội dung hiển thị bên trong</div>
Sự khác biệt lớn nhất giữa class và Id là Id là duy nhất, còn Class thì có nhiều. Trong một trang web không thể tồn tại hai Id có cùng tên. Nhưng có thể sử dụng nhiều css có cùng tên cho các thành phần khác nhau.
Một số thuộc tính cơ bản
Có rất rất nhiều thuộc tính trong CSS như: font chữ, màu sắc, khoảng cách, đường viền...Dưới đây là 1 số thuộc tính phổ biến và sẽ đi vào cụ thể từng thuộc tính cụ thể trong các bài viết sau:
Background (Màu nền hoặc hình nền)
Font (Kiểu chữ)
Color (Màu chữ)
Text
List-style
Border (Đường viền)
Border-radius (Bo góc)
Height - Width (Chiều cao - chiều rộng)
Line-height (Chiều cao dòng chữ)
Margin và Padding
Float và Clear
Display
Z-index
Sử dụng !important
Còn cập nhật...
CSS thì vô vàn, ở trên chỉ là những thuộc tính đơn giản hay sử dụng mà tôi muốn giới thiệu đến các bạn! Nếu các bạn muốn tìm hiểu thêm, hãy vào website sau để tìm thêm tài liệu nhé! Link: w3schools.com
Không có nhận xét nào:
Đăng nhận xét