CSS là gì? Cách sử dụng CSS để định dạng cấu trúc HTML sẵn có

Cách sử dụng CSS để định dạng cấu trúc HTML sẵn có

CSS viết tắt từ Cascading Style Sheets là một ngôn ngữ cho giao diện để định nghĩa tính chất các thành phần trong HTML nó vô cùng hữu ích khi bạn đưa vào layout website bạn. Bạn có thể tiết kiệm rất nhiều thời gian và giúp cho bạn thiết kế website theo một cách hoàn toàn mới mẻ . Dĩ nhiên việc hông thạo CSS cũng là điều cần thiết đối với các web desinger .

Bài hướng dẫn này sẽ giúp bạn có thể làm quen với CSS trong vài giờ đồng hồ. Tài liệu này rất dễ hiểu và sẽ hướng dẫn bạn một số kĩ năng chuyên sâu .

Học về CSS rất thú vị. Nếu bạn có thể theo xuyên suốt loạt bài hướng dẫn này,hãy nhớ là bạn cần bỏ 1 lượng thời gian đủ để thực hành những kinh nghiệm mà bạn học được trong mỗi bài giảng.

Để có thể sử dụng CSS yêu cầu bạn phải có những kiến thức cơ bản về HTML. Nếu bạn không biết gì về HTML thì tốt nhất bạn nên bắt đầu tìm hiểu về nó trước khi có thể đọc bài bài viết này.

Có thể sử dụng phần mềm nào để làm việc với CSS?

Tôi khuyên bạn nên sử dụng FrontPage, DreamWeaver, hoặc Word để soạn thảo CSS. Những phần mềm chuyên dụng hỗ trợ cú pháp cho CSS sẽ không thể giúp bạn học được nó. Thay vào đó tôi sẽ hướng dẫn bạn làm thật chậm và cụ thể để bạn có thể tiếp thu thật tốt

Tóm lại chỉ cần 1 chương trình soạn thảo text đơn giản là đủ để dùng CSS.

Một ví dụ, Microsoft Windows đã có sẵn Notepad. Bạn có thể dùng nó để soạn thảo cũng được.

Làm việc với 1 chương trình như vậy cũng là cách hiệu quả để bạn học HTML và CSS bởi vì bạn phải tự tay đánh ra nó. Theo cách này, có thể bạn sẽ gặp 1 ít rắc rối nhưng chắc chắn là những lỗi đó không phải do phần mềm gây ra ,đồng thời nó cũng giúp cho bạn rút được kinh nghiệm cho những lần sau và kiểm soát tốt code của mình.

Bạn có thể sử dụng bất kì trình duyệt nào để thực hành. Nhưng tôi khuyên bạn nên cập nhật trình duyệt của mình thường xuyên.

Một trình duyệt và một chương trình soạn thảo text là tất cả những gì mà bạn cần.

Lesson 1: CSS là gì?

Có thể bạn đã sẵn sàng để nghe về CSS . Bài viết này sẽ giúp bạn có một số khái niệm về CSS và những việc bạn có thể làm khi sử dụng CSS.

CSS là viết tắt của chữa Cascading Style Sheets.

Một câu hỏi lớn tôi có thể làm được gì với CSS ?

CSS là một ngôn ngữ cho giao diện để định nghĩa tính chất các thành phần trong HTML layout. Một ví dụ, Với CSS bạn có thể tạo kiểu cho fonts, chỉnh màu sắc , canh lề, kẻ bảng, định chiều cao, chiều dọc, hình nền, và xác định vị trí cho đổi tượng cùng nhiều thứ khác. Hãy từ từ mà khám phá nhé!

HTML có thể sử dụng để đưa trực tiếp vào layout cho websites. Nhưng CSS thì chứa nhiều chức năng và bản thân nó cũng chuyên sâu và chính xác hơn ,có thể làm được nhiều điều mà bản thân HTML không thể làm được. Ngày nay thì CSS được rất nhiều trình duyệt hỗ trợ.

Chỉ sau 1 sô bài hướng dẫn bạn sẽ có thể sử dụng CSS để thiết kế website của mình một cách chuyên nghiệp ^^ .

Có điều gì khác biệt giữa CSS và HTML?

HTML được sử dụng để xây dựng trực tiếp cấu trúc bên trong. CSS thì dùng để định dạng các cấu trúc sẵn có thông qua các class hoặc id v.v...

Hì ,có vẽ hơi rắc rối nhưng hãy tiếp tục đọc. Điều này sẽ sớm có ích cho bạn.

Trở lại những ngày xa xưa khi mà người tên là Tim Berners Lee sáng tạo ra World Wide Web, ngôn ngữ HTML chỉ đơn thuần là một cấu trúc văn bản. Tác giả có thể đánh dấu những đoạn văn bản bằng cách thể hiện "Đây là headline (đầu đề)" hoặc "Đây là paragraph (đoạn văn bản)" thông qua HTML tags như <h1> và <p>.

Khi mà Web đã trở nên thông dụng, các nhà thiết kế bắt đầu tìm kiếm 1 cách thể hiện mới cho các đoạn văn bản website của mình. Để đáp ứng nhu cầu này, các nhà sẳn xuất trình duyệt web (bắt đầu trong thời gian đó là Netscape và Microsoft) đã sáng tạo ra một định dạng HTML mới một ví dụ như tag <font> cái mà tạo nên sự khác biệt với HTML nguyên bản bằng cách định nghĩa layout - nó không bao hàm trong cấu trúc.

Điều này cũng dẫn đến 1 trường hợp là khi những tag cấu trúc thông thường như <table> được sử dụng ngày càng nhiều thì cũng phát sinh những hiển thị sai lệch trong web layout khi xem ở các trình duyệt khác nhau khi đưa văn bản vào các cấu trúc. Một vài tag như <blink> chỉ được hỗ trợ ở 1 số trình duyệt. "Bạn cần sử dụng trình duyệt X hoặc Y để xem tốt trang web này" đó đã trở nên thông dụng và người ta chấp nhận bỏ qua 1 số trình duyệt khi thiết kế web layout.

CSS cũng từ đó được phát minh ra để đáp ứng hoàn cảnh này bằng việc cung cấp cho các designer một phương thức định dạng chung cho tất cả các trình duyệt. Cũng từ lúc đó việc tách những định dạng cho giao diện web ra riêng làm cho việc chỉnh sửa và tạo mới web layout trở nên đơn giản hơn nhiều.

CSS mang những lợi ích gì?

CSS là một cuộc cách mạng trong việc thiết kế web layout. Nó đã mang lại nhiều lợi ích thiết thực:

* Bạn có thể quản lý toàn bộ định dạng các thành phần của web layout thông qua 1 file CSS;
* Điều khiển chính xác hơn cách trình bày web layout;
* Có thể áp dụng để dùng cho nhiều việc (screen, print, v.v...);
* Sử dụng được các kĩ thuật phức tạp ,tiên tiến điều mà HTML còn hạn chế.

Lesson 2: CSS hoạt động như thế nào?

Ở bài viết này tôi sẽ chỉ cho bạn cách tạo một file CSS. Trước tiên bạn cần biết 1 số cấu trúc cơ bản của CSS và các đoạn mã cần thiết để sử dụng CSS trong một tài liệu HTML.

Nhiều thuộc tính sử dụng trong Cascading Style Sheets (CSS) gần như tương tự trong HTML. Nếu bạn thường sử dụng HTML để thiết kế layout, bạn sẽ dễ dàng nhận ra nhiều chỗ rất quen thuộc. Tôi sẽ cho bạn một ví dụ cụ thể nhé

Cú pháp cơ bản của CSS

Bây giờ chúng ta tạo background màu đỏ cho layout:

Sử dụng HTML chúng ta có thể viết là:
<body bgcolor="#FF0000">
Với CSS thì bạn lại dùng là:
body {background-color: #FF0000;}
[separator]


Bây giờ bạn sẽ thắc mắc là đặt mã CSS ở đâu ? Tôi sẽ đề cập chuyện này ngay bây giờ


Gán CSS vào HTML
Ở đây sẽ có 3 cách để bạn đưa CSS vào HTML ,nhưng tôi khuyên bạn nên sử dụng cách số 3 sẽ tốt hơn

Cách 1 : Gắn trực tiếp vào tag HTML ( thông qua thuộc tính "style" của tag HTML) :
Cách này cho phép bạn gán trực tiếp CSS vào HTML bằng thuộc tính "style" tôi sẽ xây dựng cho bạn một đoạn code mẫu để đổi màu background phần body sang đỏ (hãy lưu ý đoạn code được tô đỏ)
<html>
<head>
<title>Example</title>
</head>
<body style="background-color: #FF0000;">
<p>Đây là nền đỏ</p>
</body>
</html>
Cách 2 : Gắn trực tiếp qua tag <style> :
<html>
<head>
<title>Example</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>Đây là nền đỏ</p>
</body>
</html>
Cách 3: Gắn gián tiếp ( link đến file CSS đặt riêng )
Đây là cách thức thông dụng và hiệu quả nhất được khuyến cáo sử dụng .Và tôi sẽ dùng cách này trong hầu hết các phần ví dụ
Ở cách này bạn cần soạn một file văn bản với đuôi mở rộng .css .Đưa nó lên webserver hoặc cũng có thể để trong ổ cứng của bạn cũng được (dĩ nhiên chỉ để test).
Ví dụ, tạo một file với tên là style.css và đặt nó trong 1 folder tên style. Bố trí nó giống mẫu dưới:



Để đưa file CSS (style.css) link vào file HTML (default.htm) . Bạn sử dụng đoạn code sau để chèn vào mã HTML:

<link rel="stylesheet" type="text/css" href="style/style.css" />
Chú ý là đoạn href="" chính là đường dẫn đến file css của bạn ( lưu ý là hãy chọn default.htm làm root để xác định đường dẫn chính xác )
Điều quan trọng nữa đoạn code trên phải được đặt giữa tag <head> và </head> .Giống như vầy :
<html>
<head>
<title>My document</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
...
Các thuộc tính tương ứng sẽ được file CSS qui định và trình duyệt sẽ trình bày các trang HTML link đên file CSS kia theo một kiểu mẫu mà file CSS đã qui định cho tất cả



Cách làm này sẽ giúp cho bạn tiết kiệm rất nhiều thời gian và đạt hiệu quả cao trong công việc .Lấy ví dụ thay vì phải đổi 100 background ở các vị trí khác nhau thì bạn chỉ cần đổi một vài dòng code trong file CSS là đủ.
Bây giờ bạn cần thực hành lại những gì đã được học


Thực hành

Bây giờ hãy mở notepad (hoặc bất kì trình soạn thảo nào bạn dùng) tạo 2 file HTML và CSS với nội dung như sau:

default.htm
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Đây là trang thử nghiệm</h1>
</body>
</html>
style.css
body {
background-color: #FF0000;
}
Bây giờ hãy đặt 2 file nằm cùng một thư mục và mở lên xem . Lưu ý là khi bạn save ra thì phải save đúng đuôi mở rộng ("html" , "css") . Nếu bạn đã thấy được background nền đỏ thì xin chúc mừng bạn bạn đã thành công rồi đấy