Sunday, 2 June 2013

CSS-Cách chèn code vào 1 trang web

Chào cả nhà hôm nay mình có nghịc twitter bootstrap toét cả mắt do chưa chỉnh customize nên toàn màu trắng là màu trắng nhưng cái này viết css ah nhầm giúp làm giao diện nhanh ghê!!!

Đi vào bài hôm nay mình sẽ trình bày về các cách để chèn code css vào một trang web.
Có 3 cách để chèn code vào trang web :

  • Cục bộ: Viết ngay code css trên ngay thành phần cần tác động thông qua thuộc tính style= " property1: value1 ; property2 : value2";.... Phạm vi tác động nhỏ , chỉ thẻ chứa nó mới có style đó.          
           Ví dụ: style="text-transform:uppercase; color: red ; "
          
khi add vào thẻ h1 với chứ tôi yêu vn, kết quả sẽ là: Tôi yêu VN


  • Chèn trực tiếp vào trang web: code css sẽ đươc đặt vào trong cặp thẻ style  và đặt trong thẻ head của code html. Phạm vi tác động của cách viết này rộng hơn so với cách cục bộ. Ảnh hưởng tới file html được nhúng code vào.
  • Liên kết tới một file biệt lập: chúng ta viết code như cách thứ 2 nhưng sẽ viết ra 1 file riêng và đuôi là file.css rồi cũng nhúng vào ở trong thẻ head. theo cú pháp: 
        < link href="file.css" rel="stylesheet" type="text/css"/ >;
 
Đây là cách được sử dụng rộng rãi nhất: thuận tiện cho việc sửa chữa và nó ảnh hưởng lên toàn bộ trang web chứ ko chỉ riêng 1 file html. Dùng firefox dùng tiện ích webdeverlop... dùng edit css bạn sẽ thấy đc phần css liên kết ngoại. Thường 1 trang web đẹp thì code rất kinh khủng :)).

Hôm nay bị buồn nên viết thế này thôi sơ sài quá. Lần sau mình sẽ trình bày thẳng vào 1 phần nào đó trên trang web cụ thể lần sau sẽ là navbar: thanh menu...

Quên mất không nói về phần quan trọng thứ tự tranh chấp css Cục bộ> chèn trực tiếp> Liên kết tới file biệt lập. Tức là cả 3 kiểu này cùng đc sử dụng thì xét những thuộc tính giống nhau thì sẽ chỉ giữ lại thuộc tính cục bộ đc áp vào selector, còn thuộc tính chung trên 2 kiểu còn lại sẽ bị gạch gạch :)), KO chung thuộc tính thì chả ảnh hưởng gì cả.