CSS là gì?

Tổng quan
Hoàng Dư Thanh
15-06-2020

[Bài đọc] CSS là gì?

CSS là gì?

  • CSS là viết tắt của cụm từ Cascading Style Sheets
  • CSS mô tả cách các phần tử HTML sẽ hiển thị trên màn hình, trang web, hoặc các phương tiện khác.
  • CSS giúp chúng ta tiết kiệm được rất nhiều công công sức. Nó giúp chúng ta chỉnh sửa giao diện của nhiều trang web cùng một lúc.
  • Các mô tả css có thể được lưu trong tệp tin CSS.

Cùng một trang HTML, có thể hiển thị  nhiều kiểu khác nhau

Trong các ví dụ sau đây, chúng ta sẽ dùng chung một mã HTML nhưng với các CSS khác nhau, do đó chúng sẽ có giao diện khác nhau.

Không có CSS
<div class="container wrapper">
  <div id="top">
    <h1>Welcome to My Homepage</h1>
    <p>List of stylesheets Stylesheets</p>
  </div>
  <div class="wrapper">
   <div id="menubar">
     <ul id="menulist">
       <li class="menuitem">Stylesheet 1
       <li class="menuitem">Stylesheet 2
       <li class="menuitem">Stylesheet 3
       <li class="menuitem">Stylesheet 4
       <li class="menuitem">No Stylesheet
     </ul>
    </div>
    <div id="main">
      <h1>Same Page Different Stylesheets</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat:<br>
      <a href="#">Stylesheet1</a>,
      <a href="#">Stylesheet2</a>,
      <a href="#">Stylesheet3</a>,
      <a href="#">Stylesheet4</a>.
      </p>
       <h2>No Styles</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
   </div>
    <div id="sidebar">
      <h3>Side-Bar</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>
  </div>  
  <div id="bottom"> 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
  </div>
</div>
Sử dụng CSS kiểu 1
<div class="container wrapper">
  <div id="top">
    <h1>Welcome to My Homepage</h1>
    <p>List of stylesheets Stylesheets</p>
  </div>
  <div class="wrapper">
   <div id="menubar">
     <ul id="menulist">
       <li class="menuitem">Stylesheet 1
       <li class="menuitem">Stylesheet 2
       <li class="menuitem">Stylesheet 3
       <li class="menuitem">Stylesheet 4
       <li class="menuitem">No Stylesheet
     </ul>
    </div>
    <div id="main">
      <h1>Same Page Different Stylesheets</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat:<br>
      <a href="#">Stylesheet1</a>,
      <a href="#">Stylesheet2</a>,
      <a href="#">Stylesheet3</a>,
      <a href="#">Stylesheet4</a>.
      </p>
       <h2>No Styles</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
   </div>
    <div id="sidebar">
      <h3>Side-Bar</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>
  </div>  
  
  
  <div id="bottom">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
  </div>
</div>
Sử dụng CSS kiểu 2
<div class="container wrapper">
  <div id="top">
    <h1>Welcome to My Homepage</h1>
    <p>List of stylesheets Stylesheets</p>
  </div>
  <div class="wrapper">
   <div id="menubar">
     <ul id="menulist">
       <li class="menuitem">Stylesheet 1
       <li class="menuitem">Stylesheet 2
       <li class="menuitem">Stylesheet 3
       <li class="menuitem">Stylesheet 4
       <li class="menuitem">No Stylesheet
     </ul>
    </div>
    <div id="main">
      <h1>Same Page Different Stylesheets</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat:<br>
      <a href="#">Stylesheet1</a>,
      <a href="#">Stylesheet2</a>,
      <a href="#">Stylesheet3</a>,
      <a href="#">Stylesheet4</a>.
      </p>
       <h2>No Styles</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
   </div>
    <div id="sidebar">
      <h3>Side-Bar</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>
  </div>  
  
  
  <div id="bottom">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
  </div>
</div>
Sử dụng CSS kiểu 3
<div class="container wrapper">
  <div id="top">
    <h1>Welcome to My Homepage</h1>
    <p>List of stylesheets Stylesheets</p>
  </div>
  <div class="wrapper">
   <div id="menubar">
     <ul id="menulist">
       <li class="menuitem">Stylesheet 1
       <li class="menuitem">Stylesheet 2
       <li class="menuitem">Stylesheet 3
       <li class="menuitem">Stylesheet 4
       <li class="menuitem">No Stylesheet
     </ul>
    </div>
    <div id="main">
      <h1>Same Page Different Stylesheets</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat:<br>
      <a href="#">Stylesheet1</a>,
      <a href="#">Stylesheet2</a>,
      <a href="#">Stylesheet3</a>,
      <a href="#">Stylesheet4</a>.
      </p>
       <h2>No Styles</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
   </div>
    <div id="sidebar">
      <h3>Side-Bar</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>
  </div>  
  
  
  <div id="bottom">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
  </div>
</div>

Như vậy, chúng ta có thể thấy rằng CSS giúp cho việc thay đổi diện mạo của một trang web một cách rất dễ dàng và ấn tượng.

CSS là người bạn đồng hành không thể thiếu của HTML

HTML được tạo ra để mô tả nội dung của một trang web, chẳng hạn như:

<h1>Đây là một tiêu đề</h1>

<p>Đây là một đoạn văn bản</p>

Bản thân các thẻ HTML không có các thuộc tính để cho phép chúng ta thay đổi diện mạo của nó, chẳng hạn là chuyển sang chữ in đậm, hay in nghiêng, hay màu đỏ.

Trước đây, HTML có thêm các thẻ để làm điều này,  chẳng hạn như các thẻ <u>, <i>, <b>, <font>… nhưng việc sử dụng các thẻ này khiến cho mã nguồn của trang web trở nên vô cùng lớn và lộn xộn. Ngoài ra, việc điều khiển giao diện của nhiều trang cùng một lúc là một việc rất khó khăn.

Do đó, CSS ra đời để giúp lập trình viên chúng ta có thể điều khiển được diện mạo của các thẻ HTML một cách dễ dàng. Ngày nay, có thể nói hầu hết tất cả các trang web trên thế giới đều sử dụng CSS để tuỳ chỉnh giao diện của mình.

Chỉ cần tạo ra một vài file CSS là chúng ta đã tạo nên một phong cách riêng cho trang web của mình.

Leave a Reply

Your email address will not be published.