Tìm hiểu Các bài học về CSS

Các học CSS CÁC BÀI HọC Về CSS Mục lục Contents  Cơ bản CSS  . 3  I CSS gì   3  II Một số đặc tính CSS   3  Cú pháp CSS   5  Làm chèn CSS vào trang Web   6  CSS khai báo file riêng.   6  Chèn CSS tài liệu HTML   6  Chèn trực tiếp vào thẻ HTML(inline style)   7  Nhiều Stylesheet   7  Các vấn đề văn cách định dạng văn bản   8  Đặt màu cho đoạn văn bản  . 8  Đặt màu cho đoạn văn bản.  . 8  Căn chỉnh khoảng cách ký tự.   8  Căn chỉnh khoảng cách dòng.   8  Dóng hàng   9  Trang hoàng thêm cho đoạn văn bản.  . 9  Chỉnh vị trí đoạn văn (indent).   9  Điều kiển ký tự đoạn văn bản.   9  Đặt hướng cho đoạn văn bản.   10  Tăng khoảng cách từ.   10  Làm tác dụng đường bao thẻ HTML.   10  Các thuộc tính font chữ định nghĩa font chữ cho văn bản   11  Đường viền thuộc tính đường viền   13  Các thuộc tính margin   15  Thuộc tính đường bao (Outline)   16  CSS padding   18  Làm thẻ div có cuộn (scrollbar) giống iFrame   19  Style kiểu Bubble đơn giản   21  www.123comta.com CÁC BÀI HọC Về CSS Định dạng HTML  . 21  Định dạng CSS   21  Căn bảng vào hình.   23  Menu dạng tab - Phần I.  . 24  Kỹ thuật làm chữ hoa đầu dòng (Drop cap)  . 26  Cách thứ nhất   26  Cách thứ hai   27  Trang trí cho danh sách có thứ tự  . 29  Kỹ thuật tải ảnh trước CSS   30  Fix min-height cho IE   32  Đặt min-width cho IE6  . 33  CSS Transparency toàn trình duyệt   34  Border điều bạn chưa biết   35  Kỹ thuật đưa footer xuống cuối trang  . 36  Đặt dòng text vào ( theo chiều cao)   38  Hiển thị ảnh PNG IE   39  Style cho thẻ hr   40  Thêm khoảng cách đường kẻ phần nội dung.   40  Kỹ thuật slicing door ứng dụng   41  Tạo nút Photoshop  . 41  Cắt nút thành hai phần.   42  Thực viết mã HTML CSS.   42  Cách viết giản lược CSS   44  Thuộc tính Color   44  Thuộc tính margin padding.   44  Thuộc tính border.   45  Thuộc tính background.  . 45  Thuộc tính font   46  List type  46  Outline   46    www.123comta.com CÁC BÀI HọC Về CSS Cơ bản 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 cách mà thêm kiểu hiển thị (font chữ, kích thước, màu sắc ) cho tài liệu Web II Một số đặc tính CSS CSS quy định cách hiển thị thẻ HTML cách quy định thuộc tính thẻ (font chữ, màu sắc) Để cho thuận tiện bạn đặt toàn thuộc tính thẻ vào file riêng có phần mở rộng ".css" CSS phá vỡ giới hạn thiết kế Web, cần file CSS cho phép bạn quản lí định dạng layout nhiều trang khác Các nhà phát triển Web định nghĩa sẵn thuộc tính số thẻ HTML sau dùng lại nhiều trang khác Có thể khai báo CSS nhiều cách khác Bạn đặt đoạn CSS bạn phía thẻ , ghi file riêng với phần mở rộng ".css", bạn đặt chúng thẻ HTML riêng biệt Tuy nhiên tùy cách đặt khác mà độ ưu tiên khác Mức độ ưu tiên CSS theo thứ tự sau Style đặt thẻ HTML riêng biệt Style đặt phần Style đặt file mở rộng css Style mặc định trình duyệt Mức độ ưu tiên giảm dần từ xuống CSS có tính kế thừa: giả sử bạn có thẻ khai báo đầu file css với thuộc tính sau: #vidu { width: 200px; height: 300px; } www.123comta.com CÁC BÀI HọC Về CSS Ở chỗ file css bạn lại khai báo lần thẻ với thuộc tính #vidu { width: 400px; background-color: #CC0000; } Sau đoạn khai báo thẻ có thuộc tính: #vidu { width: 400px; /* Đè lên khai báo cũ */ height: 300px; background-color: #CC0000; } www.123comta.com CÁC BÀI HọC Về 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 làm phần phần thẻ chọn (selector), phần thuộc tính (property), phần nhãn (value) selector {property: value} Nếu nhãn bạn có nhiều từ bạn nên đặt nhãn bạn vào dấu nháy kép p {font-family: "sans serif"} Trong trường hợp thẻ chọn bạn nhiều thuộc tính thuộc tính ngăn cách dấu (;) p {text-align:center;color:red} Khi thẻ chọn có nhiều thuộc tính nên để thuộc tính dòng riêng biệt p { text-align: center; color: black; font-family: arial } www.123comta.com CÁC BÀI HọC Về 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à xem chúng hoạt động Trong phần tìm hiểu chi tiết cách chèn đoạn style trang HTML hay liên kết tới file CSS viết sẵn Khi trình duyệt đọc đến CSS, toàn Website định dạng theo thuộc tính khai báo phần CSS Có ba cách cho phép chèn định dạng CSS vào Website 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 thay đổi cách hiển thị toàn site mà cần thay đổi file CSS Trong cách file CSS chèn vào văn HTML thông qua thẻ Ta có cú pháp sau: Trình duyệt đọc toàn định dạng quy định file mystyle.css định dạng cho văn HTML File CSS soạn thảo số trình duyệt khác Trong file không chứa mã HTML, ghi lại bắt buộc phải ghi lại với phần mở rộng css Giả sử chúng file mystyle.css chứa đoạn mã sau: hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} Không sử dụng khoảng trắng nhãn, giả sử bạn dùng margin-left: 20 px; thay cho margin-left: 20px; IE6 hiểu trình duyệt Firefox, Opera không hiểu Chèn CSS tài liệu HTML www.123comta.com CÁC BÀI HọC Về CSS Chèn thẳng CSS tài liệu áp dụng trường hợp định dạng CSS giành riêng cho tài liệu HTML Khi bạn chèn trực tiếp đoạn mã bạn phải đặt thẻ đặt phần hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} Có số trình duyệt cũ không hiểu thẻ , bỏ qua thẻ Tuy nhiên nội dung thẻ hiển thị trang HTML Vì mà phải dùng định dạng thích HTML để chứa phần nội dung thẻ Chèn trực tiếp vào thẻ HTML(inline style) Inline style sử dụng nhiều trường hợp thẻ HTML cần có style riêng cho Inline style áp dụng cho thẻ HTML đó, cách có độ ưu tiên lớn so với hai cách Dưới ví dụ mà dùng Inline style 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 www.123comta.com CÁC BÀI HọC Về 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 hoàn toà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; www.123comta.com CÁC BÀI HọC Về 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; www.123comta.com CÁC BÀI HọC Về 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 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; www.123comta.com CÁC BÀI HọC Về 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, 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 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 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 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; } www.123comta.com CÁC BÀI HọC Về 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) www.123comta.com CÁC BÀI HọC Về CSS Border điều bạn chưa biết Giả sử 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 thoá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 www.123comta.com CÁC BÀI HọC Về 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 phạm vi trang 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ừ hoàn toà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 { www.123comta.com CÁC BÀI HọC Về CSS } min-height: 100%; /* Fix cho firefox */ height: auto !important; height: 100%; Khi phần footer bị đẩy 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 www.123comta.com CÁC BÀI HọC Về 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 thẻ bạn làm nào? Đề trả lời thắc mắc sau 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, 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; } www.123comta.com CÁC BÀI HọC Về 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 www.123comta.com CÁC BÀI HọC Về 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 hoàn toà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 hoàn toà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 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, 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; } www.123comta.com CÁC BÀI HọC Về 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 mẻ Nhưng bạn làm quen với CSS 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õ 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 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 www.123comta.com CÁC BÀI HọC Về 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 { www.123comta.com CÁC BÀI HọC Về CSS } color: #FF0; a.sign-up span { margin: 0; padding: 28px 28px 90px; background: url(images/signup-left-bg.gif) no-repeat left center; } www.123comta.com CÁC BÀI HọC Về 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 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, 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; www.123comta.com CÁC BÀI HọC Về 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 www.123comta.com CÁC BÀI HọC Về 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 thứ tự unordered lists, sử dụng hình ảnh cho dòng sử dụng list-type-style hình vuông 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;   www.123comta.com [...]... lần lượt các giá trị cho thuộc tính outline-style: p { outline-style: dotted; } STT outline-style 1 none 2 hidden 3 dotted 4 dashed 5 solid 6 double 7 groove 8 ridge 9 inset www.123comta.com CÁC BÀI HọC Về CSS 10 outset Để cho gọn chúng ta cũng có thể viết các giá trị của thuộc tính Outline dưới dạng shorthand như sau: div.outline { outline: 1px solid #000; } www.123comta.com CÁC BÀI HọC Về CSS CSS padding... border: 1px solid #CCCCCC; www.123comta.com CÁC BÀI HọC Về CSS } margin: 1em 0; Khi bạn đưa nội dung dài hơn chiều cao và chiều rộng của thẻ thì trình duyệt sẽ tự động sinh ra thanh cuôn ngang và thanh cuộn dọc giống như iFrame Kỹ thuật này hiện có khá nhiều Website sử dụng để có cách thể hiện nội dung riêng biệt của mình www.123comta.com CÁC BÀI HọC Về CSS Style một kiểu Bubble đơn giản Thông thường... Chính vì lý do đó mà người ta vẫn thường dùng cách này cho các bài báo nổi bật cần sự chú ý cao Tuy nhiên trong khuôn khổ của lĩnh vực nghiên cứu chúng ta sẽ đi tìm hiểu một số kỹ thuật làm chữ hoa đầu dòng (Drop cap) 1 Cách thứ nhất Đầu tiên chúng ta sẽ đi tìm hiểu cách làm Drop cap chính thống Trong cách này chúng ta sẽ sử dụng đến kỹ thuật selectors trong CSS cụ thể là chúng ta sẽ dùng đến thuộc tính... Proin leo tellus eu Dictumst Integer ut adipiscing www.123comta.com CÁC BÀI HọC Về CSS porttitor dolor Morbi ut id lorem auctor Massa tellus Morbi enim tellus pede vel suscipit hac sapien Cras Cursus velit hendrerit lobortis elit elit sed ut In www.123comta.com CÁC BÀI HọC Về CSS Trang trí cho danh sách có thứ tự Mặc định hầu hết các trình duyệt (Browser) đều hiển thị chữ số của danh sách có thứ tự...CÁC BÀI HọC Về CSS } Đặt hướng cho đoạn văn bản Hướng của đoạn văn bản có thể từ trái qua phải hay từ phải qua trái chúng ta có thể điều khiển bởi 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 giữa các từ Khoảng cách giữa các từ có thể được tăng bởi thuộc tính word-spacing: khoảng cách; word-spacing:... h3 { font-weight: bold; } 08Khai báo các thuộc tính font ở dạng shorthand p { font: italic small-caps 900 12px arial; } www.123comta.com CÁC BÀI HọC Về CSS Đường viền và các thuộc tính của đường viền Các thuộc tính của đường viền (border) sẽ cho phép đặt các giá trị đặc biệt cho đườn viền như kiểu đường viền, kích thước, màu sắc Thuộc tính này sẽ được áp dụng cho các thẻ HTML như , , ,... đây là mã CSS cho hai thẻ và ol { font: italic 1em Georgia, Times, serif; color: #999999; } ol p { font: normal 8em Arial, Helvetica, sans-serif; color: #000000; } Bài viết được tổng hợp từ Web Designer Wall www.123comta.com CÁC BÀI HọC Về CSS Kỹ thuật tải ảnh trước bằng CSS Trong file CSS của bạn có sử dụng đến một số ảnh background, nhưng những ảnh đó sẽ không được trình duyệt tải về trong... www.123comta.com CÁC BÀI HọC Về CSS CSS Transparency trên toàn bộ các trình duyệt Trong bài viết "Hiển thị ảnh PNG trên IE" chúng tôi đã đề cập đến vấn đề làm sao để transparent toàn bộ ảnh PNG trong Website trên IE Trong bài viết này chúng ta sẽ đề cập đề cập đến vấn đề làm cho transparent background của một thẻ nào đó mà chúng ta muốn Mặt khác trong kỹ thuật này chúng ta đơn thuần dùng kỹ thuật trong CSS Chúng... border-top: none; padding: 10px; } www.123comta.com CÁC BÀI HọC Về CSS Kỹ thuật làm chữ hoa đầu dòng (Drop cap) Drop cap là một trong những typography hay được dùng trong các tạp chí trên giấy cũng như các tạp chí điện tử Nó thường được dùng ở đầu mỗi bài báo với font chữ lớn và màu sắc nổi trội Theo quy luật nhìn của mắt nếu một đối tượng nổi bật hơn các đối tượng xung quanh, nhì nó sẽ có tác động mạnh... padding-bottom: padding-left: Các giá trị có thể gán cho các thuộc tính này là : % hoặc length Để viết cho gọn chúng ta cũng có thể viết thuộc tính padding dưới dạng shorthand div.padding { padding: 5px 3px 2px 8px; } www.123comta.com CÁC BÀI HọC Về CSS Làm thẻ div có thanh cuộn (scrollbar) giống iFrame Bài viết dưới đây sẽ giới thiệu với các bạn cách làm cho thẻ có thanh cuộn giống khi ta sử dụng ... www.123comta.com CÁC BÀI HọC Về CSS Cơ bản 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 cách mà thêm... www.123comta.com CÁC BÀI HọC Về CSS 10 outset Để cho gọn viết giá trị thuộc tính Outline dạng shorthand sau: div.outline { outline: 1px solid #000; } www.123comta.com CÁC BÀI HọC Về CSS CSS padding CSS padding... background-color: #CC0000; } www.123comta.com CÁC BÀI HọC Về 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 làm phần phần thẻ chọn (selector),