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
Internet Explorer (IE) là trình duyệt web được Microsoft phát triển dành riêng cho hệ điều hành Windows, và đáng tiếc là hiện tại nó không có cho hệ điều hành Mac OS
Giả sử bạn phát triển 1 dự án và tạo trên localhost, cách thông thường là mỗi dự án thì bạn tạo một thư mục riêng trong thư mụcwww hoặc bên trong 1 thư mục nào đó.
Facebook Chat is one of the easiest way to chat with your friends and share your thoughts with your friends and family.
Bình luận (0)
Add Comment