Căn bản CSS (Ứng dụng trên Y!Mash)

Theo yêu cầu của 1 số bạn jal sẽ viết loạt bài hướng dẫn viết CSS.

Nhưng trước khi viết ta cần có 1 số chuẩn bị.

Đầu tiên là software, các bạn cần có 1 software để viết CSS thật tốt, JaL khuyên nếu có điều kiện nên sử dụng Dreamweaver CS3, nhưng dành cho người mới bắt đầu mình khuyên nên sử dụng Rapid CSS 2007 (Rất tốt, có khả năng edit cả HTML, hỗ trợ bạn viết bài trên Mash), các bạn có thể download tại đây

Sau khi cài đặt xong, các bạn cần chỉnh lại 1 chút để dễ dàng sử dụng.

Đầu tiên các bạn vào menu Options – Preference. Trong mục Text editor, chọn Auto Complete và chỉnh delay xuống khoảng 100 hoặc nhỏ hơn (JaL để 1 viết cho lẹ )

Ok vậy là ta đã có thể bắt đầu 

JaL xin phép được bỏ qua phần giới thiệu vốn đã đầy rẫy trên internet để bắt đầu ngay phần chính của chúng ta.

1 . Các dịnh dạng được định nghĩa trong CSS chỉ đến cùng 1 đối tượng sẽ có thứ tự ưu tiên từ dưới lên trên, nói 1 cách đơn giản, styles nào nằm dưới sẽ ghi đè lên styles ở phía trên

VD 1:

 1: #chuy { 

 2: color:red; 

 3: } 

 4: #chuy{ 

 5: font-weight:bold; 

 6: }

Sẽ tương đương với

 1: #chuy { 

 2: color:red; font-weight:bold; 

 3: } 

Và các bạn cũng đặc biệt chú ý là styles được định nghĩa trực tiếp trong thẻ luôn có thứ tự ưu tiên cao nhất, nó sẽ ghi đè các styles đã được định nghĩa trước đó.

2. Cú pháp:

Như các bạn thấy ở trên 1 cú pháp hoàn chỉnh của CSS bao gồm :

Đối tượng(selector) { thuộc tính(properties): giá trị(value) ;}

VD 2:

 1: body{

 2: background:#ffffff;

 3: }

Đoạn CSS trên có nghĩa là thẻ body (bao quanh toàn bộ trang web) sẽ có màu nền là màu trắng.

Bạn cũng có thể gộp chung nhiều thuộc tính cho 1 đối tượng  như VD 1

Và đương nhiên bạn cũng có thể gộp chung nhiều đối tượng có chung thuộc tính.

 1: a,h1,h2,input{

 2: color:#cc0000;

 3: font-size:11px;

 4: }

3. Đối tượng class ( class selector ): (Hix, 1 số từ JaL dịch không đúng nghĩa, mong các bạn thông cảm, từ phần này trở đi JaL sẽ dùng ENG cho 1 số từ khó dịch)

Với class selector các bạn có thể định nhiều định dạng khác nhau cho cùng 1 đối tượng HTML

VD 3: Bạn có 2 đoạn text (được định trong cặp <p>text</p> như sau:

HTML:

 1: <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

 2: <p>Pellentesque congue diam et augue. Morbi tellus libero, consectetuer nec, volutpat quis, egestas eu, nulla.</p>

Xuất ra web :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Pellentesque congue diam et augue. Morbi tellus libero, consectetuer nec, volutpat quis, egestas eu, nulla.

Bạn muốn dòng trên chữ màu đỏ và dòng dưới chữ màu xanh, nhưng nếu bạn dùng cách ở VD 1 và VD 2 thì chắc chắn không được.

Giải pháp ở đây là gán cho mỗi đoạn text đó một class như sau bằng thuộc tính class=”tên_class” (HTML):

 1: <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

 2:  

 3: <p class="blue">Pellentesque congue diam et augue. Morbi tellus libero, consectetuer nec, volutpat quis, egestas eu, nulla.</p>

Và gán cho mỗi class đó 1 style:

 1: p.red{

 2: color:red;

 3: }

 4: p.blue{

 5: color:blue;

 6: }

Kết quả:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Pellentesque congue diam et augue. Morbi tellus libero, consectetuer nec, volutpat quis, egestas eu, nulla.

Bạn cũng có thể gán nhiều class cho cùng 1 đối tượng bằng cách chèn 1 dấu cách giữa 2 class:

 1: <p class="red center">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque congue diam et augue. Morbi tellus libero, consectetuer nec, volutpat quis, egestas eu, nulla.</p>

Để áp dụng 1 style cho nhiều đối tượng hoàn toàn khác nhau (tag P và tag A chẳng hạn) các bạn có thể định nghĩa 1 class như sau :

 1: .red{

 2: color:red;

 3: }

 

1 class không được bắt đầu bằng 1 chữ số hoặc kí tự đặc biệt, tốt nhất nên tránh dùng các kí tự đặc biệt trong tên class, và tuyệt đối không được có dấu cách (đọc thêm ở dưới)

4. ID selector :

Ngoài class các bạn cũng có thể gán các ID cho 1 đối tượng nào đó , và ta cũng có thể gán các styles cho id

HTML:

 1: <p id="noidung">

 2: Text here

 3: </p>

Và ta sẽ gán style lên cho id này:

 1: p#noidung{

 2: text-align: justify;

 3: font: Arial 11px #333;

 4: }

 

Ở dòng thứ 2, JaL sử dụng kĩ thuật short-hand để viết, JaL sẽ nói cụ thể hơn về vấn đề này cho các bạn trong 1 bài viết khác.

Tổng kết: Ở bài này ta đã có thể chập chững bắt đầu biết 1 số khái niệm căn bản nhất rồi, hãy ôn lại nào:

1. Các style trong CSS được xếp theo thứ tự ưu tiên từ dưới lên
2. Cú pháp chung của CSS : Đối-tượng1- (selector-1), Đối-tượng-2 (selector-2)  { thuộc tính 1 (properties 1): giá trị 1(value 1) ; thuộc tính 2 (properties 2): giá trị 2(value 2)}
3. 1 đối tượng HTML có thể có nhiều style bằng cách gán cho chúng ID và class

Bài thực hành: Đổi background của 1 số đối tượng trên Y!Mash:

Ở bài thực hành này, do các bạn chưa biết nhiều nên JaL sẽ cung cấp sẵn ID và class cho các bạn, hình ảnh JaL cũng sẽ cung cấp sẵn cho các bạn, nếu bạn không muốn, bạn có thề dùng hình ảnh của riêng mình.

Đây là kết quả sau khi hoàn tất :

Bây giờ thì bắt tay vào làm “lào”

Đầu tiên ta cần phải có 1 ít đồ chơi ^^.

Images:

Các bạn save file hình này về và up lên chỗ nào đó tùy thích.

Bạn cũng có thể link thẳng đến file này của mình không sao hết ^^.

Khởi động Rapid CSS nào, let’s do something really fun !!^^

 

Ở đây ta có 2 đối tượng cần thay đổi đó là phần header và phần border phía ngoài khung.

Ta sẽ bắt đầu từ phần đơn giản nhất, hãy đổi màu border của các box nào. Ta sẽ tác động lên class “mod” (Cách tìm chính xác class của Y!Mash JaL sẽ hướng dẫn trong 1 bài viết khác).

 1: .mod {

 2: border-color:#65aef0;

 3: }

Thuộc tính border-color chỉ ra rằng chúng ta đang tác động vào màu sắc của border.

Ở đây JaL dùng màu xanh nhạt #65aef0, các bạn cũng có thể dùng màu khác nếu thích, để có chính xác mã màu các bạn vào trang http://www.colr.org/ để chọn hoặc cũng có thể dùng chính Rapid CSS để chọn cũng được ( Khi bạn ghõ nó sẽ hiện lên 1 tùy chọn cho bạn chọn màu và tự chèn mã màu cho bạn )

Ok, copy và paste đoạn code CSS của bạn vào phần Advance CSS của Mash nào.

Save lại nhé, ta còn dùng đến nó sau này đấy.

Ok, xong phần đơn giản, bây giờ sẽ là CSS coding thực sự đây

Ta sẽ thêm background bằng hình ảnh cho header, và tạo cho nó hiệu ứng khi chuột đưa vào nó đổi màu khác.

Các bạn dùng file hình phía trên nhé, link là link tới file hình của bạn, ở trong bài viết JaL sẽ dùng link http://www.hieu.info/phong/mash/headerbg3.jpg

Phần header được chứa trong 1 div có class là “mod“, và bản thân nó có class là “hd“

Nếu ta tác động trực tiếp đến class “hd” sẽ rất nguy hiểm vì class này được dùng ở đâu hiện ta chưa biết, vì vậy tốt nhất ta nên tác động tới nó 1 cách cụ thể.

Ta dùng cách sau: selector-1>selector-2  (dấu > ) hoặc selector-1 selector-2 (dấu cách), ở đây cụ thể là mod hd , có nghĩa là chỉ những class nào có tên là hd và nằm trong class có tên là mod bị tác động. Hãy thử đoạn code sau:

 1: .mod {

 2: border-color:#65aef0;

 3: }

 4:  

 5: .mod .hd{

 6: background: #33CCFF;

 7: }

Thuộc tính background cho phép ta thay đổi màu sắc nền, hình nền, … của 1 đối tượng.

Oh yeah, bây giờ phần header của chúng ta đã có màu xanh, but … vẫn chưa có gì à nổi bật cả, thật là xấu xí.

Ta sẽ thêm hình vào cho nó.

 1: .mod {

 2: border-color:#65aef0;

 3: }

 4: .mod .hd{

 5: background:#33CCFF url('http://www.hieu.info/phong/mash/headerbg3.jpg') left top repeat-x;

 6: }

Ở dòng 4 JaL sử dụng kĩ thuật short-hand, thay vì định nghĩa nhiều thuộc tính, ta gom tất cả những thuộc tính có chung 1 đối tượng cụ thể (border, background, font, …) vào làm 1 dòng duy nhất.

Như đã nói 1 đối tượng có thể có nhiều thuộc tính, bakground cũng là 1 đối tượng.

value url( ‘ link ‘ ) dùng để xác định đường dẫn 1 file hình dùng trong background.

left top : file hình background sẽ được canh trái và phía trên của đối tượng ( Các value khác bạn sẽ thấy khi dùng các CT CSS editor, và chắc bạn cũng tự hiểu nó là gì )

reapeat-x, repeat, repeat-y, dùng để lặp lại background, default là repeat, reapeate-x sẽ có tác dụng lặp lại tấm hình theo hường ngang, và repeat-y cho chiều dọc, hãy tự thử từng cái để hiểu thêm nhé.

no-reapeat: không lặp lại background.

Save lại, sau đó copy và paste vào Y!Ma.

Được đây, nhưng có vẻ gì đó chưa ổn.

Oh! file images của chúng ta có chiều cao là 68px, và chia là 2 mảng màu, tạm thời ta sẽ chỉ dùng mảng phía trên. Nhưng 1/2 cũng là 34px; do ta chưa xác định chiều cao của phần header lên nó dòm khá là … silly.

Hãy thêm chiều cao nào

 1: .mod {

 2: border-color:#65aef0;

 3: }

 4: .mod-content .hd {

 5: padding:9px 6px 0;

 6: background:#fff url('http://www.hieu.info/phong/mash/headerbg3.jpg') top left repeat-x;

 7: height:25px;

 8: }

Thuộc tinh height chỉ ra chiều cao của 1 đối tượng

Thuộc tính padding cho phép ta canh khoảng cách từ phần rìa của đối tượng đến phần nội dung của đối tượng đó (Xem hình minh họa)

Từ trong ra ta sẽ có:

Content : Kích thước 229 x 260

Padding : phần padding sẽ cộng vào kich thước của content, vì vậy bạn có thể dùng nó để giới hạn content cách ra khỏi lề 1 khoảng nhất định (Sai trên IE6, IE6 bị lỗi)

Border: sẽ được cộng vào kích thước ta box, VD: nếu kích thước qui định là 229, border 1px, ta sẽ có kích thước thật là 230px

Margin: sẽ cộng thêm vào kích thước box, dùng để canh khoảng cách giữa đối tượng bị tác động với các đối tượng xung quanh, VD: margin:5px; sẽ khiến các đối tượng khác nằm cách đối tượng của chúng ta 5px;

Vấn đề margin và padding đối với người mới học có vẻ rất khỏ hiểu, nhưng sau này nếu có điều kiện tiếp xúc nhiều bạn sẽ nắm rõ hơn, tạm thời ta cứ nhớ nếu muốn 1 cái gì đó nằm cách những thứ xung quanh, ta dùng margin, còn canh từ ngoài lề đối tượng vào trong ta dùng padding ( Chả hiểu, cố đọc và nghiền ngẫm đi, JaL không có khiếu viết lách ).

1 số thuộc tính bao gồm 4 giá trị đó là top-left-bottom-right (theo thứ tự vậy ý) ta cần phải có 4 giá trị này, nếu thiếu 1 giá trị thì nó sẽ lấy giá trị của thằng đối xứng với nó, ở trên padding: 9px 6px 0; nghĩa là cách top 9px, cách left 6px, cách bottom 0 và cách right 6px.

Bạn có thắc mặc tại sao JaL vừa nói độ cao là 34px mà JaL lại ghi 25px ? Đơn giản vì … chúng ta có content là 25px + 9px padding = 34px, đây là kích thước của box

OK, save lại và up đoạn code của chúng ta lên, wow, now its  smooth ler

Tiếp theo, ta sẽ khiến nó … đổi màu khi đưa chuột vào.

Lúc trước ta thường dùng java để làm việc này, nhưng bây giờ hãy quên java đi, vì chúng ta đã có CSS

Ta sẽ thêm 1 pseudo-selector (hem bít dịch), pseudo mà ta sử dụng ở đây là :hover.

 1: .mod {

 2: border-color:#65aef0;

 3: }

 4: .mod-content .hd {

 5: padding:9px 6px 0;

 6: background:#33CCFF url('http://www.hieu.info/phong/mash/headerbg3.jpg') top left repeat-x;

 7: height:25px;

 8: }

 9: .mod-content .hd:hover {

 10: padding:9px 6px 0;

 11: background:#33CCFF url('http://www.hieu.info/phong/mash/headerbg3.jpg') left -34px repeat-x;

 12: color:#65aef0;

 13: height:25px;

 14: }

Dòng 9 .mod-content .hd:hover nhằm chỉ ra seletor này sẽ có tác dụng khi ta đưa chuột qua đối tượng.

Ở dòng 11 ta có 1 thay đổi nhỏ, ta dùng left -34px thay vì left top như ở trên, diểm hay chính là đây, CSS cho phép ta dời vị trí của background , ta dùng left - 34px để nói cho trình duyệt biết rằng ta muốn dời vị trí của background lên trên 34px, và chuyện gì sẽ xảy ra ???, phần màu xanh lá ban nãy chúng ta không dùng sẽ xuất hiện thay thế cho phần xanh da trời, và ta có hiệu ứng change color

color: dùng để thay đổi màu chữ

Vậy là ta đã hoàn thành công đoạn cuối cúng cho 1 header đẹp, ngày mai JaL sẽ hướng dẫn các bạn thêm 1 số phần khác.

Bài đọc thêm (Nếu chưa đủ buồn ngủ):

http://www.w3schools.com/css/css_reference.asp

http://www.w3schools.com/quiztest/quiztest.asp?qtest=CSS làm kiểm tra đê )

Mah Result:

W3Schools CSS Quiz

Result:

20 of 20

100%

Perfect!!!

Time Spent
2:09