Phần I : Mở đầu và Quy ước trong CSS .

**HTT.itvn** · 30-12-2010, 03:22 PM

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 .

CHÚC CÁC BẠN THÀNH CÔNG !