<img style="width: 100%;" src="https://tek4.vn/public_files/bf79ba5e-5119-41f5-9a02-1cc0c2aecb29" alt="CSS-la-gi-2" />
<h2 style="text-align: justify;">CSS l&agrave; g&igrave;?</h2>
CSS (Cascading Style Sheets) l&agrave; một trong ba th&agrave;nh phần cốt l&otilde;i của một trang Web, thường được sử dụng c&ugrave;ng với HTML v&agrave; JavaScript. CSS cho ph&eacute;p ch&uacute;ng ta x&acirc;y dựng c&aacute;c phần tử HTML c&oacute; trạng th&aacute;i nhất định, gi&uacute;p trang Web trở n&ecirc;n ưa nh&igrave;n v&agrave; hấp dẫn hơn.
<h3 style="text-align: justify;">CSS d&ugrave;ng để l&agrave;m g&igrave;?</h3>
Hiển thị một tệp t&agrave;i liệu l&agrave; chuyển n&oacute; th&agrave;nh một định dạng m&agrave; người d&ugrave;ng c&oacute; thể sử dụng được. C&aacute;c tr&igrave;nh duyệt như Firefox, Chrome hoặc Edge được thiết kế để hiển thị c&aacute;c tệp t&agrave;i liệu HTML một c&aacute;ch trực quan.
CSS được sử dụng để hiển thị c&aacute;ch thức dữ liệu được hiển thị. Tệp t&agrave;i liệu HTML l&agrave; tệp văn bản được x&acirc;y dựng th&ocirc;ng qua ng&ocirc;n ngữ sử dụng c&aacute;c thẻ đ&aacute;nh dấu (&lt;&gt;). HTML l&agrave; ng&ocirc;n ngữ cơ bản v&agrave; l&agrave; nền tảng của một trang Web. CSS c&oacute; thể được sử dụng kết hợp với HTML nhằm hiển thị c&aacute;c đoạn văn bản một c&aacute;ch r&otilde; r&agrave;ng nhất, v&iacute; dụ như thay đổi m&agrave;u sắc v&agrave; k&iacute;ch thước của phần ti&ecirc;u đề, li&ecirc;n kết hoặc c&aacute;c h&igrave;nh ảnh.
<h2 style="text-align: justify;">Cấu tr&uacute;c một đoạn CSS</h2>
CSS l&agrave; một ng&ocirc;n ngữ c&oacute; quy tắc, v&igrave; vậy, ch&uacute;ng ta cần phải định nghĩa c&aacute;c quy tắc nhằm chỉ định c&aacute;ch tạo kiểu cho c&aacute;c phần tử hoặc nh&oacute;m phần tử cụ thể tr&ecirc;n trang Web.
V&iacute; dụ:&nbsp;Đoạn m&atilde; dưới đ&acirc;y hiển thị một quy tắc CSS rất đơn giản l&agrave;m thay đổi cỡ chữ v&agrave; m&agrave;u của đoạn văn bản trong thẻ h1:
<pre class="language-python"><code>h1{
 color: red;
 font-size: 5em;
}</code></pre>
Quy tắc tr&ecirc;n được &aacute;p dụng th&ocirc;ng qua việc sử dụng Selector trong CSS. Trong trường hợp n&agrave;y, ch&uacute;ng ta sẽ định dạng c&aacute;ch thức hiển thị cho tất cả c&aacute;c ti&ecirc;u đề cấp một, được biểu diễn bởi phần tử <code>h1</code>.
Ch&uacute;ng ta sử dụng một tập hợp c&aacute;c dấu ngoặc nhọn {} để bắt đầu viết c&aacute;c đoạn code định kiểu cho phần tử trong trang Web, b&ecirc;n trong cặp dấu ngoặc nhọn n&agrave;y chứa một hoặc nhiều c&acirc;u lệnh bao gồm c&aacute;c cặp thuộc t&iacute;nh v&agrave; gi&aacute; trị. Mỗi cặp gi&aacute; trị sẽ chỉ định một thuộc t&iacute;nh của phần tử m&agrave; ch&uacute;ng ta chọn, sau đ&oacute; l&agrave; một gi&aacute; trị m&agrave; ch&uacute;ng ta muốn g&aacute;n cho thuộc t&iacute;nh đ&oacute;.
Trước dấu hai chấm, ch&uacute;ng ta điền t&ecirc;n thuộc t&iacute;nh v&agrave; sau dấu hai chấm l&agrave; gi&aacute; trị của thuộc t&iacute;nh. Trong v&iacute; dụ tr&ecirc;n, ch&uacute;ng ta c&oacute; thuộc t&iacute;nh <code>color</code> nhằm chỉ định m&agrave;u sắc của đoạn văn bản. Ngo&agrave;i ra, ch&uacute;ng ta cũng c&oacute; thuộc t&iacute;nh <code>font-size</code> nhằm chỉ định k&iacute;ch thước của đoạn văn bản.
Ngo&agrave;i ra, ch&uacute;ng ta c&oacute; thể viết nhiều quy tắc lần lượt như sau:
<pre class="language-python"><code>h1 {
 color: red;
 font-size: 5em;
}

p {
 color: black;
}</code></pre>
<h2 style="text-align: justify;">CSS hoạt động như thế n&agrave;o?</h2>
Khi tr&igrave;nh duyệt hiển thị một trang Web, n&oacute; sẽ kết hợp nội dung của c&aacute;c tệp t&agrave;i liệu với c&aacute;c tệp chỉ định kiểu d&aacute;ng của tệp t&agrave;i liệu v&agrave; xử l&yacute; theo nhiều giai đoạn. C&aacute;c tr&igrave;nh duyệt kh&aacute;c nhau sẽ xử l&yacute; theo những c&aacute;ch kh&aacute;c nhau.
Dưới đ&acirc;y l&agrave; v&iacute; dụ về một tiến tr&igrave;nh xử l&yacute; đơn giản:
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Tr&igrave;nh duyệt sẽ nhận một tệp t&agrave;i liệu HTML từ m&aacute;y chủ.</li>
<li style="font-weight: 400;" aria-level="1">Tr&igrave;nh duyệt thực hiện chuyển đổi HTML th&agrave;nh một cấu tr&uacute;c DOM, biểu diễn c&aacute;c th&agrave;nh phần của tệp t&agrave;i liệu trong bộ nhớ của m&aacute;y t&iacute;nh.</li>
<li style="font-weight: 400;" aria-level="1">Sau đ&oacute;, tr&igrave;nh duyệt sẽ lấy về c&aacute;c t&agrave;i nguy&ecirc;n được li&ecirc;n kết với tệp t&agrave;i liệu HTML, v&iacute; dụ như h&igrave;nh ảnh v&agrave; video v&agrave; c&aacute;c tệp CSS được li&ecirc;n kết. B&ecirc;n cạnh đ&oacute;, c&aacute;c tệp JavaScript cũng được xử l&yacute; trong tiến tr&igrave;nh n&agrave;y.</li>
<li style="font-weight: 400;" aria-level="1">Tr&igrave;nh duyệt ph&acirc;n t&iacute;ch c&uacute; ph&aacute;p CSS v&agrave; sắp xếp c&aacute;c quy tắc kh&aacute;c nhau dựa theo Selector. Dựa tr&ecirc;n Selector m&agrave; n&oacute; t&igrave;m thấy, n&oacute; t&igrave;m ra c&aacute;c quy tắc được &aacute;p dụng cho c&aacute;c n&uacute;t tương ứng trong DOM v&agrave; chỉ định kiểu hiển thị cho ch&uacute;ng theo y&ecirc;u cầu (Bước trung gian n&agrave;y được gọi l&agrave; Render).</li>
<li style="font-weight: 400;" aria-level="1">Cuối c&ugrave;ng, nội dung của trang Web được hiển thị l&ecirc;n tr&ecirc;n m&agrave;n h&igrave;nh cho người d&ugrave;ng.</li>
</ul>
<h2 style="text-align: justify;">C&aacute;c c&aacute;ch sử dụng CSS</h2>
C&oacute; 3 phương ph&aacute;p tạo kiểu cho c&aacute;c phần tử HTML trong CSS như sau:&nbsp;
<ol style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Internal CSS</li>
<li style="font-weight: 400;" aria-level="1">External CSS</li>
<li style="font-weight: 400;" aria-level="1">Inline CSS</li>
</ol>
<h3 style="text-align: justify;">Internal CSS</h3>
Internal CSS l&agrave; c&aacute;ch thức m&agrave; ch&uacute;ng ta thực hiện đặt c&aacute;c quy tắc CSS nằm trong một tệp t&agrave;i liệu HTML. Để tạo thực hiện Internal CSS, ch&uacute;ng ta &aacute;p dụng c&aacute;c cặp thuộc t&iacute;nh v&agrave; gi&aacute; trị CSS b&ecirc;n trong phần tử <code>&lt;style&gt;</code>. V&iacute; dụ như sau: 
<pre class="language-python"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;head&gt;
 &lt;meta charset="utf-8"&gt;
 &lt;title&gt;CSS&lt;/title&gt;
 &lt;style&gt;
 h1 {
 color: blue;
 background-color: yellow;
 border: 1px solid black;
 }
 p {
 color: red;
 }
 &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;h1&gt;Inline CSS&lt;/h1&gt;
 &lt;p&gt;V&iacute; dụ đầu ti&ecirc;n&lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>
Trong một số trường hợp nhất định, giả sử bạn đang l&agrave;m việc trong hệ thống quản l&yacute; nội dung v&agrave; hệ thống n&agrave;y chặn việc sử dụng External CSS, Internal stylesheet n&ecirc;n được &aacute;p dụng.
Đối với một trang Web bao gồm nhiều trang con kh&aacute;c b&ecirc;n trong, việc sử dụng Internal CSS sẽ trở n&ecirc;n k&eacute;m hiệu quả. Để &aacute;p dụng CSS thống nhất cho nhiều trang, ch&uacute;ng ta sẽ phải sử dụng Internal CSS trong mỗi trang Web con. Điều n&agrave;y dễ dẫn đến t&igrave;nh trạng&nbsp; giảm năng suất x&acirc;y dựng một trang Web.
<h3 style="text-align: justify;">External CSS</h3>
External CSS l&agrave; c&aacute;ch thức thực hiện đặt c&aacute;c quy tắc CSS trong một tệp ri&ecirc;ng, c&oacute; phần đu&ocirc;i mở rộng <code>.css</code>. Đ&acirc;y l&agrave; phương ph&aacute;p phổ biến v&agrave; hữu &iacute;ch nhất để &aacute;p dụng CSS v&agrave;o trong một trang Web lớn bao gồm nhiều trang Web con. Ch&uacute;ng ta c&oacute; thể sử dụng 1 tệp CSS đối với nhiều tệp HTML kh&aacute;c nhau v&agrave; tạo kiểu cho c&aacute;c trang Web n&agrave;y với c&ugrave;ng một tập hợp c&aacute;c quy tắc CSS nhất định.
Dưới đ&acirc;y l&agrave; v&iacute; dụ về c&aacute;ch sử dụng External CSS:
<pre class="language-python"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;head&gt;
 &lt;meta charset="utf-8"&gt;
 &lt;title&gt;CSS&lt;/title&gt;
 &lt;link rel="stylesheet" href="style.css"&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;h1&gt;External CSS&lt;/h1&gt;
 &lt;p&gt;V&iacute; dụ thứ 2&lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>
Tệp <code>style.css</code> c&oacute; cấu tr&uacute;c như sau: 
<pre class="language-python"><code>h1 {
 color: blue;
 background-color: yellow;
 border: 1px solid black;
}

p {
 color: red;
}</code></pre>
Thuộc t&iacute;nh <code>href</code> trong thẻ <code>&lt;link&gt;</code> tham chiếu đến 1 tệp chứa c&aacute;c quy tắc CSS. Trong v&iacute; dụ tr&ecirc;n, tệp CSS nằm trong c&ugrave;ng thư mục chứa tệp t&agrave;i liệu HTML, tuy nhi&ecirc;n, ch&uacute;ng ta c&oacute; thể đặt tệp CSS ở một thư mục kh&aacute;c v&agrave; điều chỉnh đường dẫn như sau: 
<pre class="language-python"><code>&lt;!-- B&ecirc;n trong một thư mục con dir của thư mục hiện tại --&gt;
&lt;link rel="stylesheet" href="dir/style.css"&gt;

&lt;!-- B&ecirc;n trong một thư mục con CSS, l&agrave; thư mục con của dir --&gt;
&lt;link rel="stylesheet" href="dir/CSS/style.css"&gt;

&lt;!-- Ở cấp thư mục cha, tồn tại một thư mục con l&agrave; another --&gt;
&lt;link rel="stylesheet" href="../another/style.css"&gt;</code></pre>
<h3 style="text-align: justify;">Inline CSS</h3>
Inline CSS l&agrave; c&aacute;ch thức thực hiện khai b&aacute;o c&aacute;c quy tắc CSS b&ecirc;n trong 1 phần tử HTML nhất định, nằm trong thuộc t&iacute;nh style của phần tử HTML đ&oacute;. Dưới đ&acirc;y l&agrave; c&aacute;ch khai b&aacute;o Inline CSS:
<pre class="language-python"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;head&gt;
 &lt;meta charset="utf-8"&gt;
 &lt;title&gt;CSS&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;h1 style="color: blue; background-color: yellow; border: 1px solid black;"&gt;Inline CSS&lt;/h1&gt;
 &lt;p style="color:red;"&gt;V&iacute; dụ thứ 3&lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>
Tuy nhi&ecirc;n, ch&uacute;ng ta cần ch&uacute; &yacute; 2 trường hợp dưới đ&acirc;y để tr&aacute;nh sử dụng Inline CSS:
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Thứ nhất, đ&acirc;y l&agrave; c&aacute;ch triển khai CSS k&eacute;m hiệu quả nhất trong một tệp HTML bởi một lần thay đổi kiểu d&aacute;ng y&ecirc;u cầu nhiều lần chỉnh sửa trong một trang Web, điều n&agrave;y g&acirc;y kh&oacute; khăn cho c&aacute;c bạn lập tr&igrave;nh vi&ecirc;n khi sửa một trang Web.&nbsp;</li>
<li style="font-weight: 400;" aria-level="1">Thứ hai, Inline CSS c&oacute; thể g&acirc;y nhầm lẫn giữa CSS với HTML v&agrave; phần nội dung của phần tử, l&agrave;m cho trang Web trở n&ecirc;n kh&oacute; đọc v&agrave; kh&oacute; hiểu hơn đối với c&aacute;c bạn lập tr&igrave;nh vi&ecirc;n kế nhiệm. Do đ&oacute;, việc t&aacute;ch CSS v&agrave; phần nội dung HTML ri&ecirc;ng sẽ gi&uacute;p bảo tr&igrave; dễ d&agrave;ng hơn cho tất cả c&aacute;c trang Web.</li>
</ul>
<h2 style="text-align: justify;">Nh&uacute;ng CSS v&agrave;o Website</h2>
V&iacute; dụ dưới đ&acirc;y l&agrave; một trang Web v&iacute; dụ được tạo kiểu bằng CSS. Sau đ&acirc;y l&agrave; danh s&aacute;ch c&aacute;c thuộc t&iacute;nh được sử dụng:
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Thuộc t&iacute;nh color</li>
<li style="font-weight: 400;" aria-level="1">Thuộc t&iacute;nh border</li>
<li style="font-weight: 400;" aria-level="1">Thuộc t&iacute;nh display</li>
<li style="font-weight: 400;" aria-level="1">Thuộc t&iacute;nh margin</li>
<li style="font-weight: 400;" aria-level="1">Thuộc t&iacute;nh box-sizing</li>
<li style="font-weight: 400;" aria-level="1">Thuộc t&iacute;nh font</li>
</ul>
Trong phần b&ecirc;n dưới, ch&uacute;ng ta sẽ thấy một số quy tắc CSS được &aacute;p dụng để tạo một biểu mẫu. Ch&uacute;ng ta thực hiện chọn c&aacute;c phần của tệp t&agrave;i liệu HTML bằng c&aacute;ch sử dụng Selector, Class v&agrave; Pseudo-classes. Ch&uacute;ng ta sẽ &aacute;p dụng c&aacute;c thuộc t&iacute;nh CSS để tạo kiểu cho trang Web c&oacute; chứa một biểu mẫu.
<pre class="language-python"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;style&gt;
input[type=text] {
 width: 100%;
 padding: 12px 20px;
 margin: 8px 0;
 display: inline-block;
 border: 1px solid #ccc;
 border-radius: 5px;
 box-sizing: border-box;
}

input[type=submit] {
 width: 100%;
 background-color: coral;
 color: white;
 padding: 14px 20px;
 margin: 8px 0;
 border: none;
 border-radius: 5px;
 cursor: pointer;
}

input[type=submit]:hover {
 background-color: red;
}

div {
 border-radius: 5px;
 padding: 20px;
}
&lt;/style&gt;
&lt;body&gt;

&lt;h3&gt;Nhập th&ocirc;ng tin của bạn&lt;/h3&gt;

&lt;div&gt;
 &lt;form&gt;
 &lt;label for="name"&gt;Họ v&agrave; t&ecirc;n&lt;/label&gt;
 &lt;input type="text" id="name" name="firstname" placeholder="Nguyễn Văn A"&gt;

 &lt;label for="lname"&gt;Địa chỉ&lt;/label&gt;
 &lt;input type="text" id="lname" name="lastname" placeholder="Số nh&agrave; 51 phường Vĩnh Ph&uacute;c"&gt;
 
 &lt;input type="submit" value="Submit"&gt;
 &lt;/form&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre>
Cuối c&ugrave;ng, ch&uacute;ng ta sẽ thu được trang Web như sau:
<img style="width: 100%;" src="https://tek4.vn/public_files/57c65860-b245-440e-a495-790b4cc7b270" alt="css-la-gi" />
C&aacute;c bạn h&atilde;y thử tạo cho m&igrave;nh trang Web bằng c&aacute;ch tạo một tệp c&oacute; phần đu&ocirc;i mở rộng l&agrave; .html, sau đ&oacute; c&aacute;c bạn thực hiện sao ch&eacute;p đoạn m&atilde; b&ecirc;n tr&ecirc;n v&agrave; đưa v&agrave;o trong tệp html th&ocirc;ng qua một c&ocirc;ng cụ chỉnh sửa như Visual Studio Code hoặc Notepad++. Cuối c&ugrave;ng, c&aacute;c bạn mở tệp HTML để c&oacute; được kết quả như b&ecirc;n tr&ecirc;n.
Như vậy, trong b&agrave;i viết n&agrave;y, ch&uacute;ng ta đ&atilde; t&igrave;m hiểu cơ bản về CSS, c&aacute;ch thức hoạt động v&agrave; c&aacute;ch triển khai CSS trong một trang Web. Hy vọng rằng c&aacute;c bạn đ&atilde; nắm r&otilde; được kiến thức v&agrave; &yacute; tưởng, hẹn gặp lại c&aacute;c bạn trong b&agrave;i học sau.

Admin

CSS là gì? Tìm hiểu về cách thức hoạt động của CSS

Cùng tác giả

Admin

Có liên quan