Bài giảng Định dạng bằng CSS - Đào Việt Cường

Định dạng bằng CSSĐào Việt CườngKhoa CNTT-ĐHSP Hà NộiCSSCSS=Cascading Style Sheet: Mẫu quy định cách thức thể hiện các thẻ HTMLStyle được đưa vào HTML 4.0 để giải quyết một số vấn đề.Giúp tiết kiệm được rất nhiều thời gian và công sức cho việc thiết kế web.Có thể định nghĩa nhiều style vào một thẻ HTML (Cascading)Các loại styleCó 4 loại style:Inline Style (Style được qui định trong 1 thẻ HTML cụ thể)Internal Style (Style được qui định trong phần của 1 trang HTML )External Style (style được qui định trong file .CSS ngoài)Browser Default (thiết lập mặc định của trình duyệt)Thứ tự ưu tiên: Mức ưu tiên giảm dần từ trên xuốngCách chèn CSSĐặt trong Với Internal style:Cách chèn CSS (tt)Với External style:Định nghĩa style trong file riêng (thường có đuôi .CSS)Nhúng file CSS đã định nghĩa vào trang web:Với Inline style:Khai báo và sử dụng styleChú ý khi viết styleStyle phân biệt chữ hoa, chữ thườngĐể ghi chú trong style sử dụng:/*Đoạn ghi chú*/Khai báo styleselector { Property1: Value1; Property2: Value2;}Style áp dụng cho thẻ cụ thểTrường hợp 1 thẻ: Đặt selector là tên_thẻp {	color: red;}Khai báo đồng thời nhiều thẻ: Viết danh sách tên thẻ phân cách bởi dấu phảyh1,h2,h3,h4,h5,h6{font-family:arial;}Tạo lớpGắn với thẻ cụ thể: Đặt selector là tên_thẻ.tên_lớpp.loai1{color:red;}p.loai2{color:blue;}Không gắn với thẻ cụ thể: bỏ phần tên_thẻ đi, giữ lại dấu chấm:.loai3{color:green;}Sử dụng lớpĐặt thuộc tính class của thẻ=“tên_lớp”:Ví dụ:Đoạn này màu đỏStyle không có hiệu lựcTiêu đề màu xanhĐịnh danhTương tự như class. Thay dấu chấm (.) thành dấu thăng (#).Cho thẻ cụ thể: tên_thẻ#định_danh{}Tổng quát: #định_danh{}Ví dụ:p#doan1{color:red;}#loai2{color:blue;}Sử dụng định danhMỗi định danh là duy nhất trên trangĐặt thuộc tính id của thẻ = định_danhVí dụ:Đoạn này màu đỏTiêu đề xanhMột số trường hợp cụ thểCSS BasicCSS BackgroundCSS TextCSS FontCSS BorderCSS MarginCSS PaddingCSS ListCSS AdvancedCSS DimensionCSS ClassificationCSS PositioningCSS Pseudo-classCSS Pseudo-elementCSS Media TypesCSS cho nềnCSS cho nền (tt)CSS và cho bảnCSS và cho bản (tt)CSS và fontCSS và font (tt)CSS và font (tt)CSS và font (tt)CSS và đường viền