Menu

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

,

 

Xem thêm Học CSS căn bản

 

CSS là gì?

CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (ví dụ như HTML). Bạn có thể hiểu đơn giản rằng, nếu HTML đóng vai trò định dạng các phần tử trên website như việc tạo ra các đoạn văn bản, các tiêu đề, bảng,…thì CSS sẽ giúp chúng ta có thể thêm một chút “phong cách” vào các phần tử HTML đó như đổi màu sắc trang, đổi màu chữ, thay đổi cấu trúc,…rất nhiều.

html-css-webpage

Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn, vùng chọn có thể là tên một thẻ HTML, tên một ID, class hay nhiều kiểu khác. Sau đó là nó sẽ áp dụng các thuộc tính cần thay đổi lên vùng chọn đó.

Tác dụng của CSS

  • Hạn chế tối thiểu việc làm rối mã HTML của trang Web bằng các thẻ quy định kiểu dáng (chữ đậm, chữ in nghiêng, chữ có gạch chân, chữ màu), khiến mã nguồn của trang Web được gọn gàng hơn, tách nội dung của trang Web và định dạng hiển thị, dễ dàng cho việc cập nhật nội dung.
  • Tạo ra các kiểu dáng có thể áp dụng cho nhiều trang Web, giúp tránh phải lặp lại việc định dạng cho các trang Web giống nhau.
Xem thêm   Tìm hiểu về thư viện animate.css

Cấu trúc một đoạn CSS

Cách học CSS hiệu quả

Một đoạn CSS bao gồm 4 phần như thế này:

01
02
03
04
05
vùng chọn {
   thuộc tính : giá trị;
   thuộc tính: giá trị;
   .....
}

Nghĩa là nó sẽ được khai báo bằng vùng chọn, sau đó các thuộc tính và giá trị sẽ nằm bên trong cặp dấu ngoặc nhọn {}. Mỗi thuộc tính sẽ luôn có một giá trị riêng, giá trị có thể là dạng số, hoặc các tên giá trị trong danh sách có sẵn của CSS. Phần giá trị và thuộc tính phải được cách nhau bằng dấu hai chấm, và mỗi một dòng khai báo thuộc tính sẽ luôn có dấu chấm phẩy ở cuối. Một vùng chọn có thể sử dụng không giới hạn thuộc tính.

Sử dụng CSS

Có 3 cách để sử dụng CSS.

  • “Inline CSS”: Áp dụng trực tiếp trên một đối tượng nhất định bằng thuộc tính style:
<span style="font-weight:bold; text-decoration:underline; color:#FF0000;">Đoạn text cần in đậm, gạch chân, màu đỏ</span>
  • “Internal CSS”: Đặt CSS ở đầu trang Web để áp dụng kiểu dáng cho toàn bộ trang ấy, khi đó chỉ cần đặt đoạn CSS vào trong cặp thẻ <style> rồi đặt vào trong phần header của Web (giữa <head> và </head>):
<style type="text/css">body {font-family:verdana; color:#0000FF;} /* Kiểu chữ trong trang Web là "Verdana", màu chữ thông thường là màu xanh dương */</style>
  • “External CSS”: Đặt các thuộc tính CSS vào một tệp tin riêng biệt (*.css), khi đó có thể tham chiếu đến từ nhiều trang Web khác nhau:
  • Ví dụ về nội dung tệp style.css:
body {font-family:verdana; color:#0000FF;}
  • Tham chiếu tới tệp tin CSS trên từ trang Web bằng đoạn mã (mã có thể nằm ngoài thẻ <head>):
<link rel="stylesheet" type="text/css" href="style.css"/>

Mức độ ưu tiên của CSS

Mức độ ưu tiên khi áp dụng CSS như sau:

External CSS < Internal CSS < Inline CSS

Có thể hiểu rằng mã CSS nào “gần” với tag nhất thì sẽ được ưu tiên áp dụng hơn cả.

Xem thêm   Học Javascript cơ bản và nâng cao

Tham khảo: thachpham.com, vi.wikipedia.org

Related Posts

1 Comment

  1. Học CSS căn bản - Hành trang Lập trình blog
    27/10/2017 @ 6:43 am

    […] CSS là 1 cách tiếp cận với việc xây dựng website. Bạn không cần biết cách lập […]

Leave a Reply