• fans
  • 1036 reader
  • followers
CSS là gì?

CSS là chữ viết tắt của Cascading Style Sheets, nó chỉ đơn thuần là một dạng file text với phần tên mở rộng là .css. Trong Style Sheet này chứa những câu lệnh CSS. Mỗi một lệnh của CSS sẽ định dạng một phần nhất định của HTML ví dụ như: font của chữ, đường viền, màu nền, căn chỉnh hình ảnh v.v..

Trước đây khi chưa có CSS, những người thiết kế web phải trộn lẫn giữa các thành phần trình bày và nội dung với nhau. Nhưng với sự xuất hiện của CSS, người ta có thể tách rời hoàn toàn phần trình bày và nội dung. Giúp cho phần code của trang web cũng gọn hơn và quan trọng hơn cả là dễ chỉnh sửa hơn.

Trước khi bắt đầu tìm hiểu thêm về CSS tôi muốn bạn biết một chút về thế mạnh của nó trong việc thiết kế web. Ví dụ nếu làm việc với HTML và bạn muốn font chữ của toàn bộ trang web là Arial. Bạn sẽ phải làm đi làm lại như thế cho tất cả các file .html mà bạn có. Nhưng nếu bạn sử dụng CSS, thì bạn chỉ cần làm một lần và tất cà các trang khác sẽ tự động được thay đổi.

Ba cách để định dạng trang web

Có ba cách bạn có thể sử dụng để định dạng trang web là: cục bộ, nhúng vào trang và liên kết đến một file CSS riêng biệt. Trong thực tế thì cách cuối cùng là liên kết đến một file riêng biệt được sử dụng phổ biến nhất. Nhưng bạn cũng nên biết về hai cách còn lại vì đôi khi bạn cũng phải sử dụng đến nó tuy không nhiều

.

1. Cục bộ – code CSS được chèn trực tiếp vào trong thẻ HTML

Cách định dạng cục bộ là bạn sử dụng code CSS chèn trực tiếp vào thẻ HTML và chỉ có tác động lên thẻ đó.

Ví dụ

<p style=”font-size:16pt; font-weight:bold; color:blue;”> 
Nếu bạn thêm code CSS vào trong thẻ này nó sẽ thay đổi cách hiển thị trên trình duyệt
</p>
2. Nhúng vào trang web

Cách thứ hai là bạn khai báo code CSS nằm trong cặp thẻ <style></style> được đặt ở phần <head></head> của tài liệu. Về cơ bản nó cũng chỉ có tác động cục bộ lên file mà bạn chèn đoạn code CSS này. Nó có phạm vi ảnh hưởng lớn hơn là cách chèn cục bộ được nói ở trên, nhưng nó không có ảnh hưởng đến các file khác trong cùng một trang web.

<head>
<title>Nhúng vào trang</title>
<meta http-equiv=”Content-type” content=”text/html; charset=utf-8″ />
<style type=”text/css”>
h1 {font-size: 16px;}
p {color:blue;}
</style>
</head>
3. Liên kết đến một file biệt lập

Thực tế cách cuối cùng này mới là thế mạnh thực sự của CSS bởi vì bạn chỉ cần tạo ra một file CSS và viết code chỉ một lần. Nó sẽ ảnh hưởng đến toàn bộ trang web chứ không chỉ ảnh hưởng đến một file .html đơn lẻ hoặc chỉ một thẻ trong hàng ngàn thẻ mà bạn có. Bằng cách này chúng ta có thể tách rời hoàn toàn những thành phần trình bày và nội dung ra khỏi nhau. Nếu bạn viết toàn bộ code CSS trong một file và liên kết nó đến những trang còn lại, thì việc thay đổi sửa chữa trang web trở nên cực kỳ đơn giản.

Để liên kết file CSS đến tất cả các file .html của bạn, bạn chỉ cần chèn đoạn code sau vào giữa thẻ <head></head> của tài liệu:

<link href="style_sheet.css" rel="stylesheet" type="text/css" />

Và trình duyệt sẽ tự động dùng file style_sheet.css để định dạng cho trang web của bạn. Tất nhiên trong file style_sheet.css bạn đã viết code CSS rồi.

Điều cuối cùng bạn cần biết về 3 loại hình sử dụng CSS là

Cục bộ > Nhúng vào trang > Liên kết đến một file biệt lập

Công thức trên có nghĩa là cách Cục bộ “đánh bại” cách Nhúng vào trang và Liên kết đến một file riêng biệt. Hoặc nói theo cách khác thì cách nhúng cục bộ là mạnh nhất, sau đó đến Nhúng vào trang và cuối cùng là liên kết đến một file biệt lập.

Demon Warlock Website facebook twitter user_email

Tôi được sinh ra ở Việt Nam, nhưng hiện tại đang sống và làm việc tại Mỹ. Ngành tôi học không có liên quan gì đến thiết kế web. Nhưng đây là sở thích từ ngày còn là sinh viên du học, do vậy bây giờ dù cho đang đi làm nhưng tôi vẫn thích dùng thời gian rảnh rỗi của mình để học về thiết kế web. Như các bạn, tôi cũng việc mày mò tự học và khám phá.

  • TrangPham

    da cho em hỏi dòng này ” ” có nghĩa la gì vậy ?

    • tồn tồn

      kết hợp cái đó với việc đổi file format về unicode là viết được tiếng việt trong html đó?

  • Pingback: Demon WarlockWebsitefacebooktwittergoogleuser_email | Uncategorized | My Blog | My Blog

  • Dương Kingfisher

    lưu chỗ nào cũng đc, khi gọi thì phải khai báo đúng vị trí của nó. ví dụ mình để trong thư mục css (folder css chung thư mục với file index) thì mình gọi nó bằng đoạn sau trong thẻ : <link rel = "stylesheet" href = "css/style_sheet.css" type = "text/css"

  • Pham Thanh Kha

    Cũng lâu rùi không ghé lại izwebz một phần vì công việc bộn bề 1 phần là theo đuổi những đam mê của mình. Nhớ cái ngày tập tẹ ngồi code cảm giác của 1 newbie cái gì cũng muốn hỏi rồi tình cờ lang thang trên internet gặp được bác Demon Warlock hài hước vui tính, làm mình như buồn ngủ gặp chiếu manh. Đến tận bây giờ vẫn nhơ mấy câu “Cho nó quốc tế nhỉ” của bác Demon. Cảm ơn Demon rất rất nhiều!

  • Hưng NT

    Các anh ơi em mới học css. Các anh cho em hỏi trong css có viết #cssmenu > ul ul > li. Vậy dấu “>” nghĩa là gì vậy

  • dũng

    thật tuyệt vời, đầu bò như em ko biết gì về lập trình mà cũng có thể hiểu sơ sơ về những điều anh dạy.Xin cảm ơn anh rất nhiều.chúc anh luôn mạnh khỏe

Newbie

Các series nên xem trên izwebz cho newbie

Khi vào izwebz chắc nhiều bạn cho rằng các bài viết trên izwebz đều không có hệ thống gì cả? Thực chất, các bài biết đều đi theo một series của riêng nó, ví dụ như PHP, HTML & CSS, PSD2HTML, Photoshop, illustrator,… Trong bài viết này, mình sẽ tổng hợp lại các series bài viết cần thiết cho một newbie.

Izwebz facebook group

Social connect

Recent Comments

Archives