Css

Css căn bản !

Hôm nay lên forum http://www.matnauhoctro.com/4rum thấy có bài về Css căn bản . Cái này học lâu rồi nhưng ôn lại tý. Mình tóm tắt lại kiến thức cơ bản cái . Hihi .

I. Css là gì ?
CSS (Cascading Style Sheets) được hiểu một cách đơn giản đó là cách mà chúng ta thêm các kiểu hiển thị (font chữ, kích thước, màu sắc…) cho một tài liệu Web.

II. Một số đặc tính cơ bản của CSS.
Css dùng các thuộc tính của thẻ HTML để qui định các hiện thị của thẻ đó như font, size … , Điểm mạnh của Css là bạn chỉ cần 1 file.css thôi là bạn đã có thể quản lý layout của website . Ngoài ra chúng ta còn có thể sử dụng nó trên site khác . Rất thuận tiện bạn có thể chỉnh sửa layout rất nhanh gọn .
– Css có nhiều cách khai báo khác nhau . Có thể viết nó trong thẻ <head> …</head> , trong file.css bên ngoài hoặc cũng có thể viết trực tiếp trong thẻ HTML .Nhưng ở mổi cách viết có độ ưu tiên khác nhạu .
1. Viết trong thể HTML
2. Trong thẻ <head>..</head>
3. Trong file.css
4. Mặc định của trình duyệt
Nhưng để chuyện nghiệp thì kiểu viết trong file.css được sử dụng nhiều vì nó rất tiện lợi và dể sửa và có thể sử dụng lại dể dàng hơn .
– Css có tính kế thừa: Nếu bạn khai báo <div id = “kethua”></div>.

 #vidu {
        width: 200px;
        height: 300px;
      }

Nếu bạn viết thêm ;

  #vidu {
        width: 400px;
        background-color: #CC0000;
      }

Thì lúc đó nó sẽ có các thuộc tính là :

 #vidu {
        width: 400px; /* Đè lên khai báo cũ */
        height: 300px;
        background-color: #CC0000;
      }

III. Cú pháp Css .
Cú pháp Css có 3 phần chính : Phần thẻ chọn (selector) ,phần thuộc tính (property) ,phần nhãn (value).

p {
  text-align: center;
  color: black;
  font-family: arial
}

IV. Chèn Css vào trang web
1 . Chèn Css từ file.css .
Bạn chỉ cần khai báo rất đơn giản là có thể sử dụng được rồi .

<html>
<head>
<link rel="stylesheet" type="text/css" href="/mystyle.css"
medial="all" />
</head>

<body>
</body>
</html>

Chú ý : Không bao giờ sử dụng khoảng trắng trong nhãn, giả sử rằng nếu bạn dùng margin-left: 20 px; thay cho margin-left: 20px; thì IE6 sẽ hiểu còn các trình duyệt như Firefox, Opera sẽ không hiểu .
2. Chèn Css vào thẻ <head>…</head>.

<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>

Thường cách này ít được khuyến khích dùng vì nếu css của bạn ít còn có thể được còn nếu quá nhiều thì nhìn sẽ rất rồi . Và điều quan trọng là nếu dùng cái này thì bạn phải đặt nó trong thẻ <head> và thể <style>.
Và ở một số trình duyệt củ thì nó không hiểu thẻ <style>. Nên nó sẽ bỏ qua thẻ này .
3. Chèn trực tiếp css vào HTML .
Cài này ít được sử dụng và cũng không nên dùng .

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

Đây chỉ là giới thiệu căn bản về Css lúc mới bắt đầu vào Css . Bài sau sẽ sâu hơn một chút .
Phù phù … Thế là cũng tạm tạm rồi .

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s