CSS là gì?

Trong bài viết này mình và các bạn sẽ cùng nhau tìm hiểu xem Css là gì? và cú pháp chung của Css .

Khái niệm về Css

Css là từ viết tắt của Cascading Style Sheet. Người ta dùng nó để tạo phong cách và định kiểu cho các tài liệu đc viếc bằng ngôn ngữ đánh dấu (điển nhình như HTML ). Nó sẽ cung cấp một tính năng để bổ xung cho HTML. Mặt khác nó sẽ kết hợp cùng với HTML để nhằm tạo ra một “phong cách” riêng cho một website và thay đổi về giao diện người dùng. Đặc điểm về kĩ thuật của Css được duy trì và và phát truyển bởi World Wide Web Consortium (W3C).

Những ưu điểm của Css

Css tiết kiệm thời gian: Bạn có thể chỉ viết Css một lần và sau đó sử dụng lại cùng một trang trong nhiều trang HTML. Đồng thời có thể xác định một kiểu cho từng thành phần HTML và áp dụng nó cho nhiều trang Web mà bạn muốn.

Css dúp load trang nhanh hơn:  Nếu bạn đang sử dụng Css, bạn không cần phải viết thuộc tính thẻ HTML mỗi lần. Chỉ cần viết một quy tắc của một thẻ và áp dụng nó cho tất cả các lần xuất hiện của thẻ đó. Vì vậy, ít mã hơn có nghĩa là thời gian tải xuống nhanh hơn.

Bảo trì dễ dàng: Để thực hiện thay đổi toàn cầu, chỉ cần thay đổi kiểu và tất cả các yếu tố trong tất cả các trang web sẽ được cập nhật tự động.

Phong cách vượt trội so với HTML: Css có một loạt các thuộc tính rộng hơn nhiều so với HTML. Vì vậy bạn có thể cung cấp cái nhìn tốt hơn nhiều cho trang HTML của mình so với các thuộc tính HTML.

Tương thích với nhiều thiết bị: Biểu định kiểu cho phép nội dung được tối ưu hóa cho nhiều loại thiết bị. Bằng cách sử dụng cùng một tài liệu HTML, các phiên bản khác nhau của trang web có thể được trình bày cho các thiết bị cầm tay như PDA và điện thoại di động hoặc để in.

Cú pháp của Css

Cú pháp chung  sẽ được bao gồm bởi 3 phần:

Selector(bộ chọn phần tử): Một selector sẽ là một thẻ HTML mà ở tại đó bạn sẽ áp dụng Style cho nó. Đó sẽ là một thẻ HTML bất kì như: thẻ div, thẻ span, thẻ p,…

Property(thuộc tính): Là property của một kiểu thuộc tính thuộc thẻ HTML. Một cách đơn giản nhất để nói thì thì tất cả thuộc tính trong HTML sẽ được chuyển thành các css property. Đó sẽ là color, border,…

Value: Là các giá trị gán cho các property. Ví dụ như color có thể có giá trị là Red, Green,…

Ở dưới đây là cú pháp chung:

cú pháp css

cú pháp css

Ở ví dụ bên trên, bộ chọn trỏ tới phần tử HTML là h1. H1 sẽ là phần tử mà chúng ta sẽ tạo style cho nó.

Khối khai báo Declaration (trong dấu ngoặc nhọn) sẽ chứa một hay nhiều khai báo và được phân tách bằng dấu chấm phẩy.

Mỗi khai báo sẽ bao gồm tên thuộc tính và một giá trị, chúng được phân tách bằng dấu hai chấm.

Ví dụ:

p{
font-size:30px;
text-align: center;
color: red;
}

Trong ví dụ trên, tất cả các phần tử <p> sẽ rộng 30px, căn giữa và với màu red.

Có thể bạn tham khảo:

Lời kết

Trong bài viết trên mình đã giới thiệu cho các bạn hiểu được sơ lược về Css để bạn biết rõ chúng ta đang học về cái gì và hiểu về ứng dụng của nó. Bài viết của mình xin được phép kết thúc tại đây, chúng ta sẽ được gặp lại nhau trong các serie tiếp theo tại codezi.pro

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *