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 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 Trang http://www.viet-ebook.co.cc CuuDuongThanCong.com https://fb.com/tailieudientucntt Các học CSS Các viết lấy từ cssyeah.com 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; } 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 { Trang http://www.viet-ebook.co.cc CuuDuongThanCong.com https://fb.com/tailieudientucntt Các học CSS Các viết lấy từ cssyeah.com 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; } Đặ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ị; Trang http://www.viet-ebook.co.cc CuuDuongThanCong.com https://fb.com/tailieudientucntt Các học CSS Các viết lấy từ cssyeah.com p { white-space: nowrap; } Thuộc tính white-space làm cho tồn đoạn văn dòng Các thuộc tính font chữ định nghĩa font chữ cho văn Các thuộc tính font chữ cho phép bạn thay đổi họ font (font family), độ đậm (boldness), kích thước (size) kiểu font (style) 01Đặt font cho đoạn văn Để đặt loại font chữ cho đoạn văn sử dụng thuộc tính fontfamily: p { font-family: Arial, Tahoma, Verdana, sans-serif; } Thông thường bạn cần phải khai báo họ font cuối (trong ví dụ sans-serif tới họ font) để trường hợp máy người duyệt Web khơng có font đặt lấy font mặc định họ font 02Đặt đoạn văn sử dụng font nhãn caption p.caption { font: caption; } 03Đặt kích thước font cho đoạn văn Khi muốn đoạn văn tiêu đề có kích thước chữ khác nhau, sử dụng thuộc tính font-size: h1 { font-size: 20px; } h3 { font-size: 12px; } 04Định lại kích thước font thuộc tính font-size-ajust: p { font-size-ajust: 0.60; } Trang http://www.viet-ebook.co.cc CuuDuongThanCong.com https://fb.com/tailieudientucntt Các học CSS Các viết lấy từ cssyeah.com 05Đặt kiểu font cho đoạn văn Chữ đậm, chữ nghiêng, đặt với thuộc tính font-style: p { font-style: italic; /* normal } | italic | oblique */ 06 Muốn hiển thị font dạng small-caps dạng normal sử dụng thuộc tính font-variant Thuộc tính có hai giá trị normal small-caps p { font-variant: normal; /* normal } | small-caps */ 07Đặt độ đậm nhạt font Khi muốn thay đổi độ đậm nhạt văn dùng thuộc tính font-weight: Chúng ta đặt giá loại giá trị cho thuộc tính normal(bình thường), bold(đậm), 300(đặt dạng số) h3 { font-weight: bold; } 08Khai báo thuộc tính font dạng shorthand p { font: italic small-caps 900 12px arial; } Đường viền thuộc tính đường viền Các thuộc tính đường viền (border) cho phép đặt giá trị đặc biệt cho đườn viền kiểu đường viền, kích thước, màu sắc Thuộc tính áp dụng cho thẻ HTML ,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 { 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ị hồn tồn Đặt dòng text vào ( theo chiều cao) Trang 26 http://www.viet-ebook.co.cc CuuDuongThanCong.com https://fb.com/tailieudientucntt Các học CSS Các viết lấy từ cssyeah.com 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; } Trang 27 http://www.viet-ebook.co.cc CuuDuongThanCong.com https://fb.com/tailieudientucntt Các học CSS Các viết lấy từ cssyeah.com 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 khn 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 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; Trang 28 http://www.viet-ebook.co.cc CuuDuongThanCong.com https://fb.com/tailieudientucntt Các học CSS Các viết lấy từ cssyeah.com } 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; } Trang 29 http://www.viet-ebook.co.cc CuuDuongThanCong.com https://fb.com/tailieudientucntt Các học CSS Các viết lấy từ cssyeah.com 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 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 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 Việc cần làm cần tạo hình dáng nút thân u ta, ví dụ tơi tạo nút Sign Up Now! sau: Trang 30 http://www.viet-ebook.co.cc CuuDuongThanCong.com https://fb.com/tailieudientucntt Các học CSS Các viết lấy từ cssyeah.com Cắt nút thành hai phần Như tơi 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 tơi khun 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 { color: #FF0; } a.sign-up span { margin: 0; padding: 28px 28px 90px; background: url(images/signup-left-bg.gif) no-repeat left center; } Trang 31 http://www.viet-ebook.co.cc CuuDuongThanCong.com https://fb.com/tailieudientucntt Các học CSS Các viết lấy từ cssyeah.com 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 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; margin-bottom: 20px; margin-left: 25px; Được thay Trang 32 http://www.viet-ebook.co.cc CuuDuongThanCong.com https://fb.com/tailieudientucntt Các học CSS Các viết lấy từ cssyeah.com 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 background: #CC0000 url(image url) no-repeat top left; Thuộc tính font font-size: 1em; line-height: 1.5em; Trang 33 http://www.viet-ebook.co.cc CuuDuongThanCong.com https://fb.com/tailieudientucntt Các học CSS Các viết lấy từ cssyeah.com 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 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; Trang 34 http://www.viet-ebook.co.cc CuuDuongThanCong.com https://fb.com/tailieudientucntt ... https://fb.com/tailieudientucntt Các học CSS Các viết lấy từ cssyeah.com 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 Style Sheets) hiểu cách đơn giản... https://fb.com/tailieudientucntt Các học CSS Các viết lấy từ cssyeah.com 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... https://fb.com/tailieudientucntt Các học CSS Các viết lấy từ cssyeah.com CSS khai báo file riêng Toàn mã CSS chứa file riêng có phần mở rộng css ý tưởng dùng file CSS áp dụng cho nhiều trang khác Bạn