CSS Trong HTML - WebVN

Trang chủ » Chèn Css Trực Tiếp Vào Html » CSS Trong HTML - WebVN

Có thể bạn quan tâm

« Bài TrướcBài Tiếp »
12345678910111213141516 <!DOCTYPEhtml><html><head><style>body {background-color:lightgrey}h1 {color:blue}p {color:green}</style></head><body> <h1>Đâylàđềmục</h1><p>Đâylàđoạnvănbản.</p> </body></html>

Demo

Trang trí HTML với CSS

CSS là viết tắt của từ Cascading Style Sheets

Bạn có thể chèn CSS vào HTML theo 3 cách:

  • Trực tiếp – sử dụng thuộc tính style trong các thẻ HTML
  • Nội bộ – sử dụng thẻ <style> trong phần <head> của HTML
  • CSS ngoài – sử dụng một hoặc nhiều tệp tin CSS ở bên ngoài

Cách sử dụng phổ biến nhất là chia CSS thành các tệp tin riêng biệt sau đó gọi chúng vào HTML. Nhưng trong bài học này, chúng ta sẽ sử dụng CSS nội bộ vì nó dễ minh họa hơn và bạn cũng thực hành dễ hơn.

Bạn có thể học nhiều hơn về CSS trong phần Học CSS

CSS trực tiếp (Inline CSS)

Kiểu viết CSS trực tiếp chỉ hữu dụng khi sử dụng một kiểu trang trí cho một thành thẻ trong HTML.

CSS trực tiếp được viết thông qua thuộc tính style.

Đoạn CSS sau thay đổi màu chữ của một đề mục:

12345678 <!DOCTYPE html><html><body> <h1 style="color:blue">Đâylàđềmụcxanh</h1> </body></html>

Demo

CSS nội bộ (Internal CSS)

Sử dụng CSS nội bộ có thể trang trí cho tất cả các thành phần trong trang HTML.

CSS nội bộ được viết trong phần <head> của một trang HTML, sử dụng thẻ <style>:

12345678910111213141516 <!DOCTYPEhtml><html><head><style>body {background-color:lightgrey}h1 {color:blue}p {color:green}</style></head><body> <h1>Đâylàđềmục</h1><p>Đâylàđoạnvănbản.</p> </body></html>

Demo

CSS ngoài (External CSS)

Hãy tưởng tượng, bạn có rất nhiều trang HTML có cùng kiểu trang trí, nếu sử dụng CSS nội bộ hoặc CSS trực tiếp bạn sẽ phải lặp đi lặp lại ở mỗi trang. Khi bạn muốn thay đổi cách trang trí của một thành phần nào đó, bạn phải sửa trên tất cả các trang.

CSS ngoài đặc biệt hữu dụng khi bạn cần cách trang trí sử dụng cho nhiều trang. Bạn có thể thay đổi kiểu trang trí trên tất cả các trang bằng cách thay đổi một tệp tin CSS duy nhất.

CSS ngoài được viết vào một tệp tin .css và được gọi vào trang HTML thông qua phần <head>:

123456789101112 <!DOCTYPE html><html><head><link rel="stylesheet"href="/wp-content/uploads/2015/05/demo_style.css"></head><body> <h1>Đâylàđềmục</h1><p>Đâylàđoạnvănbản.</p> </body></html>

Demo

Kiểu chữ trong CSS

Thuộc tính color trong CSS quy định màu chữ được sử dụng trong các thành phần của HTML.

Thuộc tính font-family trong CSS quy định kiểu chữ được sử dụng trong các thành phần của HTML.

Thuộc tính font-size trong CSS quy định cỡ chữ được sử dụng trong các thành phần của HTML.

123456789101112131415161718192021222324 <!DOCTYPEhtml><html><head><style>h1 {color:blue;font-family:Tahoma;font-size:200%; }p  {color:red;font-family:Arial;font-size:120%;}</style></head><body> <h1>Đâylàđềmục</h1><p>Đâylàđoạnvănbản.</p> </body></html>

Demo

Mô hình hộp trong CSS

Mỗi thành phần trong HTML đều có một khung bao bao quanh, ngay cả khi bạn không nhìn thấy nó.

Thuộc tính border trong CSS quy định cách hiển thị đường viền bao quanh một thành phần HTML:

12345678910111213141516171819 <!DOCTYPEhtml><html><head><style>p {border:1pxsolidgrey;}</style></head><body> <h1>Đâylàđềmục</h1> <p>Đâylàmộtđoạnvănbản.</p><p>Đâylàmộtđoạnvănbản.</p><p>Đâylàmộtđoạnvănbản.</p> </body></html>

Demo

Thuộc tính padding trong CSS quy định khoảng cách từ đường viền đến các thành phần bên trong:

1234567891011121314151617181920 <!DOCTYPEhtml><html><head><style>p {border:1pxsolidgrey;padding:10px;}</style></head><body> <h1>Đâylàđềmục</h1> <p>Đâylàđoạnvănbản.</p><p>Đâylàđoạnvănbản.</p><p>Đâylàđoạnvănbản.</p> </body></html>

Demo

Thuộc tính margin trong CSS quy định khoảng cách từ đường viền đến các thành phần bên ngoài:

123456789101112131415161718192021 <!DOCTYPEhtml><html><head><style>p {border:1pxsolidgrey;padding:10px;margin:30px;}</style></head><body> <h1>Đâylàđềmục</h1> <p>Đâylàmộtđoạnvănbản.</p><p>Đâylàmộtđoạnvănbản.</p><p>Đâylàmộtđoạnvănbản.</p> </body></html>

Demo

CSS trong các ví dụ ở trên sử dụng đơn vị đo là pixels, ký hiệu là px.

Thuộc tính id

Tất cả các ví dụ bên trên đều sử dụng CSS để trang trí các thành phần trong HTML theo cách thông thường.

Để áp dụng một kiểu trang trí cho một thành phần đặc biệt, đầu tiên ta sẽ thêm thuộc tính id vào thành phần đó:

1 <pid="element1">Đoạnvănbảncóthuộctính id</p>

sau đó ta sẽ định nghĩa kiểu trang trí cho thành phần đó:

123456789101112131415161718 <!DOCTYPEhtml><html><head><style>p#element1 {color:blue;}</style></head><body> <p>Đâylàđoạnvănbản.</p><p>Đâylàđoạnvănbản.</p><p>Đâylàđoạnvănbản.</p><pid="element1">Đoạnvănbảncóthuộctính id</p> </body></html>

Demo

Thuộc tính class

Để sử dụng CSS trang trí cho một nhóm các thành phần đặc biệt, đầu tiên ta sẽ thêm thuộc tính class vào những thành phần đó:

1 <pclass="classname">Đoạnvănbảncóthuộctính class</p>

Bây giờ bạn đã có thể trang trí tất cả các thành phần có cùng tên class:

12345678910111213141516171819 <!DOCTYPEhtml><html><head><style>p.classname {color:red;}</style></head><body> <p>Đâylàđoạnvănbản.</p><p>Đâylàđoạnvănbản.</p><pclass="classname">Đâylàđoạnvănbảncóthuộctính class.</p><p>Đâylàđoạnvănbản.</p><pclass="classname">Đâylàđoạnvănbảncóthuộctính classcùngtên.</p> </body></html>

Demo

Giá trị của thuộc tính id là duy nhất trong trang vì vậy bạn chỉ nên sử dụng id khi muốn trang trí CSS cho 1 thành phần. Sử dụng thuộc tính class khi muốn trang trí cho nhiều thành phần.

Những thẻ và thuộc tính bị loại bỏ trong HTML5

Trong các phiên bản HTML thấp hơn, có một vài thẻ và thuộc tính được sử dụng để trang trí các thành phần trong trang.

Những thẻ và thuộc tính này đã không còn được hỗ trợ khi sử dụng HTML5, vì vậy bạn tránh sử dụng:

  • Các thẻ <font>, <center> và <strike>.
  • Các thuộc tính color và bgcolor. (Tránh nhầm lẫn: Đây là thuộc tính cho THẺ, không phải thuộc tính của CSS)

Tổng kết bài học

  • Sử dụng thuộc tính style trong HTML để viết CSS trực tiếp
  • Sử dụng thẻ <style> trong HTML để viết CSS nội bộ
  • Sử dụng thẻ <link> trong HTML gọi một tệp tin CSS ngoài
  • Sử dụng thẻ <head> trong HTML để chứa thẻ <style> và <link>
  • Sử dụng thuộc tính color trong CSS để trang trí màu chữ
  • Sử dụng thuộc tính font-family trong CSS để thay đổi kiểu chữ
  • Sử dụng thuộc tính font-size trong CSS để thay đổi cỡ chữ
  • Sử dụng thuộc tính border trong CSS để hiển thị và trang trí viền
  • Sử dụng thuộc tính padding trong CSS quy định khoảng cách từ viền tới các thành phần bên trong
  • Sử dụng thuộc tính margin trong CSS quy định khoảng cách từ viền tới các thành phần bên ngoài

Bài tập

Bài tập 1 Bài tập 2 Bài tập 3 Bài tập 4 Bài tập 5 Bài tập 6 « Bài TrướcBài Tiếp »

Từ khóa » Chèn Css Trực Tiếp Vào Html