Cú pháp của CSS

28
1000

Sau khi đã hiểu sơ lược về CSS thì chúng ta cần phải biết cú pháp của CSS để hiểu được các cú pháp trong theme của bạn có nghĩa như thế nào. Hiểu được cú pháp của CSS sẽ là bước đầu tiên giúp bạn làm chủ CSS để có thể tạo theme hay chỉnh sửa theme cho blog theo ý của mình.

 

1. Cú pháp

Cú pháp của một CSS được tạo nên từ ba phần: Bộ chọn (seclector), Thuộc tính (property) và Giá trị (value). Và được viết theo chuẩn sau:

Bộ chọn {Thuộc tính: Giá trị} – selector {property: value}

– Bộ chọn: thường là các phần tử hay thẻ HTML mà bạn muốn chỉ định như: body, header, content, sidebar, footer, v.v..

– Thuộc tính và Giá trị: Thuộc tính là các tính chất mà bạn muốn chỉ định. Thuộc tính luôn kèm theo giá trị và chúng ngăn cách nhau bởi dấu hai chấm “:”.

Ví dụ:

Body {font: Arial}

Một bộ chọn có thể mang nhiều thuộc tính, và mỗi thuộc tính ngăn cách nhau bởi một dấu chấm phẩy “;”.

Ví dụ:

Body {

                font: arial;

                color: #D3D4D5;

                background: #3EDF42;

}

Nếu Giá trị là một từ dài để chỉ ra một tên nào đó, bạn phải đặt chúng vào trong dấu ngoặc kép.

Ví dụ:

P {font-family: “sans serif”}

 
2. Nhóm các Bộ chọn lại với nhau

Bạn có thể nhóm các Bộ chọn có cùng Thuộc tính lại với nhau để cho cú pháp ngắn gọn. Các bộ chọn được ngăn cách với nhau bởi dấu phảy “,”.

Ví dụ: Bạn nhóm các thành phần h1, h2, h3, h4 của Header có cùng màu Xanh và font chữ là Tahoma lại với nhau

h1, h2, h3, h4 {

                color: blue;

                font: tahoma;

}

3. Lời chú thích trong CSS

Bạn có thể thêm lời chú thích cho đoạn mã của bạn, nó sẽ giúp bạn biết đoạn mã đó thực hiện nhiệm vụ gì hoặc có tác dụng gì. Lời chú thích sẽ giúp bạn dễ dàng nhớ lại những gì mình đã viết trước đây. Lời chú thích này sẽ không được các trình duyệt hiển thị.

Một lời chú thích bắt đầu bằng một dấu “/*” và kết thúc bằng một dấu “*/”. Bạn có thể đặt đoạn chú thích vào bất cứ đâu bạn muốn.

Ví dụ:

/* Đây là Sidebar */

#sidebar {

                with: 300px;

                padding: 10px;

                font: Tahoma, Verdana;

}

Hoặc

#sidebar {

/* Đây là Sidebar */

                with: 300px;

                padding: 10px;

                font: Tahoma, Verdana;

}

 

Hoặc

#sidebar {

                with: 300px; /* Độ rộng của Sidebar */

                padding: 10px;

                font: Tahoma, Verdana;

}

28 BÌNH LUẬN

  1. Xin trả lời bạn vody2nhien,

    Đây là một blog chính hiệu, một blog chuyên nghiệp.

    Một trang web thường không có phần tương tác giữa người đọc và người viết. Còn một blog thì có phần tương tác giữa người đọc và người viết.

    Đây là blog sử dụng platform của WordPress. Bạn có thể tham khảo thêm tại đây: https://www.phamen.com/tao-blog-voi-ten-mien-rieng/

  2. Cho mình hỏi. Trong blog chẳng hạn như blogger muốn tạo các phần khác nhau của 1 blog thì làm như thế nào. Như Home,About phamen, bản quyền … ở chỗ trên cùng. Và nếu mình muốn gom các bài cùng một chủ đề vào một chỗ trên thanh menu thì làm sao. Thanks

  3. Muốn tạo được 1 theme hoàn chỉnh, trước tiên bạn cần biết cách tạo 1 layout.

    1 Layout thường bao gồm: header, content, sidebar và footer.

    Nếu bạn muốn làm 1 header có phần nagivation như của Phamen, trước tiên bạn cần phải biết về các CSS ID và CSS classes để định dạng cho chúng theo ý của mình.

  4. Cho mình hỏi làm sao để tạo nhạc tự động trong mash, tức là ng ta vô và nó tự động chạy nhạc nhưng ko hiển thị biểu tượng nghe!!!Plz!Thanks!!1

  5. Bạn hãy vào trang nghe nhạc trực tuyến, copy lấy đoạn code để chèn nhạc vào blog, sau đó bạn chèn đoạn code này vào Module My Stuff của Mash, khi đó bất cứ ai vào Mash của bạn thì nhạc cũng sẽ tự chơi mà không hiển thị biểu tượng.

  6. Cho mình hỏi xóa comment và post comment trong blogger kiểu gì. Việt post comment vào blog của mình có khác với 1 người khác post ko. Mình mới dùng blogger nên chưa biết nhiều. Thanks.

  7. Bạn vào TAB Post trên Dashboard của Blogger và bạn sẽ thấy 2 tab nhỏ bên dưới là Edit post và Moderate comments.

    – Edit post: giúp bạn chỉnh sửa lại bài viết hoặc bạn có thể xóa bài viết bằng nút “Delete” ở bên cạnh
    – Moderate comments cũng thế, nó giúp bạn chỉnh lại các comment hoặc xóa chúng.

    Chúc bạn thành công!

  8. Lỗi của Vietnamblogger là màu của link trùng với màu của background nên các link bên sidebar bị ẩn.

    Bạn hãy tìm trong theme, phần khai báo CSS, hãy tìm câu lệnh nào có chữ: A link, a visited, a hover và chuyển mã màu cho link đi.

  9. Anh ơi blog của em ở trang chủ, bài post nó dài ra lắm giờ làm sao để nó thu ngắn lại từng bài rồi khi nhấm read more thì mới vào xem đầy đủ. Anh chỉ em nhé. Anh mail cho em cũng được. Cám ơn anh

  10. Chào anh !

    Em có sử dụng phần mềm sothink tree menu để tạo menu drop-down nhưng ko biết cách để chèn vào wordpress, có thử làm theo hướng dẫn thông thường cho các website nhưng vào WP nó ko hiển thị được. Anh đã sử dụng qua phần mềm đó chưa ạ? Nếu được anh có thể hướng dẫn cho em không ạ ?

  11. Phamen men!
    đã lâu kg thấy Phamen online. Chắc Phamen bận phải kg?Nếu có thể Phamen có bài viết về CSS ID và CSS classes cho cộng đồng mạng thì quá tốt.Nhờ Phamen mà tôi có thể lập Blog wp cho riêng mình.Lời cám ơn chân thành gởi đến Phamen..

  12. HI anh phamen, em muốn hỏi làm sao để giao diện Wp rộng ra nhỉ, em dùng màn hình 16:9 nên nhìn thấy trống trải quá, có câu lệnh nào mà website tự dãn theo màn hình ko ạ, anh chỉ em câu lệnh CSS là body rộng ra để xem ảnh cho đễ ấy 😀 thanks anh

  13. Em cũng đang mò mẫm mấy cái này, chỉ là tự vọc thôi, cám ơn phanmem đã chia sẻ thông tin. Tìm mấy screen-cast nhưng mà tiếng anh khó nghe quá!
    Thanks anyway!