Đối với dân IT thì chắc hẳn CSS đã không còn xa lạ vì nó giúp bạn tạo các trang web đẹp mắt, vậy ngôn ngữ CSS là gì? Chúng ta cùng tìm hiểu thêm về CSS, với một vài ví dụ cú pháp đơn giản dành cho bạn.
1.Ngôn ngữ CSS là gì?
CSS là viết tắt của Cascading Style Sheets với trọng tâm là “Style”. HTML được sử dụng để tạo và cấu trúc các thành phần trong trang web hoặc ứng dụng, phân chia các đoạn văn, heading, links, blockquotes,... Còn CSS quyết định kiểu tài liệu của bạn — tất cả bố cục trang, màu sắc và phông chữ đều được xác định với CSS. Hãy coi HTML là nền tảng (như mỗi ngôi nhà đều có phần thô cơ bản) và CSS là những lựa chọn thẩm mỹ.
2.Tại sao ngôn ngữ CSS lại cần thiết?
- Ngôn ngữ CSS giúp tách riêng phần định dạng ra khỏi nội dung trang web, để người thiết kế kiểm soát toàn bộ giao diện nhanh nhất và hiệu quả nhất. Bạn sẽ tiết kiệm công sức rất nhiều trong việc thiết kế giao diệ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ể.
- Một stylesheet thường sẽ được lưu trữ trong bộ nhớ cache của trình duyệt, và do đó có thể được sử dụng trên nhiều trang mà không cần tải lại, tăng tốc độ tải và giảm độ truyền dữ liệu qua mạng.
Dưới đây là hình ảnh của trang web No stylesheet và khi sử dụng ngôn ngữ CSS:
No stylesheet
Stylesheet1
Stylesheet2
Stylesheet3
Stylesheet4
3. Các cách nhúng CSS vào HTML:
3.1. 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ế. 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. Để 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.
Ví dụ:
1 <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
3.2. CSS nội tuyến
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. 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.
Ví dụ:
1
<style>
2
h1,h2,h3 {font-size: 14px;}
3
p {color:blue;}
4
</style>
3.3. CSS cục bộ
Là viết mã 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ụ:
1 <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>
4. Thứ tự ưu tiên trong ngôn ngữ CSS
Mỗi kiểu nhúng CSS vào HTML đều có ý nghĩa riêng của nó nên bạn không nên tùy tiện sử dụng lẫn lộn chúng. Đặc biệt khi làm việc nhóm nó sẽ gây ra những rắc rối không ngờ được do xung đột code.
Thứ tự ưu tiên sẽ 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
Cuối cùng, hi vọng bài viết này đem lại cho bạn những thông tin cơ bản, hữu ích về CSS. Mời các bạn tìm hiểu thêm về CSS trong các bài viết khác để hiểu rõ hơn về công cụ tuyệt vời dành cho web này nhé.
Nguồn: tổng hợp
Hình ảnh: tổng hợp
Có thể bạn quan tâm: 10 LỖI DỄ MẮC PHẢI KHI LÀM VIỆC VỚI JAVA
-------------------------------
JT1 - IT Recruitment Agency
Website: https://www.jt1.vn
Email: hi@jt1.vn
Điện thoại: +8428 6675 6685
Xem thêm các bài viết khác tại: https://www.jt1.vn/blog
Theo dõi chúng tôi tại: https://www.facebook.com/jt1asia/
