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
REST is one of the most popular ways of making Web Services work. There are other formats such as SOAP or XML-RPC, but we are only going to focus on REST because it is the Drupal standard. REST utilizes HTTP methods, such as GET, POST, and DELETE.
Bài viết này sẽ hướng dẫn các bạn cách tối ưu CSS, nó sẽ giúp cải thiện được tốc độ tải trang phần nào.
Dropbox là một dịch vụ sao lưu, lưu trữ dữ liệu trực tuyến với khả năng đồng bộ theo thời gian thực và tự động thực hiện sao lưu.
Bình luận (0)
Add Comment