• Giới thiệu
  • Điều khoản
  • Khuyến mãi
  • Mã giảm giá
  • Series bài viết
    • Học WordPress cơ bản
    • Học HTML cơ bản
    • Học Excel cơ bản
  • Dịch vụ
    • Tạo web/blog với theme SuperHero
  • Liên hệ
Nguyễn Hùng
  • WordPress
    • Thủ thuật WordPress
    • WordPress Plugin
    • Themes WordPress
  • Lập trình web
    • Học HTML
  • MMO & Marketing
    • Kiếm tiền online
    • Marketing Online
    • Thủ thuật Seo
  • Tin Học VP
    • Thủ thuật Excel
    • Thủ thuật Word
    • Thủ thuật PowerPoint
    • Thủ thuật
      • Thủ thuật Internet
      • Thủ thuật máy tính
      • Thủ thuật phần mềm
  • Tiện ích
    • Photoshop Online
    • Ghép ảnh Online
    • PDF sang Word Online
    • Tải tài liệu từ tailieu.vn
  • Video
No Result
View All Result
Nguyễn Hùng
  • WordPress
    • Thủ thuật WordPress
    • WordPress Plugin
    • Themes WordPress
  • Lập trình web
    • Học HTML
  • MMO & Marketing
    • Kiếm tiền online
    • Marketing Online
    • Thủ thuật Seo
  • Tin Học VP
    • Thủ thuật Excel
    • Thủ thuật Word
    • Thủ thuật PowerPoint
    • Thủ thuật
      • Thủ thuật Internet
      • Thủ thuật máy tính
      • Thủ thuật phần mềm
  • Tiện ích
    • Photoshop Online
    • Ghép ảnh Online
    • PDF sang Word Online
    • Tải tài liệu từ tailieu.vn
  • Video
No Result
View All Result
Nguyễn Hùng
No Result
View All Result
Home Học HTML

Bài 13: Thuộc tính STYLE trong HTML

Nguyễn Hùng by Nguyễn Hùng
28/08/2018
in Học HTML
0

  1. Ví dụ về thuộc tính style trong HTML
  2. Một số cặp giá trị của thuộc tính style thường dùng
    1. Thuộc tính color
    2. Thuộc tính background-color
    3. Thuộc tính font-size
    4. Thuộc tính font-family
    5. Thuộc tính text-align
    6. Thuộc tính border
    7. Thuộc tính width, height
Bài 13: Thuộc tính STYLE trong HTML
5 (1 vote)

Trong bài viết trước đây mình cũng đã nói về cấu trúc của thẻ và thuộc tính của thẻ HTML rồi. Và các bạn cũng hiểu cách sử dụng thuộc tính trong HTML rồi chứ, nếu chưa hiểu thì bạn xem qua bài viết tìm hiểu về cấu trúc của thẻ và thuộc tính trong HTML nhé. Trong bài này mình sẽ nói về thuộc tính style trong HTML vì nó là 1 thuộc tính thường xuyên được sử dụng.

Thuộc tính style trong HTML là 1 thuộc tính đặc biệt. Đúng như tên gọi của nó, nó dùng để khai báo các định dạng cho thẻ HTML. Giá trị của thuộc tính style có thể là 1 hoặc nhiều cặp thuộc tính: giá trị. Giá trị của thuộc tính style thường được sử dụng là các giá trị dùng để định dạng màu sắc, font chữ, cỡ chữ, màu nền,…Ngoài ra còn rất nhiều giá trị khác của thuộc tính style mà bạn có thể tự tìm hiểu thêm.

Ví dụ về thuộc tính style trong HTML

Chúng ta sẽ gán cho thẻ <p>thuộc tính style các giá trị là màu chữ và cỡ chữ đó là:color:#068400 và font-size:16px. Và chúng ta sẽ có đoạn mã HTML như sau:

<p style="color:#068400;font-size:36px;">Thuộc tính style trong HTML</p>

Chú ý: Giữa các cặp giá trị của thuộc tính style được ngăn cách bởi dấu chấm phẩy (;).

Tham khảo thêm

  • Thẻ a trong HTML – Thẻ tạo link liên kết trong HTML
  • Thẻ Table trong HTML – Thẻ tạo bảng trong HTML
  • Thẻ IMG trong HTML – Thẻ chèn hình ảnh trong HTML

Một số cặp giá trị của thuộc tính style thường dùng

Thuộc tính color

Thuộc tính color dùng để thiết lập màu cho chữ trong phần tử. Giá trị của thuộc tính color có thể khai báo theo:

  • Tên màu (red, green, blue,…)
  • Theo mã Hex (#FF0000, #00ff00, #0000ff,…)
  • Theo giá trị RGB (rgb(255,0,0), rgb(0,122,20),…)

Ví dụ

<p style="color:green">Thuộc tính color theo tên màu</p>
<p style="color:#012bff">Thuộc tính color theo mã Hex</p>
<p style="color:rgb(255,0,0)">Thuộc tính color theo giá trị RGB</p>

Thuộc tính background-color

Thuộc tính background-color dùng để thiết lập màu nền cho phần tử. Giá trị của thuộc tính background-color cũng được xác định theo tên màu, mã Hex và giá trị RGB giống như thuộc tính color.

Ví dụ

<p style="background-color:green">Thuộc tính background-color theo tên màu</p>
<p style="background-color:#012bff">Thuộc tính background-color theo mã Hex</p>
<p style="background-color:rgb(255,0,0)">Thuộc tính background-color theo giá trị RGB</p>

Thuộc tính font-size

Thuộc tính font-size dùng để thiết lập cỡ chữ cho phần tử. Giá trị của thuộc tính font-size được định theo các đơn vị như:

  • px (pixel)
  • pt (point. 1inch=72pt)
  • em (1em = 16px)
  • Ngoài ra, còn một số đơn vị đo khác

Ví dụ

<p style="font-size:16px">Cỡ chữ dùng đơn vị px</p>
<p style="font-size:1em">Cỡ chữ dùng đơn vị em</p>

Thuộc tính font-family

Thuộc tính font-family dùng để khai báo định dạng font chữ cho phần tử. Giá trị của font-family có thể sử dụng một số kiểu chữ phổ biến như:

  • Times New Roman
  • Arial Black
  • Arial
  • Tahoma

Ví dụ

<p style="font-family:Times New Roman">Chữ dùng font Times New Roman</p>
<p style="font-family:Tahoma">Chữ dùng font Tahoma</p>
<p style="font-family:Arial">Chữ dùng font Arial</p>

Thuộc tính text-align

Thuộc tính text-align dùng để căn lề cho nội dung trong phần tử. Giá trị của thuộc tính text-align thường dùng là:

  • Left (căn lề trái)
  • Center (căn giữa)
  • Right (căn lề phải)

Ví dụ

<div>
<img src="https://nguyenhungplus.com/wp-content/uploads/2016/03/logo.png">
</div>
<div style="text-align:center">
<img src="https://nguyenhungplus.com/wp-content/uploads/2016/03/logo.png">
</div>
<div style="text-align:right">
<img src="https://nguyenhungplus.com/wp-content/uploads/2016/03/logo.png">
</div>

Thuộc tính border

Thuộc tính border giúp tạo đường viền xung quanh phần tử. Giá trị của thuộc tính border có 3 tham số:

  • Tham số thứ nhất là độ dày của đường viền
  • Tham số thứ hai là kiểu đường viền (none, hidden, dotted, dashed, solid, double,groove, ridge, inset, outset,….)
  • Tham số thứ ba là màu của đường viền.

Ví dụ

<p style="border:1px dashed red">Tạo đường viền dày 1px</p>

Thuộc tính width, height

Thuộc tính width, height là thuộc tính giúp thiết lập chiều rộng và chiều cao cho phần tử. Xác định theo đơn vị px hoặc %

Ví dụ

<div style="border:1px solid blue;width:300px;height:200px">Rộng 300px và cao 200px</div>
<div style="border:1px solid blue;width:100%;height:150px">Rộng 100% và cao 150px</div>

Lời kết

Trên đây là thông tin và cấu trúc của thuộc tính style trong HTML cùng với một số cặp giá trị thường dùng trong thuộc tính style mà mình muốn giới thiệu với các bạn. Hi vọng với chút kiến thức về thuộc tính style này sẽ giúp bạn định dạng được cho các thẻ trong HTML theo ý muốn.

Nếu thấy bài viết hay và có ý nghĩa hay like và share ủng hộ cho blog nhé. Nhớ theo dõi chuyên mụchọc HTMLđể học thêm nhiều thẻ khác trong HTML nhé. Chúc bạn thành công!

Tags: học html cơ bảnhọc html onlinetự học html
Nguyễn Hùng

Nguyễn Hùng

Internet là nơi mà mình học được tất cả những gì về Wordpress, SEO, SEM, MMO, và kiến thức máy tính. Những chia sẻ của mình là những thứ mình học được và đã làm thành công, có thể nó chưa được hoàn hảo nhưng chắc chắn nó sẽ giúp ích cho bạn. Xem thêm...

Related Posts

tu-hoc-html-co-ban

Bài 15: Hướng dẫn cách tạo FORM trong HTML

28/08/2018
tu-hoc-html-co-ban

Bài 14: Hướng dẫn cách dùng thuộc tính ID và thuộc tính CLASS trong HTML

11/08/2017
tu-hoc-html-co-ban

Bài 12: Thẻ IFRAME trong HTML – Nhúng trang web khác vào web của mình

25/05/2017
tu-hoc-html-co-ban

Bài 11: Phần tử khối (Block Element) và phần tử nội tuyến (Inline Element) trong HTML

05/05/2017
tu-hoc-html-co-ban

Bài 10: Thẻ a trong HTML – Thẻ tạo link liên kết trong HTML

28/08/2018
tu-hoc-html-co-ban

Bài 9: Thẻ Table trong HTML – Thẻ tạo bảng trong HTML

28/08/2018

Trả lời Hủy

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *




Bài viết mới nhất

review-khoa-hoc-ham-excel-online

Review khóa học Excel Online – Cách để trở thành cao thủ hàm Excel

25/01/2019
Hướng dẫn tracking chuyển đổi gửi form thành công với Contact Form 7 bằng Google Tag Manager

Hướng dẫn tracking chuyển đổi gửi form thành công với Contact Form 7 bằng Google Tag Manager

22/01/2019
bat-xac-minh-2-buoc-cho-gmail-5

Hướng dẫn bật xác minh 2 bước Gmail để bảo mật cho tài khoản Gmail

07/01/2019
lay-thong-tin-smtp-gmail-3

Hướng dẫn lấy thông tin thiết lập SMTP Gmail dễ dàng

07/01/2019
hawkhost-coupon-moi-nhat

HawkHost Coupon tháng 02/2019 – Mã giảm giá Hawk Hosting lên đến 40%

01/02/2019






Nguyễn Hùng

"Hello! Tớ là Nguyễn Hùng, blog này tớ xây dựng nhằm mục đích chia sẻ miễn phí các kiến thức máy tính và làm web Wordpress, SEO, SEM, MMO,... mà tớ biết cho tất cả mọi người. Cảm ơn bạn đã ghé qua blog, nếu thấy bài viết hay, hãy chia sẻ để ủng hộ tinh thần cho tớ nha. → Xem tiếp"

Theo dõi tớ

Danh mục

  • Học HTML
  • Hosting – Domain
  • Khuyến mãi
  • Kiếm tiền online
  • Life's
  • Marketing Online
  • Themes Wordpress
  • Thủ thuật Excel
  • Thủ thuật Internet
  • Thủ thuật máy tính
  • Thủ thuật Mobile
  • Thủ thuật phần mềm
  • Thủ thuật PowerPoint
  • Thủ thuật Seo
  • Thủ thuật văn phòng
  • Thủ thuật Word
  • Thủ thuật Wordpress
  • Video Hay
  • Wordpress Plugin

Bạn bè & Đối tác

– Blog iHuongDan

– Tự Học MMO

  • Giới thiệu
  • Điều khoản
  • Liên hệ

© 2015 - 2018 NguyenHungPlus.Com - Xây dựng & phát triển bởi Nguyễn Hùng.

No Result
View All Result
  • WordPress
    • Thủ thuật WordPress
    • WordPress Plugin
    • Themes WordPress
  • Lập trình web
    • Học HTML
  • MMO & Marketing
    • Kiếm tiền online
    • Marketing Online
    • Thủ thuật Seo
  • Tin Học VP
    • Thủ thuật Excel
    • Thủ thuật Word
    • Thủ thuật PowerPoint
    • Thủ thuật
      • Thủ thuật Internet
      • Thủ thuật máy tính
      • Thủ thuật phần mềm
  • Tiện ích
    • Photoshop Online
    • Ghép ảnh Online
    • PDF sang Word Online
    • Tải tài liệu từ tailieu.vn
  • Video

© 2015 - 2018 NguyenHungPlus.Com - Xây dựng & phát triển bởi Nguyễn Hùng.

Đăng ký nhận bản tin!

Đăng ký nhận bản tin!

Đăng ký email để nhận bài viết mới và các khuyến mãi, quà tặng trên blog Nguyễn Hùng.

Đăng ký thành công!