Kiểu CSS của bạn là gì? - núm vú

Một trong những khía cạnh khó hiểu nhất khi làm việc với CSS (Cascading Style Sheets) là bạn có thể viết phong cách theo nhiều cách. Tương tự như văn xuôi, chỉ vì bạn hiểu các quy tắc cơ bản về ngữ pháp và chính tả không có nghĩa là bạn đã nắm được văn xuôi ngắn gọn.

Các nhà thiết kế CSS có kinh nghiệm dành nhiều thời gian để tạo ra một CSS ngắn, rõ ràng dễ dàng chỉnh sửa và cập nhật. Nhưng những người mới sử dụng CSS lại có xu hướng viết nhiều phong cách hơn là cần thiết và tạo phong cách dự phòng.

Không chỉ mã dự phòng mất nhiều thời gian hơn để tải xuống trình duyệt web, việc sửa đổi hoặc chỉnh sửa lại còn khó hơn nhiều. Và, mã của bạn dự phòng nhiều hơn, bạn càng có nhiều khả năng để chạy vào xung đột phong cách.

Dưới đây là 5 mẹo để viết những phong cách sạch sẽ và hiệu quả:

• Không bao giờ tạo ra hai phong cách khi một là đủ. Ví dụ: bạn có thể tạo một phong cách sử dụng bộ chọn thẻ cho tất cả các thẻ

  làm thay đổi gia đình phông chữ của các tiêu đề của bạn và sau đó tạo kiểu thứ hai sử dụng bộ chọn lớp mà bạn có thể áp dụng cho tiêu đề của mình để thay đổi màu.

  Nhưng sẽ hiệu quả hơn khi xác định cả hai màu sắc và kiểu chữ trong cùng một phong cách. Hãy nhớ rằng bạn luôn có thể quay lại và chỉnh sửa một phong cách để thêm quy tắc khác nếu bạn muốn thay đổi định dạng của kiểu.

• Mật mã thập lục phân. Bạn có thể định nghĩa màu sắc trong CSS bằng cách bao gồm toàn bộ mã màu thập lục phân. Tuy nhiên, khi bạn sử dụng mã màu lặp đi lặp lại, bạn chỉ cần bao gồm ba ký tự đầu tiên. Ví dụ #ffffff giống với #fff; cả hai sẽ tạo ra màu trắng.

• Sử dụng trang tính ngoài. Bạn có thể định nghĩa các kiểu trong một trang định kiểu bên trong ở đầu mỗi trang web, hoặc bạn có thể lưu các kiểu của bạn trong một tệp tin bên ngoài bằng. css và đính kèm tờ kiểu dáng đó vào tất cả các trang web của bạn. Kiểu dáng bên ngoài vốn có hiệu quả hơn bởi vì chúng cho phép bạn sử dụng cùng một phong cách trên bất kỳ hoặc tất cả các trang trong trang web của bạn.

  Ví dụ: nếu bạn xác định một phong cách làm cho tất cả các tiêu đề chính đậm, xanh dương và lớn, lưu kiểu đó trong một trang tính ngoài cho phép bạn sử dụng cùng một kiểu cho mỗi dòng tiêu đề. Sau đó, nếu bạn quyết định sau đó rằng bạn muốn thay đổi tiêu đề của mình thành màu xanh lá cây, bạn có thể thay đổi phong cách trong một bảng kiểu bên ngoài và thay đổi tất cả tiêu đề cùng một lúc.

  Nếu bạn đã lưu các kiểu trong một trang tính nội bộ, bạn sẽ phải chỉnh sửa kiểu dòng tiêu đề trong mỗi tệp.

• Phát triển một quy ước đặt tên cho phong cách của bạn. Mặc dù bạn có thể đặt tên các kiểu được tạo ra với các bộ chọn lớp hoặc bộ lọc ID bất cứ thứ gì bạn thích, tốt nhất bạn nên chọn các kiểu có ý nghĩa ngoài việc định dạng.Ví dụ: nếu bạn tạo một kiểu được gọi. redHeadlines và sau đó quyết định bạn muốn tất cả. redHeadlines được màu xanh, bạn hoặc là sẽ kết thúc với một phong cách tiêu đề màu xanh gọi. redHeadlines hoặc sẽ phải đổi tên phong cách.

  Và đổi tên phong cách bao gồm việc quay trở lại và áp dụng lại phong cách đó ở mọi nơi bạn có tiêu đề màu đỏ mà bạn muốn chuyển sang màu xanh, loại phủ nhận sức mạnh của phong cách để cập nhật toàn cầu. Để tránh vấn đề này, hãy tạo tên kiểu có liên quan đến vị trí hoặc tầm quan trọng của các phần tử, chẳng hạn như. mainHeadlines hoặc. sidebarHeadlines.

• * Kiểm tra và xác thực mã của bạn. Thậm chí các nhà thiết kế CSS có kinh nghiệm cũng mắc lỗi, đó là lý do tại sao Dreamweaver bao gồm rất nhiều công cụ tuyệt vời để thử nghiệm và xác nhận mã trong các trang web của bạn. Hãy chắc chắn rằng bạn kiểm tra CSS của bạn cho những sai lầm phổ biến.

  Sau đây là hai dịch vụ kiểm tra trực tuyến mà bạn có thể sử dụng để kiểm tra lỗi trong mã CSS của bạn. Chỉ cần nhập URL của bất kỳ trang web nào trên Internet vào trường địa chỉ của một trong hai trang này và nhấn vào nút Submit để nhận báo cáo hiển thị bất kỳ lỗi nào trong mã của bạn:

  • W3C CSS Validation Service

  • XHTML-CSS : Hãy Hợp lệ hoặc Học Die