HTT.itvn
30-12-2010, 03:22 PM
http://img3.imageshack.us/img3/4733/001asi.png
BÀI 1 : NGÔN NGỮ LẬP TRÌNH CSS
Như chúng ta đã biết , ngôn ngữ CSS có ứng dụng rộng rãi hầu hết trong các trang website , diễn đàn hiện nay . CSS giúp chúng ta sắp xếp giao diện một cách dễ dàng và đẹp hơn . Nói tóm tắt thế thôi , giờ chúng ta đi vào phần 1 nhé .
PHẦN I : QUY ƯỚC TRONG CSS .
I.1 – Định dạng bằng CSS
- CSS ( Cascading Style Sheet ) : Mẫu quy định cách thức thể hiện các thẻ HTML.
- Style được đưa vào HTML 4.0 để giải quyết một số vấn đề.
-Giúp tiết kiệm được rất nhiều thời gian và công sức cho việc thiết kế web.
- Có thể định nghĩa nhiều style vào một thẻ HTML (Cascading).
I.2 – Các loại style trong CSS
- Inline Style : Style được qui định trong 1 thẻ HTML cụ thể
- Internal Style : Style được qui định trong phần <HEAD> của 1 trang HTML
- External Style : style được qui định trong file .CSS ngoài
- Browser Default : thiết lập mặc định của trình duyệt
I.3 – Cách sử dụng CSS trong ngôn ngữ khác .
Trong ngôn ngữ HTML , CSS được chèn như sau :
- Được đặt trong thẻ <head> … </head>
- Với External style : CSS được viết trong một file riêng có dạng TênFile.css và link nhúng CSS như sau :
<link href=“địa chỉ file" rel="stylesheet" type="text/css">
Ví dụ : Ta có file HTML là index.html và file style.css được đặt trong thư mục web ( thư mục này ngang hàng với file index.html ) thì link chèn CSS trong HTML như sau :
<link href=”web/style.css” rel=”stylesheet” type=”text/css”>
- Với Internal style: CSS được chèn trong một trang của HTML , thì CSS được chèn như sau :
<style type=“text/css”>
Nội dung định nghĩa style
</style>
Ví dụ :
<style type=”text/css”>
body{ background-color:#a0a0a0;
padding:0 0 0 0;
margin-left:1px;
}
</style>
- Với Inline style:
<tên_thẻ style=“Thuộc_tính_1:giá_trị_1;thuộc_tín h_2:giá_trị_2;…”>
Chú ý : Tên thẻ không được bỏ trống hay giữa các kí tự có dấu cách mà phải viết liền nhau .
I.4 - Khai báo và sử dụng style
- Khai báo style:
selector {
Property1: Value1;
Property2: Value2;
….
}
Chú ý : Các style có phân biệt chữ hoa với chữ thường . Để chèn ghi chú trong CSS thì cấu trúc chèn như sau :
/* Đoạn ghi chú */
- Style áp dụng cho thẻ cụ thể
+ Đặt slector là tên thẻ .
Ví dụ : p { color:blue ; }
Có thể khai báo đồng thời nhiều thẻ và các thẻ cách nhau bởi 1 dấu phẩy ( , )
Ví dụ : h1,h2,h3,h4 { border:1px solid #c3c3c3;}
+ Tạo lớp :
Gắn với tên thẻ cụ thể : đặt selector là tên_thẻ.tên_lớp
Ví dụ :
p.the_1 {
color:green;
}
p#the_2 {
color:glow;
}
Không gắn với tên thẻ cụ thể : trước tên lớp là một dấu . hoặc #
Ví dụ :
.the_1 {
color : green;
}
#the_2 {
color : glow;
}
- Sử dụng lớp : nếu trước tên_thẻ là dấu . thì thuộc tính là class , nếu trước tên_thẻ là # thì sử dụng thuộc tính là id .
<tên_thẻ class=”tên_lớp”> … </tên_thẻ>
<tên_thẻ id=”tên_lớp”> … </tên_thẻ>
Ví dụ :
<p class=”the_1”> Đoạn code HTML </p>
<p id=”the_2”> Đoạn code HTML </p>
Phần I đến đây là cơ bản xong , các bạn nhớ nắm vững nhé . Trong các phần sau sẽ trình bày các chức năng cụ thể của từng thuộc tính , giúp các bạn nắm rõ và sử dụng thành thạo CSS một cách hiệu quả trong bài học TỰ THIẾT KẾ WEBSITE BẰNG CÁC NGÔN NGỮ HTML , CSS , PHP , MySQL , VB , JAVASCRIPT VÀ JSP .
Tải phần I về tại đây . (http://www.mediafire.com/?py2jlk1aamzslxv)
CHÚC CÁC BẠN THÀNH CÔNG !
BÀI 1 : NGÔN NGỮ LẬP TRÌNH CSS
Như chúng ta đã biết , ngôn ngữ CSS có ứng dụng rộng rãi hầu hết trong các trang website , diễn đàn hiện nay . CSS giúp chúng ta sắp xếp giao diện một cách dễ dàng và đẹp hơn . Nói tóm tắt thế thôi , giờ chúng ta đi vào phần 1 nhé .
PHẦN I : QUY ƯỚC TRONG CSS .
I.1 – Định dạng bằng CSS
- CSS ( Cascading Style Sheet ) : Mẫu quy định cách thức thể hiện các thẻ HTML.
- Style được đưa vào HTML 4.0 để giải quyết một số vấn đề.
-Giúp tiết kiệm được rất nhiều thời gian và công sức cho việc thiết kế web.
- Có thể định nghĩa nhiều style vào một thẻ HTML (Cascading).
I.2 – Các loại style trong CSS
- Inline Style : Style được qui định trong 1 thẻ HTML cụ thể
- Internal Style : Style được qui định trong phần <HEAD> của 1 trang HTML
- External Style : style được qui định trong file .CSS ngoài
- Browser Default : thiết lập mặc định của trình duyệt
I.3 – Cách sử dụng CSS trong ngôn ngữ khác .
Trong ngôn ngữ HTML , CSS được chèn như sau :
- Được đặt trong thẻ <head> … </head>
- Với External style : CSS được viết trong một file riêng có dạng TênFile.css và link nhúng CSS như sau :
<link href=“địa chỉ file" rel="stylesheet" type="text/css">
Ví dụ : Ta có file HTML là index.html và file style.css được đặt trong thư mục web ( thư mục này ngang hàng với file index.html ) thì link chèn CSS trong HTML như sau :
<link href=”web/style.css” rel=”stylesheet” type=”text/css”>
- Với Internal style: CSS được chèn trong một trang của HTML , thì CSS được chèn như sau :
<style type=“text/css”>
Nội dung định nghĩa style
</style>
Ví dụ :
<style type=”text/css”>
body{ background-color:#a0a0a0;
padding:0 0 0 0;
margin-left:1px;
}
</style>
- Với Inline style:
<tên_thẻ style=“Thuộc_tính_1:giá_trị_1;thuộc_tín h_2:giá_trị_2;…”>
Chú ý : Tên thẻ không được bỏ trống hay giữa các kí tự có dấu cách mà phải viết liền nhau .
I.4 - Khai báo và sử dụng style
- Khai báo style:
selector {
Property1: Value1;
Property2: Value2;
….
}
Chú ý : Các style có phân biệt chữ hoa với chữ thường . Để chèn ghi chú trong CSS thì cấu trúc chèn như sau :
/* Đoạn ghi chú */
- Style áp dụng cho thẻ cụ thể
+ Đặt slector là tên thẻ .
Ví dụ : p { color:blue ; }
Có thể khai báo đồng thời nhiều thẻ và các thẻ cách nhau bởi 1 dấu phẩy ( , )
Ví dụ : h1,h2,h3,h4 { border:1px solid #c3c3c3;}
+ Tạo lớp :
Gắn với tên thẻ cụ thể : đặt selector là tên_thẻ.tên_lớp
Ví dụ :
p.the_1 {
color:green;
}
p#the_2 {
color:glow;
}
Không gắn với tên thẻ cụ thể : trước tên lớp là một dấu . hoặc #
Ví dụ :
.the_1 {
color : green;
}
#the_2 {
color : glow;
}
- Sử dụng lớp : nếu trước tên_thẻ là dấu . thì thuộc tính là class , nếu trước tên_thẻ là # thì sử dụng thuộc tính là id .
<tên_thẻ class=”tên_lớp”> … </tên_thẻ>
<tên_thẻ id=”tên_lớp”> … </tên_thẻ>
Ví dụ :
<p class=”the_1”> Đoạn code HTML </p>
<p id=”the_2”> Đoạn code HTML </p>
Phần I đến đây là cơ bản xong , các bạn nhớ nắm vững nhé . Trong các phần sau sẽ trình bày các chức năng cụ thể của từng thuộc tính , giúp các bạn nắm rõ và sử dụng thành thạo CSS một cách hiệu quả trong bài học TỰ THIẾT KẾ WEBSITE BẰNG CÁC NGÔN NGỮ HTML , CSS , PHP , MySQL , VB , JAVASCRIPT VÀ JSP .
Tải phần I về tại đây . (http://www.mediafire.com/?py2jlk1aamzslxv)
CHÚC CÁC BẠN THÀNH CÔNG !