Bài 3: Các công nghệ trong AJAX - CSS - Cú pháp & thuộc tính CSS Style

nguyenac

Administrator
Thành viên BQT
18/11/08
22.554
1
38
Cú pháp cơ bản của CSS
Cú pháp của CSS gồm ba thành phấn:


  • Thành phần lựa chọn (thường là một thẻ HTML) (Selector)
  • Thuộc tính (Property)
  • Giá trị (Value)
Thể hiện của cú pháp CSS
HTML:
Selector {
Property1: Value1;
Property2: Value2;
}
Selector có thể là các thẻ/nhóm thẻ HTML, các lớp khai báo, hay bằng định danh duy nhất của phần tử.
Khi chèn các đoạn mã CSS vào trang web, trình duyệt sẽ hiển thị trang web theo cách CSS đã qui định cho nó, có ba cách để chèn CSS vào trang web. a. External Style Sheet
Mỗi trang web sử dụng file CSS ngoài này đều phải sử dụng thẻ <LINK>. Thẻ <LINK> được đặt bên trong thẻ <HEAD>
HTML:
<head>
<link rel=”stylesheet” type=”text/css”
href=”mystyle.css” />
</head>
b. Internal Style Sheet (định nghĩa các style sheet ngay trong trang web)
Trong trường hợp mỗi trang web của sử dụng các định dạng khác nhau, dùng Internal Style Sheet. Để định nghĩa Internal Style Sheet, sử dụng thẻ <STYLE> đặt bên trong thẻ <HEAD>.
Mã:
<head>
<style type=”text/css”>
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url(”images/back40.gif”)}
</style>
</head>
c. Internal Style Sheet (style được qui định ngay trong mỗi thẻ HTML)
Đây là phương pháp kém hiệu quả nhất, không nên sử dụng phương pháp này vì đã làm mất các ưu điểm của CSS.
HTML:
<p style=”color: sienna; margin-left: 20px”>
This is a paragraph
</p>
(sử dụng file CSS được định nghĩa thành trong file riêng)
Các thuộc tính của CSS Style Mỗi phần tử trong trang HTML có thể được qui định theo nhiều kiểu. Một phần text của một phần tử có thể được quy định theo các thuộc tính color, font size, độ đậm của phông, và kiểu chữ sử dụng. Có rất nhiều tùy chọn được áp dụng cho thuộc tính trên. Ví dụ để qui định cho một paragraph:
Mã:
.robotic{
font-size: 14pt;
font-family: courier new, courier, monospace;
font-weight: bold;
color: gray;
}
Sách về CSS:
Mã:
[URL]http://www.xpressionsz.com/archives/1580[/URL]
[URL]http://www.xpressionsz.com/archives/4146[/URL]
[URL]http://www.xpressionsz.com/archives/3531[/URL]
[URL]http://www.xpressionsz.com/archives/1507[/URL]
[URL]http://www.xpressionsz.com/archives/4074[/URL]
Bài sau chúng ta sẽ cùng nhau tìm hiểu về DOM (Document Object Model )

 

Facebook Comment

Find Diễn đàn Công nghệ thông tin và truyền thông on mobile

Thành viên trực tuyến

Không có thành viên trực tuyến.

Thống kê diễn đàn

Chủ đề
31.023
Bài viết
33.076
Unanswered questions
2
Answered questions
2
Thành viên
5.956
Thành viên mới
tienchiase

Mobile app users
0
Latest mobile user

Tài nguyên mới

Mobile app for XenForo 2 by Appify