hosting gia re
  1. Chọn mua sim phong thuy hợp mệnh HOT [VNXF.VN] XenForo 1.5.14 Released HOT

    Kho sim so phong thuy giá rẻ HOT [AIRHOST.VN] Hosting giá rẻ Mua Ngay

    Mua sim so dep viettel giá rẻ HOT [VNXF.VN] Nhận Thiết Kế Forum Xenforo Dich vụ

    Trải nghiệm Phần mềm diệt virus miễn phí tốt nhất hiện nay. HOT

Hướng dẫn Hướng dẫn cách nhúng CSS vào website

Thảo luận trong 'CSS' bắt đầu bởi PVS, 17/02/2017.

Lượt xem: 192

  1. PVS

    PVS Cộng Sự Xuất Sắc Thành viên BQT Leecher

    Tham gia:
    28/02/2015
    Bài viết:
    7,570
    Đã được thích:
    5,662
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    SV
    Nơi ở:
    Huế
    Hướng dẫn cách nhúng CSS vào website

    Trước khi tiến hành viết CSS và để CSS có thể thực thi trên website hoặc tài liệu HTML của bạn thì bạn phải tiến hành nhúng CSS vào website. Nói về nhúng CSS vào website thì chúng ta có hai cách là:
    • Inline Styles – Nhúng trực tiếp vào tài liệu HTML thông qua cặp thẻ <style> </style>.
    • External Styles – Tạo một tập tin .css riêng và nhúng vào tài liệu HTML thông qua cặp thẻ <link>.
    Mỗi cách nhúng đều có ưu và nhược điểm khác nhau, cũng như tùy theo trường hợp mà ta sử dụng nó.


    Inline Styles
    • Thích hợp với việc chèn một vài đoạn CSS ngắn.
    • Trình duyệt không mất thời gian tải tập tin CSS.
    External Styles
    • Thích hợp với việc chèn nhiều đoạn CSS, dễ quản lý.
    • Nhưng trình duyệt sẽ mất thêm thời gian để tải tập tin CSS.
    Và trong các bài học CSS trong serie này bạn có thể sử dụng kiểu Inline Styles để nhúng CSS vào website vì sẽ không mất thời gian tạo tập tin, do chúng ta chỉ viết vài đoạn CSS mà thôi. Anyway, bạn có thể sử dụng kiểu bạn thích.

    Cách nhúng CSS với Inline Styles
    Để nhúng CSS vào website thông qua kiểu Inline Styles, bạn sẽ khai báo cặp thẻ <style> vào vị trí bất kỳ của website (tốt nhất là bên trong cặp thẻ <head>) như sau.
    Mã:
    <style type="text/css">
     
    </style>
    Và trong cặp thẻ <style> đó bạn có thể viết CSS vào, ví dụ đơn giản:
    HTML:
    <!DOCTYPE html>
    <html lang="vi">
      <head>
        <meta charset="utf-8" />
        <title>Inline Styles</title>
        
        <style type="text/css">
           p {
            color: blue;
            font-family: Arial;
           }
        </style>
      </head>
    
      <body>
        <p>Đây là một đoạn chữ đã được định dạng với CSS</p>.
      </body>
    </html>
    Kết quả:

    demo.png
    Cách nhúng CSS với External Styles
    Khi sử dụng cách này, việc đầu tiên là bạn cần tạo ra một tập tin .css với tên bất kỳ, bạn có thể dùng bất cứ chương trình soạn thảo văn bản nào để tạo. Sau đó dán một đoạn CSS đơn giản vào như thế này:
    Mã:
    p {
    color: blue;
    font-family: Arial;
    }
    Và cuối cùng là chèn vào tập tin HTML bằng thẻ <link> và thẻ này phải đặt bên trong cặp thẻ <head>. Ví dụ:
    Mã:
    <link rel="stylesheet" href="name.css" />
    Trong đó, thuộc tính rel là khai báo loại tập tin nhúng và href là đường dẫn khai báo tên tập tin .css cần nhúng vào.

    HTML:

    HTML:
    <!DOCTYPE html>
    <html lang="vi">
      <head>
        <meta charset="utf-8" />
        <title>Inline Styles</title>
         <link rel="stylesheet" href="name.css" />
      </head>
    
      <body>
        <p>Đây là một đoạn chữ đã được định dạng với CSS</p>.
      </body>
    </html>
    CSS:
    Mã:
    p {
      color: blue;
      font-family: Arial;
    }
    Kết quả:

    demo2.png
    Đơn giản phải không nào?

    Nhúng tập tin CSS vào bên trong một tập tin CSS
    Chẳng hạn bây giờ bạn có 3 tập tin CSS mà bạn không muốn thêm tất cả tụi nó vào website mà chỉ muốn thêm một tập tin CSS thôi, thì bạn có thể sử dụng cách nhúng các tập tin CSS vào bên trong một tập tin CSS với từ khóa @import, và các từ khóa @import này phải được đặt ở đầu tập tin .css (không bao gồm các đoạn comment).

    Ví dụ bạn có thể nhúng một tập tin demo.css vào trong tập tin style.css bằng cách chèn đoạn này vào tập tin style.css:
    Mã:
    @import "demo.css";
    Lời kết
    Việc nhúng CSS vào website của bạn bây giờ đã hoàn tất rồi, mọi thứ vẫn còn rất đơn giản phải không nào? Cũng đúng thôi vì CSS cũng khá đơn giản mà.

    Chúc các bạn thành công.


    Nguồn: thachpham.com​
     
    Bài viết mới
    Sơ lược và so sánh giữa Less và Sass
    Sơ lược và so sánh giữa Less và Sass bởi PVS, 15/06/2017 lúc 13:38:23
    Cách sử dụng CSS Shapes để tạo hình
    Cách sử dụng CSS Shapes để tạo hình bởi PVS, 15/06/2017 lúc 13:27:55

Chia sẻ trang này