Tài Liệu CSS,Simple CSS
Giới thiệu CSS www.dohoavn.net | http://dohoavn.vn Tài liệu killer sưu tầm Phần học mang tới cho bạn số kiến thức khác để tạo cho Website có thêm phong cách hay kiểu cách thống mà bạn nhiều thời gian công sức để chỉnh sửa nhiều trang Web bạn Kiến thức tiên Trước tập trung nghiên cứu CSS bạn cần nắm vững kiến thức về: WWW, HTML khái niệm xây dựng Website Thỏa thuận với người đọc Để cho bạn không hiểu lầm số từ ngữ chuyên mơn, chúng tơi giữ ngun cụm từ thuật ngữ tiếng Anh( Ví dụ: HTML, Style Sheet, Head, p, ) cụm từ có giải thích ý nghĩa bạn đọc chúng lần tài liệu CSS gì? • CSS thay cho cụm từ tiếng Anh "Cascading Style Sheet" • Styles định nghĩa cách thành phần HTML hiển thị • Các Styles thơng thường lưu trữ Style Sheets • Các Style được thêm vào từ công bố HTML 4.0 • Có ba cách chèn Style: 1.External Style Sheets 2.Internal Style Sheets 3.Inline Style giải thích loại • External Style Sheets tiết kiệm nhiều thời gian cho cơng việc bạn • External Style Sheets lưu tệp có phần mở rộng CSS • Nhiều định nghĩa Style tệp gọi Cascade(xếp lớp) Style Sheet Mô CSS Với CSS, văn HTML bạn hiển thị với nhiều kiểu dáng khác Mời bạn xem Các mô CSS Style giải vấn đề chung Thẻ HTML khởi đầu thiết kế để định nghĩa nội dung văn Chúng hỗ trợ để mô tả cho trinh duyệt hiểu thể ý nghĩa "Đây Dòng đầu trang", "Đây đoạn", "Đây bảng", cách sử dụng thẻ ,, v.v Việc phác thảo văn hỗ trợ trình duyệt mà khơng có thẻ định dạng Với hai trình duyệt Netscape Internet Explorer tiếp đưa thêm thẻ HTML thuộc tính(giống thẻ thuộc tính giống màu sắc) cho định HTML ban đầu việc tạo Website khó khăn hơn, nơi mà nội dung văn HTML ngày phân chia thể giao diện trang Để giải vấn đề này, W3C tạo STYLES thêm vào HTML 4.0 Cả hai trình duyệt Netscape 4.0 IE 4.0 hỗ trợ CSS Style Sheet tiết kiệm nhiều cơng sức làm việc bạn Các Style HTML 4.0 định nghĩa thành phần HTML hiển thị nào, giống thuộc tính thẻ font color HTML 3.2 Các Style thông thường lưu file bên văn HTML "External style sheets" hay Style Sheet Ngoài cho phép bạn thay đổi dáng vẻ bên trang Web với việc soạn thảo tệp CSS đơn lẻ Nếu bạn thử thay đổi phông chữ màu sắc cho dòng tiêu đề cho văn dài trang Web bạn, bạn hiểu CSS tiết kiệm công sức bạn CSS sợi xuyên suốt thiết kế Web cho phép người phát triển kiểm sốt kiểu cách đặt nhiều trang lần Để tạo thay đổi mang tính tổng thể, đơn giản bạn cần thay đổi Style tất thành phần khác(mà nhận Style này) tự động cập nhật theo Nhiều Style xếp lớp Style Sheet cho phép thông tin xác định theo nhiều cách Các Style xác định bên thành phần HTML đơn, bên thành phần trang HTML, file CSS bên ngồi Thậm chí nhiều Style Sheet bên ngồi tham chiếu tài liệu HTML đơn Thứ tự xếp lớp Style sử dụng có style định cho thành phần HTML? What style will be used when there is more than one style specified for an HTML element? Thơng thường nói phát biểu tất style "xếp chồng" vào Style Sheet "ảo" bẳng luật sau, nơi mà Style vị trí thứ tư có quyền ưu tiên cao nhất: Theo mặc định trình duyệt Style Sheet bên ngồi Style Sheet bên trong.(bên cặp thẻ ) Style nội tuyến.(bên thành phần HTML) Vì thế, Style nội tuyến có quyền ưu tiên cao nhất, điều có nghĩa trùm lên tất style khai báo bên thẻ , Style Sheet bên giá trị mặc định Browser Cú pháp CSS Cú pháp Cú pháp CSS tạo từ ba phần: "bộ chọn - selector", "thuộc tính property" "giá trị - value": trọn{thuộc tính:giá trị} "bộ chọn" thông thường phần tử/thẻ HTML mà bạn muốn định, thuộc tính tính chất mà bạn muốn thay đổi, thuộc tính mang giá trị Thuộc tính giá trị phân cách dấu ":" bao dấu móc nhọn Ví dụ: body{color:black} thì: • body: "Bộ chọn" • color: "thuộc tính" • black: "value" Nếu giá trị có chuỗi từ liên tiếp để tên đó, ta phải đặt chúng dấu nháy kép " ", Ví dụ: p {font-family: "sans serif " } phơng chữ có tên "sans serif" chất có khoảng trống từ "sans" "serif" phải đặt nháy kép Lưu ý: Nếu bạn muốn định nhiều thuộc tính, bạn phải phân cách thuộc tính dấu chấm phẩy Ví dụ cách làm để định nghĩa phân đoạn với dịng chữ có màu đỏ p {text-align:center;color:red} Để tạo định nghĩa style dễ đọc hơn, bạn mơ tả thuộc tính dòng giống sau: p { text-align: center; color: black; font-family: arial } Nhóm phần tử với nhau(Grouping) Bạn nhóm chọn Phân cách chọn dấu chấm phẩy Trong ví dụ nhóm tất thành phần "Header" Mỗi thành phần header có màu xanh cây: h1,h2,h3,h4,h5,h6 { color: green } Bộ chọn Lớp(The class Selector) Với "bộ chọn lớp" bạn định nghĩa style khác cho kiểu thành phần HTML Điều nói nên bạn muốn có hai kiểu phân đoạn văn bản: đoạn phải, đoạn Đây bạn làm với kiểu đó: p.right {text-align: right} p.center {text-align: center} Bạn phải sử dụng "thuộc tính lớp" văn HTML bạn:
Phan doan se can ben phai
Phân đoạn
Lưu ý: Chỉ thuộc tính lớp định thành phần HTML! Ví dụ sai(vì có lớp phần tử "p")This is a paragraph
Bạn bỏ qua tên thẻ trọn để định nghĩa style mà sử dụng tất thành phần HTML mà có mặt lớp Trong ví dụ phía dưới, tất thành phần HTML với class="center" giữa: center {text-align: center} Trong đoạn mã phía thành phần "h1" thành phần "p" có class="center" Điều có nghĩa hai phần tử tuân theo luật chọn ".center": This heading will be center-alignedThis paragraph will also be center-aligned
Bộ chọn Mã(The id Selector) Bộ chọn mã khác với chọn lớp Trong chọn lớp ứng dụng cho vài phần tử trang, trọn mã ln ln áp dụng cho phần tử Một thuộc tính ID(mã số) phải bên văn Luật style phía tương ứng với phần tử "p" mà có giá trị id "para1": p#para1 { text-align: center; color: red } Luật style phía tương ứng với phần tử mà có giá trị id "wer345": *#wer345 {color: green} Luật tương ứng với thành phần h1 này: Some text Luật tương ứng với thành phần p mà có giá trị id "wer345": p#wer345 {color: green} Luật không đáp ứng với thành phần h2: Some text Lời thích CSS Bạn chèn đoạn thích để giải thích mục đích đoạn mã bạn, giúp gợi nhớ lại cho bạn sau nhiều ngày làm việc Một lời thích khơng trình duyệt hiển thị Một lời thích CSS bắt đầu dấu "/*" kết thúc dấu "*/", giống dòng chữ màu đỏ này: /* Đây dịng thích */ p { text-align: center; /* Đây dịng thích khác */ color: black; font-family: arial } CSS làm Làm để chèn Style Sheet Khi trình duyệt đọc style sheet, định dạng văn theo quy định có Style Sheet Có ba cách để chèn Style Sheet: Style Sheet Ngoài Một Style Sheet lý tưởng style ứng dụng cho nhiều trang Với Style Sheet ngồi, bạn thay đổi cách nhìn toàn Website cần với file thay đổi Mỗi trang muốn liên kết với Style Sheet cần phải sử dụng thẻ Thẻ đứng bên đoạn : Trình duyệt đọc định style từ file "mystyle.css", định dạng văn theo file Một Style Sheet Ngồi viết soạn thảo văn Tệp khơng chứa thẻ html Style Sheet bạn nên lưu lại với phần mở rộng "tên_file.css" Một ví dụ tệp Style Sheet biểu diễn phía dưới: hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} Lưu ý: Đừng để khoảng trống giá trị thuộc tính đơn vị! Nếu bạn sử dụng câu lệnh: "margin-left:10 px" thay "margin-left: 10px" làm việc cách hợp lệ trình duyệt Internet Explorer khơng làm việc hai trình duyệt Mozilla Netscape Style Sheet Trong Một Style Sheet Trong cần phải sử dụng văn đơn có style Bạn định nghĩa Style Trong bên phần đầu cách sử dụng thẻ giống này: hr { color: sienna } p { margin-left: 20px } body { background-image: url("images/back40.gif") } Trình duyệt lúc đọc định style, định dạng văn theo định Lưu ý: Một trình duyệt thơng thường bỏ qua thẻ mà khơng hiểu Điều có nghĩa trình duyệt phiên cũ mà khơng hỗ trợ Style, bỏ qua thẻ , nội dung thẻ hiển thị trang Có thể ngăn cản trình duyệt cũ hiển thị nội dung cách ẩn thành phần giải thích HTML Thiết lập đường bao khác cạnh Ví dụ mơ tả làm để thiết lập đường bao khác cạnh phần tử Thiết lập màu bốn đường bao Ví dụ mô tả làm để thiết lập màu bốn đường bao Nó thiết lập từ cạnh thứ đến cạnh thứ bốn Thiết lập độ rộng đường bao đáy Ví dụ mơ tả làm để thiết lập độ rộng đường bao đáy Thiết lập độ rộng đường bao trái Ví dụ mơ tả làm để thiết lập độ rộng đường bao bên trái Thiết lập độ rộng đường bao phải Ví dụ mô tả làm để thiết lập độ rộng đường bao bên phải Tương tự thuộc tính border_left_width Xem cách dùng bảng thuộc tính phía Thiết lập độ rộng đường bao đỉnh Ví dụ mô tả làm để thiết lập độ rộng đường bao đỉnh Tất thuộc tính đường bao đáy khai báo Ví dụ mơ tả thuộc tính nhanh chóng để thiết lập tất thuộc tính cho đường bao đáy khai báo Tất thuộc tính đường bao trái khai báo Ví dụ mơ tả thuộc tính nhanh chóng để thiết lập tất thuộc tính cho đường bao trái khai báo Tất thuộc tính đường bao phải khai báo Ví dụ mơ tả thuộc tính nhanh chóng để thiết lập tất thuộc tính cho đường bao trái khai báo Tất thuộc tính đường bao đỉnh khai báo Ví dụ mơ tả thuộc tính nhanh chóng để thiết lập tất thuộc tính cho đường bao đỉnh khai báo Tất thuộc tính độ rộng đường bao khai báo Ví dụ mơ tả thuộc tính nhanh chóng để thiết lập tất thuộc tính cho độ rộng đường bao khai báo, thiết lập cho từ đến bốn đường bao Tất thuộc tính đường bao khai báo Ví dụ mơ tả thuộc tính nhanh chóng để thiết lập tất thuộc tính cho bốn đường bao đáy khai báo, thiết lập cho từ đến bốn đường bao Các đường bao CSS Thuộc tính Border cho phép bạn định kiểu cách, màu sắc độ rộng đường bao thành phần Trong HTML sử dụng bảng để tạo đường bao xung quanh văn bản, với thuộc tính Border CSS tạo đường bao với hiệu ứng đẹp ứng dụng cho phần tử Thuộc tính Border: NN: Netscape, IE: Internet Explorer, W3C: Web Standard Thuộc tính border Mơ tả Ví dụ Một thuộc tính tốc hành để border-width thiết lập thuộc tính cho tồn NN IE W3C 4.0 4.0 CSS1 border-style 6.0 4.0 CSS1 6.0 4.0 CSS2 6.0 4.0 CSS2 4.0 4.0 CSS1 color 6.0 4.0 CSS1 Một thuộc tính tốc hành để border-left-width 6.0 4.0 CSS1 thiết lập thuộc tính cho border-style đường bao trái border-color đường bao border-color khai báo border-bottom Một thuộc tính tốc hành để border-bottom-width thiết lập thuộc tính cho border-style đường bao đáy border-color khai báo border-bottom-color Thiết lập màu sắc đường border-color bao đáy border-bottom-style Thiết lập kiểu cách border-style đường bao đáy border-bottom-width Thiết lập độ rộng đường thin bao đáy medium thick length border-color Thiết lập màu sắc bốn đường bao, đạt màu từ đến bốn border-left khai báo border-left-color Thiết lập màu sắc đường border-color 6.0 4.0 CSS2 6.0 4.0 CSS2 4.0 4.0 CSS1 6.0 4.0 CSS1 6.0 4.0 CSS2 6.0 4.0 CSS2 4.0 4.0 CSS1 6.0 4.0 CSS1 bao trái border-left-style Thiết lập kiểu cách border-style đường bao trái border-left-width Thiết lập độ rộng đường thin bao trái medium thick length border-right Một thuộc tính tốc hành để border-right-width thiết lập thuộc tính cho border-style đường bao phải border-color khai báo border-right-color Thiết lập màu sắc đường border-color bao phải border-right-style Thiết lập kiểu cách border-style đường bao phải border-right-width Thiết lập độ rộng đường thin bao phải medium thick length border-style Thiết lập kiểu cách none bốn đường bao, đạt hidden kiểu từ đến bốn dotted dashed solid double groove ridge inset outset border-top Một thuộc tính tốc hành để border-top-width thiết lập thuộc tính cho border-style đường bao đỉnh 6.0 4.0 CSS1 border-color 6.0 4.0 CSS2 6.0 4.0 CSS2 4.0 4.0 CSS1 4.0 4.0 CSS1 khai báo border-top-color Thiết lập màu sắc đường border-color bao đỉnh border-top-style Thiết lập kiểu cách border-style đường bao đỉnh border-top-width Thiết lập độ rộng đường thin bao đỉnh medium thick length border-width Một thuộc tính tốc hành để thin thiết lập độ rộng medium bốn đường bao thick khai báo, có từ length đến bốn giá trị Thuộc tính Font CSS Thuộc tính phơng CSS xác định phơng chữ văn Ví dụ Thiết lập phơng chữ văn Ví dụ mô phông chữ thiết lập Thiết lập kích cỡ cho phơng chữ Ví dụ mơ thiết lập kích cỡ phơng chữ Thiết lập kiểu cách phông chữ Ví dụ mơ thiết lập kiểu cách phơng chữ Thiết lập biến thể phông Ví dụ mơ cách thiết lập biến thể phông chữ Thiết lập đường bao phơng chữ Ví dụ mơ thiết lập độ đậm phông chữ Tất thuộc tính khai báo Ví dụ mơ sử dụng thuộc tính tốc hành để thiết lập thuộc tính cho tất phơng chữ khai báo Các phông CSS Thuộc tính Font cho phép bạn thay đổi họ phơng, độ đậm, kích cỡ kiểu cách phơng chữ văn Các Lưu ý - Mẹo hữu ích Các Phơng chữ xác định tên chúng CSS1 Lưu ý trình duyệt khơng hỗ trợ thuộc tính phơng định sử dụng phơng mặc định Thuộc tính Font: NN: Netscape, IE: Internet Explorer, W3C: Chuẩn Web Thuộc tính Mơ tả font font-family Giá trị NN IE W3C Một thuộc tính nhỏ để thiết font-style lập tất thuộc tính cho font-variant phông khai báo font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar 4.0 4.0 CSS1 Một danh sách ưu tiên family-name họ phông cho thành generic-family 4.0 3.0 CSS1 phần font-size Thiết lập kích cỡ cho phơng chữ xx-small x-small small medium large x-large xx-large smaller larger length % font-stretch Những rút gọn mở rộng phông normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded font-style Thiết lập kiểu cách phông normal italic oblique font-variant font-weight 4.0 3.0 CSS1 CSS2 4.0 4.0 CSS1 Hiển thị văn normal phông chữ HOA NHỎ small-caps phông chữ thường 6.0 4.0 CSS1 Thiết lập trọng lượng phông 4.0 4.0 CSS1 normal bold bolder lighter 100 200 300 400 500 600 700 800 900 Thuộc tính List CSS Thuộc tính List cho phép bạn thay đổi điểm_đánh_dấu_mục_danh_sách khác nhau, thiết lập ảnh điểm_đánh_dấu_mục_danh_sách thiết lập nơi để đặt điểm_đánh_dấu_mục_danh_sách Ví dụ Các điểm_đánh_dấu mục khác danh sách khơng có thứ tự Ví dụ mơ tả điểm_đánh_dấu_mục_danh_sách khác CSS Các điểm_đánh_dấu mục khác danh sách có thứ tự Ví dụ mô tả điểm_đánh_dấu_mục_danh_sách khác CSS Thiết lập ảnh điểm_đánh_dấu_mục_danh_sách Ví dụ mơ cách thiết lập ảnh điểm_đánh_dấu_mục_danh_sách Đặt điểm_đánh_dấu_mục_danh_sách Ví dụ mơ nơi để đặt chỗ cho điểm đánh dấu mục danh sách Tất thuộc tính danh sách khai báo Ví dụ mơ tả cách nhanh chóng để thiết lập cho tồn thuộc tính cho danh sách khai báo Thuộc tính Danh sách NN: Netscape, IE: Internet Explorer, W3C: Chuẩn Web Thuộc tính list-style list-style-image list-style-position list-style-type Mô tả Giá trị A shorthand property for setting all list-style-type of the properties for a list in one list-style-position declaration list-style-image Một thuộc tính ngắn gọn để thiết lập cho tồn thuộc tính danh sách khai báo Sets an image as the list-item none marker url Thiết lập ảnh điểm_đánh_dấu_mục_danh_sách Places the list-item marker in the inside list outside Đặt điểm_đánh_dấu_mục_danh_sách danh sách Sets the type of the list-item none marker disc Thiết lập kiểu circle điểm_đánh_dấu_mục_danh_sách square decimal decimal-leading- NN IE W3C 6.0 4.0 CSS1 6.0 4.0 CSS1 6.0 4.0 CSS1 4.0 4.0 CSS1 marker-offset zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha auto length Thuộc tính Text CSS Thuộc tính Text CSS xác định diện mạo văn Ví dụ Thiết lập màu văn Ví dụ mơ tả làm để thiết lập màu văn Thiết lập màu văn Ví dụ mơ tả làm để thiết lập màu phần văn Chỉ định khoảng cách ký tự Ví dụ mơ tả làm để tăng giảm khoảng trống ký tự CSS2 Căn văn Ví dụ mơ tả làm để chỉnh văn Trang trí cho văn Ví dụ mơ tả làm để thêm trang trí cho văn Thụt đầu dịng văn Ví dụ mơ tả làm để thụt đầu dòng đoạn Kiểm sốt chữ văn Ví dụ mơ tả làm để kiểm soát chữ văn Text CSS Thuộc tính Text cho phép bạn kiểm sốt diện mạo văn Nó thay đổi màu văn bản, tăng giảm khoảng cách ký tự văn bản, chỉnh văn bản, trang trí cho văn bản, thụt dòng nhiều hiệu ứng khác Thuộc tính Text NN: Netscape, IE: Internet Explorer, W3C: Web Standard Thuộc tính Mơ tả color Thiết lập màu cho chữ direction Thiết lập hướng cho chữ letter-spacing text-align Giá trị NN color 4.0 IE 3.0 ltr W3C CSS1 CSS2 rtl Tăng giảm khoảng trống normal ký tự length Căn chỉnh văn thành left 6.0 4.0 CSS1 4.0 4.0 CSS1 right phần center justify none 4.0 4.0 CSS1 4.0 4.0 CSS1 4.0 4.0 CSS1 4.0 5.5 CSS1 6.0 6.0 CSS1 underline text-decoration Thêm trang trí cho văn overline line-through blink text-indent Thụt dòng đầu văn length thành phần % none text-shadow color length none text-transform Kiểm soát ký tự thành phần capitalize uppercase lowercase white-space word-spacing Thiết lập khoảng trắng thành phần normal pre nowrap Tăng giảm khoảng trống normal từ length Thuộc tính Padding Thuộc tính Padding CSS xác định khoảng trống thành phần đường bao nội dung Ví dụ: Thiết lập left padding Thuộc tính mơ làm để thiết lập khoảng đệm phía bên trái bảng Thiết lập right padding Thuộc tính mơ làm để thiết lập khoảng đệm phía bên phải ô bảng Thiết lập top padding Thuộc tính mơ làm để thiết lập khoảng đệm với đỉnh ô bảng Thiết lập bottom padding Thuộc tính mơ làm để thiết lập khoảng đệm với đáy ô bảng Tất thuộc tính padding khai báo Ví dụ mơ thuộc tính ngắn để thiết lập tất thuộc tính padding khai báo, nhận từ tới bốn giá trị Padding CSS Thuộc tính Padding xác định khoảng trống phần tử đường bao nội dung Không cho phép giá trị âm Khoảng trống đệm đỉnh, phải, trái thay đổi cách độc lập sử dụng thuộc tính riêng biệt Một thuộc tính khoảng đệm ngắn gọn tạo để kiểm sốt nhiều cạnh lúc Các thuộc tính Padding NN: Netscape, IE: Internet Explorer, W3C: Web Standard Thuộc tính Mơ tả Một thuộc tính ngắn gọn để thiết padding lập tất khoảng đệm với lần khai báo padding-bottom padding-left padding-right padding-top Giá trị padding-top NN IE W3C 4.0 4.0 CSS1 4.0 4.0 CSS1 4.0 4.0 CSS1 4.0 4.0 CSS1 4.0 4.0 CSS1 padding-right padding-bottom padding-left Thiết lập khoảng đệm đáy length phần tử % Thiết lập khoảng đệm phía trái length phần tử % Thiết lập khoảng đệm phía phải length phần tử % Thiết lập khoảng đệm đỉnh length phần tử % Các thuộc tính Background CSS Các thuộc tính Background CSS định nghĩa hiệu ứng thành phần Ví dụ: Thiết lập màu Ví dụ mơ cách làm để thiết lập màu cho thành phần Thiết lập ảnh Ví dụ mô cách làm để thiết lập ảnh Làm để lặp ảnh Ví dụ mơ cách làm để lặp ảnh theo chiều dọc Làm để đặt ảnh Ví dụ mô cách làm để đặt ảnh trang Làm để thiết lập ảnh cố định Ví dụ mơ cách làm để thiết lập ảnh cố định Ảnh khơng cuộn theo phần cịn lại văn Tất thuộc tính khai báo Ví dụ mơ cách làm để sử dụng thuộc tính ngắn gọn để thiết lập tất thuộc tính khai báo Thuộc tính Background CSS Thuộc tính cho phép bạn kiểm sốt màu thành phần, thiết lập ảnh văn bản, lặp lại ảnh theo chiều dọc chiều ngang vị trí ảnh trang Các thuộc tính Background NN: Netscape, IE: Internet Explorer, W3C: Web Standard Thuộc tính Mơ tả Giá trị NN IE W3C background Một thuộc tính ngắn gọn để background-color thiết lập tất thuộc tính background-image khai báo background-repeat backgroundattachment background-position 6.0 4.0 CSS1 backgroundattachment Thiết lập liệu ảnh có scroll đứng cố định chỗ hay fixed cuộn theo phần văn lại trang 6.0 4.0 CSS1 background-color Thiết lập màu phần tử 4.0 4.0 CSS1 color-rgb color-hex color-name transparent background-image Thiết lập ảnh trang 4.0 4.0 CSS1 background-position Thiết lập điểm xuất phát top left ảnh top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos 6.0 4.0 CSS1 background-repeat 4.0 4.0 CSS1 Thiết lập cách ảnh lặp lại url none repeat repeat-x repeat-y no-repeat Thuộc tính Margin CSS Thuộc tính Margin CSS xác định khoảng trống xung quanh phần tử Ví dụ: Thiết lập lề đáy văn Ví dụ mơ làm để thiết lập lề đáy văn Tất thuộc tính lề khai báo thiết lập tính chất nhanh chóng để thiết lập tất thuộc tính lề khai báo Các lề CSS Thuộc tính lề xác định khoảng trống xung quanh phần tử Nó sử dụng giá trị âm gối lên nội dung Các thuộc tính lề đỉnh, phải, đáy trái thay đổi cách độc lập sử dụng thuộc tính riêng rẽ Một thuộc tính lề nhanh dùng để thay đổi tất lề lần Lưu ý trình duyệt: Netscape IE thiết lập mặc định lề cho thẻ body 8px Trình duyệt Opera khơng thiết lập! Để thay thế, Opera áp dụng khoảng đệm 8px, người muốn chỉnh lề cho toàn trang hiển thị cách đắn Opera, khoảng đệm cho body phải thiết lập Các thuộc tính Margin: NN: Netscape, IE: Internet Explorer, W3C: chuẩn Web Thuộc tính Mơ tả Giá trị margin-top margin NN IE W3C 4.0 4.0 CSS1 4.0 4.0 CSS1 4.0 3.0 CSS1 4.0 3.0 CSS1 4.0 3.0 CSS1 Một thuộc tính nhanh để thiết lập thuộc margin-right tính cho lề khai báo margin-bottom margin-left auto margin-bottom Thiết lập lề đáy phần tử length % auto margin-left Thiết lập lề trái phần tử length % auto margin-right Thiết lập lề phải phần tử length % auto margin-top Thiết lập lề đỉnh phần tử length % ... border-left-color Thiết lập màu sắc đường border-color 6.0 4.0 CSS2 6.0 4.0 CSS2 4.0 4.0 CSS1 6.0 4.0 CSS1 6.0 4.0 CSS2 6.0 4.0 CSS2 4.0 4.0 CSS1 6.0 4.0 CSS1 bao trái border-left-style Thiết lập kiểu cách... tự length Căn chỉnh văn thành left 6.0 4.0 CSS1 4.0 4.0 CSS1 right phần center justify none 4.0 4.0 CSS1 4.0 4.0 CSS1 4.0 4.0 CSS1 4.0 5.5 CSS1 6.0 6.0 CSS1 underline text-decoration Thêm trang... border-top-width thiết lập thuộc tính cho border-style đường bao đỉnh 6.0 4.0 CSS1 border-color 6.0 4.0 CSS2 6.0 4.0 CSS2 4.0 4.0 CSS1 4.0 4.0 CSS1 khai báo border-top-color Thiết lập màu sắc đường border-color