CSS là gì? Bố cục, cấu trúc và cách nhúng vào website

Ngay cả khi bạn không phải là một lập trình viên, bạn có thể đã nghe nói về HTML – ngôn ngữ đánh dấu cơ bản nhất xuất
hiện từ những năm 90. Một yếu tố của lập trình cũng quan trọng không kém cùng với HTML và Java Scrip, chính là CSS.
Nhưng CSS là gì, nó hoạt động như thế nào và tại sao lại quan trọng như vậy? Cùng Cánh Cam tìm hiểu
ngay sau đây nhé!

CSS là gì?

Bạn có thắc mắc CSS viết tắt của từ gì? Và, CSS là gì? CSS viết tắt của Cascading Style Sheets (các tập tin theo tầng), là ngôn ngữ để mô tả cách trình bày của các trang Web bao gồm màu sắc, bố cục và phông chữ. Nó cho phép một người điều chỉnh bản trình bày với các loại thiết bị khác nhau. CSS độc lập với HTML
(ngôn ngữ đánh dấu) và có thể được sử dụng với bất kỳ ngôn ngữ đánh dấu dựa trên XML (ngôn ngữ đánh dấu mở rộng)
nào.

CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996, vì HTML không được thiết kế để giúp định dạng
trang web. Bạn có thể hiểu đơn giản rằng, nếu HTML đóng vai trò định dạng các phần tử trên website như việc tạo ra
các đoạn văn bản, các tiêu đề, bảng,…thì CSS sẽ giúp chúng ta có thể thêm style vào các phần tử HTML đó như đổi bố
cục, màu sắc trang, đổi màu chữ, font chữ, thay đổi cấu trúc… Nếu không có CSS, các trang web sẽ trông khá nhàm
chán.

Vậy, mối tương quan giữa HTML và CSS là gì? HTML là ngôn ngữ markup (nền tảng của site) và CSS định
hình phong cách (tất cả những gì tạo nên giao diện website), chúng là không thể tách rời.

Bạn có thể sử dụng CSS cùng với HTML để làm cho trang web của bạn hiển thị với khách truy cập. Điều này có nghĩa là,
nó mang lại cho bạn mức độ kiểm soát cao hơn đối với việc trình bày. Ngay từ màu sắc văn bản đến kiểu phông chữ, bạn
có thể tùy chỉnh các trang web theo cách bạn muốn. Thêm vào đó, nó cho phép bạn hoàn thành phân đoạn trình bày trong
thời gian ngắn hơn.

>> Xem thêm Java là gì? Tổng quan về khái niệm, lợi ích, cách hoạt động của Java

>> Xem thêm Python là gì? Tổng quan về ngôn ngữ lập trình Python

Bố cục và cấu trúc một đoạn CSS

Bố cục của một đoạn CSS là gì?

• Padding (Vùng đệm): Không gian xung quanh nội dung, chẳng hạn như không gian xung quanh một đoạn văn bản.
• Border (Đường viền): Là đường liền nằm bên ngoài phần đệm CSS.
• Margin (Lề): Khoảng cách xung quanh nằm ở ngoài phần tử.

Cấu trúc của một đoạn CSS là gì?

Một đoạn CSS bao gồm các phần như sau:

Cấu trúc này mang ý nghĩa khai báo bằng vùng chọn, các thuộc tính và giá trị sẽ nằm trong cặp dấu ngoặc nhọn {}. Mỗi
thuộc tính sẽ luôn có một giá trị riêng. Phần giá trị và thuộc tính cách nhau bằng dấu hai chấm, và mỗi một dòng
khai báo thuộc tính sẽ luôn có dấu chấm phẩy ở cuối. Một vùng chọn có thể sử dụng không giới hạn thuộc tính.

Trong đó:

Selector (Bộ chọn): Selector cho phép người sử dụng có thể lựa chọn các phần tử HTML mà không làm
ảnh hưởng đến xung quanh. Các Selector được áp dụng cho các trường hợp sau:

• Tất cả phần tử theo một dạng cụ thể nào đó.
• Thuộc tính ID và class của các phần tử.
• Các phần tử dựa vào mối liên quan với các phần tử khác trong cây phân cấp tài liệu.

Declaration (Khai báo): Declaration có chức năng xác định thuộc tính của một phần tử bất kỳ trong
chương trình. Khối khai báo chứa một hoặc nhiều khai báo, phân tách với nhau bằng các dấu chấm phẩy.

Properties (Thuộc tính): Những cách mà bạn có thể tạo kiểu cho một phần tử HTML. (Với trường hợp này
thì font-size được xem là một trong những thuộc tính của phần tử p). Chính vì vậy, với CSS thì bạn chỉ cần lựa chọn
thuộc tính mà chính bạn muốn tác động nhất trong bộ quy tắc của mình.

Giá trị thuộc tính: Ở bên phải của thuộc tính sau dấu hai chấm(:), chúng ta sẽ sở hữu giá trị thuộc
tính mà việc lựa chọn trong số đó phụ thuộc vào số lần xuất hiện của thuộc tính.

Tại sao nhà thiết kế web nên sử dụng CSS?

Bạn truy cập nhiều trang web trong một ngày, nhưng trong số đó, chỉ một số ít thu hút được sự chú ý của bạn bằng tính
thẩm mỹ của chúng. Không có gì sai khi chỉ sử dụng HTML để tạo các trang web và ứng dụng. Tuy vậy việc sử dụng CSS khi thiết kế website với nhiều kiểu định dạng sẽ làm cho nội dung dễ đọc hơn. Hãy cùng xem xét những lợi ích mà CSS mang lại:

1. CSS giúp giải quyết vấn đề lớn của HTML

HTML có những hạn chế của nó khi nói đến bố cục. HTML không có phần tử để để định dạng cho trang web. HTML được dùng
đặc biệt để tạo nội dung cho trang. Trong khi để phát triển một trang web lớn, các thẻ như phông chữ, màu sắc, kiểu
nền, các sắp xếp phần tử, đường viền và kích thước phải được lặp lại trên mọi trang. Đây là một quá trình rất dài
tốn thời gian và công sức.

Để giải quyết vấn đề này, World Wide Web Consortium (W3C) đã tạo ra CSS. Nhờ CSS mà bạn có quyền kiểm soát tốt hơn
nhiều đối với bố cục của các trang web của mình.

Bạn có thể chỉ định chính xác phông chữ sẽ lớn như thế nào, chính xác vị trí của một phần tử trên một trang, trang sẽ
trông như thế nào khi được in ra và hơn thế nữa.Từ đó, quá trình cập nhập nội dung sẽ dễ dàng hơn và có thể hạn chế
tối thiểu làm rối cho mã HTML.

2. Tiết kiệm rất nhiều thời gian và tải trang nhanh hơn

Khi trình duyệt nhìn thấy một bảng trong mã của bạn, nó cần phải đọc tất cả mã của bạn hai lần. Một lần để hiểu cấu
trúc của bảng và một lần nữa để thực sự hiển thị nội dung bên trong bảng.

Hình ảnh thường là yếu tố nặng nhất của một trang và thường là thủ phạm chính làm chậm các trang của bạn. Chắc chắn
rằng các hình ảnh có thể được tối ưu hóa để làm cho chúng nhỏ hơn, nhưng chúng vẫn lớn hơn một dòng mã và mỗi hình
ảnh yêu cầu một yêu cầu khác của trình duyệt đối với máy chủ.

Ưu điểm lớn nhất của CSS là gì? Chính là CSS được lưu trong trong một tệp riêng biệt nên mã sẽ được
lưu vào bộ nhớ cache trong trình duyệt sau yêu cầu ban đầu. Nó không cần phải được tải xuống lại cho các trang tiếp
theo. Bạn có thể thay đổi toàn bộ trang web bằng cách thay đổi chỉ một tệp. Từ đó, chúng ta có thể tiết kiệm được
tối đa thời gian làm việc với nó, làm code ngắn lại giúp kiểm soát dễ dàng hơn các lỗi không đáng có.

CSS tạo ra nhiều style khác nhau nên có thể được áp dụng với nhiều trang web. Việc này cũng tránh được việc lặp lại
các định dạng của các trang web tương tự nhau.

3. Cung cấp đa dạng các thuộc tính

CSS cung cấp các thuộc tính chi tiết hơn HTML để định nghĩa giao diện của trang web. CSS giúp người dùng nhiều styles
trên một trang web HTML nên khả năng điều chỉnh trang của bạn trở nên vô hạn. Ví dụ một số thuộc tính phổ biến mà
bạn có thể đã gặp qua là:

• Thuộc tính định dạng box: box-sizing, max-width, min-width, outline, padding, border, background-color,
  box-shadow, overflow,…
• Thuộc tính định dạng văn bản: font-family, font-size, font-weight, font-style, text-align, text-indent,
  text-shadow,…
• Thuộc tính định dạng background: background, background-clip, background-color, background-image,
  background-origin, background-size,..

4. Bảo trì dễ dàng

Việc phát triển web đã được đơn giản hóa với sự ra đời của các ngôn ngữ tập trung vào các yếu tố cần thiết. Sử dụng
CSS cho phép bạn không chỉ hợp lý hóa việc phát triển mà còn cả bảo trì. Bảo trì một trang bao gồm tất cả các kiểu
định dạng dễ dàng hơn nhiều so với việc bảo trì từng trang riêng lẻ.

5. Có nhiều kiểu hơn HTML

CSS có nhiều thuộc tính hơn so với HTML. Nhờ đó bạn có thể làm cho trang web hiển thị tốt hơn so với chỉ dùng HTML.

6. Khả năng tương thích với nhiều thiết bị

Mọi người sử dụng các thiết bị thông minh khác nhau để xem một trang web cụ thể. Nó có thể là điện thoại thông minh,
PC hoặc máy tính xách tay. Vì mục đích này, các trang web bắt buộc phải tương thích với thiết bị. CSS đảm bảo nhiệm
vụ được thực hiện trơn tru bằng cách cung cấp khả năng tương thích tốt hơn.

7. Tiêu chuẩn web toàn cầu

Các thuộc tính HTML hiện không còn được sử dụng nữa do những hạn chế trong tính năng. Sử dụng CSS giúp tạo ra những
trang web tương thích với mọi trình duyệt theo quy chuẩn toàn cầu.

Các phiên bản của CSS

Trên đây, chúng ta đã cùng tìm hiểu CSS là gì, bố cục và chức năng dùng để định dạng website. Vậy
CSS là duy nhất hay còn được phát triển thêm các phiên bản cải tiến? CSS được xuất hiện lần đầu tiên vào ngày
10/10/1994 bởi Håkon Wium Lie và các phiên bản dần được hình thành qua nhiều giai đoạn. Các phiên bản mới sẽ giúp
sửa chữa lỗi của phiên bản cũ và mang nhiều ưu điểm hơn.

CSS phiên bản 1 (CSS1)

CSS phiên bản 1 (CSS1) được chính thức phát hành vào năm 1996 và bao gồm các thuộc tính để thêm các thuộc tính phông
chữ như kiểu chữ và màu nhấn của văn bản, nền và các thuộc tính văn bản như khoảng cách giữa các từ, chữ cái và dòng
văn bản. Thật không may, việc thiếu hỗ trợ trình duyệt web đáng tin cậy đã ngăn cản sự phổ biến của CSS Cấp độ 1
trong vài năm.

CSS phiên bản 2 (CSS2)

CSS phiên bản 2 (CSS2) được W3C phát triển vào năm 1998 với những cải tiến từ CSS cấp 1 và mang đến những cải tiến
mới như định vị tuyệt đối, tương đối và cố định các yếu tố chỉ mục z. Đặc tính nổi bật được bổ sung để định vị cho
phép CSS được sử dụng cho bố cục trang. Nó cũng giới thiệu thêm các kiểu font chữ mới để định dạng văn bản.

CSS phiên bản CSS 2.1

Sau phiên bản 2 còn có một sự nâng cấp khác là CSS 2.1 được giới thiệu vào tháng 4 năm 2011. Nhằm mục đích sửa lỗi và
loại bỏ những tính năng kém hoặc không tương thích cho người dùng.

CCS Phiên bản 3 (CSS3)

CSS phiên bản 3 (CSS3) sớm nhất được ra mắt vào năm 1999. CSS3 bổ sung các thuộc tính kiểu trình bày, cho phép bạn
xây dựng hiệu quả các bản trình bày từ các tài liệu Web. CSS3 được chia thành nhiều tài liệu riêng biệt được gọi là
mô-đun. Mô-đun cho phép các thuộc tính được hoàn thành và phê duyệt nhanh hơn

Một số tính năng nổi bật nhất được thêm vào cho CSS3 có thể kể đến:

• Drop Shadows – Hiệu ứng bóng đổ
• Text Shadow – Bóng văn bản
• Linear Gradients – Độ dốc tuyến tính
• Radial Gradients – Độ dốc xuyên tâm
• Multiple Background Images – Nhiều hình nền

CSS3 vẫn đang là phiên bản CSS đang được ưa chuộng và sử dụng rộng rãi ở hầu hết các trang web hiện nay

CCS Phiên bản 4 (CSS4)

CSS4 là phiên bản kế thừa CSS3 hiện vẫn đang được cập nhật, phát triển và và có rất nhiều phương thức mới được thêm
vào. như: Mutability, Hyperlink, Matches-any…

Cách nhúng CSS vào website

Để CSS có thể thực thi trên website hoặc HTML Documents thì phải tiến hành nhúng CSS vào website. Khi nói đến việc áp
dụng CSS cho các trang web, thường có ba 3 cách nhúng CSS vào website:

• Inline CSS – Nhúng trực tiếp vào tài liệu HTML thông qua cặp thẻ <style> </style>.
• Internal CSS – Dùng thẻ <style> bên trong thẻ <head> của HTML để tạo ra nơi viết mã CSS.
• External CSS – Bằng cách sử dụng phần tử <link> để liên kết với tệp CSS bên ngoài

Inline CSS

CSS nội tuyến được sử dụng để áp dụng một kiểu duy nhất cho một phần tử HTML.

CSS nội tuyến sử dụng thuộc tính style của một phần tử HTML. Mã CSS chỉ tác động lên chính phần tử đó.

Ví dụ: Đặt màu văn bản của phần tử <h1> thành màu xanh lam- blue và màu văn bản của phần tử <p> thành màu
đỏ-red

Internal CSS

CSS nội bộ được sử dụng để xác định kiểu cho một trang HTML.

CSS nội bộ được xác định trong phần <head> của trang HTML, trong phần tử <style>

Ví d: Đặt màu văn bản của tất cả các phần tử <h1> thành màu xanh lam-blue và màu văn bản của tất cả các phần tử
<p> thành màu đỏ-red. Ngoài ra, trang sẽ được hiển thị với màu nền “powderblue”

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. External CSS được sử dụng để xác định
kiểu cho nhiều trang HTML.

External CSS có thể được viết trong bất kỳ trình soạn thảo văn bản nào. Tệp không được chứa bất kỳ mã HTML nào và
phải được lưu bằng phần mở rộng .css.

Để có thể thực hiện nhúng tập tin CSS vào trang web, hãy thêm liên kết đến biểu định kiểu này trong phần <head>
của mỗi trang HTML

Hy vọng những chia sẻ trên đây đã mang lại cho bạn thêm nhiều kiến thức mới về CSS là gì? Bố cục và
cấu trúc của CSS ra sao? Làm sao để sử dụng CSS code? Nếu bạn còn thắc mắc gì về
các ngôn ngữ lập trình đừng ngần ngại liên hệ với Cánh Cam nhé!

>> Xem thêm Thiết kế website bán hàng cần lưu ý điều gì ?