20 lời khuyên CSS hữu ích cho người mới bắt đầu

Ngày xưa, chúng ta phụ thuộc rất nhiều vào các nhà phát triển và lập trình viên để giúp cập nhật trang web, ngay cả khi đó chỉ là một lỗi nhỏ. Nhờ CSS và tính linh hoạt của nó, các kiểu có thể được trích xuất độc lập khỏi các mã. Giờ đây, với một số hiểu biết cơ bản về CSS, ngay cả một người mới cũng có thể dễ dàng thay đổi phong cách của một trang web.

Cho dù bạn quan tâm đến việc chọn CSS để tạo trang web của riêng mình hay chỉ để điều chỉnh giao diện blog của bạn một chút - luôn luôn tốt khi bắt đầu với các nguyên tắc cơ bản để có được nền tảng vững chắc hơn. Chúng ta hãy xem một số Mẹo CSS chúng tôi nghĩ rằng có thể hữu ích cho người mới bắt đầu. Danh sách đầy đủ sau khi nhảy.

1. Sử dụng reset.css

   Khi nói đến kết xuất kiểu CSS, các trình duyệt như Firefox và Internet Explorer có các cách xử lý khác nhau. reset.css Đặt lại tất cả các kiểu cơ bản, vì vậy bạn bắt đầu với một bảng định kiểu mới thực sự trống.

   Dưới đây là một vài thường được sử dụng reset.css khung - Yahoo đặt lại CSS, Thiết lập lại CSS của Eric Meyer, Tripoli

2. Sử dụng CSS tốc ký

   CSS tốc ký cung cấp cho bạn cách viết mã CSS ngắn hơn và quan trọng nhất - nó làm cho mã rõ ràng và dễ hiểu hơn.

   Thay vì tạo CSS như thế này

   .tiêu đề màu nền: #fff; hình nền: url (image.gif); lặp lại nền: không lặp lại; vị trí nền: trên cùng bên trái; 

   Nó có thể được viết tay ngắn như sau:

   .tiêu đề nền: #fff url (image.gif) không lặp lại trên cùng bên trái

   Hơn - Giới thiệu về tốc ký CSS, Thuộc tính tốc ký CSS hữu ích

3. Hiểu Lớp học và ID

   Hai bộ chọn này thường gây nhầm lẫn cho người mới bắt đầu. Trong CSS, lớp học được biểu thị bằng dấu chấm "." trong khi ID là một hàm băm '# ". Tóm lại ID được sử dụng cho phong cách độc đáo và không lặp lại, lớp học mặt khác, có thể được sử dụng lại.

   Hơn - Lớp so với ID | Khi nào nên sử dụng Class, ID | Áp dụng Class và ID cùng nhau

4. Sức mạnh của

5. danh sách liên kết a.k.a, rất hữu ích khi chúng được sử dụng đúng với
   hoặc là
   , cụ thể để tạo kiểu cho menu điều hướng.

   • Quên , thử

     Một trong những lợi thế lớn nhất của CSS là việc sử dụng

     để đạt được sự linh hoạt hoàn toàn về mặt kiểu dáng.

     không giống

     , trong đó nội dung bị 'khóa' trong vòng một

     Tế bào. Nói an toàn nhất bố trí có thể đạt được với việc sử dụng và kiểu dáng phù hợp, cũng có thể ngoại trừ nội dung bảng lớn. Hơn - Bàn đã chết, Bàn Vs. CSS, CSS vs bảng Công cụ gỡ lỗi CSS Luôn luôn tốt để có được bản xem trước tức thì của bố cục trong khi điều chỉnh CSS, nó giúp hiểu và gỡ lỗi các kiểu CSS tốt hơn. Dưới đây là một số công cụ gỡ lỗi CSS miễn phí mà bạn có thể cài đặt trên trình duyệt của mình: FireFox Web Developer, DOM Inspector, Internet Explorer Developer Thanh công cụ và Fireorms. Tránh chọn lọc thừa Đôi khi khai báo CSS của bạn có thể đơn giản hơn, có nghĩa là nếu bạn thấy mình viết mã như sau: ul li Lành ol li Lôi bảng tr td ' Chúng có thể được rút ngắn xuống chỉ li ' td ' Giải trình: sẽ chỉ tồn tại trong hoặc là và và sẽ chỉ ở bên trong Vì vậy, thực sự không cần thiết phải chèn lại chúng. Biết !quan trọng Bất kỳ phong cách nào được đánh dấu bằng !quan trọng sẽ được đưa vào sử dụng bất kể nếu có quy tắc ghi đè bên dưới nó. .trang màu nền: màu xanh! quan trọng; màu nền: đỏ; Trong ví dụ trên, màu nền: màu xanh sẽ được điều chỉnh vì nó được đánh dấu bằng !quan trọng, ngay cả khi có một màu nền: đỏ; bên dưới nó. !quan trọng được sử dụng trong trường hợp bạn muốn tạo kiểu mà không có gì ghi đè lên nó, tuy nhiên nó có thể không hoạt động trong Internet Explorer. Thay thế văn bản bằng hình ảnh Điều này thường được thực hiện để thay thế chức vụ từ một tiêu đề dựa trên văn bản đến một hình ảnh. Đây là cách bạn làm điều đó. h1 văn bản thụt lề: -9999px; nền: url ("title.jpg") không lặp lại; chiều rộng: 100px; chiều cao: 50px; Giải trình: văn bản thụt lề: -9999px; ném tiêu đề văn bản của bạn ra khỏi màn hình, thay thế bằng một hình ảnh được tuyên bố bởi lý lịch: … với một cố định chiều rộng và Chiều cao. Hiểu định vị CSS Bài viết sau đây cung cấp cho bạn một sự hiểu biết rõ ràng trong việc sử dụng định vị CSS - Chức vụ: … Hơn - Tìm hiểu định vị CSS trong mười bước CSS @ nhập khẩu đấu với Có 2 cách để gọi tệp CSS bên ngoài - tương ứng bằng cách sử dụng @ nhập khẩu và . Nếu bạn không chắc nên sử dụng phương pháp nào, đây là vài bài viết giúp bạn quyết định. Hơn - Sự khác biệt giữa @import và liên kết Thiết kế biểu mẫu trong CSS Các hình thức web có thể dễ dàng thiết kế và tùy chỉnh với CSS. Những bài viết sau đây cho bạn thấy làm thế nào: Hơn - Biểu mẫu không có bảng, Vườn mẫu, Kiểu dáng thậm chí nhiều điều khiển hình thức Lấy cảm hứng Nếu bạn đang tìm kiếm trang web dựa trên CSS được thiết kế độc đáo để lấy cảm hứng hoặc chỉ đơn giản là duyệt để tìm một số UI tốt, thì đây là một số trang web giới thiệu CSS mà chúng tôi khuyên dùng: Phối lại CSS CSS đẹp CSS ưu tú CSS Mania Rò rỉ CSS Giữ mã CSS sạch Nếu mã CSS của bạn lộn xộn, bạn sẽ kết thúc việc mã hóa trong sự nhầm lẫn và gặp khó khăn khi xem lại mã trước đó. Để bắt đầu, bạn có thể tạo thụt lề thích hợp, nhận xét chúng đúng cách. Hơn - 12 nguyên tắc giữ sạch mã của bạn, Định dạng mã CSS trực tuyến Đo lường kiểu chữ: px đấu với em Có vấn đề khi chọn sử dụng đơn vị đo lường px hoặc là em? Những bài viết sau đây có thể giúp bạn hiểu rõ hơn về các đơn vị typography. Bảng tương thích trình duyệt CSS Chúng ta đều biết mỗi trình duyệt có các cách hiển thị kiểu CSS khác nhau. Thật tốt khi có một tài liệu tham khảo, biểu đồ hoặc danh sách hiển thị toàn bộ khả năng tương thích CSS cho mỗi trình duyệt. Bảng hỗ trợ CSS: # 1, # 2, # 3, #4. Thiết kế nhiều lớp trong CSS Có vấn đề nhận được cột trái, giữa và phải để căn chỉnh đúng? Dưới đây là một số bài viết có thể giúp: Tìm kiếm Chén Thánh Cột giả Lý do hàng đầu khiến các cột CSS của bạn bị rối Hộp Litte (ví dụ) Bố cục nhiều cột trèo ra khỏi hộp Cột tuyệt đối Nhận một trình soạn thảo CSS miễn phí Các biên tập viên chuyên dụng luôn tốt hơn một notepad. Dưới đây là một số chúng tôi khuyên bạn nên: Hơn - CSS đơn giản, Sổ tay ++, Trình chỉnh sửa CSS kiểu Hiểu các loại phương tiện truyền thông Có một vài loại phương tiện khi bạn khai báo CSS với . in, chiếu và màn hình là một vài trong số các loại thường được sử dụng. Hiểu và sử dụng chúng theo những cách thích hợp cho phép người dùng tiếp cận tốt hơn. Bài viết sau đây giải thích cách xử lý các loại CSS Media. Hơn - Các loại CSS và phương tiện truyền thông, Các loại phương tiện truyền thông W3, Các loại phương tiện CSS, Các loại phương tiện CSS2 20 ứng dụng iPhone hữu ích dành cho nhà phát triển & thiết kế 20 công cụ SVG hữu ích cho đồ họa tốt hơn 20 phông chữ siêu nhẹ và thanh lịch dành cho nhà thiết kế web Bài viết tiếp theo 20 Tiện ích thanh bên Firefox hữu ích Bài báo trước 20 ứng dụng hữu ích để tận dụng tối đa Instagram