CSS (Cascading Style Sheets)

Bài 3 CSS (Cascading Style Sheets) • Giới thiệu CSS • Tạo CSS • Quản lý CSS • Định nghĩa các CSS • Áp dụng CSS GIỚI THIỆU CSS • CSS (Cascading Style Sheets) là sự kếthợpmột nhóm định dạng tự chọn. Định nghĩamột CSS là đặtmộttên CSS cho một nhóm các định dạng. Sử dụng tên CSS là sử dụng nhóm định dạng mà nó đạidiện • CSS có thểđính kèm trong cùng trang HTML hay lưu riêng mộttậptin kiểu.CSS, phụcvụ cho nhiều trang. • CSS giúp việcchỉnh sửagiaodiện trang web trở nên linh động, nhanh chóng & chính xác. • Để thuậntiện cho nhiềungười Dreamweaver CS4 tạomột số hộpthoại CSS giúp bạn nhanh chóng tạo đượcmột CSS như ý. TẠO CSS • Vào thựcFormat CSS Styles New… • Hoặcmở bảng CSS: vào thực đơn Window  CSS Styles, bấm công cụ New CSS Rule • Hoặctạomớimộttập tin CSS: File Blank Page CSS • Selecter Tyle: Chọnkiểu Seclector • Selector Name: Đặttêncho selector QUẢN LÝ CSS • Add Property: Thêm thuộctínhvàgiátrị • Attach : gắntậptin CSS vàotậptin HTML • New : TạomớiCSS • Edit : Hiệuchỉnh lạiCSS • Delete : xóa CSS ĐỊNH NGHĨA CSS - TYPE CSS Style cho text (tyle) • Font-family: xác định kiểuchữ vd: font-family:"Times New Roman",Georgia,Serif; • Font-size: xác định kích cỡ cho chữ. • Font-style: xác định chữ thường (Normal) hoặc in nghiêng (Italic). • Line-height: định chiềucaocủa dòng chữ. • Text-decoration: thêm hoặcxóađường gạch ngang cho chữ vd: a { text-decoration:none } • Font-weight: chỉđịnh độ in đậmcủachữ. • Text-transform: xác định chữ in hoa (uppercase) hay in thường (lowercase). • Color: xác định màu sắcchochữ. BACKGROUND CSS Style cho nền (Background) • Background Color: chỉđịnh màu nền. • Background Image: Nềncủa đối tượng là hình. • Background Repeat: xác định kiểulặp hình nền. (No Repeat), (Repeat), (Repeat-x/ Repeat-y). • Background Attachment: chỉđịnh hình nền ở vị trí cốđịnh (fixed), hoặccuộn theo nội dung (scroll). • Background Position: xác định vị trí hình nềnso với đốitượng hoặccửasổ tài liệu. BLOCK CSS Style cho khối (Block) • Word Spacing: Khoảng cách giữacác từ • Letter Spacing: Khoảng cách giữacác ký tự • Vertical Align: canh hàng đốitượng & đượcápdụng cho thẻ <img>. • Text Align: canh hàng cho vănbản. • Text Indent: khoảng cách thụt đầu dòng. • Whites-pace: kiểm soát khoảng trắng. • Display: ẩnhiện đốitượng & chỉđịnh cách hiểnthị của đốitượng, như inline, block, BOX CSS Style Box kiểmsoátbố cục các đốitượng • Width: Xác định chiềurộng củaDiv • Height: xác định chiềucaocủaDiv • Float: xác định vị trí tương đốicủacác đốitượng như vănbản, AP Divs, bảng biểu, so với đốitượng đượcápdụng thuộc tính float. • Clear: dùng để đẩycácđốitượng AP. • Padding: xác định khoảng cách từnội dung & đường biên củaDiv • Margin: xác định khoảng cách giữacác Div BORDER CSS Style cho đường viền • Type: chỉđịnh dạng đường viền. • Width: xác định độ dài của biên. • Color: màu củabiên . [...]...LIST CSS Style cho danh sách • List style type: chỉ định loại gạch đầu dòng (Bullet, Number) • List style image: chỉ đường dẫn đến hình ảnh ta chọn làm chấm đầu dòng • List style position: xác định vị trí gạch đầu dòng POSITIONING CSS Style cho vị trí • Position: Xác định vị trí của đối tượng: • Absolute: Vị trí chính... EXTENSIONS CSS Style mở rộng (Extensions) • Page break before: ngắt trang trong in ấn • Cursor: Thay đổi trỏ chuột • Filter: Áp dụng hiệu ứng cho đối tượng, như : blur, inversion DIV - CSS Cấu trúc một Div -CSS: #tênDIV{ Định-dạng-1 : giá trị 1; Định-dạng-2 : giá trị 2; • Ví dụ: #main{ width: 780px; margin: 0px auto; background-color: #CCCC00; float: left; • áp dụng: CLASS - CSS Cấu... background-color: #CCCC00; float: left; • áp dụng: CLASS - CSS Cấu trúc một Class -CSS: tênCSS{ Định-dạng-1 : giá trị 1; Định-dạng-2 : giá trị 2; } • Ví dụ: nen{ width: 780px; margin: 0px auto; background-color: #CCCC00; float: left; • áp dụng: DECENDANT - CSS Định dạng theo thứ tự cha con •Ví dụ: #menu_nav ul li a{ Color: #ff0000; text-decoration: none; {