Hướng dẫn style html - phong cách html

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người. Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất. Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook Facebook

1- HTML Styles

Câu chuyện về HTML Styles bắt đầu từ năm 1994, thời điểm mà website đang bắt đầu được sử dụng như một nền tảng cho các xuất bản điện tử. Người ta nhận thấy rằng rất khó khăn để tạo ra một trang web có bố cục và kiểu dáng (style) giống như các tờ báo giấy truyền thống. Điều này tạo ra nhu cầu cần phải có một "ngôn ngữ biểu đạt kiểu dáng trang" (style sheet language), và rồi ngôn ngữ CSS (Cascading Style Sheets) ra đời. HTML Styles bắt đầu từ năm 1994, thời điểm mà website đang bắt đầu được sử dụng như một nền tảng cho các xuất bản điện tử. Người ta nhận thấy rằng rất khó khăn để tạo ra một trang web có bố cục và kiểu dáng (style) giống như các tờ báo giấy truyền thống. Điều này tạo ra nhu cầu cần phải có một "ngôn ngữ biểu đạt kiểu dáng trang" (style sheet language), và rồi ngôn ngữ CSS (Cascading Style Sheets) ra đời.

CSS là một chủ đề thú vị và có nhiều điều để nói, nó nên được giới thiệu chi tiết trong một bài viết riêng biệt, bao gồm lịch sử và lợi ích mà CSS mang lại, thật tuyệt vời hãy đọc bài viết của tôi về CSS theo liên kết dưới đây: là một chủ đề thú vị và có nhiều điều để nói, nó nên được giới thiệu chi tiết trong một bài viết riêng biệt, bao gồm lịch sử và lợi ích mà CSS mang lại, thật tuyệt vời hãy đọc bài viết của tôi về CSS theo liên kết dưới đây:

• TODO Link?

Về cơ bản CSS định nghĩa ra các kiểu dáng (style) có thể áp dụng cho các phần tử của HTML, chẳng hạn thước, mầu sắc, font chữ,... CSS định nghĩa ra các kiểu dáng (style) có thể áp dụng cho các phần tử của HTML, chẳng hạn thước, mầu sắc, font chữ,...

Trong bài học này tôi sẽ giới thiệu cho bạn làm thế nào để sử dụng Style trong HTML, và một vài các thuộc tính (property) CSS cơ bản, chúng tôi có một chủ đề riêng biệt về CSS và bạn có thể học chi tiết hơn tại đây. Style trong HTML, và một vài các thuộc tính (property) CSS cơ bản, chúng tôi có một chủ đề riêng biệt về CSS và bạn có thể học chi tiết hơn tại đây.

2- Inline Style

Cách đơn giản nhất để áp dụng kiểu dáng cho một phần tử là sử dụng thuộc tính (attribute) style. style.

Ví dụ:

I am normal

I am red

I am blue and bold

I am big and italic

color, font-size, font-style, font-weight là các thuộc tính (property) của CSS. Mỗi thuộc tính của CSS quy định một khía cạnh kiểu dáng cho phần tử. là các thuộc tính (property) của CSS. Mỗi thuộc tính của CSS quy định một khía cạnh kiểu dáng cho phần tử.

OK, chúng ta sẽ làm quen với một vài thuộc tính (property) CSS thông dụng thông qua các ví dụ dưới đây: CSS thông dụng thông qua các ví dụ dưới đây:

CSS background-color

Thuộc tính (property) CSS background-color được sử dụng để chỉ định mầu nền cho phần tử, nó cũng có tác dụng đối với các phần tử con của phần tử hiện tại. CSS background-color được sử dụng để chỉ định mầu nền cho phần tử, nó cũng có tác dụng đối với các phần tử con của phần tử hiện tại.

background-color-example.html

    
    


     
CSS background-color

     
My Background Color is yellow!

CSS color

Thuộc tính (property) CSS color được sử dụng để chỉ định mầu chữ (text color) cho một phần tử, nó cũng có tác dụng đối với các phần tử con của phần tử hiện tại. CSS color được sử dụng để chỉ định mầu chữ (text color) cho một phần tử, nó cũng có tác dụng đối với các phần tử con của phần tử hiện tại.

I am red

CSS font-family

Thuộc tính (property) CSS font-family được sử dụng để thiết lập font chữ cho một phần tử, nó cũng có tác dụng đối với các phần tử con của phần tử hiện tại. CSS font-family được sử dụng để thiết lập font chữ cho một phần tử, nó cũng có tác dụng đối với các phần tử con của phần tử hiện tại.

font-family-example.html

CSS font-family


  
This is a Heading h3
  
This is a Paragraph



  This is a Paragraph

CSS font-size

Thuộc tính (property) CSS font-size được sử dụng để chỉ định kích thước font chữ cho phần tử, nó cũng có tác dụng đối với các phần tử con của phần tử hiện tại. CSS font-size được sử dụng để chỉ định kích thước font chữ cho phần tử, nó cũng có tác dụng đối với các phần tử con của phần tử hiện tại.

font-size-example.html

    This is a Paragraph (Default font-size)
 

    This is a Paragraph (font-size: 150%)


    This is a Paragraph (font-size: 35px)

CSS text-align

Thuộc tính (property) CSS text-align được sử dụng để chỉ định căn chỉnh văn bản theo chiều ngang (horizontal text alignment). Nó có 3 giá trị là: left, center, right. CSS text-align được sử dụng để chỉ định căn chỉnh văn bản theo chiều ngang (horizontal text alignment). Nó có 3 giá trị là: left, center, right.

text-align-example.html

    This is a Paragraph (text-align:left;)


    This is a Paragraph (text-align:center)


    This is a Paragraph (text-align:right)

3- CSS Class

CSS cho phép bạn tạo ra một lớp (class), nó là một nhóm các thuộc tính (property), và bạn có thể áp dụng lớp này cho một hoặc nhiều phần tử. Các lớp được định nghĩa bên trong một thẻ mở và thẻ đóng . cho phép bạn tạo ra một lớp (class), nó là một nhóm các thuộc tính (property), và bạn có thể áp dụng lớp này cho một hoặc nhiều phần tử. Các lớp được định nghĩa bên trong một thẻ mở .

Thẻ có thể đặt tại bất cứ vị trí nào trong tài liệu HTML, nhưng theo khuyến nghị nó nên được đặt trong thẻ . . Chú ý: Cần có dấu chấm ( . ) ngay trước tên của lớp.

Sau đó bạn có thể áp dụng lớp này cho các phần tử HTML: HTML:

    This is a Paragraph


  This is a Div

Xem code đầy đủ của ví dụ.

css-class-example.html

    
    
    


CSS Class


    This is a Paragraph


  This is a Div

Ví dụ, định nghĩa một nhóm các thuộc tính (property) áp dụng cho một thẻ cụ thể.

I am normal

I am red

I am blue and bold

I am big and italic

0

I am normal

I am red

I am blue and bold

I am big and italic

1

Xem code đầy đủ của ví dụ trên:

styles-for-tag-example.html

I am normal

I am red

I am blue and bold

I am big and italic

2

4- Tập tin CSS

Rất thường xuyên bạn viết các style trong một tập tin CSS riêng biệt, điều này làm cho tập tin có thể được sử dụng bởi nhiều tài liệu HTML khác nhau. style trong một tập tin CSS riêng biệt, điều này làm cho tập tin có thể được sử dụng bởi nhiều tài liệu HTML khác nhau.

Chẳng hạn, tạo một tập tin có tên main.css: main.css:

main.css

I am normal

I am red

I am blue and bold

I am big and italic

3

Và khai báo để sử dụng tập tin CSS nói trên trong tài liệu HTML:CSS nói trên trong tài liệu HTML:

using-css-file-example.html

I am normal

I am red

I am blue and bold

I am big and italic

4