Sử dụng CSS trong HTML - HTML CSS

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    6 thg 10, 2022

  • Số lượt xem

    340 lượt xem


HTML CSS là một phương tiện giúp định dạng các element, kiểm soát layout trang web, tiết kiệm thời gian.

CSS là gì?

Cascading Style Sheets (CSS) được dùng để định dạng các element và layout website.

Với CSS bạn có thể điều khiển mọi thứ từ color, font, font size, khoảng cách giữa các element, position, background images hoặc background colors và nhiều hơn thế nữa.

Mẹo: Từ khoá Cascading (xếp tầng) nghĩa là khi áp dụng một style cho parent element (element cha) thì các children element (element con) cũng sẽ được áp dụng theo. Vì vậy, nếu bạn đặt màu của văn bản của parent element thành "màu xanh" thì tất cả các tiêu đề, đoạn văn và các yếu tố văn bản khác trong children element cũng sẽ có cùng màu (trừ khi bạn chỉ định một cái gì đó khác)!

 

Sử dụng CSS

Có 3 cách để thêm CSS vào HTML:

  • Inline - sử dụng style attribute bên trong HTML elements
  • Internal - sử dụng <style> element bên trong thẻ <head>
  • External - sử dụng <link> element để đưa một file CSS bên ngoài vào HTML

Cách phổ biến nhất để thêm CSS vào HTML là External. Tuy nhiên, trong các hướng ví dụ chúng tôi sẽ dùng Inline và Internal styles, bởi vì nó trực quan và cũng giúp bạn thử một cách dễ dàng hơn.

Inline CSS

Inline CSS được dùng để style cho một HTML element.

Inline CSS dùng style attribute của một HTML element.

Ví dụ sau sẽ đổi màu chữ <h1> element thành màu xanh dương, và màu chữ của <p> element thành màu đỏ:

<h1 style="color:blue;">Tiêu đề màu xanh dương</h1>    <p style="color:red;">Đoạn văn bản màu đỏ.</p>

 

Internal CSS

Internal CSS sẽ được dùng cho một trang HTML.

Internal CSS sẽ được khai báo bên trong thẻ <head> của trang.

Ví dụ

<!DOCTYPE html>  <html>  <head>  <style>  body {background-color: powderblue;}  h1   {color: blue;}  p    {color: red;}  </style>  </head>  <body>    <h1>Tiêu đề</h1>  <p>Đoạn văn bản.</p>    </body>  </html>

 

External CSS

External CSS sẽ được dùng cho nhiều trang HTML.

Để sử dụng External CSS bạn cần khai báo thông qua thẻ <link> trong thẻ <head> của trang.

Ví dụ

<!DOCTYPE html>  <html>  <head>    <link rel="stylesheet" href="styles.css">  </head>  <body>    <h1>Tiêu đề</h1>  <p>Đoạn văn bản.</p>    </body>  </html>

External CSS có thể được viết bởi bất kỳ một text editor nào. Nó sẽ không bao gồm code HTML và được lưu dưới dạng file có đuôi .css.

Một file "style.css" sẽ trông như sau:

body {    background-color: powderblue;  }  h1 {    color: blue;  }  p {    color: red;  }

 

CSS Colors, Fonts và Font Sizes

Chúng tôi sẽ đưa ra một số thuộc tính CSS thường dùng, các thuộc tính khác bạn sẽ được học trong khoá CSS ở phần sau.

Thuộc tính CSS color được dùng để thay đổi màu văn bản.

Thuộc tính CSS font-family được dùng để khai báo loại font được sử dụng.

Thuộc tính CSS font-size được dùng để thay đổi kích thước văn bản.

Ví dụ

<!DOCTYPE html>  <html>  <head>  <style>  h1 {    color: blue;    font-family: verdana;    font-size: 300%;  }  p {    color: red;    font-family: courier;    font-size: 160%;  }  </style>  </head>  <body>    <h1>Tiêu đề</h1>  <p>Đoạn văn bản.</p>    </body>  </html>

 

CSS Border

Thuộc tính CSS border được dùng để tạo đường viền xung quanh các element.

Mẹo: Thuộc tính CSS border có thể được sử dụng cho gần như tất cả các element.

Ví dụ

p {    border: 2px solid powderblue;  }

 

CSS Padding

Thuộc tính CSS padding được dùng để tạo khoảng cách giữa phần content và phần border.

p {    border: 2px solid powderblue;    padding: 30px;  }

 

CSS Margin

Thuộc tính CSS margin được dùng để tạo khoảng cách giữa bên ngoài border giữa một element và một element khác.

p {    border: 2px solid powderblue;    margin: 50px;  }

 

Link to External CSS

External CSS sẽ được dùng link vào trang thông qua một URL bên ngoài website của bạn:

<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">

Thêm file CSS trong cùng một thư mục html trong trang web hiện tại:

<link rel="stylesheet" href="/html/styles.css">

Thêm file CSS trong cùng một thư mục với file HTML hiện tại:

<link rel="stylesheet" href="styles.css">

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về HTML

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.