DANH SÁCH NHÓM PHAN THỊ HỒNG NGÂN ĐÀO BÁ LINH VÕ VĂN KIỆT CSS CSS gì? CSS (Cascading Style Sheet) mẫu định dạng phân tầng CSS chuẩn để định dạng tài liệu HTML, XHTML XML Lợi ích CSS  Giúp nhà thiết kế web có thêm lựa chọn màu sắc, khoảng cách, vị trí, biên, lề…  Thuộc tính CSS bổ sung vào HTML không phá vỡ cấu trúc HTML sẵn có  CSS làm tăng quán định dạng hiệu tải trang web ÁP DỤNG CSS VÀO TRANG HTML • Inline style: cách dùng style câu lệnh, bổ sung thêm thuộc tính style vào sau phần tử HTML • Internal style sheet: định nghĩa riêng khối, phân biệt thẻ đặt phần head tài liệu • External style sheet: Tạo tập tin có phần mở rộng *.css bên HTML, sử dụng thẻ phần để liên kết tập tin HTML MỨC ĐỘ ƯU TIÊN  Mức độ ưu tiên áp dụng CSS sau: External CSS < Internal CSS < Inline CSS  Có thể hiểu mã CSS "gần" với tag ưu tiên áp dụng CÚ PHÁP CSS • Gồm thành phần Bộ chọn (Selector) Thuộc tính (Property) Giá trị (Value) • Cú pháp Dấu chấm phẩy dùng để phân cách thuộc tính CÚ PHÁP CSS • • • • • Selector thường tên thẻ HTML Mỗi thuộc tính cần có giá trị Một thuộc tính giá trị phân cách dấu ":" Hai cặp thuộc tính – giá trị phân cách dấu ";" Toàn cặp thuộc tính – giá trị thẻ HTML đặt cặp dấu ngoặc nhọn Selector Các selector HTML: HTML selector Class selector Identity selector Descendant selector Child selector Attribute selector Pseudo class selector HTML Class • Bộ chọn đơn giản nhất, dùng thẻ HTML a { /*Bỏ gạch chân cho hyperlink*/ text-decoration: none; } Comment CSS THÔNG TIN ĐỊNH DẠNG VĂN BẢN THUỘC TÍNH MÔ TẢ Color thiết lập màu cho văn Direction thiết lập hướng cho văn Letter-spacing tăng giảm khoảng trống ký tự văn bạn Text-align chỉnh lề văn thành phần Text-decoration thêm trang trí cho văn Text-indent khoảng thụt vào dòng văn thành phần Text-shadow thêm bóng cho văn Text-transform chuyển đổi ký tự thành phần White-space thiết lập cách xử lý khoảng trắng, tab, cách xuống dòng Word-spacing tăng giảm khoảng trống từ Thông tin định dạng THUỘC TÍNH MIÊU TẢ Background dùng để thiết lập tất thuộc tính khai báo Background-attachment thiết lập ảnh cố định hay cuộn theo phần văn lại Background-color thiết lập màu phần tử Background-image thiết lập ảnh trang Background-position thiết lập điểm xuất phát ảnh Background-repeat thiết lập cách ảnh lặp lại Mô hình hộp (box model) Các thông tin định dạng lề + vùng đệm  Thông tin định dạng lề: • •  Margin Padding Vùng đệm: Khi khai báo rút gọn giá trị margin, padding giá trị tính theo chiều kim đồng hồ tính từ top Canh với CSS • Canh theo chiều ngang – Văn dùng text-align – Thành phần văn dùng margin Margin-left: auto margin-right:auto Thành phần canh cạnh khối chứa Canh với CSS • Canh theo chiều dọc – sử dụng phương pháp tọa độ absolute – để dùng kỹ thuật phải biết xác kích thước thành phần cần canh chỉnh w position: absolute top: 50% /* top viị trí giữữa cuủa chiềều cao*/ margin: -h/2 0 h Height: h; Canh với CSS • Canh theo ngang, dọc w position: absolute top: 50% /* top viị trí giữữa cuủa chiềều cao*/ left: 50% /*left viị trí giữữa cuủa bềề ngang*/ h margin: -h/2 0 –w/2 Sử dụng Float CSS • • Float thuộc tính tảng để xây dựng trang web CSS • Thuộc tính float có giá trị: Dùng thuộc tính để canh chỉnh gióng hàng image xây dựng layout phân chia thành nhiều cột – Lef: cố định phần tử bên trái – Right: cố định phần tử bên phải – None: bình thường Sử dụng Float CSS • Thành phần sau thành phần có thuộc tính float tràn lên, để tránh điều dùng thuộc tính clear • Thuộc tính clear gồm giá trị – Lef: thành phần di chuyển xuống (biên dưới) thành phần có giá trị float:lef – Right: thành phần di chuyển xuống (biên dưới) thành phần có giá trị float: right – Both: thành phần di chuyển xuống tất hộp float Tạo menu ngang Float • • Việc tạo menu đơn giản: sử dụng float, kết hợp với thẻ ul Minh họa tạo menu sau: Tạo menu ngang Float • Bước 1: tạo danh sách ul với li hyperlink sau • Bước 2: thiết lập CSS cho ul Tạo menu ngang Float • Bước 3: thiết lập trạng thái hover cho hyperlink thẻ li Tạo layout CSS Các thành phần website – Main navigation (menu): tùy bố cục đặt dạng nằm ngang hay dọc Ví dụ: Trong thiết kế minh họa chọn nằm ngang kích thước: height:50px width:760px – Header: nơi đặt thành phần quang trọng như: banner, logo, tên công ty…trong thiết kế chọn nằm ngang width: 760px height:150px – Content: nơi chứa nội dung Kích thước width: 480px, height tùy ý theo nội dung – Right column: tùy bố cục hay cột Phần chứa thông tin mang tính bật, hiển thị dạng tin ngắn Width: 280, height tùy ý – Footer: nơi chứa thông tin copyright, điều khoản sử dụng hay menu nhỏ gọn Kích thước Width: 760px, Height 66px Tạo layout CSS • Bố cục hình thành nên khung website menu navigation header right column content footer C Ả M Ơ N C ÁC BẠN ĐÃ THEO DÕI [...]... hiển thị văn bản trong một font chữ HOA NHỎ hoặc một font chữ thường thiết lập trọng lượng của font THÔNG TIN ĐỊNH DẠNG VĂN BẢN THUỘC TÍNH MÔ TẢ Color thiết lập màu cho văn bản Direction thiết lập hướng cho văn bản Letter-spacing tăng hoặc giảm khoảng trống giữa các ký tự trong văn bạn Text-align căn chỉnh lề của một văn bản trong một thành phần Text-decoration thêm trang trí cho văn bản Text-indent... gọn giá trị margin, padding thì các giá trị tính theo chiều kim đồng hồ tính từ top Canh giữa với CSS • Canh theo chiều ngang – Văn bản dùng text-align – Thành phần không phải văn bản dùng margin Margin-left: auto và margin-right:auto Thành phần sẽ được canh giữa các cạnh trong khối chứa Canh giữa với CSS • Canh giữa theo chiều dọc – sử dụng phương pháp tọa độ absolute – để dùng kỹ thuật này phải biết... class: lớp ảo định nghĩa style của phần tử khi phần tử đang focus :lang pseudo class: cho phép định nghĩa style ngôn ngữ khác nhau trong tài liệu Đơn vị đo lường CSS 19 Các nhóm thuộc tính trong CSS • • • • • • Thuộc tính định dạng font chữ, văn bản (font, text) Thuộc tính định dạng nền (background) Mô hình hộp (box model) Các thuộc tính định margin, padding, border Thuộc tính định dạng cách hiển thị (display)... giữữa cuủa chiềều cao*/ margin: -h/2 0 0 0 h Height: h; Canh giữa với CSS • Canh giữa theo ngang, dọc w position: absolute top: 50% /* top là viị trí giữữa cuủa chiềều cao*/ left: 50% /*left là viị trí giữữa cuủa bềề ngang*/ h margin: -h/2 0 0 –w/2 Sử dụng Float trong CSS • • Float là thuộc tính nền tảng để xây dựng trang web thuần CSS • Thuộc tính của float có 3 giá trị: Dùng thuộc tính này để canh... tự trong văn bạn Text-align căn chỉnh lề của một văn bản trong một thành phần Text-decoration thêm trang trí cho văn bản Text-indent khoảng thụt vào ở dòng đầu tiên của văn bản trong một thành phần Text-shadow thêm bóng cho văn bản Text-transform chuyển đổi ký tự trong một thành phần White-space thiết lập cách xử lý khoảng trắng, tab, cách xuống dòng Word-spacing tăng hoặc giảm khoảng trống giữa các... thẻ ul Minh họa tạo menu như sau: Tạo menu ngang bằng Float • Bước 1: tạo một danh sách ul với các li là hyperlink như sau • Bước 2: thiết lập CSS cho ul Tạo menu ngang bằng Float • Bước 3: thiết lập trạng thái hover cho hyperlink và thẻ li Tạo layout bằng CSS Các thành phần chính website – Main navigation (menu): tùy bố cục có thể đặt dạng nằm ngang hay dọc Ví dụ: Trong thiết kế minh họa chọn nằm... thị dạng tin ngắn Width: 280, height tùy ý – Footer: nơi chứa thông tin copyright, các điều khoản sử dụng hay menu nhỏ gọn Kích thước Width: 760px, Height 66px Tạo layout bằng CSS • Bố cục như trên đã hình thành nên khung cơ bản của website menu navigation header right column content footer C Ả M Ơ N C ÁC BẠN ĐÃ THEO DÕI ... trống giữa các từ Thông tin định dạng nền THUỘC TÍNH MIÊU TẢ Background dùng để thiết lập tất cả các thuộc tính nền trong một khai báo Background-attachment thiết lập ảnh cố định hay cuộn theo phần văn bản còn lại Background-color thiết lập màu nền của một phần tử Background-image thiết lập một ảnh như nền của trang Background-position thiết lập điểm xuất phát của một ảnh nền Background-repeat thiết... thuộc tính này để canh chỉnh gióng hàng image và xây dựng layout phân chia thành nhiều cột – Lef: cố định phần tử về bên trái – Right: cố định phần tử về bên phải – None: bình thường Sử dụng Float trong CSS • Thành phần đi sau thành phần có thuộc tính float sẽ tràn lên, để tránh điều này có thể dùng thuộc tính clear • Thuộc tính clear gồm các giá trị – Lef: thành phần sẽ di chuyển xuống dưới (biên dưới)