P
DIV kết quả: SPAN P DIV ID selector: Mediart Academy – Trung tâm tin học ĐHKHTN-TPHCM Gv: Vũ Thị Thanh Thúy Giao trinh HTML - CSS giống class ID sử dụng lần Đặt tên selector bắt đầu dấu # theo cú pháp sau: #selector{ Property:value; } ví dụ: #php { color: red; } …………… ABC kết quả: ABC Sự khác biệt Class ID Nói ngắn gọn ID Class sử dụng nhiều lần Ví dụ trang web thành phần Logo, Menu, Footer … xuất lần trang không lặp lặp lại trang Còn sử dụng Class áp dụng cho thành phần xuất nhiều lần trang Decendant selector: Selector đặt theo thứ tự cha Selector1 selector2 { Property: value; } Ví dụ: p a { color: blue }This is long text
Những tag a tagbị ảnh hưởng luật Pseudo Class - Pseudo Class tạo thay đổi tới thành phần XHTML kiện xảy - Pseudo Class sử dụng thông dụng với đường liên kết người dùng di chuột qua nhấp vào - Với trình duyệt (trừ Internet Explorer 6) bạn dễ dàng tạo hiệu ứng Rollover với thành phần trang không thẻ Pseudo Class cho thẻ liên kết Mediart Academy – Trung tâm tin học ĐHKHTN-TPHCM Gv: Vũ Thị Thanh Thúy Giao trinh HTML - CSS - Pseudo Class sử dụng nhiều với thẻ liên kết (thẻ ) để tạo hiệu ứng thay đổi trạng thái chữ người dùng di chuột qua - Có tất trạng thái đường liên kết o Link: đơn báo cho người đọc biết đường liên kết o Visited: Người đọc nhấp chuột vào link o Hover: Người đọc di chuột qua đường liên kết o Active: Đường liên kết người đọc nhấp chuột - Tương đương với Pseudo Class.(cho toàn trang) a:link {color:orange;} a:visited {color:gray;} a:hover {color:red; text-decoration:none;} a:active {color:navy;} - Diễn giải: o Bình thường có màu cam gạch chân giá trị mặc định o Đường liên kết người dùng nhấp vào lần, có màu xám o Người đọc di chuột lên (chưa nhấp) có màu đỏ gạch chân o Người đọc nhấp giữ chuột có màu xanh đậm (ít xảy ra) - Trong trạng thái bạn không thiết phải khai báo trạng thái Thường người ta khai báo trạng thái chủ yếu :link :hover Còn :visited :active không thực cần thiết Trình duyệt bỏ qua trạng thái không khai báo - Cho vùng web, thông qua class: class_name a: link { properties: value; } class_name a: visited{ properties: value; } class_name a: active { properties: value; } class_name a: hover { properties: value; } class_name a: focus { properties: value; } - a.class_name: link { properties: value; } a.class_name: visited{ properties: value; } a.class_name: active { properties: value; } a.class_name: hover { properties: value; } a.class_name: focus { properties: value; } - định dạng thẻ a có ảnh hưởng đối tượng sử dụng css class_name áp dụng tương tự cho trường hợp sử dụng id (#) Gom nhóm CSS Mediart Academy – Trung tâm tin học ĐHKHTN-TPHCM Gv: Vũ Thị Thanh Thúy Giao trinh HTML - CSS - Nếu có nhiều selector có chung thuộc tính, ta gom nhóm selector lại nhóm h1 { font-family: sans-serif } h2 { font-family: sans-serif } h3 { font-family: sans-serif } Tương đương với: h1, h2, h3 { font-family: sans-serif } Định dạng khối – BOX Model - Box Model khái niệm quan trọng CSS Bởi định thành phần trang web xuất chúng tương tác với Dưới hình minh hoạ CSS Margins - Margin dùng để xác định khoảng cách đối tượng bao quanh nó, ta sử dụng thuộc tính margin để định khoảng cách cho left,right,top,bottom Đơn vị tính (length (px,pt) / - percent (%) / - auto) - Có thể định giá trị cho top,left,bottom,right dòng (thuận chiều kim đồng hồ top) Ví dụ1: margin: 10px 5px 0px 3px; tương đương: margin-top: 10px; margin-right: 5px; margin-bottom: 0px; margin-left: 3px; Mediart Academy – Trung tâm tin học ĐHKHTN-TPHCM Gv: Vũ Thị Thanh Thúy Giao trinh HTML - CSS Ví dụ 2: margin: 10px Cả giá trị top/ right / bottom / left Ví dụ 3: margin: auto; Giá trị top/ bottom=0; right / left : auto Nếu sử dụng cho div trang html định cho div canh trang CSS Padding - Tương tự sử dụng margin ý nghĩa định khoảng từ border đến vùng nội dung bên - Padding thường sử dụng để tạo khoảng trống đường biên chữ ví dụ Đoạn văn có đường viền mà padding Đoạn văn có đường viền giá trị padding 5px CSS Border: - Khi khai báo đường viền, bạn nên nhớ phải khai báo giá trị border-style Nếu giá trị không khai báo, tất giá trị màu sắc, độ dày không hiển thị Đơn giản giá trị border-style không khai báo, trình duyệt cho Ví dụ: duongvien{ border:solid 1px #003366 } Nhóm CSS Text Một số định dạng cho Text: - Color: tên màu mã màu : Màu cho text - Letter Spacing: n : Khoảng cách ký tự ( px /pt /em/ normal) - Text Align: left / right/ center/ justify : canh lề khối văn - Text Decoration: kiểu chữ o ( none / underline (gạch chân) / overline (gạch đầu) / line through (gạch xuyên chữ) ) - Text-indent: định dạng thụt đầu dòng cho dòng đoạn văn - Text Transform: định dạng chữ hoa chữ thường o (none / capitalize chữ đầu từ in hoa/ upperrcase : tất chữ in hoa/ lowercase : tất chữ thường dù có nhập vào dạng in hoa) - Word Spacing : khỏang cách từ câu Nhóm CSS Font Properties Mediart Academy – Trung tâm tin học ĐHKHTN-TPHCM Gv: Vũ Thị Thanh Thúy Giao trinh HTML - CSS - Font- family: định dạng font (thường font lúc, font máy người dùng không có, hiển thi nội dung font thứ hai, font thứ hai , dùng font cuối để hiển thị nội dung.) - Font- size: định kích thước cho text - Font- style: định dạng in đậm,in nghiêng - Font- weight: định dạng độ đậm text Nhóm CSS Background: - Background-color: value; /* giá trị màu */ - Background-image: url(path_to_image); / ảnh cho trang ví dụ: background-image:url(images/anhnen.gif); - Background-repeat: điều khiển trình lặp lại ảnh o no-repeat ( không lặp) o repeat (lặp theo tất cách hướng) o repeat-x (chỉ lặp theo trục x- ngang) o repeat-y (chỉ lặp theo trục y- dọc) - Background-attachment: khóa ảnh o scroll : cuộn trượt ảnh trượt với nội dung trang o fixed: ảnh không bị trượt … - Background-position : vị trí bắt đầu ảnh CSS Order & Unorder list - list-style định dạng style cho list(