Chủ Nhật, 14 tháng 4, 2013

CSS là gì ?

1, CSS là gì ? 

- CSS là viết tắt của cụm từ "Cascading Style Sheet" , nó là một ngôn ngữ quy định cách trình bày của các thẻ html trên trang web.

- Là ngôn ngữ đang được sử dụng rất nhiều trong lập trình web, có thể nói CSS ra đời đã tạo nên một cuộc cách mạng.

- Đôi khi các bạn sẽ bối rối khi nhận thấy rằng các đoạn code mình viết hiển thị không giống nhau trên các trình duyệt khác nhau, CSS sẽ giúp các bạn giải quyết bài toán  này.

- CSS quy định cách hiển thị nội dung của các thẻ HTML trên các trình duyệt gần như giống nhau,bằng cách quy định các thuộc tính cho thẻ HTML đó.

2, Cách chèn CSS vào trang HTML

Chúng ta có 3 cách để đưa nội dung của CSS vào trang web như sau:

+ Cách 1: Chèn nội dung CSS vào trong cặp thẻ <style> </style> trong phần <head></head> của trang web:

VD:

<html> 

   <head>    

       <title>Chen CSS-Cách 1</title>

         <! Chen CSS vào giữa cặp thẻ sau: >

         <style type="text/css">

              Nội dung CSS đặt bên trong đây  

        </style>

     </head>

    <body>

    </body>

</html>

 

+ Cách 2: Chèn trực tiếp vào bên trong thẻ HTML.

- Chèn trực tiếp CSS vào bên trong các thẻ mở của HTML.

- Nếu có nhiều thuộc tính cần quy định, ta ngăn cách giữa chúng bằng khoảng trắng.

VD: Ở đây ta chèn CSS vào thẻ mở của cặp thẻ <p></p>.

<html>

    <head>

   <title>Chen CSS-Cách 2</title>

    </head>

     <body>

         <p style="Nội dung CSS ở đây, cách nhau bằng khoảng trắng">

         </p>

     </body>

</html>

 

+ Cách 3: Liên kết với một file *.css bên ngoài

- Đây là cách được dùng nhiều nhất trong sử dụng CSS vì tính tiện dụng và linh hoạt của nó. Giả sử, bạn có một website gồm hàng trăm trang, khi bạn muốn thay đổi một chút cách trình này của website, thay vì gạch cạch đi gõ từng trang một, bạn chỉ cần sửa file CSS bên ngoài một chút, hàng trăm trang web của bạn đều được thay đổi.

- Cú pháp: Thực hiện liên kết bằng thẻ <link> ( Không có tag đóng ), theo cú pháp sau:

               <link rel="stylesheet" href="Đường dẫn đên file .css" type="text/css" />

Tag này được đặt trong cặp tag <head></head> của trang web, và không cần đặt trong tag <style></style>

- Nếu bạn đặt file *.css cùng thư mục với trang web, thì trong thuộc tính href bạn chỉ cần viết: href="<ten_file_css.css".

- Nếu file *.css không cùng thư mục với trang web: Bạn cần chỉ trong đường dẫn tuyệt đối tới file *.css đó trong thuộc tính href

VD:

<html>

    <head>

          <link rel="stylesheet" href="danbocuc.css" type="text/css" />

    </head>

    <body>

    </body>

</html>

3, Cần gì để học CSS

- Ngoài những điều kiện giống như học HTML, khi học CSS, bạn cần phải nắm vững những kiến thức cơ bản của HTMLtrước đã. Đây sẽ là một điều kiện tốt giúp các bạn tiếp thu kiến thức về CSS nhanh hơn rất nhiều

Trên đây là nột số nét cơ bản ban đầu về CSS. Ở bài sau, chúng ta sẽ bắt đầu tìm hiểu về cú pháp chung của CSS

 

0 nhận xét:

Đăng nhận xét