CSS cơ bản

Layout CSS– step 1: bố cục, phác họa 
 Bố cục như trên đã hình thành nên khung cơ bản của 
 website. 
 Quá trình này có thể làm lại nhiều lần để có được bố cục 
 về tỷ lệ giữa các phần sao cho hợp lý nhất, phù hợp với 
 website. menu navigation 
 header 
 right column 
 content 
 footer 
 123 
Layout CSS– step 2: cấu trúc website 
  Xây dựng cấu trúc website: có thể nhiều phần, trong 
 trường hợp minh họa tạo ra cấu trúc sau 
  Một thư mục con là css chứa file css 
  Một thư mục con là images chứa ảnh 
  Ngoài cùng là file html: hiện tại file HTML này chưa có 
 nội dung trong thẻ body. 
 124 
Layout CSS– step 3: chèn thẻ Div 
 Đưa các thành phần menu, header, content, footer vào 
 file index.html theo dạng thẻ div. 
 CSS 
 bỏ phần canh 
 lề, padding 
 cho tài liệu 
 125 
Layout CSS– step 3: chèn thẻ Div 
 Đưa các div chứa nội dung vào html, bỏ dòng chữ Hello world (khi 
 test bên trên) 
 Kết quả khi xem trên trình duyệt 
 Do các div chưa có thuộc tính css nên bố trí chưa chính xác vị trí 
 mong muốn 
 126 
Layout CSS– step 4: gán thuộc tính 
 Phần này gán thuộc tính css cho các div 
 Được màu nền của các thẻ div 
 127 
Layout CSS– step 4: gán thuộc tính 
 Bổ sung thuộc tính float cho div siderbar-a là right, cho 
 phép thẻ này gắn với biên phải 
 Thử đưa nội dung vào thẻ content để xem cách hiển thị 
 128 
Layout CSS– step 4: gán thuộc tính 
  Kết quả như sau 
 Phần chữ tràn sang phần siderbar-a!!! 
 129 
Layout CSS– step 5: fix lỗi tràn text 
 Phần trước khi đưa nội dung vào thì có hiện tượng tràn 
 text qua cột bên phải 
 Nguyên nhân chưa quy định kích thước ngang của div 
 content. 
  bổ sung lại canh lề phải của div content là 280px 
 Đưa thêm nội dung vào siderbar để test 
 130 
Layout CSS– step 5: fix lỗi tràn text 
  Kết quả khi xem trên trình duyệt như sau 
 Nội dung của siderbar tràn sang footer??? 
 131 
Layout CSS– step 5: fix lỗi tràn text 
 Phần content đã giải quyết xong, nhưng do nội dung của 
 siderbar dài hơn content, và phần footer tiếp sao content 
 nên nó bị chồng lên. 
 Sử dụng thuộc tính clear:both 
 132 
Layout CSS– step 5: fix lỗi tràn text 
  Kết quả khi xem trên trình duyệt 
 133 
Layout CSS– step 6: tạo menu, footer 
 Phần này đưa vào layout một số phần chính, tiêu biểu 
 trong website 
  Navigation link 
  Heading 
  Content 
  Footer information 
 Tạo một lớp hidden trong css, nên đặt ở vị trí đầu file 
 css, sau thẻ body 
 134 
Layout CSS– step 6: tạo menu, footer 
 Tạo nội dung cho thẻ header 
 Đưa nội dung vào phần navigation: 
 Bổ sung footer với menu ngang, và một số thông tin khác 
 135 
Layout CSS– step 6: tạo nội dung 
 Thay phần nội dung cũ trong content bằng nội dung 
 mới 
 Thiết lập canh lề cho thẻ h2 và p trong thẻ div có id 
 content 
 136 
Layout CSS– step 6: tạo nội dung 
  Thiết lập các style cho text 
 137 
Layout CSS– step 6: tạo nội dung 
 Bổ sung padding cho thẻ p và h2 trong content là 15px để 
 tách biệt các phần. 
 Tạo class padding cho id siderbar-a và id content có 
 padding là 25px 
 138 
Layout CSS– step 7: bổ sung hình ảnh 
 Thay hai tiêu đề h2 trong nội dung bằng ảnh 
 Đặt hai ảnh about.gif, contact.gif trong thư mục 
 headings con thư mục images. 
 139 
Layout CSS– step 8: bổ sung header 
  Tạo một ảnh nền và một logo để thay thế phần header 
 cũ 
 /images/general/logo_enlighten.gif 
 images/headers/about.jpg 
 140 
Layout CSS– step 8: bổ sung header 
 Bổ sung ảnh nền cho header trong css 
 Thay thế text logo bằng hình logo trong html 
 141 
Layout CSS– step 8: bổ sung header 
 Sửa lại vị trí để ảnh logo hiển thị đúng chỗ cần đặt 
 Logo đặt đúng vị trí 
 142 
Layout CSS– step 9: bổ sung navigation 
  Phần navigation dùng ảnh để thay thế text trong hyperlink. 
  Mỗi hyperlink sẽ có một ảnh tương ứng, mỗi ảnh sẽ có 3 
 phần, để hiển thị theo trạng thái: bình thường, hover và 
 select. 
 50px Trạng thái bình thường 
 Trạng thái hover 
 Trạng thái select 
 4 hình tương ứng với 4 link 
 143 
Layout CSS– step 9: bổ sung navigation 
  Bổ sung #main-nav với thuộc tính sau 
 #main-nav 
 { 
 height: 50px; 
 margin-left: 11px; Canh cho fix với hình 
 } nền của header 
 #main-nav dl 
 { 
 margin: 0; 
 padding: 0; 
 } 
 #main-nav dt 
 { 
 float: left; Cho các dt nằm ngang 
 } 
 144 
Layout CSS– step 9: bổ sung navigation 
  Bổ sung CSS rule cho thẻ a trong dt 
 #main-nav dt a { 
 display: block; 
 height: 50px; 50px 
 background-repeat: no-repeat; 
 } 
 145 
Layout CSS– step 9: bổ sung navigation 
  Bổ sung CSS rule cho thẻ a trong dt 
 #main-nav dt#about a { 
 width: 71px; Chiều ngang ảnh 
 background-image: url(about.gif); 
 } 
 #main-nav dt#services a { 
 width: 84px; 
 background-image: url(services.gif); ảnh nền 
 } 
 #main-nav dt#portfolio a { 
 width: 95px; 
 background-image: url(portfolio.gif); 
 } 
 #main-nav dt#contact a { 
 width: 106px; 
 background-image: url(contact.gif); 
 } 
 146 
Layout CSS– step 10: bổ sung footer 
  Bổ sung CSS rule cho thành phần trong footer 
 #footer a 
 { 
 color: #c9c9c9; 
 text-decoration:none; 
 } 
 #footer a:hover 
 { 
 color: #db6d16; 
 } 
 #footer #altnav 
 { 
 float:right; Gắn với biên phải 
 width: 350px; 
 text-align:right; 
 } 
 147 
Layout CSS– step 10: bổ sung footer 
  Bổ sung CSS rule cho phần footer 
 #footer 
 { 
 clear:both; Tránh tràn lên trên 
 font-family: tahoma; 
 font-size:10px; 
 color: #c9c9c9; 
 Hiển thị biên trên như 
 border-top: 1px solid #efefef; 
 đường gạch ngang 
 padding:13px 25px; 
 line-height:18px; 
 } 
 148 
Tạo CSS Tab 
 
 Tạo code markup như sau CSS Tab 
 HTML 
 XHTML 
 CSS 
 Javascript 
 149 
Tạo CSS Tab 
  Khai báo các thuộc tính CSS 
 #menu ul { 
 float:left; 
 list-style-type: none; 
 margin: 0px; 
 padding: 0px; 
 width: 800px; 
 background: #DED5D6; 
 } 
 #menu ul li { 
 float:left; 
 } 
 #menu ul li a { 
 float:left; 
 text-decoration:none; 
 } 
 150 
Tạo CSS Tab 
 Tạo ra tab có dạng sau 
 Chuẩn bị hai ảnh: 
 Start.gif End.gif 
 151 
Tạo CSS Tab 
  Thiết lập ảnh nền cho li là ảnh start.gif 
 #menu ul li 
 { 
 float:left; 
 background: url('start.gif') no-repeat; 
 } 
 152 
Tạo CSS Tab 
  Thiết lập ảnh nền cho thẻ a 
 #menu ul li a 
 { 
 float:left; 
 text-decoration: none; 
 background:url('end.gif') no-repeat; 
 background-position: 100% 0%; 
 } 
 153 
Tạo CSS Tab 
  Chỉnh link spacing 
  Do các tab đứng liền nhau, thiết lập padding để tăng 
 khoảng cách giữa các link 
 #menu ul li a 
 { 
 float:left; 
 text-decoration:none; 
 background:url('end.gif') no-repeat; 
 background-position: 100% 0%; 
 padding:0 10px; 
 } 
 154 
Tạo CSS Tab 
  Tăng khoảng cách giữa tab và chiều cao 
 #menu ul li 
 { 
 float:left; 
 background: url('start.gif') no-repeat; 
 margin-right: 10px; 
 } 
 #menu ul li a 
 { 
 float:left; 
 text-decoration:none; 
 background:url('end.gif') no-repeat; 
 background-position: 100% 0%; 
 padding:0 10px; 
 line-height:30px; 
 } 
 155 
Tạo CSS Tab 
  Bổ sung font, trạng thái hover 
 #menu ul li a 
 { 
 float:left; 
 text-decoration:none; 
 background:url('end.gif') no-repeat; 
 background-position: 100% 0%; 
 padding:0 10px; Trạng thái hover 
 line-height:30px; 
 font-weight:bold; 
 color:#FFFFFF 
 } 
 #menu ul li a:hover 
 { 
 color:#FFFF00; 
 } 
 156 
Tạo CSS Breadcrumbs 
  Tạo HTML có code sau 
 CSS breadcrumb 
 Trang chủ 
 Thiết kế Web 
 HTML 
 Thẻ tạo bảng 
 Hướng dẫn tạo bảng 
 157 
Tạo CSS Breadcrumbs 
 ul, li 
 { 
 list-style-type:none; 
 padding:0; margin:0; 
 } 
 #crumbs 
 { 
 border:1px solid #dedede; 
 height:2.3em; 
 } 
 #crumbs li { 
 float:left; 
 line-height:2.3em; 
 padding-left:.75em; 
 color:#777; 
 } 
 158 
Tạo CSS Breadcrumbs 
  Sử dụng ảnh sau để phân cách các crumb 
 #crumbs li a 
 { 
 display:block; 
 padding:0 15px 0 0; 
 background:url(crumbs.gif) no-repeat right center; 
 } 
 159 
Tạo CSS Breadcrumbs 
  Bổ sung trạng thái hover, focus 
 #crumbs li a:hover, #crumbs li a:focus 
 { 
 color:#dd2c0d; 
 } 
 Trang web đang xem 
 Trạng thái hover hoặc 
 focus 
 160 
Tạo CSS dropdown menu 
  Tạo code HTML như sau 
 Trang chủ 
 Thông tin công nghệ 
 Tin trong nước 
 Tin quốc tế 
 Ngôn ngữ lập trình web 
 HTML basic 
 Javascript CSS 
 ASP language 
 PHP language 
 161 
Tạo CSS dropdown menu 
  Thiết lập CSS 
 #div1 
 { 
 border:1px; 
 background-color:#00CCFF; 
 height:50px; 
 } 
 #div1 ul 
 { 
 list-style:none; 
 } 
 #div1 ul li 
 { 
 position:relative; 
 float:left; 
 } 
 162 
Tạo CSS dropdown menu 
 #div1 li a 
 { 
 text-decoration:none; 
 color:#666666; 
 padding: .3cm 6px; 
 font-size: 20px; 
 display:block; 
 } 
 #div1 li ul{ 
 position:absolute; 
 display:none; 
 } 
 163 
Tạo CSS dropdown menu 
  Thiết lập trạng thái hover và hiển thị submenu 
 #div1 li:hover ul Khi hover 
 { 
 display:block; 
 } 
 #div1 ul li a:hover 
 { Submenu đổ xuống 
 color:#000000; 
 } 
 #div1 ul li a:active 
 { 
 font-weight:bold; 
 } 
 164 
Tạo CSS dropdown menu 
 Khi hover 
  Thiết lập style cho submenu 
 .a1 a:link 
 { 
 border:1px solid; 
 width:6cm; Submenu đổ xuống 
 } 
 .a1 a:hover 
 { 
 color:black; 
 background-color:#FFFF66; 
 } 
 .a1 li 
 { 
 font-family:Georgia, "Times New Roman", Times, serif; 
 } 
 165 
Bài tập 
  Tạo menu dọc như minh họa sau 
 #cecece 
 orange 
 Trạng thái hover 
 border-top: 1px dotted #cecece 
 #666 
 border-right: 7px 
 166 
Bài tập 
 Thiết kế các layout sau 
 167 
Bài tập 
 Thiết kế các layout sau 
 168 
Bài tập 
 Thiết kế các layout sau 
 169 
 đề tài cuối khóa 
  Cấu trúc website 
 Homepage 
 Tối thiểu 3 trang 
 cấp 1 
Cấp 1 1.1 1.2 1.3 
Cấp 2 
 1.1.1 1.1.2 1.1.3 
 Mỗi trang cấp 1 có tối thiểu 3 trang cấp 2 
 170