[CSS Căn bản] CSS là gì? cách sử dụng CSS trong website

Cập nhật lần cuối: 01 Tháng Tư 2018

CSS cơ bản

1,558 Lượt xem

CSS (Cascading Style Sheets) là một loại ngôn ngữ mô tả style của tài liệu HTML. Hiểu đơn giản có nghĩa nó sẽ mô tả các phần tử (tag) HTML sẽ được hiển thị như thế nào, ví dụ như kích thước, màu sắc, vị trí,… Series này sẽ giúp bạn tìm hiểu về CSS cơ bản để bạn có thể kết hợp với HTML tạo ra một website có giao diện hoàn chỉnh.

CSS là gì?

Như mô tả phía trên thì cơ bản có thể hiểu CSS sẽ giúp cho HTML hiển thị một cách đẹp hơn. CSS được viết trong một tệp có đuôi mở rộng là *.css. Bạn có thể sử dụng trình soạn thảo văn bản để tạo file và biên tập CSS.

Một đoạn mã CSS cơ bản như sau.

body {
    background-color: red;
}

Cấu trúc của CSS

Cấu trúc của một CSS bao gồm 4 thành phần là *, Class, ID và tag.

* Có nghĩa là sẽ áp dụng cho toàn bộ tag trong html, bạn nên hạn chế sử dụng loại CSS này và chỉ nên sử dụng 1 làn trong toàn tệp. Cấu trúc: *{CSS}

ví dụ:

*{  background: red; }

Class sẽ được áp dụng cho những tag có khai báo class. Cấu trúc: .Tên_Class{CSS}

ví dụ:

HTML:  <h1 class="title">Đây là tiêu đề</h1>
CSS: .title{color:red;}

ID sẽ được áp dụng cho những tag có ai cụ thể. Thông thường ID rất ít khi sử dụng để viết CSS nó thường sử dụng cho javasctrip và ngôn ngữ lập trình hơn là CSS. Trong HTML mỗi tag chỉ nên có một ID và không nên sử dụng lại ID cho các tag khác như class. Cấu trúc: #Tên_ID{CSS}

ví dụ:

HTML:  <h1 id="title">Đây là tiêu đề</h1>
CSS: #title{color:red;}

Tag sẽ được sử dụng khi bạn muốn áp dụng css cho toàn bộ các tag đó trong HTML. như việc muốn áp dụng màu cho toàn bộ thẻ <p> có trong HTML. Cấu trúc: tên_tag{css}

ví dụ:

p{color:red;}

Cách viết CSS

CSS là một ngôn ngữ linh hoạt, nó không chỉ linh hoạt trong việc tùy biến giao diện mà ngay cả trong việc triển khai nó cũng trở nên linh hoạt. CSS thường được triển khai dưới 3 dạng là linked, embed, và inline. Mình sẽ giải thích cụ thể 3 dạng triển khai này.

Triển khai CSS theo dạng linked

Đây là dạng triển khai CSS thường được sử dụng nhất. Theo dạng này, các CSS sẽ được viết riêng trên một file có đuôi mở rộng là *.css. và sau đó được gọi vào HTML theo một link được gọi là linked, dạng link đó có cấu trúc như sau:

<link rel="stylesheet" href="style.css" type="text/css">

Dạng link này thường được để trong thẻ <head>

Triển khai CSS theo dạng embed

Đây là kiểu triển khai CSS nhúng. CSS sẽ được nhúng trực tiếp vào trong file HTML. Các đoạn mã css được triển khai trong cặp thẻ <style type="text/css">CSS</style>. những đoạn thẻ nhúng này thường được để ở thẻ <head> nhưng cũng có thể để ở trong thẻ <body>.

Triển khai CSS theo dạng inline

Inline là phương pháp triển khai css vào trực tiếp trong thẻ. Đây là dạng ít khi được sử dụng do tính linh hoạt và kế thừa kém, do đó phương pháp này không khuyến khích bạn sử dụng. Tuy nhiên trong một số trường hợp bạn có thể miễn cưỡng sử dụng phương pháp này. Ngoài ra khi kết hợp với Javasctrip thì một số mã javasctrip có thể sử dụng phương pháp chèn trực tiếp này để làm thay đổi tức thì hiển thị làm giao diện trở nên sinh động hơn. Cú pháp dạng inline như sau:

<div style="background: red;"></div>

Thành phần trong CSS

Các thành phần Css sẽ được viết trong dấu “{Thành_phần_css}” Mỗi thành phần trong CSS bao gồm 2 phần là phần thuộc tính (property) và giá trị của thuộc tính (value), mỗi thành phần css được ngăn cách bởi đấu”;”

Cấu trúc cú pháp của một CSS hoàn chỉnh

CSS hỗ trợ rất nhiều thuộc tính, các thuộc tính mới xuất hiện trong CSS3 càng làm CSS trở nên phong phú hơn bao giờ hết. Bạn có thể xem chi tiết các thuộc tính tại đây https://www.w3schools.com/cssref/.

Trong những bài viết sau mình sẽ hướng dẫn bạn cách tạo menu đa cấp sử dụng CSS và HTML.

Tác giả: ĐOÀN CÔNG TUẤN

Với niềm đam mê về khoa học công nghệ thông tin, đặc biệt là lập trình. Tôi đã thành lập blog Tuandc.com để lưu trữ và chia sẻ những kiến thức thực tế có được trong quá trình làm việc. Với kinh nghiệm gần 10 năm làm việc trong lĩnh vực, những kiến thức tôi chia sẻ hy vọng sẽ giúp được phần nào đó.