Phong cách css

Trước khi tiến hành viết CSS và để CSS có thể thực thi trên trang web 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 trang web. 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ẻ
• Kiểu dáng bên ngoài – 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ẻ

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ó

Kiểu nội tuyến

• Thích hợp với việc chèn một vài đoạn CSS để rút ngắn
• Trình duyệt không mất thời gian tải tệp CSS

Phong cách bên ngoài

• 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 CSS

Và trong các bài học CSS trong sê-ri này, bạn có thể sử dụng kiểu Inline Styles để nhúng CSS vào trang web vì sẽ không mất thời gian tạo tệp, chúng ta chỉ viết vài đoạn CSS thôi mà thôi. Dù sao, 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 trang web thông qua kiểu Inline Styles, bạn sẽ khai báo cặp thẻ  vào vị trí bất kỳ của trang web [tốt nhất là bên trong cặp thẻ ] như sau

[html]

[/html]

Và trong cặp thẻ mà bạn có thể viết CSS vào, ví dụ đơn giản

Xem Pen bNyQEY của Thạch Phạm [@thachpham92] trên CodePen

Cách nhúng CSS với Kiểu bên ngoài

Khi sử dụng cách này, công việc đầu tiên là bạn cần tạo ra một tập tin. css với bất kỳ tên nào, bạn có thể sử dụng bất kỳ 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

 p {

 color: blue;

 font-family: Arial;

 }

Và cuối cùng là chèn vào tệp HTML bằng thẻ  và thẻ này phải đặt bên trong cặp thẻ . Ví dụ

[html][/html]

Trong đó, thuộc tính

@import "demo.css";

@import "demo.css";

Xem Bút vEwQGK của Thạch Phạm [@thachpham92] trên CodePen

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

Nhúng tệp CSS vào bên trong tệp CSS

Hiện tại bạn có 3 tệp CSS không giới hạn mà bạn không muốn thêm tất cả bọn nó vào trang web mà chỉ muốn thêm một tệp CSS thôi, thì bạn có thể sử dụng cách nhúng các tệp CSS vào bên trong một tệp CSS . css [không bao gồm các đoạn bình luận]

Ví dụ bạn có thể nhúng một tập tin demo. css to trong file style. css bằng cách chèn đoạn này vào kiểu tệp. css

@import "demo.css";

Lời kết

Việc nhúng CSS vào trang web 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? . Và bắt đầu từ bài viết sau là chúng ta có thể đi sâu vào việc áp dụng một số thuộc tính CSS để trang web địa điểm rồi

Chế độ HTML khá hạn chế khi nói đến việc trình bày một trang web. Ban đầu nó được thiết kế như một cách đơn giản để hiển thị thông tin. CSS [Cascading Style Sheets] được giới thiệu vào tháng 12 năm 1996 bởi World Wide Web Consortium [W3C] nhằm cung cấp một cách tốt hơn để tạo kiểu cho các phần tử HTML

Với CSS, rất dễ dàng để định nghĩa những thứ như. kích thước và kiểu chữ cho phông chữ, màu sắc cho văn bản và nền, căn chỉnh lề của văn bản và hình ảnh, khoảng cách giữa các phần tử, đường viền cho các phần tử và rất nhiều thuộc tính khác

Thêm kiểu vào phần tử HTML

Kiểu thông tin có thể được đính kèm bên dưới dưới dạng một tài liệu riêng biệt hoặc được nhúng vào tài liệu chính HTML. Đây là ba phương pháp phát triển kiểu khai báo thông tin cho tài liệu HTML

• Style CSS nội suy - Sử dụng thuộc tính

  @import "demo.css";

  4 trong thẻ bắt đầu [thẻ mở rộng]
• Style CSS nhúng - Sử dụng phần tử

  @import "demo.css";

  5

  File CSS bên ngoài

  File CSS bên ngoài là cách tốt nhất vì có thể áp dụng style CSS cho nhiều trang khác nhau

  File CSS bên ngoài giữ tất cả các quy tắc CSS trong một file CSS riêng biệt mà bạn có thể liên kết từ bất kỳ tài liệu HTML nào trên trang web của mình

  File CSS bên ngoài là linh hoạt nhất vì với nó, bạn có thể thay đổi giao diện của toàn bộ trang web chỉ bằng cách cập nhật một file CSS

  Bạn có thể đính kèm các tệp CSS bên ngoài theo hai cách - sử dụng thẻ và sử dụng câu lệnh

  @import "demo.css";

  7

  Liên kết tệp CSS vào tài liệu HTML

  Tệp CSS bên ngoài có thể được liên kết với tài liệu HTML bằng thẻ

  @import "demo.css";

  5

  Thẻ

  @import "demo.css";

  5 được đặt trong phần tử với đường dẫn đến tệp CSS được gán cho thuộc tính href, như dưới đây

  Nhập tệp CSS

  Sử dụng câu lệnh

  @import "demo.css";

  0 là một cách khác để tải tệp CSS bên ngoài. Câu lệnh

  @import "demo.css";

  0 hướng dẫn trình duyệt tải tệp CSS bên ngoài và sử dụng kiểu của nó