Trang chủ Blog Lập Trình Web CSS là gì? Cách chèn CSS vào HTML

Tiếp tục loạt bài viết về lập trình web hôm nay DNMedia sẽ giới thiệu tới bạn ngôn ngữ CSS. Một ngôn ngữ làm đẹp trang web không thể thiếu được. Để tìm hiểu rõ hơn về CSS là gì, cách thức hoạt động và nhúng CSS vào HTML như thế nào hãy đọc bài viết sau đây.

Ngôn ngữ CSS là gì?

CSS là viết tắt của Cascading Style Sheets, có vai trò định dạng hiển thị phần tử HTML trên trình duyệt. Khi viết HTML thông thường các phần tử sẽ hiển thị một các lộn xộn không theo trật tự nào cả. Nhưng khi có CSS mọi thứ trở nên ngăn nắp và đẹp mắt hơn.

Ngôn ngữ CSS là gì

Nó tương tự như lớp sơn tường trong ngôi nhà của bạn. HTML là tường, các cột bê tông. Khi lớp sơn được phủ lên tường sẽ bóng bẩy đẹp mắt hơn.

Cấu trúc chương trình CSS

Chương trình CSS sẽ được viết như sau:

bộ_chọn {
thuộc_tính: giá_trị;
[thuộc_tính_khác: giá_trị;]
}

Ví dụ:

.header {

background: #ffffff;

font-size: 16px;

}

Mọi chương trình CSS đều bắt đầu bằng Class hoặc ID. Class sẽ bắt đầu bằng dấu chấm “.” hoặc ID bằng dấu “#”.

Và phải mở đầu bằng dấu “{” kết thúc bằng dấu “}”. Khi kết thức một dòng lệnh bắt buộc phải có dấu “;”.

Một số thẻ không cần thêm dấu “.” hoặc “#” như body, img, div…

Cách nhúng CSS vào HTML

Để CSS hoạt động được thì phải nhúng nó vào HTML. Dưới đây là 3 cách chèn CSS vào trong tài liệu HTML:

Viết trực tiếp trên phần tử HTML:

Ví dụ:

<div style=”color:#555555;font-size:16px”>Đoạn văn bản</div>

Nhúng trong thẻ <head>…</head>:

Chương trình CSS sẽ được đặt bên trong cặp thẻ <head>

Ví dụ:

<head>

<style>

body {

background: #000000;

color: #ffffff;

}

</style>

</head>

Gọi file CSS từ bên ngoài:

Đây là cách được sử dụng trong lập trình web, trong tài liệu HTML sẽ có một dòng lệnh gọi file CSS từ bên ngoài vào.

Đoạn lệnh sẽ được đặt trong cặp thẻ <head>

Ví dụ:

<head>

<link rel=”stylesheet” href=”style.css”>

</head>

Kết luận: Bài viết này bạn đã biết được CSS là gì và cách chèn CSS vào HTML thông qua Internal, External và Inline CSS Styles. CSS là ngôn ngữ tương đối dễ học, tuy nhiên nó sẽ theo bạn trong suốt con đường lập trình web sau này. Có rất nhiều kiến thức về ngôn ngữ này, để học bạn có thể ghé thăm https://www.w3schools.com/css/ tại đây có những bài học về CSS cơ bản tới nâng cao khá tốt.

Ý kiến bình luận