Hỗ trợ trực tuyến

  • (Bùi Trọng Bằng)

Thống kê

  • truy cập   (chi tiết)
    trong hôm nay
  • lượt xem
    trong hôm nay
  • thành viên
  • Thành viên trực tuyến

    0 khách và 0 thành viên

    DANH NGÔN MỖI NGÀY

    Gốc > Tìm hiểu code CSS-Java >

    Vị trí đặt code CSS

    Phóng to || Thu nhỏ
     
       
     
     

    Chúng ta có ba cách khác nhau để nhúng CSS vào trong một tài liệu HTML

    Nội tuyến (kiểu thuộc tính)
    Đây  là một phương pháp nguyên  thủy nhất để nhúng CSS vào một  tài  liệu HTML  bằng  cách  nhúng vào  từng  thẻ HTML muốn  áp dụng.   dĩ nhiên  trong trường hợp này chúng ta sẽ không cần selector trong cú pháp.
    Lưu ý: Nếu bạn muốn áp dụng nhiều thuộc tính cho nhiều thẻ HTML khác nhau thì không nên dùng cách này.
    Ở ví dụ sau chúng ta sẽ tiến hành định nền màu trắng cho trang màu chữ xanh lá cho đoạn văn bản như sau:

    1.<html>
    2.<head>
    3.<title>Ví dụ</title>
    4.</head>
    5.<body style=”background-color=#FFF;”>
    6.<p style=”color:green”>^_^ Welcome To My Blog ^_^</p>
    7.</body>
    8.</html>
    Bên trong (thẻ style)
    Thật ra nếu nhìn kỹ chúng ta cũng nhận ra đây chỉ là một phương cách thay thế cách  thứ nhất bằng cách rút  tất cả các  thuộc  tính CSS vào  trong  thẻ style  (để tiện cho công tác bảo trì, sửa chữa ấy mà).
    Cũng ví dụ làm trang web có màu nền trắng, đoạn văn bản chữ xanh lá, chúng ta sẽ thể hiện như sau:

    01.<html>
    02.<head>
    03.<title>Ví dụ</title>
    04.<style type=”text/<b style="color: white; background-color: rgb(0, 170, 0);">css</b>”>
    05.body { background-color:#FFF }
    06.p { color:#00FF00 }
    07.</style>
    08.</head>
    09.<body>
    10.<p>^_^ Welcome To My Blog ^_^</p>
    11.</body>
    12.</html>

    Lưu ý: Thẻ style nên đặt trong thẻ head.
    Đối với những  trình duyệt cũ, không  thể nhận ra  thẻ <style>. Theo mặc định,  thì khi một  trình duyệt không nhận  ra một  thẻ  thì nó  sẽ hiện  ra phần nội dung chứa trong thẻ. Như ở ví dụ trên, nếu trình duyệt không hỗ trợ thẻ style thì 2 dòng CSS:
    body {background-color:#FFF } p { color:#00FF00 }  sẽ hiện  ra  trên  trình duyệt.
    Để tránh tình trạng này, bạn nên đưa vào thêm dấu <!– ở trước và –> ở sau khối code CSS. Như ví dụ trên sẽ viết lại là:


    1.<style type=”text/<b style="color: white; background-color: rgb(0, 170, 0);">css</b>”>
    2.<!--  body { background-color:#FFF }
    3.p { color:#00FF00 }  -->
    4.</style>

    Bên ngoài (liên kết với một file CSS bên ngoài)
    Tương  tự như cách 2 nhưng  thay vì đặt  tất cả các mã CSS  trong  thẻ  style chúng ta sẽ đưa chúng vào trong một file CSS (có phần mở rộng .css) bên ngoài liên kết nó vào trang web bằng thuộc tính href trong thẻ link. Đây là cách làm được khuyến cáo, nó đặc biệt hữu ích cho việc đồng bộ hay bảo trì một website lớn sử dụng cùng một kiểu mẫu. Các ví dụ trong sách này cũng được trình bày theo kiểu này.
    css2
    Nào bây giờ chúng ta hãy mở Notepad lên thử thực hiện theo ví dụ sau:
    Đầu tiên chúng ta sẽ tạo ra một file vidu.html có nội dung như sau:

    01.<html>
    02.<head>
    03.<title>Ví dụ</title>
    04.<link rel=”stylesheet” type=”text/<b style="color: white; background-color: rgb(0, 170, 0);">css</b>” href=”style.<b style="color: white; background-color: rgb(0, 170, 0);">css</b>” />
    05.</head>
    06.<body>
    07.<p>^_^ Welcome To My Blog ^_^</p>
    08.</body>
    09.</html>
    10.Sau đó hãy tạo một file style.<b style="color: white; background-color: rgb(0, 170, 0);">css</b> với nội dung:
    11.body {
    12.background-color:#FFF
    13.}
    14.p {
    15.color:#00FF00
    16.}

    Hãy đặt 2 tập tin này vào cùng một thư mục, mở file vidu.html trong trình duyệt của bạn và xem thành quả.

    Lưu ý:
    Để lưu 1 file với 1 đuôi khác .txt trong Notepad chúng ta chọn Save as type là All Files. Có  thể chọn Encoding  là UTF-8, nếu bạn chú  thích CSS bằng  tiếng Việt.
    Trong CSS chúng ta còn có thể sử dụng thuộc tính @import để nhập một tập tin CSS vào CSS hiện hành. Cú pháp: @import url(link)

    Theo wordpressvn

    Bookmark and Share
    Nhắn tin cho tác giả
    Cao Bằng @ 11:03 13/10/2009
    Số lượt xem: 1238
    Số lượt thích: 0 người
    Avatar

    Vị trí đặt code CSS

    Avatar
    Chào 3 khách và 3 thành viên
    Avatar
    Cám ơn thầy giáo em vẫn khẻo ạ ,thầy thế nào ạ
     
    Gửi ý kiến