[CSS] Bài 1 : CSS là gì ? Giới Thiệu CSS

1. CSS là gì ?

CSS là từ viết tắc của cụm từ "Cascading Style Sheet" được hiểu là ngôn ngữ định dạng trang web,CSS được tổ chức World Wide Web (W3C) giới thiệu vào năm 1996. CSS là một ngôn ngữ quy định cách trình bày của các thẻ HTML trên trang web. Là ngôn ngữ được sử dụng rất nhiều trong lập trình web, có thể nói CSS ra đời đã tạo nên một cuộc cách mạng.Đôi khi các bạn sẽ bối rối khi nhận thấy rằng các đoạn code mình viết hiển thị không giống nhau trên các trình duyệt khác nhau, CSS sẽ giúp các bạn giải quyết bài toán này.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 đó.

2. Thế Mạnh của CSS

Nếu bạn đã từng học qua HTML thì cũng biết HTML cũng hỗ trợ một số thuộc tính định dạng cơ bản cho text, picture, table, … nhưng nó không thật sự phong phú và chính xác như nhau trên mọi hệ thống. 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 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, nên bạn hoàn toàn có thể tự tin trang web của mình có thể hiển thị hầu như “như nhau” dù trên một hệ thống sử dụng Windows, Linux hay trên một máy Mac miễn là bạn đang sử dụng một phiên bản trình duyệt mới nhất. Sử dụng các mã định dạng trực tiếp trong HTML tốn hao nhiều thời gian thiết kế cũng như dung lượng lưu trữ trên đĩa cứng. Trong khi đó CSS đưa ra phương thức “tờ mẫu ngoại” giúp áp dụng một khuôn mẫu chuẩn từ một file CSS ở ngoài. Nó thật sự có hiệu quả đồng bộ khi bạn tạo một website có hàng trăm trang hay cả khi bạn muốn thay đổi một thuộc tính trình bày nào đó. Hãy thử tưởng tượng bạn có một website với hàng trăm trang và bạn muốn thay đổi font chữ hay màu chữ cho một thành phần nào đó. Đó thật sự sẽ là một công việc buồn chán và tốn nhiều thời gian. Nhưng với việc sử dụng CSS việc đó là hoàn toàn đơn giản cũng như là bạn có một trò ma thuật nào đó.

Ngoài ra, CSS còn cho phép bạn áp đặt những kiểu trình bày thích hợp hơn cho các phương tiện khác nhau như màn hình máy tính, máy in, điện thoại,… CSS được cập nhật liên tục mang lại các trình bày phức tạp và tinh vi hơn.

3.Cách Dùng CSS?

Trong CSS 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.
3.1 CSS cục bộ:
Chèn thuộc tính Css trực tiếp vào bên trong các thẻ mở HTML, cụ thể thuộc tính style. Phạm vi ảnh hưởng của CSS cục bộ là phạm vi của thẻ HTML được chèn CSS.
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>`

3.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.
Ví Dụ:

1<style>
2   h1,h2,h3 {font-size: 14px;}
3   p {color:blue;}
4</style>

3.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.

1<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

`1`	`<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ộ

`1`	`<p` `style="color="red">...</p>`

CSS nội tuyến có mã như sau

`1`	`p{` `color:` `green` `}`

CSS ngoại tuyến như sau

`1`	`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.

abcdasdasd

Thứ Hai, 26 tháng 8, 2013