Hướng dẫn types of css in html - các loại css trong html


CSS là viết tắt của các bảng phong cách xếp tầng.

CSS tiết kiệm rất nhiều công việc. Nó có thể kiểm soát bố cục của nhiều trang web cùng một lúc.


CSS = Kiểu và Màu sắc

Thao tác văn bản

Màu sắc, & NBSP; Hộp Boxes



CSS là gì?

Các bảng kiểu xếp tầng (CSS) được sử dụng để định dạng bố cục của một trang web.

Với CSS, bạn có thể kiểm soát màu sắc, phông chữ, kích thước của văn bản, khoảng cách giữa các phần tử, cách các phần tử được định vị và đặt ra, hình ảnh nền hoặc màu nền nào được sử dụng, các màn hình khác nhau cho các thiết bị và kích thước màn hình khác nhau và kích thước màn hình và Nhiều hơn nữa!

Mẹo: Từ xếp tầng có nghĩa là một phong cách áp dụng cho một yếu tố cha mẹ cũng sẽ áp dụng cho tất cả các yếu tố trẻ em trong cha mẹ. Vì vậy, nếu bạn đặt màu của văn bản cơ thể thành "màu xanh", tất cả các tiêu đề, đoạn văn và các yếu tố văn bản khác trong cơ thể cũng sẽ có cùng màu (trừ khi bạn chỉ định một cái gì đó khác)! The word cascading means that a style applied to a parent element will also apply to all children elements within the parent. So, if you set the color of the body text to "blue", all headings, paragraphs, and other text elements within the body will also get the same color (unless you specify something else)!


Sử dụng CSS

CSS có thể được thêm vào tài liệu HTML theo 3 cách:

  • Nội tuyến - bằng cách sử dụng thuộc tính style bên trong các phần tử HTML - by using the style attribute inside HTML elements
  • Nội bộ - bằng cách sử dụng phần tử <style> trong phần <head> - by using a <style> element in the <head> section
  • Bên ngoài - Bằng cách sử dụng phần tử <link> để liên kết với tệp CSS bên ngoài - by using a <link> element to link to an external CSS file

Cách phổ biến nhất để thêm CSS, là giữ các kiểu trong các tệp CSS bên ngoài. Tuy nhiên, trong hướng dẫn này, chúng tôi sẽ sử dụng các phong cách nội bộ và nội bộ, bởi vì điều này dễ chứng minh hơn và dễ dàng hơn để bạn tự mình thử.


CSS nội tuyến

Một CSS nội tuyến được sử dụng để áp dụng một kiểu duy nhất cho một phần tử HTML duy nhất.

CSS nội tuyến sử dụng thuộc tính style của phần tử HTML.

Ví dụ sau đây đặt màu văn bản của phần tử <h2> thành màu xanh lam và màu văn bản của phần tử <p> thành màu đỏ:

Thí dụ

Một tiêu đề màu xanh

Một đoạn văn màu đỏ.

Hãy tự mình thử »



CSS nội bộ

Một CSS nội bộ được sử dụng để xác định một kiểu cho một trang HTML duy nhất.

Một CSS nội bộ được xác định trong phần <head> của trang HTML, trong phần tử <style>.

Ví dụ sau đây đặt màu văn bản của tất cả các yếu tố <h2> (trên trang đó) thành màu xanh lam và màu văn bản của tất cả các yếu tố <p> thành màu đỏ. Ngoài ra, trang sẽ được hiển thị với màu nền "bột": & nbsp;

Thí dụ

Một tiêu đề màu xanh




Một đoạn văn màu đỏ.

This is a paragraph.

Hãy tự mình thử »

Hãy tự mình thử »


CSS nội bộ

Một CSS nội bộ được sử dụng để xác định một kiểu cho một trang HTML duy nhất.

Một CSS nội bộ được xác định trong phần <head> của trang HTML, trong phần tử <style>.

Thí dụ

Một tiêu đề màu xanh


 

Một đoạn văn màu đỏ.

This is a paragraph.

Hãy tự mình thử »

Hãy tự mình thử »

CSS nội bộ

Một CSS nội bộ được sử dụng để xác định một kiểu cho một trang HTML duy nhất.

"styles.css":

Một CSS nội bộ được xác định trong phần <head> của trang HTML, trong phần tử <style>.
  background-color: powderblue;
}
h2 {
  color: blue;
}
p {
  color: red;
}

Ví dụ sau đây đặt màu văn bản của tất cả các yếu tố <h2> (trên trang đó) thành màu xanh lam và màu văn bản của tất cả các yếu tố <p> thành màu đỏ. Ngoài ra, trang sẽ được hiển thị với màu nền "bột": & nbsp; With an external style sheet, you can change the look of an entire web site, by changing one file!


cơ thể {màu nền: PowderBlue;} H2 & nbsp; & nbsp; {màu: màu xanh;} p & nbsp; & nbsp; & nbsp; {màu đỏ;}

Đây là một tiêu đề này là một đoạn văn.

The CSS <style>2 property defines the text color to be used.

CSS bên ngoài

Một bảng kiểu bên ngoài được sử dụng để xác định kiểu cho nhiều trang HTML.

Thí dụ

Một tiêu đề màu xanh

Một đoạn văn màu đỏ.




Hãy tự mình thử »

This is a paragraph.

Hãy tự mình thử »

Hãy tự mình thử »


CSS nội bộ

Một CSS nội bộ được sử dụng để xác định một kiểu cho một trang HTML duy nhất.

Một CSS nội bộ được xác định trong phần <head> của trang HTML, trong phần tử <style>. You can define a border for nearly all HTML elements.

Thí dụ

Một tiêu đề màu xanh

Một đoạn văn màu đỏ.
  border: 2px solid powderblue;
}

Hãy tự mình thử »


CSS nội bộ

Một CSS nội bộ được sử dụng để xác định một kiểu cho một trang HTML duy nhất.

Thí dụ

Một tiêu đề màu xanh

Một đoạn văn màu đỏ.
  border: 2px solid powderblue;
  padding: 30px;
}

Hãy tự mình thử »


CSS nội bộ

Một CSS nội bộ được sử dụng để xác định một kiểu cho một trang HTML duy nhất.

Thí dụ

Một tiêu đề màu xanh

Một đoạn văn màu đỏ.
  border: 2px solid powderblue;
  margin: 50px;
}

Hãy tự mình thử »


CSS nội bộ

Một CSS nội bộ được sử dụng để xác định một kiểu cho một trang HTML duy nhất.

Thí dụ

Một tiêu đề màu xanh

Hãy tự mình thử »

CSS nội bộ

Thí dụ

Một tiêu đề màu xanh

Hãy tự mình thử »

CSS nội bộ

Thí dụ

Một tiêu đề màu xanh

Hãy tự mình thử »

Bạn có thể đọc thêm về các đường dẫn tệp trong các đường dẫn tệp HTML.

Tóm tắt chương


Sử dụng thuộc tính HTML style để tạo kiểu nội tuyến

  • Sử dụng phần tử HTML <style> để xác định CSS nội bộ
  • Sử dụng phần tử HTML <link> để tham khảo tệp CSS bên ngoài
  • Sử dụng phần tử HTML <head> để lưu trữ và các phần tử
  • Sử dụng thuộc tính CSS <style>2 cho màu văn bản
  • Sử dụng thuộc tính CSS <style>3 cho phông chữ văn bản
  • Sử dụng thuộc tính CSS <style>4 cho kích thước văn bản
  • Sử dụng thuộc tính CSS <style>5 cho biên giới
  • Sử dụng thuộc tính CSS <style>6 cho không gian bên trong biên giới
  • Sử dụng thuộc tính CSS <style>7 cho không gian bên ngoài biên giới
  • Mẹo: Bạn có thể tìm hiểu nhiều hơn về CSS trong hướng dẫn CSS của chúng tôi.

Bài tập HTML You can learn much more about CSS in our CSS Tutorial.


Thẻ kiểu HTML


Nhãn

Sự mô tảXác định thông tin kiểu cho tài liệu HTML
Hãy tự mình thử »Xác định liên kết giữa tài liệu và tài nguyên bên ngoài
Hãy tự mình thử »Để biết danh sách đầy đủ tất cả các thẻ HTML có sẵn, hãy truy cập tham chiếu thẻ HTML của chúng tôi.

Các loại CSS được sử dụng trong HTML là gì?



Các loại CSS được sử dụng trong HTML là gì?

CSS có thể được thêm vào các tài liệu HTML theo 3 cách: nội tuyến - bằng cách sử dụng thuộc tính kiểu bên trong các phần tử HTML.Nội bộ - bằng cách sử dụng một phần tử trong phần.Bên ngoài - Bằng cách sử dụng một phần tử để liên kết với tệp CSS bên ngoài.Inline - by using the style attribute inside HTML elements. Internal - by using a