Trước khi học cách kết nối file CSS vào HTML như thế nào, chúng ta hãy xét cấu trúc thư mục chứa các file như sau:

Click vào dấu [+] để xem cấu trúc.

Nội fung file index.html

Nội fung file style.css

Nếu không có nội dung thì file CSS có thể là file rỗng, hoặc chứa dòng khai báo charset, ở đây ta tạm thời sử dụng file rỗng:

Chúng ta kết nối file CSS vào file HTML thông qua thẻ , cách sử dụng thẻ này như thế nào các bạn có thể xem bên phần tham khảo.

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Tiêu đề trang web

...Phần thân viết ở đây...

Thuộc tính href ta phân tích như sau:

• style.css là một file có tên là style với định dạng file là .css
• css là folder chứa file style.css

Như vậy css/style.css sẽ dẫn đường dẫn tới file style.css trong thư mục css.

Cách viết một nội dung CSS

Viết nội dung CSS theo cấu trúc như sau:

Bộ chọn { thuộc tính: giá trị; }

Chúng ta có thể viết nhiều cặp thuộc tính và giá trị cho bộ chọn, mỗi cặp thuộc tính và giá trị có thể viết cách nhau bởi dấu chấm phẩy.

p { color: red; float: left; padding-left: 10px; }

Đoạn code trên tương tự như đoạn code sau:

p {
    color: red;
    float: left;
    padding-left: 10px;
}

Cách viết bộ chọn CSS

Giả sử ta có file HTML như sau:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Tiêu đề trang web

• Mục 01


• Mục 02


• Mục 03


• Mục 04

Đoạn văn

Nội dung navi

Bộ chọn theo tên 

tag#tênid { thuộc tính: giá trị; }

• Bắt buộc phải có ký tự dấu "#" và tênid

div#content { width: 600px; }

Bộ chọn theo tên 

tag.tênclass { thuộc tính: giá trị; }

• Bắt buộc phải có ký tự dấu "." và tênclass

div.navi { background: #333333; }

Bộ chọn theo cấp bậc

[tag cha] [tag con] [tag cháu] { thuộc tính: giá trị; }

• Cấu trúc này không bắt buộc, tuy nhiên cấu trúc này sẽ thuận tiện trong việc điều chỉnh các thành phần con bên trong, và cũng để xác định thứ tự ưu tiên trong CSS.

Trong file HTML bên trên, trong phần content và navi đều có tồn tại thành phần 

 nếu sử dụng cách chọntag { thuộc tính: giá trị;} thì ta sẽ không thể nào chọn được đâu là thành phần thuộc content, đâu là thành phần thuộc navi, tuy nhiên sử dụng cách chọn theo cấp bậc thì việc này lại rất dễ dàng:

div#content p { color: #333333; } /* Chon thanh phan p theo content*/

div.navi p { background: #333333; } /* Chon thanh phan p theo navi*/

div#content ul li { display: inline; } /* Chon thanh phan li theo content*/

Cách viết một comment trong file CSS

Comment là một dạng ghi chú, giúp người viết code giải thích nghĩa cho từng đoạn code, cách viết một comment trong CSS như sau:

Nếu một thuộc tính nào đó của phần tử được thiệt lập giá trị bởi nhiều cách, thì thuộc tính đó sẽ nhận giá trị của cách sử dụng CSS dựa theo độ ưu tiên như sau:

• 1) Inline
• 2) Internal
• 3) External

Ở đoạn mã phía dưới, thuộc tính color của phần tử

được thiết lập giá trị bởi 2 cách sử dụng CSS.
Trong đó, kiểu Inline có độ ưu tiên cao hơn Internal, nên thuộc tính color sẽ nhận giá trị blue

---

    


    
webcoban.vn (WEB CƠ BẢN .VN)

Xem ví dụ

Thứ tự ưu tiên trong một bộ định dạng

Trong một bộ định dạng của một phần tử, nếu một thuộc tính nào đó bị viết lập lại nhiều lần, thì thuộc tính đó sẽ nhận giá trị ở lần viết cuối cùng.

Thuộc tính color của phần tử

sẽ nhận giá trị ở lần viết cuối cùng là green

---

selector {
    property1: value;
    property2: value;
    property3: value;
    .....
    propertyN: value;
}

0Xem ví dụ

Kế thừa giá trị thuộc tính từ phần tử tổ tiên

Thông thường, nếu một phần tử không thiết lập giá trị cho thuộc tính thì thuộc tính đó sẽ nhận giá trị từ giá trị thuộc tính của phần tử chứa nó và ở gần nó nhất.

---

selector {
    property1: value;
    property2: value;
    property3: value;
    .....
    propertyN: value;
}

1Xem ví dụ

Cách ghi chú thích

Khi bạn muốn vô hiệu hóa một số mã CSS với mục đích nào đó (chẳng hạn như để ghi nhớ, chú thích, hoặc test code) thì bạn đặt chúng vào bên trong cặp dấu /* */

Chúng ta từng bảo Css là người bạn thân thiết của Html. Mà đã là bạn thân thì chắc hẳn phải có sợ dây liên kết nào đó với nhau. Hôm nay chúng ta sẽ tìm hiểu qua các cách để liên kết Css với Html.

Cách cách chèn Css và Html ở đây có 3 cách.

1. Nhà đứa nào mấy ở (Html và Css là 2 file riêng biệt)

Nghe nhà đứa nào mới ở thì hiểu rồi ha. Css sẽ ở nơi thuộc về nó đó là file ” x.css “.  Còn html vẫn sẽ ở “x.html”

Tuy nhà ai nấy ở, tuy xa mặc nhưng không cách lòng. Quan trọng là chỉ cần cho anh Html nhà ta biết địa chỉ nhà cô Css thì tình củm vẫn khắn khích, thuộc tính của em như của anh, cấu trúc của anh như của em vậy thui hi. Vậy nên cô Css sẽ gửi địa chỉ của mình cho anh Html biết (hiêu biết là nhận thưc, nhận thức là ghi vào phần tử Head)

Và cấu trúc liên kết css với Html là:

Xem thêm:  Cấu trúc chung của HTML

rel=”stylesheet”   type=”text/css”   href=”địa chỉ của cô css hi”  >

Và đó là 1 cách đê kết hợp css và html khi hai đứa không chung nhà

2. Khi hai ta về một nhà (html và css cùng trong 1 file)

Nếu cảm thấy hai đứa ở xa vậy sẽ đâm ra thương nhớ. Thì cứ cho chúng về ở chung 1 nhà. Nghĩa là chúng ta sẽ viết Css trực tiếp vào file chứa Html

Bằng cách dùng phần từ style . Và tất nhiên khi về một cung một nhà với Html thì Css cũng sẽ được ở trong phần tử Head của file Html

Cú pháp liên kết Css với Html là:

3. Muốn gặp là gặp (chèn css cho phần tử bất kỳ)

Nhưng đôi khi chúng ta chỉ mún thay đổi thuộc tính Css của 1 phần tử nhỏ trong cấu trúc. Thì chúng ta có thể thêm trực tiếp Css vào phần tử.

Để làm được việc đó thì chúng ta dùNg thuộc tính toàn nầu Style

Cú pháp liên kết Html với Css là:

style=”   ” >……

Trong đó X là phần tử bất kỳ nào đó.

Chú ý: Ở cách 2 và cách 3 điều là chữ Style. Nhưng 1 cái là phần từ, 1 cái là thuộc tính toàn cầu. Ý nghĩa và cách viết của chúng khác nhau.

Tất nhiên 3 cách này có thể sử dụng cùng nhau. Vấn đề là bạn bố trí chọn lựa sao cho dễ quản lý chỉnh sửa sau này.