Cách Sử Dụng CSS Trong HTML Và Thuộc Của Tính CSS - Blog | Got It AI

Trang chủ » Chỉnh Css Trong Html » Cách Sử Dụng CSS Trong HTML Và Thuộc Của Tính CSS - Blog | Got It AI

Có thể bạn quan tâm

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ó.

Mục lục

  • Khái niệm về CSS
  • Lý do cần dùng CSS?
  • Cách sử dụng CSS trong HTML
    • 1. Inline CSS
    • 2. Internal CSS
    • 3. External CSS
    • 4. Thứ tự ưu tiên các cách sử dụng CSS
  • Các thuộc tính định dạng CSS quan trọng
    • 1. Color
    • 2. Background – color
    • 3. Font – size
    • 4. Font – family
    • 5. Text – align
    • 6. Border
    • 7. Width, height

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 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>

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.

Từ khóa » Chỉnh Css Trong Html