Trang chủ Web CSS CSS, Cascading Style Sheets là gì?

CSS, Cascading Style Sheets là gì?

Chia sẻ bởi

24/07/2021 - Cập nhật: 11/08/2021

1696

Đại lý vé máy bay giá rẻ nhất cả nước Nương Huỳnh

Mục mục bài viết

CSS là tên viết tắt của Cascading Style Sheets nó mô tả cách hiển thị của các phần tử HTML được hiển thị trên màn hình, giấy hoặc trong các phương tiện khác. CSS là ngôn ngữ tạo phong cách cho trang Web. Nó dùng để tạo phong cách và định kiểu cho những yếu tố được viết dưới dạng ngôn ngữ đánh dấu, như là HTML.

Ví dụ dưới đây là mã của CSS:

<style>
body {background-color: #fff; text-align:center; }
h1 {color: #000; font-size: 20px;}
p{font-family: Roboto; font-size:18px;}
</style>

Hiểu đơn giản hơn, CSS là ngôn ngữ tạo phong cách cho trang Web của bạn thể hiện như màu sắc, kiểu chữ, Font chữ…được viết dưới dạng ngôn ngữ đánh dấu như HTML. Ưu điểm của lập trình CSS là nó có thể điều khiển định dạng của nhiều trang, bài viết Web cùng một lúc giúp tiết kiệm thời gian và công sức cho người viết Web.

CSS hoạt động như thế nào?

CSS dùng cấu trúc tiếng Anh để định nghĩa một bộ quy tắc bạn có thể tận dụng chúng. HTML không được dùng để tạo ra Style cho Website, nó chỉ giúp bạn đánh dấu từng phần để giúp bạn biết yếu tố đó là gì.

Làm thế nào để tạo ra Style cho văn bản đó? Cú pháp của CSS rất đơn giản. Trong CSS có phần bộ chọn và khối khai báo. Bạn sẽ chọn một yếu tố và khai báo nó làm gì. Đến đây thì bạn hiểu rồi đúng không!

Một số quy tắc cần ghi nhớ khi khai báo CSS

Bộ chọn – Selector sẽ trỏ đến phần tử HTML để tạo kiểu, ở đây là h1.
Khối khai báo – Declaration cách nhau bởi dấu chấm phẩy ;
Mỗi khai báo bao gồm một tên thuộc tính CSS và một giá trị, được phân tách bằng dấu hai chấm :
Khai báo CSS luôn kết thúc bằng dấu chấm phẩy ;, và khối khai báo được đặt trong dấu ngoặc nhọn { }.

Ví dụ:

<style>
 p {font-family: Roboto; font-size:18px; color:green; text-align:center;}
</style>

Tất cả các phần tử trong <p> được căn giữa, màu xanh lá và kích thước Font chữ 18px, Font chữ mặc định là Roboto.

Tương tự, có thể viết như này:

<style>
p{
font-family: Roboto; 
font-size:18px; 
color:green; 
text-align:center;
}
</style>

Hai cách viết trên đều giống nhau, các bạn có thể sử dụng 1 trong 2.

Hữu ích cho bạn:

Có mấy loại CSS?

Có 3 loại CSS: Đó là External Style CSS, Inline Style, Internal Style CSS.

External Style CSS

External Style CSS được sử dụng nhiều nhất vì nó thuận tiện nhất. Mọi thứ được lưu trong File .css. Có nghĩa là bạn có thể tạo phong cách ở File khác áp dụng CSS vào trang bạn muốn. External Style CSS sẽ cải thiện thời gian tải trang rất nhiều.

Định dạng External Style Sheet trong CSS:

body{
  background-color: #fff, font-family: Roboto;}
h1{
    color: #000; }
p{
   font-size: 15px;}

Lưu file này thành định dạng .css, ví dụ như tradevntech.css

Ví dụ:

Định dạng External Style Sheet được liên kết với các trang HTML bằng thẻ <link>

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="tradevntech.css">
<body>
<h1> Đây là một ví dụ</h1>
<p> Đây là ví dụ đầu tiên</p>
</body>
</html>

Ở trên href="tradevntech.css" chính là đường dẫn File .css mà bạn đã lưu .

Internal Style CSS

Internal Style CSS là Style được tải lên mỗi khi trang Web được refresh. Vì vậy, nó làm tăng thời gian tải trang. Ngoài ra, bạn sẽ không dùng được một Style CSS cho nhiều trang vì nó chỉ áp dụng cho từng trang một. Tuy nhiên, lợi ích của Style CSS Internal là khi mọi thứ đã đặt trong một trang thì nó dễ chia sẻ trang để xem trước hơn.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
body {
     background-color: #fff; }
h1{ 
    color:#000;
    padding: 20px;}
</style>
</head>
<body>
<h1>Đây là một ví dụ</h1>
<p>Đây là ví dụ 1</p>
</body>
</html>

Inline style

Cuối cùng, chúng ta sẽ nói về style Inline style. Inline hoạt động với một yếu tố nhất định có Tag <style>. Mỗi thành phần đều cần được tạo phong cách riêng, vì vậy đây không hẳn là cách tốt nhất và dễ nhất để xử lý CSS. Nhưng có thể khá tiện lợi, vì nếu bạn muốn thay đổi chỉ một yếu tố, bạn không cần truy cập trực tiếp vào file CSS để chỉnh sửa mà sử dụng Inline CSS.

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="tradevntech.css">
<body>
<h1> Đây là một ví dụ</h1>
<p> Đây là ví dụ 1></p>
<p style="font-size: 20px; color: #000">Đây là ví dụ 2</p>
<p style="font-size: 18px; color: #001">Đây là ví dụ 3</p>
</body>
</html>

CSS có vai trò gì trên Website

CSS được sử dụng để xác định Style cho trang Web của bạn, bao gồm thiết kế, bố cục và các biến thể hiển thị cho các thiết bị và kích thước màn hình khác nhau.

CSS giải quyết vấn đề lớn liên quan đến HTML

HTML KHÔNG BAO GIỜ chứa các thẻ định dạng một trang Web.
HTML được tạo ra để mô tả nội dung của một trang Web, như: <h1> Đây là một tiêu đề </h1>, <p> Đây là một đoạn văn</p>

Khi các thẻ như <font> và các thuộc tính màu được thêm vào đặc tả HTML 3.2, dường như nó bắt đầu là một cơn ác mộng cho các nhà phát triển Web. Việc phát triển các trang Web lớn, nơi các phông chữ và thông tin màu sắc được thêm vào từng trang, đã trở thành một quá trình lâu dài và tốn kém. Để giải quyết vấn đề này, World Wide Web Consortium W3C đã tạo CSS. CSS đã xóa định dạng kiểu khỏi trang HTML!

CSS tiết kiệm thời gian làm việc

Các định nghĩa Style thường được lưu trong các tệp .css. Với tệp External Style Sheet, bạn có thể thay đổi giao diện của toàn bộ trang Web bằng cách thay đổi một tệp!

Kết luận

CSS được tạo để kết hợp với ngôn ngữ HTML để tạo phong cách cho trang Web.
Có 3 loại Style CSS chính: External Style CSS, Internal Style CSS và Inline Style CSS.
Bạn có thể sử dụng External Style CSS để tạo phong cách cho nhiều trang cùng lúc.
Bạn sẽ không phải đi đâu xa để thấy cách triển khai CSS vì bản thân nó cũng quan trọng như chính ngôn ngữ Markup vậy.

Cuối cùng, chúng tôi hy vọng bạn thấy bài viết này hữu dụng để thêm thông tin CSS là gì?. Nếu có bất kỳ thắc mắc nào hãy để lại bình luận bên dưới.

Hãy cho chúng tôi một lượt hoặc chia sẻ bài viết với bạn bè của bạn. Cảm ơn vì đã ghé thăm, hãy tiếp tục ghé thăm Tradevn.tech. Xin cám ơn!