Cấu trúc trong CSS
Học Css bắt đầu với Hello, World
Tự làm quen với các bài tập và gửi đoạn code đầu tiên của bạn bằng cách hoàn thành bài đầu tiên "Hello, World!".
Luyện tập

    Trong hướng dẫn này, bạn sẽ học cách xác định các quy tắc CSS trong biểu định kiểu của mình.

Cú pháp của CSS

    Biểu định kiểu CSS bao gồm một bộ quy tắc được trình duyệt web diễn giải và sau đó được áp dụng cho các thành phần tương ứng như đoạn văn, tiêu đề, v.v. trong tài liệu.

    Một quy tắc CSS có hai phần chính, một bộ chọn và một hoặc nhiều phần khai báo:

Minh họa cú pháp bộ chọn CSS

    Bộ chọn chỉ định phần tử hoặc các phần tử nào trong trang HTML mà quy tắc CSS áp dụng.

    Trong khi đó, các khai báo trong khối xác định cách các thành phần được định dạng trên trang web. Mỗi khai báo bao gồm một thuộc tính và một giá trị được phân tách bằng dấu hai chấm (:) và kết thúc bằng dấu chấm phẩy (;), và các nhóm khai báo được bao quanh bởi dấu ngoặc nhọn {}.

    Thuộc tính là thuộc tính kiểu bạn muốn thay đổi; chúng có thể là phông chữ, màu sắc, nền, v.v. Mỗi thuộc tính có một giá trị, ví dụ thuộc tính màu có thể có giá trị blue hoặc #0000FF v.v.

    Để làm cho CSS dễ đọc hơn, bạn có thể đặt một khai báo trên mỗi dòng, như sau:

Ví dụ

h1 {
    color: blue;
    text-align: center;
}

    Trong ví dụ trên h1 là một thẻ, color text-align là các thuộc tính CSS, và giá trị đã cho blue center là các giá trị tương ứng của các thuộc tính này.

 

    Lưu ý: Một khai báo CSS luôn kết thúc bằng dấu chấm phẩy ";" và các nhóm khai báo luôn được bao quanh bởi dấu ngoặc nhọn "{}".

Viết comment trong CSS

    Comment thường được thêm vào với mục đích làm cho mã nguồn dễ hiểu hơn. Nó có thể giúp nhà phát triển khác (hoặc bạn trong tương lai khi bạn chỉnh sửa mã nguồn) hiểu những gì bạn đang cố gắng thực hiện với CSS. Comment có ý nghĩa quan trọng đối với các lập trình viên nhưng bị các trình duyệt bỏ qua.

    Một comment CSS bắt đầu bằng /* và kết thúc bằng */, như minh họa trong ví dụ bên dưới:

Ví dụ

/* This is a CSS comment */
h1 {
    color: blue;
    text-align: center;
}
/* This is a multi-line CSS comment 
that spans across more than one line */
p {
    font-size: 18px;
    text-transform: uppercase;
}

    Bạn cũng có thể comment một phần mã CSS của mình cho mục đích gỡ lỗi, như được hiển thị ở đây:

Ví dụ

h1 {
    color: blue;
    text-align: center;
}
/*
p {
    font-size: 18px;
    text-transform: uppercase;
}
*/

Phân biệt chữ hoa chữ thường trong CSS

    Tên thuộc tính CSS và nhiều giá trị không phân biệt chữ hoa chữ thường. Trong khi đó, bộ chọn CSS thường phân biệt chữ hoa chữ thường, chẳng hạn, class .maincontent không giống với .mainContent.

    Do đó, để an toàn hơn, bạn nên cho rằng tất cả các thành phần của quy tắc CSS đều phân biệt chữ hoa chữ thường.

    Bạn sẽ tìm hiểu về các loại bộ chọn CSS khác nhau trong chương tiếp theo .

 

 

Một số bài viết liên quan
Devsne VN 1187 lượt xem

CSS Tutorials: Introduction to CSS

Devsne VN 5015 lượt xem

CSS Specificity là gì vậy?

Devsne VN 2377 lượt xem

Exploring the Benefits of Using Tailwind CSS

Devsne VN 3502 lượt xem

[HTML + CSS] Xây Dựng Một Slide Ảnh - Carousel - Đơn Giản

Phương Thảo 13611 lượt xem

Tạo profile người dùng bằng HTML, CSS cực đẹp

Phương Thảo 3889 lượt xem

Tạo animation cánh hoa rơi bằng HTML, CSS

Devsne VN 4077 lượt xem

CSS gạch chân thẻ a với thuộc tính box-shadow

Devsne VN 8972 lượt xem

The Ultimate Guide to CSS Flexible Box (Flexbox)

Devsne VN 1683 lượt xem

CSS breadcrumbs: một số shapes có thể có ích cho bạn

Devsne VN 3198 lượt xem

Hướng dẫn in PDF từ mã HTML, CSS và JAVASCRIPT