Trước khi học cách kết nối file CSS vào HTML như thế nào, chúng ta hãy xét cấu trúc thư mục chứa các file như sau:
Html
index.htmlcss
style.css<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Tiêu đề trang web</title> </head> <body> ...Phần thân viết ở đây... </body> </html>
Nếu không có nội dung thì file CSS có thể là file rỗng, hoặc chứa dòng khai báo charset, ở đây ta tạm thời sử dụng file rỗng:
Chúng ta kết nối file CSS vào file HTML thông qua thẻ <link>, cách sử dụng thẻ này như thế nào các bạn có thể xem bên phần tham khảo.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Tiêu đề trang web</title> <link href="css/style.css" rel="stylesheet" type="text/css" media="screen,print" /> </head> <body> ...Phần thân viết ở đây... </body> </html>
Thuộc tính href ta phân tích như sau:
Như vậy css/style.css sẽ dẫn đường dẫn tới file style.css trong thư mục css.
Viết nội dung CSS theo cấu trúc như sau:
Bộ chọn { thuộc tính: giá trị; }
p { color: red; }Chúng ta có thể viết nhiều cặp thuộc tính và giá trị cho bộ chọn, mỗi cặp thuộc tính và giá trị có thể viết cách nhau bởi dấu chấm phẩy.
p { color: red; float: left; padding-left: 10px; }Đoạn code trên tương tự như đoạn code sau:
p {
color: red;
float: left;
padding-left: 10px;
}Giả sử ta có file HTML như sau:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Tiêu đề trang web</title> <link href="css/style.css" rel="stylesheet" type="text/css" media="screen,print" /> </head> <body> <div id="content"> <ul> <li>Mục 01</li> <li>Mục 02</li> <li>Mục 03</li> <li>Mục 04</li> </ul> <p>Đoạn văn</p> </div> <div class="navi"> <p>Nội dung navi</p> </div> </body> </html>
tag#tênid { thuộc tính: giá trị; }
div#content { width: 600px; }
tag.tênclass { thuộc tính: giá trị; }
div.navi { background: #333333; }[tag cha] [tag con] [tag cháu] { thuộc tính: giá trị; }
div#content p { color: #333333; } /* Chon thanh phan p theo content*/ div.navi p { background: #333333; } /* Chon thanh phan p theo navi*/ div#content ul li { display: inline; } /* Chon thanh phan li theo content*/
Chúng ta có thể xem thêm các bộ chọn khác tại phần tham khảo.
Comment là một dạng ghi chú, giúp người viết code giải thích nghĩa cho từng đoạn code, cách viết một comment trong CSS như sau:
/* Đây là dòng comment */
Download tài liệu hứơng dẫn sử dụng eclipse
Nhóm 1, 5: trình bày các thuộc tính trong thẻ <head> và các doctype
Nhóm 2, 4: Liệt kê 10 trình duyệt, có cài đặt cho từng trình duyệt. Tài liệu hướng dẫn: 10 browser đang được sử dụng nhiều nhất hiện nay
Nhóm 3, 6: Css là gì? Lý do sử dụng Css, Phân loại style, Cách chèn một style, cấu trúc một style
Nhóm 7: Xây dựng menu như sau: Trang chủ | Dịch vụ | Tin tức | Liên hệ
Sử dụng Tag ul, kết hợp CSS để làm menu trên
Nhóm 8: Tạo slide trình bày 4 thuộc tính của tag background và tag text
Drupal Developer having 9+ year experience, implementation and having strong knowledge of technical specifications, workflow development. Ability to perform effectively and efficiently in team and individually. Always enthusiastic and interseted to study new technologies
Hôm qua (25/11), trang công nghệ Businessinsider dẫn lời 2 nguồn tin thân cận với dự án Facebook Phone, cho biết giới lãnh đạo mong muốn tặng không dế cưng cho người dùng.
Sau khi có báo cáo của Thượng viện Mỹ, Ban lãnh đạo ngân hàng HSBC mới đây đã thừa nhận vì thiếu cảnh giác nên đã bị các băng đảng ma túy Mexico sử dụng để rửa tiền, để cho những vụ chuyển ngân liên hệ dến Iran được thực hiện, vi phạm đến những lệnh cấm theo luật của Hoa Kỳ. Trưởng nhóm thanh tra kinh tế của HSBC David Bagley đã phải từ chức.
The cross-media Germany portal, deutschland.de, aims to present a comprehensive, modern and topical picture of Germany abroad
Bình luận (0)
Add Comment