Thứ Ba, 16 tháng 4, 2013

Cú pháp trong css & một số thuộc tính của thẻ body

 Trong CSS có 2 cách viết để xác định cách trình bày cho các thẻ html, chúng đều mang ý nghĩa định dạng như nhau. Một cách dùng để viết cho các đoạn CSS trong thẻ <style> và trong file *.css bên ngoài. Cách còn lại dùng để chèn trực tiếp bên trong các thẻ html. Hai cách viết này chỉ khác nhau một chút ít về cách viết. Bây giờ chúng ta sẽ đi vào từng cách này.

 * Chú thích trong css: 

- Chú thích là những dòng văn bản được thêm vào trong đoạn css bởi người viết để giải thích, làm rõ ràng các đoạn mã css. 

- Cũng giống như các đoạn chú thích trong html, các đoạn chú thích trong css sẽ được trình duyệt bỏ qua .

- Các cách viết chú thích trong css:


  • Chú thích trên một dòng: Dùng hai dấu gạch chéo //< Nội dung chú thích >

  • Chú trên một đoạn: Dùng kí hiệu /* < Nội dung chú thích > */


* Tạo một file css

- Mở một trình soạn thảo văn bản lên ( notepad, notepad++, macro...)

- Viết các đoạn mã css 

- Chọn File -> Save As , và chọn lưu văn bản dưới dạng .css

1, Cách viết thông thường
<Tên thuộc tính>
{
<Thuộc tính 1>: <Giá trị>;
<Thuộc tính 2>: <Giá trị>;
.........
<Thuộc tính n>: <Giá trị>;
}

- Để quy định thuộc tính cho các thẻ ( hay còn gọi là các phần tử ) của html các bạn có cách viết sau:

 

- VD: Để quy định màu nền cho một trang web là màu xanh lá cây ta có thẻ dùng cú pháp sau:

        body{ background-color: green;} : Đây chính là lí do vì sao mình khuyên các bạn nên có một chút kiến thức cơ bản về html trước khi học css.

- Cách viết này được đặt trong thẻ <style> ở phần <head> của trang web và đặt trong các file *.css liên kết với trang web

2, Chèn các mã css trực tiếp vào các phần tử html

- Để chèn trực tiếp mã css vào một phần tử html ta theo dõi ví dụ sau:
<h1 style="font-family:Georgia; color:blue;"> Đây là thẻ h1 đã được định dạng bằng css</h1>

- Kết quả : 

Đây là thẻ h1 đã được định dạng bằng css


- Vậy từ đây, các bạn có thể thấy được một cách tổng quát về cách chèn các mã css trực tiếp vào các phần tử html.

- Tuy vậy, nói chung, cách viết thứ nhất vẫn được sử dụng nhiều hơn cả, vì vậy, từ nay ta sẽ chủ yếu viết theo cách này.

2, Quy định một số thuộc tính của thẻ <body> với CSS

Để quy định một số thuộc tính cho thẻ body ta có cú pháp sau:

          body{ <thuộc tính> : <giá trị>}

Các thuộc tính cụ thể như sau:

+ Định dạng kiểu chữ trong nội dung trang web

   Nếu không có các định dạng khác, cụ thể cho từng phần tử html thì định dạng này sẽ quy định kiểu chữ dùng chung trong nội dung trang web.

- Định dạng font chữ: 

  • Cú pháp:  font-family: <Tên font chữ hoặc tên họ font chữ>.

  • Tên font chữ tốt nhất bạn nên đặt là các font chữ thông dụng.

  • Nếu tên font chữ chứa khoảng trắng, bạn phải  viết tên font trong dấu nháy kép "" (VD: Times New Roman).

  • Họ font chữ: tên của một họ đại diện cho nhiều font (VD: VNI, ...).

  • Bạn có thể viết nhiều font chữ, và các font chữ đứng trước sẽ được ưu tiên dùng trước, nếu máy tính không hỗ trợ các font chữ này, trình duyệt sẽ sử dụng các font được quy định sau.

  • VD: font-family: "Times New Roman", Arial, VNI;


- Định dạng cỡ chữ:

  • Cú pháp:  font-size: < kích cỡ chữ>;

  • Trong css hỗ trợ nhiều đơn vị đo nhưng thông dụng nhất vẫn là pixel.

  • VD :  font-size: 14px;



- Định dạng màu chữ:


  • Cú pháp : color: < Màu chữ>;

  • Như ta đã nói ở bài đàu tiên, màu chữ ở đây có thể là tên màu cụ thể, hoặc mã màu dạng hệ thập lục phân.

  • VD: color: #00FF00; hoặc color: lightgreen;


+ Màu nền cho trang web 

- Cú pháp:  background-color:"Màu nền";

-VD: body{background-color:lightgreen;}

+ Hình nền cho trang web

 Với html, để quy định một bức ảnh làm hình nền cho một  trang web ta có thể viết mã html  như sau:

 <body background="link đến ảnh">

còn với css, để quy định một bức tranh làm nền cho trang web, trong phần quy định các thuộc tính cho thẻ body, ta có thể như sau:

     background-image: url( đường dẫn đến ảnh);

+ Lặp lại hình nền của trang web

Thực tế, không ai làm một hình nền vừa khít với nội dung trang web trong mọi trình duyệt, mọi kích cỡ màn hình cả, mà người ta hay dùng thuộc tính lặp lại hình nền để hình nền trải dài khắp nội dung trang web. Trong css, ta làm điều đó như sau:

  • background-repeat: repeat; Chế độ mặc định, lặp lai hình nền theo cả 2 phương ngang-dọc.

  • background-repeat: no-repeat; : Không lặp lại ảnh nền.

  • background-repeat: repeat-x;   : Chỉ lặp lại theo phương ngang.

  • background-repeat: repeat-y;   : Chỉ lặp lại theo chiều dọc.

  • background-repeat: repeat-x repeat-y; Lặp lại theo cả chiều ngang và dọc.


Các bạn có thể tự mình thử nghiệm để thấy rõ được sự khác biệt.  

+ Khóa ảnh nền trang web

- Ở phần trên ta đã đề cập đến thuộc tính lặp lại ảnh nền trang web nhằm  trải dài hình nền trang web trên khắp nội dung của trang. Tuy vậy, thực tế có những hình nền chỉ rất đẹp khi chúng không được lặp lại, hay nói cách khác việc lặp lại hình nền làm cho trang web trở nên rất xấu.

- Ở phần này, mình sẽ đưa ra một thuộc tính khác phần nào hạn chế được tình trạng này. Đó là thuộc tính khóa ảnh nền, thuộc tính này có hai giá trị và nó sẽ quy định xem ảnh nền trang web sẽ đứng im khi bạn cuộn nội dung trang web, hay nó sẽ chạy theo thanh cuộn ( nếu bạn nào thấy nó không có gì khác biệt với giá trị no-repeat ở phần trên, bạn hãy thử, sẽ thấy ngay sựu khác biệt). Cụ thể như sau:

  • background-attachment: scroll;  : Không khóa ảnh nền, ảnh nền cuộn cùng nội dung trang web. Đây là giá trị mặc định

  • background-attachment: fixed; : Khóa ảnh nền, ảnh nền đứng im khi cuộn trang web.


Nếu bạn có một hình nền đủ lớn để phủ hết màn hình, nhưng nội dung trang web lại dài gấp vài lần màn hình máy tính, bạn sẽ thấy thuộc tính này có ích như thế nào.

 

0 nhận xét:

Đăng nhận xét