Thiết Kế Web

CSS là gì? Tổng quan về CSS

Bài trước chúng ta đã Tìm hiểu thẻ DIV cơ bản và nâng cao và tiếp theo bài viết hôm này chúng ta sẽ đi tìm hiểu CSS là gì? Tổng quan về CSS. Như các bạn đã biết khi …

Bài trước chúng ta đã Tìm hiểu thẻ DIV cơ bản và nâng cao và tiếp theo bài viết hôm này chúng ta sẽ đi tìm hiểu CSS là gì? Tổng quan về CSS. Như các bạn đã biết khi một layout web được lên hoàn chính thì đó là sự kết hợp của nhiều nhân tố, trong đó phần CSS là một nhân tố không thế thiếu được. Bây giờ chúng đã sẽ bắt đầu tìm hiếu nó nhé.

1.CSS là gì ?

CSS là viết tắt của cụm từ “Cascading Style Sheet” , nó 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ữ đang đượ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. Cách chèn CSS vào trang HTML:

Chúng ta có 3 cách để đưa nội dung của CSS vào trang web như sau:

Cách 1: Chèn nội dung CSS vào trong cặp thẻ <style> </style> trong phần <head></head> của trang web.

Ví dụ:

Cách 2: Chèn trực tiếp vào bên trong thẻ HTML.

Chèn trực tiếp CSS vào bên trong các thẻ mở của HTML. Nếu có nhiều thuộc tính cần quy định, ta ngăn cách giữa chúng bằng khoảng trắng.

Cách 3: Liên kết với một file *.css bên ngoài.

Đây là cách được dùng nhiều nhất trong sử dụng CSS vì tính tiện dụng và linh hoạt của nó. Giả sử, bạn có một website gồm hàng trăm trang, khi bạn muốn thay đổi một chút cách trình này của website, thay vì gạch cạch đi gõ từng trang một, bạn chỉ cần sửa file CSS bên ngoài một chút, hàng trăm trang web của bạn đều được thay đổi.

Cú pháp: Thực hiện liên kết bằng thẻ <link> ( Không có tag đóng ), theo cú pháp sau:

<link rel=”stylesheet” href=”Đường dẫn đên file .css” type=”text/css” />

Tag này được đặt trong cặp tag <head></head> của trang web, và không cần đặt trong tag <style></style>

Nếu bạn đặt file *.css cùng thư mục với trang web, thì trong thuộc tính href bạn chỉ cần viết: href=”<ten_file_css.css”.

Nếu file *.css không cùng thư mục với trang web: Bạn cần chỉ trong đường dẫn tuyệt đối tới file *.css đó trong thuộc tính href

Ví dụ:

Tổng kết: Để làm được một layout hoàn chính thì trước tiên các bạn phải nắm vững các kiến thức về HTML và CSS. Ở bài sau mình sẽ đi sâu vào các câu lệnh trong CSS và thí dụ minh họa kèm theo. Chúc các bạn thành công !

Thẻ:,
comments powered by Disqus
Powered by HTH Company