Cách sử dụng CSS trong HTML và thuộc của tính CSS

CSS là ngôn ngữ tạo phong cách cho trang web. Biết cách sử dụng CSS trong HTML, ta có thể định dạng ra các phần tử HTML thật đặc biệt và chuyên nghiệp. Bài viết sau đây sẽ giúp bạn hiểu hơn về CSS cũng như cách sử dụng nó.

Khái niệm về CSS

Cascading Style Sheets, hay còn gọi là CSS, là một ngôn ngữ tạo phong cách cho trang Web. Về mặt ngữ nghĩa, ta có thể hiểu như sau:

  • Cascading là cách làm việc của CSS.
  • Style Sheets điều khiển cách hiển thị các nội dung của trang web.

CSS là một ngôn ngữ dùng để định dạng các phần tử HTML như chỉnh kích cỡ, font chữ, màu chữ, màu nền, đường viền, hình nền,…

Chúng ta có thể định dạng ra các phần tử HTML một cách chuyên nghiệp và đặc biệt thông qua việc sử dụng CSS.

CSS là một ngôn ngữ dùng để định dạng các phần tử HTML
CSS là một ngôn ngữ dùng để định dạng các phần tử HTML

CSS và HTML luôn đi cùng nhau. Cấu trúc và nội dung các phần tử trong trang do HTML tạo ra còn CSS sẽ quy định cách hiển thị phần tử như thế nào trên trang.

Lý do cần dùng CSS?

Chúng ta cần dùng CSS vì nó cho phép bạn định nghĩa kiểu và cách hiển thị các phần tử HTML. Từ đó, CSS sẽ hỗ trợ bạn phân tách nội dung và cách trình bày trang. Nếu chúng ta chỉ sử dụng HTML thì việc định dạng phần tử, kiểu phần tử phải ở cùng một vị trí với phần tử trong văn bản, điều này thật sự khó cho việc bảo trì.

Các định dạng sẽ được loại bỏ khỏi văn bản HTML, định dạng được lưu vào một file CSS khi sử dụng CSS.

Cách sử dụng CSS trong HTML

Chúng ta sẽ có ba cách sử dụng CSS trong HTML là:

  • Inline: mã CSS viết tại thuộc tính Style của phần tử HTML
  • Internal: mã CSS trong chính văn bản HTML, nằm trong khối thẻ <style>
  • External: mã CSS ở một file riêng biệt sau đó nạp vào trong HTML bằng phần tử <link>

1. Inline CSS

Ta đặt thuộc tính style vào thẻ mở của phần tử HTML, giá trị của thuộc tính style là các cặp thuộc tính định dạng CSS.

Ví dụ:

<!DOCTYPE html><html><body><img src=”http://webcoban.vn/image/h2.jpg” style=”width:200px;height:100px”></body></html>

2. Internal CSS

Ta đặt các cặp thuộc tính định dạng CSS vào bên trong cặp thẻ <style type=”text/css”></style>

Cặp thẻ <style type=”text/css”></style> thì được đặt bên trong cặp thẻ <head></head>

Ví dụ:

<!DOCTYPE html><html><head>    <style type=”text/css”>        h1 {            font-size:30px;            color:white;            background-color:red;        }        p {            background-color:gray;        }    </style></head><body>    <h1>webcoban.vn (WEB CƠ BẢN .VN)</h1>    <p>Hướng dẫn học lập trình web từ cơ bản đến nâng cao</p></body></html>

3. External CSS

Với External CSS, ta đặt các thuộc tính định dạng vào bên trong tập tin CSS. 

Trong cặp thẻ <head></head> của tập tin HTML, ta dùng thẻ <link rel=”stylesheet’type=”text/css”hrè=”đường dẫn đến tập tin CSS”> để nhúng tin CSS vào trang web.

Ví dụ:

Có một tập tin dinhdang.css (cùng cấp với tập tin HTML) có nội dung là:

h1 {    color:red;    font-size:50px;    font-family:Courier;}

Khi thực thi tập tin HTML có nội dung:

<!DOCTYPE html><html>    <head>        <link rel=”stylesheet” type=”text/css” href=”dinhdang.css”>    </head>    <body>        <h1>Hello HTML</h1>    </body></html>

Màn hình trình duyệt sẽ hiển thị là:

4. Thứ tự ưu tiên các cách sử dụng CSS

Khi một thuộc tính nào đó của phần tử được thiết lập bởi nhiều cách, thì thuộc tính sẽ nhận giá trị của các cách sử dụng CSS theo độ ưu tiên như sau:

1. Inline

2. Internal

3. External

Các thuộc tính định dạng CSS quan trọng

1. Color

Thuộc tính này dùng để thiết lập màu chữ cho phần tử. Xác định giá trị của thuộc tính theo:

  • Tên màu
  • Giá trị Hex
  • Giá trị RGB

2. Background – color

Thuộc tính thiết lập màu nền cho phần tử. Xác định giá trị thuộc tính theo tên màu, giá trị Hex, giá trị RGB.

3. Font – size

Thiết lập kích cỡ chữ cho phần tử. Giá trị thuộc tính xác định theo: 

  • px
  • em (1em = 16px)

4. Font – family

Thiết lập kiểu chữ cho phần tử.

5. Text – align

Căn lề cho nội dung của phần tử. Có 3 giá trị:

  • left: căn lề cho nội dung nằm bên trái
  • center: căn lề cho nội dung nằm ở giữa
  • right: căn lề cho nội dung nằm bên phải

6. Border

Tạo đường viền bao xung quanh phần tử.

7. Width, height

Thiết lập chiều rộng và chiều cao cho phần tử. Có thể xác định theo đơn vị px hoặc %.

Bài viết trên đây là một số thông tin cho những ai đang quan tâm đến cách sử dụng CSS trong HTML. Hy vọng bài viết sẽ đem đến nhiều thông tin hữu ích cho bạn trên con đường lập trình của mình.

Nếu bạn quan tâm, hãy xem các vị trí đang tuyển dụng của Got It tại: bit.ly/gotit-hanoi và đọc thêm về quy trình tuyển dụng tại đây.

https://vn.got-it.ai/blog/wp-content/uploads/2021/04/1_QAG9RXQyyMAY7i9OYo84FA.png
Got It Vietnam
February 07, 2021
Share this post to:
Tags:
0 Comments
Inline Feedbacks
View all comments
Các bài viết liên quan
CSS là gì? Kinh nghiệm giúp bạn tự học CSS tại nhà không nên bỏ qua!

CSS là gì? Kinh nghiệm giúp bạn tự học CSS tại nhà không nên bỏ qua!

Tự học CSS là một quy trình không có điểm dừng, vì thế những người mới bắt đầu sẽ dễ bị rối trong thư viện kiến thức về CSS. Vậy tự học CSS nên bắt đầu với những điều gì? Cùng tìm hiểu nhé! Mục lụcCSS là gì?Bạn nên chuẩn bị gì trước khi tự […]
Những code HTML cơ bản nhất

Những code HTML cơ bản nhất

Loại code HTML cơ bản dễ học nhất hiện nay là gì? Những người lập trình viên mới vào nghề thường khá lúng túng không biết nên bắt đầu học từ đâu và học gì dễ hiểu dễ thực hành nhất. Bài viết này sẽ chia sẻ đến bạn những thẻ HTML đơn giản và […]
Ngôn ngữ HTML là gì? Tìm hiểu cấu trúc HTML

Ngôn ngữ HTML là gì? Tìm hiểu cấu trúc HTML

Cấu trúc HTML mạch lạc, khoa học giúp cho website hoạt động ổn định. Hiện nay, mỗi website đều được xây dựng với những cấu trúc khác nhau. Vậy khi phát triển website, lập trình viên nên xây dựng cấu trúc ngôn ngữ web HTML như thế nào? Got It sẽ chia sẻ những thông […]
Giới thiệu về HTML – ngôn ngữ web phổ biến nhất hiện nay

Giới thiệu về HTML – ngôn ngữ web phổ biến nhất hiện nay

Những thông tin giới thiệu về HTML sẽ giúp những người mới học lập trình trau dồi kiến thức cơ bản. Hiện nay có rất nhiều loại ngôn ngữ web mới với những ưu điểm nổi bật, nhưng HTML vẫn là loại ngôn ngữ được nhiều lập trình viên ưu tiên sử dụng. Cùng tìm […]
Thẻ style trong HTML là gì? Các thuộc tính trong thẻ style

Thẻ style trong HTML là gì? Các thuộc tính trong thẻ style

Style trong HTML là một thuộc tính đặc biệt dùng để khai báo các định dạng cho thẻ HTML như màu sắc, font chữ, cỡ chữ, màu nền,… Bài viết này sẽ chia sẻ những kiến thức cơ bản về thẻ style và một số thuộc tính của thẻ này.    Mục lục1. Thẻ style trong […]
Stylesheet là gì? Chức năng và lợi ích của Stylesheet

Stylesheet là gì? Chức năng và lợi ích của Stylesheet

Trước đây, khi mỗi trang web được hiển thị, người ta không thể thay đổi bất cứ thứ gì trên đó. Bài viết này sẽ chia sẻ kiến thức Stylesheet là gì và khả năng hỗ trợ của nó trong HTML động nhằm thực hiện những thay đổi trên trang. Mục lục1. Khái niệm Stylesheet […]