Ngôn ngữ CSS là gì?

September 4, 2020

Đố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/

 

 

 

 

Please reload

Recent Posts

Please reload

banner-top-it-job-right.gif

Archive

Please reload

Tags

Please reload

Related Posts

Please reload

+84 28 6675 6685

Ho Chi Minh City, Vietnam

  • White Facebook Icon
  • White LinkedIn Icon

©2020 by JOBTOWN LTD