Trong hướng dẫn này, bạn sẽ tìm hiểu các kỹ thuật khác nhau bao gồm CSS vào tài liệu HTML như kiểu nội tuyến và kiểu nhúng, liên kết các biểu định kiểu bên ngoài, v.v.

< font style = "vertical-align: inherit;"> Bạn đang xem: bao gồm css trong html

Quảng cáo


CSS

Bắt đầu

Tệp CSS chỉ đơn giản là một tệp văn bản thuần túy được lưu với phần mở rộng .css.

Bắt đầu với CSS

Trong hướng dẫn này, bạn sẽ tìm hiểu việc thêm thông tin định dạng và kiểu vào các trang web bằng cách sử dụng CSS dễ dàng như thế nào. Tuy nhiên, trước khi bắt đầu, hãy đảm bảo rằng bạn có một số kiến ​​thức làm việc về HTML.

Nếu bạn mới bắt đầu trong thế giới phát triển web, hãy bắt đầu học từ đây »

Nếu không cần thêm gì nữa, hãy bắt đầu với Trang tính kiểu xếp tầng (CSS).

Bao gồm CSS trong Tài liệu HTML

CSS có thể được đính kèm dưới dạng một tài liệu riêng biệt hoặc được nhúng vào chính tài liệu HTML. Có ba phương pháp đưa CSS vào tài liệu HTML:

  • Kiểu nội tuyến – Sử dụng thuộc tính style trong thẻ bắt đầu HTML.
  • Kiểu nhúng – Sử dụng phần tử & lt; style & gt; trong phần đầu của tài liệu.
  • Biểu định kiểu bên ngoài – Sử dụng phần tử & lt; link & gt; , trỏ đến tệp CSS bên ngoài.

Trong hướng dẫn này, chúng tôi sẽ trình bày tất cả ba phương pháp này để chèn CSS từng cái một.

Lưu ý: Các kiểu nội tuyến có mức độ ưu tiên cao nhất và các kiểu dáng bên ngoài có mức độ ưu tiên thấp nhất. Điều đó có nghĩa là nếu bạn chỉ định kiểu cho một phần tử trong cả biểu định kiểu được nhúng và bên ngoài, thì các quy tắc kiểu xung đột trong biểu định kiểu được nhúng sẽ ghi đè lên biểu định kiểu bên ngoài.

Kiểu nội tuyến

Kiểu nội tuyến được sử dụng để áp dụng các quy tắc kiểu duy nhất cho một phần tử bằng cách đặt các quy tắc CSS trực tiếp vào thẻ bắt đầu. Nó có thể được đính kèm với một phần tử bằng thuộc tính style .

Thuộc tính style bao gồm một loạt các cặp giá trị và thuộc tính CSS. Mỗi cặp "property: value" được phân tách bằng dấu chấm phẩy (; ), giống như cách bạn viết vào biểu định kiểu được nhúng hoặc bên ngoài. Nhưng nó cần phải nằm trong một dòng, tức là không có ngắt dòng sau dấu chấm phẩy, như được hiển thị ở đây:

Ví dụ

Hãy thử mã này

»

  & lt; h1 style = "color: red; font-size: 30px;" & gt; Đây là tiêu đề & lt; / h1 & gt;
& lt; p style = "color: green; font-size: 22px;" & gt; Đây là một đoạn văn. & lt; / p & gt;
& lt; div style = "color: blue; font-size: 14px;" & gt; Đây là một số nội dung văn bản. & lt; / div & gt;  

Sử dụng các kiểu nội tuyến thường được coi là một phương pháp không tốt. Vì các quy tắc kiểu được nhúng trực tiếp vào bên trong thẻ HTML, nó làm cho bản trình bày bị trộn lẫn với nội dung của tài liệu; điều này khiến mã khó duy trì và phủ nhận mục đích của việc sử dụng CSS.

Xem Thêm  11 cách để căn giữa Div hoặc văn bản trong Div trong CSS - căn giữa theo chiều ngang của một div

Lưu ý: Không thể tạo kiểu cho phần tử giả lớp giả bằng các kiểu nội tuyến. Do đó, bạn nên tránh sử dụng các thuộc tính kiểu trong mã của mình. Sử dụng trang định kiểu bên ngoài là cách ưu tiên để thêm kiểu vào tài liệu HTML.

Biểu định kiểu được nhúng

Các biểu định kiểu nội bộ hoặc được nhúng chỉ ảnh hưởng đến tài liệu mà chúng được nhúng vào.

Biểu định kiểu nhúng được xác định trong phần & lt; head & gt; của tài liệu HTML bằng cách sử dụng & lt; style & gt; < / span> phần tử. Bạn có thể xác định bất kỳ số lượng phần tử & lt; style & gt; nào trong tài liệu HTML nhưng chúng phải xuất hiện giữa & lt; head & gt; & lt; / head & gt; thẻ. Hãy xem một ví dụ:

Ví dụ

Hãy thử mã này

»

 & lt;! DOCTYPE html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
    & lt; title & gt; Tài liệu HTML của tôi & lt; / title & gt;
    & lt; phong cách & gt;
        thân {background-color: YellowGreen; }
        p {màu: #fff; }
    & lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
    & lt; h1 & gt; Đây là tiêu đề & lt; / h1 & gt;
    & lt; p & gt; Đây là một đoạn văn bản. & lt; / p & gt;
& lt; / body & gt;
& lt; / html & gt;  

Mẹo: Thuộc tính type của thẻ & lt; style & gt; & lt; link & gt; (tức là type = "text / css" ) xác định ngôn ngữ của biểu định kiểu. Thuộc tính này hoàn toàn là thông tin. Bạn có thể bỏ qua điều này vì CSS là ngôn ngữ biểu định kiểu chuẩn và mặc định trong HTML5.

Trang tính Kiểu Bên ngoài

Biểu định kiểu bên ngoài là lý tưởng khi kiểu được áp dụng cho nhiều trang của trang web.

Biểu định kiểu bên ngoài giữ tất cả các quy tắc kiểu trong một tài liệu riêng biệt mà bạn có thể liên kết từ bất kỳ tệp HTML nào trên trang web của mình. Biểu định kiểu bên ngoài là linh hoạt nhất vì với biểu định kiểu bên ngoài, bạn có thể thay đổi giao diện của toàn bộ trang web chỉ bằng cách thay đổi một tệp.

Bạn có thể đính kèm các biểu định kiểu bên ngoài theo hai cách - liên kết và nhập.

Liên kết các trang tính kiểu bên ngoài

Trước khi liên kết, trước tiên chúng ta cần tạo một biểu định kiểu. Hãy mở trình soạn thảo mã yêu thích của bạn và tạo một tệp mới. Bây giờ, hãy nhập mã CSS sau vào trong tệp này và lưu nó thành "style.css".

Ví dụ

Hãy thử mã này

»

  body {
    nền: nhẹ nhàng;
    phông chữ: 18px Arial, sans-serif;
}
h1 {
    màu cam;
}  

Biểu định kiểu bên ngoài có thể được liên kết với tài liệu HTML bằng thẻ & lt; link & gt; . Thẻ & lt; link & gt; nằm trong phần & lt; head & gt; , như bạn có thể thấy trong ví dụ sau:

Ví dụ

Hãy thử mã này

»

  & lt;! DOCTYPE html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
    & lt; title & gt; Tài liệu HTML của tôi & lt; / title & gt;
    & lt; link rel = "stylesheet" href = "css / style.css" & gt;
& lt; / head & gt;
& lt; body & gt;
    & lt; h1 & gt; Đây là tiêu đề & lt; / h1 & gt;
    & lt; p & gt; Đây là một đoạn văn bản. & lt; / p & gt;
& lt; / body & gt;
& lt; / html & gt;  

Mẹo: Trong số cả ba phương pháp, sử dụng biểu định kiểu bên ngoài là phương pháp tốt nhất để xác định và áp dụng kiểu cho tài liệu HTML. Như bạn có thể thấy rõ với các biểu định kiểu bên ngoài, tệp HTML bị ảnh hưởng yêu cầu các thay đổi tối thiểu trong đánh dấu.

Nhập trang tính kiểu bên ngoài

Quy tắc @import là một cách khác để tải trang định kiểu bên ngoài. Câu lệnh @import hướng dẫn trình duyệt tải một biểu định kiểu bên ngoài và sử dụng biểu định kiểu của nó.

Bạn có thể sử dụng nó theo hai cách. Đơn giản nhất là trong tiêu đề của tài liệu của bạn. Lưu ý rằng, các quy tắc CSS khác vẫn có thể được đưa vào phần tử & lt; style & gt; . Đây là một ví dụ:

Ví dụ

Hãy thử mã này

»

  & lt; style & gt;
    @import url ("css / style.css");
    P {
        màu sắc: xanh lam;
        font-size: 16px;
    }
& lt; / style & gt;  

Tương tự, bạn có thể sử dụng quy tắc @import để nhập một biểu định kiểu trong một biểu định kiểu khác.

Ví dụ

Hãy thử mã này

»

  @ import url ("css / layout.css");
@import url ("css / color.css");
thân hình {
    màu sắc: xanh lam;
    font-size: 14px;
}  

Lưu ý: Tất cả các quy tắc @import đều phải xuất hiện ở đầu biểu định kiểu. Bản thân bất kỳ quy tắc kiểu nào được xác định trong biểu định kiểu sẽ ghi đè các quy tắc xung đột trong các biểu định kiểu đã nhập. Tuy nhiên, bạn không nên nhập một biểu định kiểu trong một biểu định kiểu khác do vấn đề về hiệu suất.

Quảng cáo


Xem thêm những thông tin liên quan đến chủ đề bao gồm css trong html

Học "xong" CSS trong 1 clip, code được cái web siêu đẹp

  • Tác giả: Phạm Huy Hoàng
  • Ngày đăng: 2021-09-14
  • Đánh giá: 4 ⭐ ( 6583 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: - Code HTML để luyện tập: https://bit.ly/codedao-css
    - Phần 1 - Học HTML trong 15 phút: https://www.youtube.com/watch?v=jSyH0HxKQPY

    Hế nhô các bạn, như đã hứa, mình đã quay lại với series "Học Full-Stack trong 3 tiếng". Hôm nay bọn mình sẽ cùng tự học CSS Cơ Bản trong 25 phút nha :3.
    Học xong bài này, các bạn đã có đủ kiến thức để chỉnh sửa, mông má 1 trang web cho đẹp rồi đấy ahihi.

    Học xong các bạn có thể xem thêm các phần sau, toàn bộ series học Full Sờ Lắc trong 3 tiếng front-end:
    - Học HTML trong 15 phút: https://youtu.be/jSyH0HxKQPY
    - Học CSS trong 15 phút: https://youtu.be/DUwx3IdXupU
    - Học JS trong 15 phút https://youtu.be/watch?v=ZIgDYEZl1VE
    - Kết hợp HTML CSS JS https://youtu.be/watch?v=JL2o5qixOPI
    - Code 4 dự án HTML CSS JS https://youtu.be/watch?v=YtYcYRsODmI

    Timestamp
    00:00 Giới thiệu vlog
    01:04 CSS là gì, tại sao phải học và dùng?
    02:24 Cú pháp của 1 khối CSS
    03:55 Lấy code mẫu tại bit.ly/codedao-css
    04:33 1. CSS Selector: Chọn phần tử để apply CSS
    06:02 CSS Speciality: id, class, trọng số...
    07:32 2. Làm sao viết CSS, để CSS ở đâu?
    09:04 3. Màu sắc và kích cỡ trong CSS
    12:27 4. Hiển thị chữ trong CSS (font, căn lề)
    14:15 Bonus: Cách dùng Chrome Dev Tool
    15:20 5. Dùng CSS để sắp xếp giao diện (layout)
    16:34 Box model: margin, border, padding
    18:00 Set width, height và box-sizing
    19:43 Các CSS Position hay dùng
    20:51 7. Áp dụng kiến thức CSS để làm web đẹp hơn
    27:08 Kết thúc vlog

    - Các bạn nào thích nội dung Wibu thì qua ủng hộ thằng em @Wi Bu Code Dạo giúp mình tại https://bit.ly/codedaowibu nha
    - Nhớ subscribe cho mình nhe: https://bit.ly/codedaotube

    Channel Tôi Đi Code Dạo là nơi mình chia sẻ những kiến thức, kinh nghiệm về ngành lập trình mà mình đạt được trong quá trình làm việc. Những kiến thức này sẽ biến các bạn từ một coder trở thành developer - lập trình viên thứ thiệt.
    Nhớ ghé thăm và subscribe channel để xem clip mới vào 8H TỐI T3 hàng tuần nha!

    Ghé thăm mình tại:
    Blog: https://toidicodedao.com/
    Fanpage: https://www.facebook.com/toidicodedao/

    css code_cung_code_dao hoc_full_so_nac

HTML là gì? CSS là gì? Tổng quan HTML CSS

  • Tác giả: nordiccoder.com
  • Đánh giá: 3 ⭐ ( 1312 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

CSS trong HTML

  • Tác giả: webvn.com
  • Đánh giá: 5 ⭐ ( 1655 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ví dụ và cách viết CSS trong HTML.

Style CSS trong HTML5

  • Tác giả: comdy.vn
  • Đánh giá: 4 ⭐ ( 6678 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn này, bạn sẽ học cách áp dụng các style CSS cho các phần tử HTML5.

Css là gì cách viết css trong html, cách sử dụng css trong html

  • Tác giả: jdomain.vn
  • Đánh giá: 4 ⭐ ( 8249 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tối ưu hóa tốc độ trang là một công việc mà hầu như mọi Web developer đều quan tâm và nên biết, mục đích của nó là đưa nội dung website đến với người xem nhanh nhất có thể, Front-end developer thường làm việc với HTML, CSS, Javascript và các hình ảnh

CSS là gì? cách hoạt động và cách học CSS

  • Tác giả: websitehcm.com
  • Đánh giá: 3 ⭐ ( 8639 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: CSS là gì? cách hoạt động và cách học CSS w3seo tìm hiểu về các khái niệm cơ bản trong CSS, nguyên lý sử dụng CSS trong html

CSS là gì?

  • Tác giả: topdev.vn
  • Đánh giá: 3 ⭐ ( 2370 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (HTML). Nói ngắn gọn hơn là ngôn ngữ tạo phong cách cho trang web.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php