<p><span style="font-weight: 400;">CSS l&agrave; c&ocirc;ng cụ hỗ trợ đắc lực cho c&aacute;c nh&agrave; lập tr&igrave;nh website hiện nay. N&oacute; cho ph&eacute;p tạo ra c&aacute;c trang web đẹp mắt, ấn tượng. Vậy CSS l&agrave; g&igrave;, c&aacute;ch thức hoạt động của n&oacute; như thế n&agrave;o? H&atilde;y c&ugrave;ng tek4.vn t&igrave;m tất tần tật về CSS qua b&agrave;i viết dưới đ&acirc;y nh&eacute;!&nbsp;</span></p>
<h2><strong>CSS l&agrave; g&igrave;?</strong></h2>
<p><span style="font-weight: 400;"><a href="https://tek4.vn/css-la-gi">CSS</a> (Cascading Style Sheets) l&agrave; ng&ocirc;n ngữ được sử dụng để t&igrave;m v&agrave; định dạng lại c&aacute;c phần tử được tạo ra từ HTML. N&oacute;i một c&aacute;ch dễ hiểu, CSS l&agrave; ng&ocirc;n ngữ d&ugrave;ng để tạo ra phong c&aacute;ch của website. Trong khi HTML đ&oacute;ng vai tr&ograve; định dạng phần tử tr&ecirc;n website như tạo đoạn văn bản, ti&ecirc;u đề, bảng,... th&igrave; CSS sẽ gi&uacute;p th&ecirc;m style v&agrave;o c&aacute;c phần tử HTML đ&oacute;. C&aacute;c style cụ thể thường được th&ecirc;m l&agrave; đổi bố cục, m&agrave;u sắc trang, font chữ, m&agrave;u chữ, cấu tr&uacute;c mới,... Ng&ocirc;n ngữ đ&aacute;nh dấu phổ biến nhất l&agrave; HTML nhưng bạn c&oacute; thể bắt gặp th&ecirc;m một số ng&ocirc;n ngữ kh&aacute;c như SVG, XML,...</span></p>
<p><span style="font-weight: 400;"><img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/0f849f43-95ba-4123-8a07-bc4da8a4b321" alt="css-la-gi" height="257" /></span></p>
<p><span style="font-weight: 400;">CSS được ph&aacute;t triển v&agrave;o năm 1996 bởi World Wide Web Consortium (W3C) bởi HTML kh&ocirc;ng thể gắn tag để định dạng trang web. Phương thức hoạt động của CSS l&agrave; t&igrave;m dựa v&agrave;o c&aacute;c v&ugrave;ng chọn như t&ecirc;n một thẻ HTML, ID name, class hay c&aacute;c kiểu tương đương. Sau đ&oacute;, n&oacute; sẽ &aacute;p dụng c&aacute;c thuộc t&iacute;nh cần thay đổi l&ecirc;n v&ugrave;ng chọn đ&oacute; v&agrave; gi&uacute;p người d&ugrave;ng chỉnh sửa trang web đẹp hơn.&nbsp;</span></p>
<h2><strong>CSS d&ugrave;ng để l&agrave;m g&igrave;?</strong></h2>
<p><span style="font-weight: 400;">CSS chỉ định mẫu tr&igrave;nh b&agrave;y t&agrave;i liệu d&agrave;nh cho người d&ugrave;ng th&ocirc;ng qua c&aacute;ch tạo kiểu v&agrave; thể hiện. C&aacute;c tệp t&agrave;i liệu thường ở dưới dạng văn bản v&agrave; được cấu tr&uacute;c ho&aacute; bằng ng&ocirc;n ngữ đ&aacute;nh dấu HTML. Tr&igrave;nh b&agrave;y t&agrave;i liệu l&agrave; chuyển th&agrave;nh dạng m&agrave; người xem c&oacute; thể sử dụng được. C&ocirc;ng cụ hỗ trợ tr&igrave;nh b&agrave;y t&agrave;i liệu trực quan, sinh động l&agrave; c&aacute;c tr&igrave;nh duyệt (Firefox, Chrome, Edge), m&aacute;y t&iacute;nh, m&aacute;y in, m&aacute;y chiếu...&nbsp;</span></p>
<p><span style="font-weight: 400;">Cần lưu &yacute; rằng, tr&igrave;nh duyệt đ&ocirc;i khi được gọi l&agrave; t&aacute;c nh&acirc;n người d&ugrave;ng hay một chương tr&igrave;nh m&aacute;y t&iacute;nh với chức năng đại diện. Khi đề cập đến tr&igrave;nh duyệt trong CSS, ch&uacute;ng ta c&oacute; thể bắt gặp n&oacute; ở c&aacute;c dạng như t&aacute;c nh&acirc;n chuyển đổi HTML, chuyển đổi CSS th&agrave;nh PDF để in. Mặt kh&aacute;c, CSS cũng được sử dụng đề tạo kiểu văn bản đơn giản như thay đổi m&agrave;u sắc, k&iacute;ch thước ti&ecirc;u đề, li&ecirc;n kết. Hay từ một cột văn bản đơn lẻ tạo th&agrave;nh bố cục c&oacute; v&ugrave;ng nội dung ch&iacute;nh v&agrave; thanh b&ecirc;n cho c&aacute;c th&ocirc;ng tin li&ecirc;n quan. Thậm ch&iacute;, CSS c&ograve;n được sử dụng cho c&aacute;c hiệu ứng hoạt h&igrave;nh. Bạn c&oacute; thể xem chi tiết c&aacute;c li&ecirc;n kết trong đoạn n&agrave;y để hiểu r&otilde; hơn những g&igrave; m&agrave; CSS hỗ trợ cho website.&nbsp;</span></p>
<h2><strong>Cấu tr&uacute;c v&agrave; bố cục một đoạn CSS</strong></h2>
<p><span style="font-weight: 400;">Bố cục của một đoạn CSS thường dựa v&agrave;o h&igrave;nh hộp, trong đ&oacute;, mỗi hộp đều c&oacute; những khoảng trống tr&ecirc;n trang với c&aacute;c thuộc t&iacute;nh:&nbsp;</span></p>
<ul>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Padding: kh&ocirc;ng gian xung quanh nội dung như đoạn văn bản trong một đoạn CSS.&nbsp;</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Border: đường liền nằm ở ngay b&ecirc;n ngo&agrave;i của phần đệm CSS.&nbsp;</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Margin: khoảng c&aacute;ch xung quanh nằm ở ngo&agrave;i phần tử.&nbsp;</span></li>
</ul>
<p><span style="font-weight: 400;">Về cấu tr&uacute;c, một đoạn CSS bao gồm c&aacute;c phần như sau:&nbsp;</span></p>
<p><span style="font-weight: 400;">v&ugrave;ng chọn { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span></p>
<p><span style="font-weight: 400;">thuộc t&iacute;nh: gi&aacute; trị;&nbsp; &nbsp; &nbsp;&nbsp;</span></p>
<p><span style="font-weight: 400;">thuộc t&iacute;nh: gi&aacute; trị;&nbsp; &nbsp; &nbsp;</span></p>
<p><span style="font-weight: 400;">&hellip;. &nbsp; }</span></p>
<p><strong>VD:&nbsp;</strong></p>
<div class="">
<div><code><span class="enlighter-g1">&lt;</span><span class="enlighter-text">style</span><span class="enlighter-g1">&gt;</span></code></div>
</div>
<div class="">
<div><code><span class="enlighter-text">p </span><span class="enlighter-g1">{</span></code></div>
</div>
<div class="">
<div><code><span class="enlighter-text">color: blue;</span></code></div>
</div>
<div class="">
<div><code><span class="enlighter-text">text-weight: bold;</span></code></div>
</div>
<div class="">
<div><code><span class="enlighter-g1">}</span></code></div>
</div>
<div class="">
<div><code><span class="enlighter-g1">&lt;</span><span class="enlighter-text">style</span><span class="enlighter-g1">&gt;</span></code></div>
</div>
<p><span style="font-weight: 400;">Cấu tr&uacute;c n&agrave;y được khai b&aacute;o bằng v&ugrave;ng chọn, c&aacute;c gi&aacute; trị v&agrave; thuộc t&iacute;nh nằm trong dấu ngoặc nhọn. Mỗi thuộc t&iacute;nh sẽ mang một gi&aacute; trị ri&ecirc;ng ở dạng số hoặc t&ecirc;n gọi trong danh s&aacute;ch c&oacute; sẵn của CSS. C&aacute;c thuộc t&iacute;nh v&agrave; gi&aacute; trị được c&aacute;ch nhau bằng dấu hai chấm, mỗi d&ograve;ng khai b&aacute;o sẽ c&oacute; dấu phẩy ở cuối. Một v&ugrave;ng chọn kh&ocirc;ng bị giới hạn về thuộc t&iacute;nh.&nbsp;</span></p>
<p><span style="font-weight: 400;">Trong đ&oacute;:&nbsp;</span></p>
<ul>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Selector (bộ chọn): mẫu để chọn phần tử HTML m&agrave; người d&ugrave;ng cần định nghĩa phong c&aacute;ch. Th&ocirc;ng thường, c&aacute;c selector được sử dụng cho c&aacute;c trường hợp:&nbsp;</span></li>
</ul>
<ul>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">To&agrave;n bộ phần tử theo một dạng cụ thể n&agrave;o đ&oacute; như phần tử ti&ecirc;u đề H1.&nbsp;</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Thuộc t&iacute;nh ID v&agrave; Class của c&aacute;c phần tử.&nbsp;</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">C&aacute;c phần tử dựa v&agrave;o mối li&ecirc;n quan với phần tử trong c&acirc;y ph&acirc;n cấp t&agrave;i liệu.&nbsp;</span></li>
</ul>
<ul>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Declaration (khai b&aacute;o): chứa một hay nhiều khai b&aacute;o, ph&acirc;n t&aacute;ch với nhau bằng dấu phẩy. Mỗi khai b&aacute;o gồm c&oacute; t&ecirc;n v&agrave; gi&aacute; trị đặc t&iacute;nh CSS nằm trong c&aacute;c dấu ngoặc m&oacute;c v&agrave; được kết th&uacute;c bằng dấu chấm phẩy. V&iacute; dụ: <code>p { color: red; text-align: center;}.&nbsp;</code></span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Properties (thuộc t&iacute;nh): c&aacute;c c&aacute;ch m&agrave; bạn c&oacute; thể sử dụng để tạo kiểu cho một phần tử HTML, trong đ&oacute;, color c&oacute; thể được xem l&agrave; một thuộc t&iacute;nh của phần tử p. Do đ&oacute;, với CSS, bạn chỉ cần lựa chọn thuộc t&iacute;nh m&agrave; ch&iacute;nh bạn muốn t&aacute;c động nhất trong bộ quy tắc của m&igrave;nh.&nbsp;</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Gi&aacute; trị thuộc t&iacute;nh: nằm ở ph&iacute;a b&ecirc;n phải của thuộc t&iacute;nh, sau dấu hai chấm v&agrave; việc lựa chọn trong số đ&oacute; phụ thuộc v&agrave;o số lần xuất hiện của thuộc t&iacute;nh.&nbsp;</span></li>
</ul>
<p><span style="font-weight: 400;">Muốn xem to&agrave;n bộ thuộc t&iacute;nh của CSS, bạn c&oacute; thể xem trong CSS Reference của Mozilla.&nbsp;</span></p>
<h2><strong>CSS hoạt động như thế n&agrave;o?</strong></h2>
<p><span style="font-weight: 400;">Ng&ocirc;n ngữ CSS sử dụng cấu tr&uacute;c tiếng Anh đơn giản để tạo ra bộ quy tắc c&oacute; thể tận dụng được. Dưới đ&acirc;y l&agrave; quy tr&igrave;nh hoạt động của CSS khi một tr&igrave;nh duyệt tải trang web v&agrave; c&aacute;c tr&igrave;nh duyệt kh&aacute;c nhau:&nbsp;</span></p>
<ul>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Bước 1: Tr&igrave;nh duyệt tải xuống ng&ocirc;n ngữ định dạng HTML.&nbsp;</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Bước 2: HTML được đổi th&agrave;nh *DOM, m&ocirc; h&igrave;nh đối tượng t&agrave;i liệu. N&oacute; đại diện cho t&agrave;i liệu được lưu trữ trong bộ nhớ m&aacute;y t&iacute;nh.&nbsp;</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Bước 3: Tr&igrave;nh duyệt nạp to&agrave;n bộ t&agrave;i nguy&ecirc;n li&ecirc;n kết với HTML như video, h&igrave;nh ảnh được nh&uacute;ng. C&aacute;c t&agrave;i nguy&ecirc;n n&agrave;y cũng đ&atilde; li&ecirc;n kết với CSS v&agrave; được JavaScript xử l&yacute; trước khi bước v&agrave;o giai đoạn tiếp theo.&nbsp;</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Bước 4: Ph&acirc;n t&iacute;ch c&uacute; ph&aacute;p CSS đ&atilde; t&igrave;m nạp v&agrave; sắp xếp lại c&aacute;c quy tắc kh&aacute;c nhau theo Selector th&agrave;nh c&aacute;c &ldquo;nh&oacute;m&rdquo;. Dựa tr&ecirc;n c&aacute;c selector được t&igrave;m thấy, những quy tắc n&agrave;o cần được &aacute;p dụng cho c&aacute;c n&uacute;t trong DOM sẽ được t&igrave;m ra. Đồng thời, CSS cũng đ&iacute;nh k&egrave;m style cho ch&uacute;ng theo y&ecirc;u cầu cụ thể (bước n&agrave;y được gọi l&agrave; c&acirc;y kết xuất render tree).&nbsp;</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Bước 5: Bố tr&iacute; c&acirc;y kết xuất tr&ecirc;n cấu tr&uacute;c m&agrave; n&oacute; sẽ xuất hiện sau khi c&aacute;c quy tắc được &aacute;p dụng.&nbsp;</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Bước 6: Giai đoạn Painting, hiển thị trực quan visual display tr&ecirc;n m&agrave;n h&igrave;nh. Như vậy l&agrave; ho&agrave;n tất một quy tr&igrave;nh hoạt động cơ bản của CSS trong qu&aacute; tr&igrave;nh tạo phong c&aacute;ch web.&nbsp;</span></li>
</ul>
<p><span style="font-weight: 400;"><img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" title="Quy tr&igrave;nh gọi CSS khi website được người d&ugrave;ng truy cập" src="https://tek4.vn/public_files/7674b7a0-5f8e-4793-977b-ac74705d2a62" alt="C&aacute;ch hoạt động của CSS" /></span></p>
<h2><strong>CSS c&oacute; bao nhi&ecirc;u phi&ecirc;n bản?</strong></h2>
<p><span style="font-weight: 400;">Nhiều người d&ugrave;ng hiện nay chưa biết c&aacute;c phi&ecirc;n bản của CSS l&agrave; g&igrave;, ch&uacute;ng c&oacute; điểm g&igrave; giống v&agrave; kh&aacute;c nhau. Tr&ecirc;n thực tế, tồn tại 3 phi&ecirc;n bản ch&iacute;nh của CSS dưới đ&acirc;y.&nbsp;</span></p>
<h3><em><span style="font-weight: 400;">Internal CSS Styles</span></em></h3>
<p><span style="font-weight: 400;">Internal CSS Styles l&agrave; phi&ecirc;n bản đầu ti&ecirc;n gi&uacute;p th&ecirc;m Style CSS v&agrave;o trang web của bạn. N&oacute; được đặt trong mục của một trang nhất định v&agrave; chỉ hoạt động tr&ecirc;n đ&oacute;. Internal CSS Styles mang đến ưu điểm tuyệt vời l&agrave; kh&ocirc;ng bị ảnh hưởng bởi style sheet, kh&ocirc;ng cần upload qu&aacute; nhiều files, classes hay IDs. Nhược điểm của phi&ecirc;n bản n&agrave;y l&agrave; y&ecirc;u cầu tải về mỗi khi trang được load n&ecirc;n kh&aacute; tốn thời gian chờ đợi. Internal CSS Styles chỉ ảnh hưởng tới một trang n&ecirc;n kh&ocirc;ng thể ứng dụng cho nhiều trang tr&ecirc;n c&ugrave;ng một CSS.&nbsp;</span></p>
<h3><em><span style="font-weight: 400;">External CSS Styles</span></em></h3>
<p><span style="font-weight: 400;">External CSS Styles l&agrave; một trong những phi&ecirc;n bản ti&ecirc;u biểu đ&ecirc;t th&ecirc;m Style CSS v&agrave;o website m&agrave; bạn kh&ocirc;ng n&ecirc;n bỏ qua. External CSS được sử dụng bằng c&aacute;ch li&ecirc;n kết n&oacute; với file .CSS từ b&ecirc;n ngo&agrave;i. Ưu điểm nổi bật của n&oacute; l&agrave; k&iacute;ch thước trang nhỏ v&agrave; cấu tr&uacute;c gọn hơn HTML. Kh&ocirc;ng giống như Internal CSS Styles, file style.CSS c&oacute; thể sử dụng cho nhiều trang, tốc độ load trang cũng nhanh hơn nhiều. Tuy vậy, External CSS Systems c&oacute; một nhược điểm l&agrave; trang kh&ocirc;ng được tải lại ho&agrave;n to&agrave;n. Phải cho đến khi External CSS được load l&ecirc;n th&igrave; mới kết th&uacute;c qu&aacute; tr&igrave;nh.&nbsp;</span></p>
<h3><em><span style="font-weight: 400;">Inline CSS Styles</span></em></h3>
<p><span style="font-weight: 400;">Inline CSS Styles l&agrave; phi&ecirc;n bản tiếp theo m&agrave; tek4.vn muốn giới thiệu cho bạn đọc. Cũng tương tự như hai phi&ecirc;n bản tr&ecirc;n, CSS Inline style c&oacute; khả năng sửa nhanh, test hoặc xem trước c&aacute;c thay đổi với số requests HTTP &iacute;t hơn. Thế nhưng, Inline CSS kh&ocirc;ng được khuyến kh&iacute;ch sử dụng bởi mỗi tag HTML cần một styles độc lập. Sử dụng Inline CSS th&igrave; việc kiểm so&aacute;t website trở n&ecirc;n kh&oacute; khăn hơn v&agrave; cần được &aacute;p dụng cho mỗi element.&nbsp;</span></p>
<h2><strong>Nh&uacute;ng CSS v&agrave;o website</strong></h2>
<p><span style="font-weight: 400;">Để CSS thực thi tr&ecirc;n trang web hay HTML Documents, lập tr&igrave;nh vi&ecirc;n cần nh&uacute;ng CSS v&agrave;o website. Trong đ&oacute;, ba c&ocirc;ng cụ được sử dụng l&agrave; Inline CSS, Internal CSS v&agrave; External CSS. Cụ thể:&nbsp;</span></p>
<ul>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Inline CSS nh&uacute;ng trực tiếp v&agrave;o t&agrave;i liệu HTML qua cặp thẻ &lt;style&gt; &lt;/style&gt;.&nbsp;</span></li>
</ul>
<ul>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Cấu tr&uacute;c&nbsp; <code>&lt;p style=&rdquo;color: blue;&rdquo;&gt;This is a paragraph.&lt;/p&gt;</code>.&nbsp;</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Gi&aacute; trị của c&aacute;c style l&agrave; cặp thuộc t&iacute;nh định dạng CSS, t&aacute;c động l&ecirc;n ch&iacute;nh phần tử đ&oacute;.&nbsp;</span></li>
</ul>
<ul>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Internal: sử dụng thẻ &lt;style&gt; b&ecirc;n trong thẻ &lt;head&gt; của HTML để tạo ra nơi viết m&atilde; CSS.&nbsp;</span></li>
</ul>
<ul>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">C&aacute;c cặp thuộc t&iacute;nh định dạng CSS đặt v&agrave;o trong cặp thẻ <code>&lt;style type= &ldquo;text/css&rdquo;&gt; &lt;/style&gt;.&nbsp;</code></span></li>
</ul>
<ul>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">C&aacute;c cặp thẻ <code>&lt;style type=&rdquo;text/css&rdquo;&gt;&lt;/style&gt;</code> được đặt b&ecirc;n trong cặp thẻ &lt;head&gt;&lt;/head&gt;.&nbsp;</span></li>
</ul>
<ul>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Cấu tr&uacute;c <code>&lt;head&gt; &lt;style type = text/css&gt; body {background-color: blue;} p { color: yellow;} &lt;/ style&gt; &lt;/ head&gt;.</code>&nbsp;</span></li>
</ul>
<ul>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">External CSS: Ri&ecirc;ng với External CSS, một tập tin .css được tạo ri&ecirc;ng v&agrave; nh&uacute;ng v&agrave;o t&agrave;i liệu HTML qua cặp thẻ &lt;link&gt;.&nbsp;</span></li>
</ul>
<ul>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">C&aacute;c thuộc t&iacute;nh định dạng được đặt v&agrave;o b&ecirc;n trong tập tin CSS ho&agrave;n to&agrave;n độc lập so với file.&nbsp;</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Nh&uacute;ng tập tin CSS v&agrave;o trang web bằng c&aacute;ch d&ugrave;ng thẻ link <code>&lt;link rel=&rdquo;stylesheet&rdquo;type=&rdquo;text/css&rdquo;href=&rdquo; đường dẫn đến tập tin CSS&rdquo;&gt;</code> đặt ở phần head.&nbsp;</span></li>
</ul>
<p><strong>Kết&nbsp;</strong></p>
<p><span style="font-weight: 400;">CSS được kết hợp với ng&ocirc;n ngữ markup HTML để tạo ra phong c&aacute;ch cho website. Với ba loại style CSS ch&iacute;nh, bạn c&oacute; thể tạo ra một website đẹp mắt, ấn tượng. Hy vọng những chia sẻ từ tek4.vn c&oacute; thể giải đ&aacute;p thắc mắc CSS l&agrave; g&igrave;, c&aacute;ch thức hoạt động, c&aacute;ch nh&uacute;ng CSS v&agrave;o website. Tr&acirc;n trọng!&nbsp;</span></p>

Admin

CSS là gì? Cấu trúc và bố cục của CSS trên website

Cùng tác giả

Admin

Có liên quan