IMG-LOGO
×

Tài Liệu Môn Học

Khoá học lập trình HTML/CSS

Nhập Môn HTML

[Video] Giới thiệu về lập trình web - HTML/CSS [Video] Hướng dẫn tạo ra 1 trang web đơn giản nhất - HTML/CSS [Video] Hướng dẫn debug/test/develop trên trình duyệt web -HTML/CSS

Tìm Hiểu Thẻ HTML5

[Video] Formatting Text using Tags - html tags [Video] Creating Hyperlinks and Anchors (phần 1) - html tags [Video] Creating Hyperlinks and Anchors (phần 2) - html tags [Video] Cách dùng thẻ img và map để hiển thị hình ảnh html - HTML/CSS [Video] Tìm hiểu về đường dẫn file (path file) trong HTML/CSS

CSS

[Video] Tìm hiểu thuộc tính trong thẻ html [Video] Giới thiệu CSS & Sử dụng các thuộc tính cơ bản [Video] Hướng dẫn tách biệt CSS và HTML [Video] Xử lý Event trong CSS (:hover, :active, :link, ...) - Lập trinh HTML/CSS

Table & CSS

[Video] Tìm hiểu table trong HTML/CSS - HTML/CSS

Form & CSS

[Video] Thiết kế form trong HTML/CSS/JS [Video] Tìm hiểu tag videos, audio trong HTML/CSS/JS [Video] Bài tập - Thiết kế form gửi email - Lập trình HTML/CSS/JS

Thiết Kế Layout

[Video] Tìm hiểu Frame qua ví dụ quản lý khách sạn HTML/CSS [Video] Hướng dẫn tạo layout bằng thẻ Div căn bản [Video] Hướng dẫn thiết kế layout bằng thẻ div nâng cao (Thiết kế giao diện web gokisoft)




Trang Chủ Học HTML5 - CSS3 HTML Styles - Các phong cách của HTML

HTML Styles - Các phong cách của HTML

by GokiSoft.Com - 10:48 21/05/2020 2,074 Lượt Xem

Thuộc tính HTML style thường được dùng để thêm các phong cách vào một thành phần, như là màu, font, kích thước, và nhiều hơn nữa.

ví dụ

I am Red

I am Blue

I am Big
<!DOCTYPE html>
<html>
<body>

<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>

</body>
</html>




Thuộc tính style trong HTML


Đặt phong cách của một thành phần HTML, có thể thực hiện với thuộc tính style .

Thuộc tính HTML style có các cú pháp sau:

<tagname style="property:value;">


property là một thuộc tính CSS. value là một giá trị CSS.

Bạn sẽ học về CSS sau.



Màu nền


Thuộc tính CSS background-color định nghĩa màu nền cho một thành phần HTML.

Ví dụ này đặt màu nền cho một trang thành xanh nhạt:

ví dụ

<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>





Màu của văn bản


Thuộc tính CSS color định nghĩa màu văn bản cho một thành phần HTML:

ví dụ

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>




Phông chữ


Thuộc tính font-family trong CSS định nghĩa phông sẽ được sử dụng cho một thành phần HTML:

ví dụ

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
<!DOCTYPE html>
<html>
<body>

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

</body>
</html>




Cỡ chữ


Thuộc tính font-size trong CSS định nghĩa cỡ chữ cho một thành phần HTML:

ví dụ

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
<!DOCTYPE html>
<html>
<body>

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

</body>
</html>




Căn chỉnh văn bản


Thuộc tính text-align trong CSS định nghĩa sự căn chỉnh văn bản theo chiều chiều ngang cho một thành phần HTML:

ví dụ

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
<!DOCTYPE html>
<html>
<body>

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

</body>
</html>



Tóm tắt chương


  • Dùng thuộc tính style để tạo kiểu cho các thành phần HTML
  • Dùng background-color cho màu nền
  • Dùng color cho màu chữ
  • Dùng font-family cho phông chữ
  • Dùng font-size cho kích thước chữ
  • Dùng text-align cho căn chỉnh chữ


Bình luận



Chia sẻ từ lớp học

Phân Loại Bài Viết

Tài Liệu Tham Khảo

Đã sao chép!!!