Đang tải... (xem toàn văn)
This is a paragraph
Nhiều Stylesheet Trong trường hợp mà có số thẻ có định dạng, gộp chúng lại với Giả sử sau: h1, h2, h3 { margin-left: 10px; font-size: 150%; } Giống đoạn mã ba thẻ h1, h2, h3 có thuộc tính http://www.viet-ebook.co.cc CuuDuongThanCong.com Các viết lấy từ cssyeah.com https://fb.com/tailieudientucntt Các học CSS Các vấn đề văn cách định dạng văn Thuộc tính CSS text cho phép bạn hồn tồn quản lí thuộc tính văn bản, bạn quản lí ẩn nó, thay đổi màu sắc, tăng giảm khoảng cách ký tự đoạn, chỉnh việc dóng hàng (align), Các thuộc tính text mà CSS hỗ trợ Đặt màu cho đoạn văn Để đặt màu cho đoạn văn dùng thuộc tính: color: #mã màu; p { color: #333333; } Đặt màu cho đoạn văn Bạn đặt màu (background) cho đoạn văn thuộc tính background-color: #mã màu; p { background-color: #FFFF00; } Căn chỉnh khoảng cách ký tự Khoảng cách ký tự đoạn văn tăng giảm thuộc tính letter-spacing: khoảng cách; h3 { letter-spacing: 2em; } h1 { letter-spacing: -3em; } Căn chỉnh khoảng cách dòng Thuộc tính line-height: khoảng cách; giúp bạn chỉnh khoảng cách dòng đoạn văn p { line-height: 150%; // line-height: 15px; http://www.viet-ebook.co.cc CuuDuongThanCong.com Các viết lấy từ cssyeah.com https://fb.com/tailieudientucntt Các học CSS } Dóng hàng Để gióng hàng cho đoạn văn dùng thuộc tính text-align: vị trí; p { text-align: left; /* left | center | right */ } Trang hoàng thêm cho đoạn văn Một đường gạch chân đường gạch ngang dòng văn làm cho đoạn văn bạn thêm sinh động Để tô điểm thêm cho đoạn văn dùng thuộc tính text-decoration: thuộc tính; h3 { text-decoration: underline; /* Gạch chân */ } h2 { text-decoration: line-through; /* Gạch ngang */ } h1 { text-decoration: overline; /* kẻ */ } Chỉnh vị trí đoạn văn (indent) Thuộc tính text-indent: vị trí; chỉnh vị trí dòng văn theo chiều ngang h1 { text-indent: -2000px; /* text-indent: 30px; */ } Điều kiển ký tự đoạn văn Bạn điều khiển toàn đoạn văn chữ hoa hay chữ thường thuộc tính texttransform: kiểu chữ; p.uppercase { text-tranform: uppercase; } p.lowercase { text-tranform: lowercase; } p.capitalize { text-tranform: capitalize; http://www.viet-ebook.co.cc CuuDuongThanCong.com Các viết lấy từ cssyeah.com https://fb.com/tailieudientucntt Các học CSS } Đặt hướng cho đoạn văn Hướng đoạn văn từ trái qua phải hay từ phải qua trái điều khiển thuộc tính direction: hướng; div.rtl { direction: rtl; /* Right to left */ } div.ltr { direction: ltr; /* Left to right */ } Tăng khoảng cách từ Khoảng cách từ tăng thuộc tính word-spacing: khoảng cách; word-spacing: 30px; Làm tác dụng đường bao thẻ HTML Để làm tác dụng đường bao thẻ HTML dùng thuộc tính white-space: giá trị; p { white-space: nowrap; } Thuộc tính white-space làm cho tồn đoạn văn dòng http://www.viet-ebook.co.cc CuuDuongThanCong.com Các viết lấy từ cssyeah.com https://fb.com/tailieudientucntt Các học CSS Fix min-height cho IE Hiện hầu hết trình duyệt Firefox, Opera, Safari, hiểu thuộc tính minheight: CSS, IE lại khơng thể hiểu thuộc tính Chính mà muốn đặt min-height cho đối tượng cần phải Fix để cho IE hiển thị giống trình duyệt khác Giả sử có thẻ muốn đặt min-height cho thẻ Khi chúng phải làm sau: /* Cho tất trình duyệt */ box { width:20em; padding:0.5em; border:1px solid #000; min-height:8em; height:auto; } /* Fix cho IE */ /*\*/ * html box { height: 8em; } /**/ Update Chúng ta dùng giải pháp sau: selector { min-height:500px; height:auto !important; height:500px; } Do IE6 không hiểu thuộc tính min-height phải cố định chiều cao cho Trong trường hợp nội dung có chiều cao lớn height chiều cao IE6 tự động kéo dài xuống Firefox số trình duyệt khác sử dụng thuộc tính height: auto; http://www.viet-ebook.co.cc CuuDuongThanCong.com Các viết lấy từ cssyeah.com https://fb.com/tailieudientucntt Các học CSS Đặt min-width cho IE6 Như biết với phát triển nhanh chóng ngành cơng nghiệp phần cứng, ngày có nhiều hình có độ phân giải cao Nó cho phép có khơng gian làm việc rộng hơn, đơi vấn đề bất cập Website Đối với số Website thường để chiều ngang auto theo chiều rộng hình tơi nghĩ cần có chút thay đổi nhỏ Chúng ta đặt chiều rộng Website auto tới khoảng định (giả sử tới 1024px, ) cố định chiều rộng Điều giúp bạn chủ động việc thiết kế giao diện đồ họa mình, tránh tình trạng Website bị vỡ chiều ngang hình q lớn Để thực điều sử dụng thuộc tính max-width CSS, có đề trình duyệt Firefox, Opera, Safari, hiểu riêng IE6 lại khơng thể hiểu thuộc tính Để thực điều IE6 có giải pháp sử dụng câu lệnh điều kiện Javascript nhúng vào CSS: content { height: 75px; background-color: #000; color: #fff; width: expression(document.body.clientWidth < 742? "740px" : document.body.clientWidth > 1202? "1200px" : "auto"); min-width: 740px; max-width: 1200px; } http://www.viet-ebook.co.cc CuuDuongThanCong.com Các viết lấy từ cssyeah.com https://fb.com/tailieudientucntt Các học CSS CSS Transparency toàn trình duyệt Trong viết "Hiển thị ảnh PNG IE" đề cập đến vấn đề để transparent toàn ảnh PNG Website IE Trong viết đề cập đề cập đến vấn đề làm cho transparent background thẻ mà muốn Mặt khác kỹ thuật đơn dùng kỹ thuật CSS Chúng ta áp dụng thuộc tính sau cho phần tử HTML muốn transparent .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } opacity: 0.5; Đây thuộc tính quan trọng thuộc tính chuẩn CSS Nó làm việc hầu hết phiên Firefox, Opera Safari Thuộc tính cần thiết cho trình duyệt hỗ trợ thuộc tính chuẩn CSS filter:alpha(opacity=50); Thuộc tính dùng cho IE -moz-opacity:0.5; Nó cần thiết cho phiên cũ Mozilla Netscape Navigator -khtml-opacity: 0.5; Được dùng cho phiên cũ Safari (1.x) http://www.viet-ebook.co.cc CuuDuongThanCong.com Các viết lấy từ cssyeah.com https://fb.com/tailieudientucntt Các học CSS Border điều bạn chưa biết Giả sử tơi có thẻ với định dạng CSS sau: div.border { display: block; width: 1px; height: 1px; background: #FFF; border-top: 1px solid #F00; border-right: 1px solid #0F0; border-bottom: 1px solid #00F; border-left: 1px solid #000; overflow: hidden; } Các bạn có nghĩ hiển thị giống trình duyệt hay khơng? Câu trả lời khơng, điều bạn khơng tin thực tế kiểm trực qua thực nghiệm Nếu nhìn thống qua khơng thấy điều đó, bạn phóng to thẻ nhiều lần bạn thấy điều Dưới số kết thấy xem nhiều trình duyệt khác Đôi điều lại làm đau đầu việc fix lỗi trình duyệt Khi bạn gặp trường hợp thừa thiếu pixel layout bạn bạn nhớ tới viết http://www.viet-ebook.co.cc CuuDuongThanCong.com Các viết lấy từ cssyeah.com https://fb.com/tailieudientucntt Các học CSS Kỹ thuật đưa footer xuống cuối trang Khi thiết kế layout trang Web dạng bảng (table) việc đưa phần footer lúc phía việc đơn giản Nhưng bạn làm việc với layout dạng việc đưa phần footer lúc phía điều khó khăn Mặc dù Designer CSS nghĩ thủ thuật (trick) để thực việc Sau chi tiết thủ thuật này: Trước vào chi tiết để có hình dung cụ thể xem ví dụ minh họa sau Ý tưởng chủ đạo kỹ thuật dùng thẻ có chiều cao 100% để đẩy phần footer xuống phía dưới, phần footer bị đẩy ngồi phạm vi trang khơng thể nhìn thấy Để nhìn thấy phần footer đặt thuộc tính margin-bottom phần wrapper âm với mục đích giảm chiều cao phần wrapper khoảng chiều cao phần footer Từ hồn tồn nhìn thấy phần footer Dựa ý tưởng có định dạng HTML sau: /* BEGIN: WRAPPER */ CSS Sticky Footer Nội dung content /* END: WRAPPER */ /* BEGIN: FOOTER */Nội dung footer
/* END: FOOTER*/ Để cho phần wrapper có chiều cao 100% định dạng thuộc tính CSS sau: wrapper { http://www.viet-ebook.co.cc CuuDuongThanCong.com Các viết lấy từ cssyeah.com https://fb.com/tailieudientucntt Các học CSS min-height: 100%; /* Fix cho firefox */ height: auto !important; height: 100%; } Khi phần footer bị đẩy ngồi trang, nhìn thấy ta cần phải đặt margin-bottom phần wrapper âm .wrapper { margin: auto -4em; } Phần margin âm phải có chiều cao chiều cao phần footer Khi phần footer hiển thị hoàn toàn http://www.viet-ebook.co.cc CuuDuongThanCong.com Các viết lấy từ cssyeah.com https://fb.com/tailieudientucntt Các học CSS Đặt dòng text vào ( theo chiều cao) Từ trước tới bạn muốn đặt dòng chữ (giả sử như) tiêu đề vào thẻ HTML có chiều cao xác định bạn làm nào? Theo truyền thống dùng việc đặt thuộc tính valign="middle" vào thẻ xong Nhưng khơng phải thẻ bạn làm nào? Đề trả lời thắc mắc sau tơi xin mách nước bạn thủ thuật nhỏ CSS Giả sử bạn dùng thẻ HTML dạng khối (Block Element) có chiều cao xác định height: 100px; Bây bạn muốn đặt dòng tiêu đề có nội dung Tin vào (theo chiều cao) thẻ HTML Bạn dùng thuộc tính padding để đẩy dòng chữ vào giữa, khơng phải giải pháp đắn Trong trường hợp thuộc tính line-heigh giả pháp tốt nhất, Chúng ta dùng thuộc tính line-height cho thẻ HTML Ví dụ div.textcenter { margin: 0; padding: 0; height: 100px; line-height: 100px; border: 1px solid #CCCCCC; } http://www.viet-ebook.co.cc CuuDuongThanCong.com Các viết lấy từ cssyeah.com https://fb.com/tailieudientucntt Các học CSS Hiển thị ảnh PNG IE Hiện định dạng ảnh PNG hỗ trợ số trình duyệt Firefox, Opera, IE7 Còn số trình duyệt cũ từ IE6 trở xuống không hỗ trợ định dạng ảnh Trong viết dùng số thủ thuật để định dạng ảnh PNG hiển thị tốt IE Trong khuôn khổ viết không sâu vào phân tích nguyên lý cách thức để làm cho định dạng PNG hiển thị tốt IE Mà dừng lại cách làm để đạt điều Trong tài liệu HTML bạn ảnh png chèn vào thơng thường Để ảnh png hiển thị tốt bạn dùng IE để duyệt bạn cần phải chèn file script vào tài liệu HTML bạn Giả sử file script bạn để thư mục cấp với tài liệu HTML Tiếp bạn copy ảnh blank.gif vào thư mục với file script http://www.viet-ebook.co.cc CuuDuongThanCong.com Các viết lấy từ cssyeah.com https://fb.com/tailieudientucntt Các học CSS Style cho thẻ hr thẻ tự đóng, điều có nghĩa khơng cần thẻ đóng thẻ HTML khác Thẻ tạo đường kẻ ngang trình duyệt khoảng cách đường kẻ nội dung phụ thuộc vào trình duyệt khác Tuy nhiên bạn hồn tồn thay đổi cách hiển thị thẻ theo ý số trình duyệt Đối với số trình duyệt (IE6, IE7, Firefox, Opera, Mozilla ) cách định dạng bạn hồn tồn tương thích Trong cách định dạng thẻ cần phải ý chút cách mà cách trình duyệt xử lí đối tượng thẻ Với Internet Explore (IE) sử dụng thuộc tính color để hiển thị màu đường kẻ thuộc tính background khơng có tác dụng Tuy nhiên Mozilla(Netscape) Opera lại dùng thuộc tính background để hiển thị màu đường kẻ Chúng ta sử dụng thuộc tính border để hiển thị định dạng, khơng phải cách mà muốn Chúng ta có đoạn mã CSS định dạng thẻ sau: hr { color: red; background: red; border: 0; height: 1px; } Thêm khoảng cách đường kẻ phần nội dung Để thêm khoảng cách đường kẻ nội dung dùng thuộc tính margin để quy định khoảng cách hr { color: red; background: red; border: 0; height: 1px; margin: 10px 20px; } http://www.viet-ebook.co.cc CuuDuongThanCong.com Các viết lấy từ cssyeah.com https://fb.com/tailieudientucntt Các học CSS Kỹ thuật slicing door ứng dụng Đối với desiger thường xuyên làm việc với CSS kỹ thuật Sliding Doors khơng có mẻ Nhưng bạn làm quen với CSS tơi nghĩ kỹ thuật mà bạn nên tìm hiểu Kỹ thuật Sliding Doors(kỹ thuật cửa kéo), kỹ thuật ứng dụng nhiều việc tạo button, hay menu ngang kiểu tab,…Trong viết tìm hiểu ý tưởng chủ đạo kỹ thuật tạo ví dụ nhỏ có sử dụng kỹ thuật Tơi lần nhìn thấy cửa kéo kiểu nhật Một bên cửa cố định bên cửa linh động kéo kéo vào tùy thích Bản chất kỹ thuật Sliding Doors giống Chúng ta chia đối tượng phần(phần bên trái phần bên phải) Phần bên trái phần cố định, phần bên phải phần động(Việc phân chia tùy theo ý thích bạn, bạn phân chia phần bên phải cố định phần bên trái phần động) Điều có nghĩa phần bên trái có kích thước vừa phải, phần bên phải cần có kích thước ln lớn nội dung mà bạn dự định đưa vào(để đảm bảo đối tượng giống bị đứt gãy) Để bạn có hình dung rõ tơi xin đưa hình vẽ mơ tả ý tưởng kỹ thuật sau: Như hình vẽ bạn thấy, phần bên trái cố định phần bên phải có dãn vào tùy theo nội dung bên đối tượng cần tạo Do với cách làm cần tạo phần bên phải cần phải đủ dài để tránh trường hợp bị thiếu ảnh nội dung dài Các bạn thấy khơng nghe ghê gớm chất kỹ thuật có thơi, bạn đừng coi thường, quan trọng ứng dụng rộng rãi việc tạo button, tạo menu kiểu tab,…Để minh họa cho điều tơi vừa trình bày bày sau tơi xin đưa ví dụ có sử dụng kỹ thuật Trong ví dụ tạo số button theo phong cách web 2.0, có độ tùy biến nội dung cao(chúng ta thay đổi nội dung cách tùy ý) Sau chi tiết bước làm cụ thể Tạo nút Photoshop http://www.viet-ebook.co.cc CuuDuongThanCong.com Các viết lấy từ cssyeah.com https://fb.com/tailieudientucntt Các học CSS Việc cần làm cần tạo hình dáng nút thân yêu ta, ví dụ tạo nút Sign Up Now! sau: Cắt nút thành hai phần Như trình bày trên, để thực kỹ thuật cần phải cắt đối tượng làm phần Để cắt hình xác khuyên bạn nên sử dụng công cụ Slice(Slice Tools) Adobe Photoshop Button slice sau: Chúng ta cần ý phần bên phải cần phải đủ dài để đảm bảo không bị thiếu Thực viết mã HTML CSS Chúng ta có định dạng mã HTML sau: …Nội dung… Giải thích: Sở dĩ cần phải sử dụng phần thử HTML việc đối tượng chia làm phần, phần tử làm nhiệm vụ giữ phần đối tượng Chúng ta dùng thẻ bao để đảm bảo toàn nút link di chuột lên nút Đồng thời thẻ chứa phần động bên phải Thẻ làm nhiệm vụ giữ phần cố định bên trái, đồng thời có nhiệm vụ che phần dư ảnh bên phải Để thỏa mãn với yêu cầu đặt có mã định dạng CSS sau: /* Sign up button style */ a.sign-up { font-family: Arial, Helvetica, sans-serif; font-size: 25px; font-weight: bold; color: #FFF; text-decoration: none; margin: 0; padding: 28px 0; display: block; background: url(images/signup-right-bg.gif) no-repeat right center; width: 270px; } a.sign-up:hover, a.sign-up:active { http://www.viet-ebook.co.cc CuuDuongThanCong.com Các viết lấy từ cssyeah.com https://fb.com/tailieudientucntt Các học CSS color: #FF0; } a.sign-up span { margin: 0; padding: 28px 28px 90px; background: url(images/signup-left-bg.gif) no-repeat left center; } http://www.viet-ebook.co.cc CuuDuongThanCong.com Các viết lấy từ cssyeah.com https://fb.com/tailieudientucntt Các học CSS Cách viết giản lược CSS Nếu bạn người thực muốn tìm hiểu CSS, bạn khơng thể khơng tìm hiểu cách viết giản lược(shorthand) CSS Cách viết thực mang lại lợi ích tiện lợi bạn sử dụng CSS Trước vào phân tích tiện lợi mà mang lại, tơi xin lấy ví dụ đơn giản sau Giả sử muốn định dạng cho thẻ có đường viền bao quanh cần phải viết border-width: 1px; border-style: solid; border-color: #CC0000; Thay phải viết cần viết border: 1px solid #CC0000; Qua ví dụ đơn giản ta thấy cách viết mang lại cho số lợi ích sau Thứ hai Thứ nhất: giúp giảm thiểu đáng kể thời gian phải viết mã CSS Thứ hai: bạn tưởng tượng file CSS bạn có tới vài ngìn dòng dung lượng lên tới vài trăm Kb, cách viết giúp bạn giảm thiểu đáng kể dung lượng file CSS giúp bạn dễ dàng theo dõi hơn, số lượng dòng trang giảm xuống Sau tơi xin vào chi tiết số thuộc tính CSs mà dùng cách viết giản lược Thuộc tính Color Có nhiều cách để định nghĩa màu CSS, định nghĩa theo hệ số Hexa(trong hệ màu RGB), viết tên màu (ví dụ: white, red…) Nhưng cách định nghĩa theo hệ số Hexa sử dụng thông dụng Để định nghĩa theo hệ Hexa đặt dấu (#) trước sau đến thơng số màu (ví dụ: #003366) Dãy thông số màu chia làm phần tương ứng với ba màu Red, Green, Blue (00: Red | 33: Green | 66: Blue) Trong cách định nghĩa hệ số màu ta có cách viết giản lược sau: #000000 viết #000 #003366 viết #036 Thuộc tính margin padding margin-top: 10px; margin-right: 15px; http://www.viet-ebook.co.cc CuuDuongThanCong.com Các viết lấy từ cssyeah.com https://fb.com/tailieudientucntt Các học CSS margin-bottom: 20px; margin-left: 25px; Được thay margin: 10px 15px 20px 25px; /* top | right | bottom | left */ Tương tự với thuộc tính padding padding-top: 10px; pading-right: 15px; padding-bottom: 20px; padding-left: 25px; padding: 10px 15px 20px 25px; /* top | right | bottom | left */ Cả hai thuộc tính margin padding có hai ý sau: trường hợp có hai thơng số margin: 10px 20px; /* top bottom | right left */ padding: 10px 20px; /* top bottom | right left */ Thì thông số thứ tương đương với top bottom thơng số thứ hai tương đương với right left Trong trường hợp margin padding có thơng số: margin: 10px 20px 15px; /* top | right left | bottom */ padding: 10px 20px 15px; /* top | right left | bottom */ Thì thơng số thứ tương đương với top, thông số thứ hai tương đương với right left, thông số thứ tương đương với bottom Thuộc tính border border-with: 1px; border-style: solid; border-color: #CC0000; Sẽ viết thành border: 1px solid #CC0000; /* width | style | color */ Thuộc tính background background-color: #CC0000; background-image: (image url); background-repeat: no-repeat; /* repeat-x, repeat-y */ background-position: top left; Tương đương với http://www.viet-ebook.co.cc CuuDuongThanCong.com Các viết lấy từ cssyeah.com https://fb.com/tailieudientucntt Các học CSS background: #CC0000 url(image url) no-repeat top left; Thuộc tính font font-size: 1em; line-height: 1.5em; font-variant:small-caps; font-weight: bold; font-style: italic; font-famyli: Arial, Verdana, Sans-serif; Dạng viết giản lược font: 1em/1.5em bold italic small-caps Arial,Verdana,Sans-serif; List type list-style: none; Có nghĩa list-style-type: none; Bạn sử dụng thuộc tính list-style-position list-type-image để định dạng cho danh sách khơng có thứ tự unordered lists, sử dụng hình ảnh cho dòng sử dụng list-type-style hình vng trường hợp khơng hiển thị ảnh Và hai cách viết list-style:square inside url(image.gif); giản lược cho list-style-type: square; list-style-position: inside; list-style-image: url(image.gif); Outline Thuộc tính dùng có trình duyệt hỗ trợ thuộc tính này, có số trình duyệt hỗ trợ thuộc tính Safari, OmniWeb Opera Cách viết giản lược thuộc tính sau: outline-color: #000; outline-style: solid; outline-with: 2px; Cách viết giản lược outline: #000 solid 2px; http://www.viet-ebook.co.cc CuuDuongThanCong.com Các viết lấy từ cssyeah.com https://fb.com/tailieudientucntt ... CuuDuongThanCong.com Các viết lấy từ cssyeah.com https://fb.com/tailieudientucntt Các học CSS Cơ CSS Trong mở đầu tìm hiểu số khái niệm đặc tính CSS, mà cần ý suốt trình làm việc với CSS I CSS CSS (Cascading... CuuDuongThanCong.com Các viết lấy từ cssyeah.com https://fb.com/tailieudientucntt Các học CSS Cú pháp CSS Sau hiểu nắm bắt số đặc tính CSS tiếp tục tìm hiểu cú pháp cách khai báo thẻ CSS Cú pháp CSS chia... CuuDuongThanCong.com Các viết lấy từ cssyeah.com https://fb.com/tailieudientucntt Các học CSS Làm chèn CSS vào trang Web Bạn có file CSS bạn, công việc làm để chèn đoạn CSS bạn vào trang, Và