Bài giảng Ngôn ngữ đánh dấu mở rộng - Chương 4: Cascade Style Sheets

ơn in hoa chuẩn để thay thế những chữ in thường 	 TEN { font-weight: small- caps} NOIDUNG {font-weight: normal} Thuộc tính kiểu chữ- Font Thuộc tính kiểu chữ rút gọn: Font shorthand Font: Dạng kiểu chữ| Biến thể kiểu chữ| Độ đậm của chữ| Kích cỡ chữ| Tên nhóm kiểu chữ. Font : | | | | - Những thuộc tính không được đề cập sẽ sử dụng giá trị mặc định * Cascade Style Sheets * VD: FONT * Cascade Style Sheets * BODY{display:block;} TITLE{display:inline; font-size:30px; font-family:"Times New Roman",arial; font-weight:bold;} TACGIA{display:list-item; list-style:circle; font-size:20px;font-family:Constantia,arial;font-weight:bold;font-style:italic;} NOIDUNG{display:block;font-size:1em;font-family:"Times New Roman",Constantia,arial;font-weight:normal;} TEN{display:inline;font-size:16px;font-family:Constantia,arial;font-style:italic;font-variant:small-caps;} THO{display:list-item;list-style:none;font-size:16;font-family:"Times New Roman",Constantia,arial;font-weight:normal;} Nội dung Giới thiệu CSS. Cách gán CSS vào tài liệu XML. Cách chọn nội dung định dạng Kế thừa. Các ưu tiên. Các đơn vị trong CSS. Các thuộc tính display. Thuộc tính font. Thuộc tính color. Thuộc tính background. Thuộc tính text. Thuộc tính box. * Cascade Style Sheets * Thuộc tính màu- Color Màu: color 	Vidu: * Cascade Style Sheets * Sử dụng: Số hex RGB(thập phân) RGB(tỷ lệ phần trăm) Tên TITLE {color: Red} TACGIA{color:#0000FF} TEN {color:rgb(0%,100%,0%)} THO {color:rgb(118,0,118)} Nội dung Giới thiệu CSS. Cách gán CSS vào tài liệu XML. Cách chọn nội dung định dạng Kế thừa. Các ưu tiên. Các đơn vị trong CSS. Các thuộc tính display. Thuộc tính font. Thuộc tính color. Thuộc tính background. Thuộc tính text. Thuộc tính box. * Cascade Style Sheets * Thuộc tính nền - Background * Cascade Style Sheets * Thuộc tính nền - Background 	 Màu nền	:	background-color Ảnh nền	:	background-image Vị trí ảnh nền	:	background-position Lặp lại ảnh nền	:	background-repeat Khóa ảnh nền 	: 	background-attachment	 * Cascade Style Sheets * Thuộc tính nền - Background Màu nền : background-color 	Vidu: 	 * Cascade Style Sheets * Các giá trị giống với color nhưng có thêm giá trị transparent để tạo trọng suốt TITLE {background-color: BLACK} TEN {background-color: transparent} Thuộc tính nền - Background Ảnh nền : background-image 	Vidu: 	 * Cascade Style Sheets * Có hai giá trị: none (mặt định) URL(địa chỉ đường dẫn) NOIDUNG{ background-image: url(11.png)} THO {background-image:url(9.png) } Thuộc tính nền - Background Vị trí ảnh nền : background-position 	 	 * Cascade Style Sheets * Có các giá trị: top left, center left,bottom left..., và các giá trị bất kỳ (xpos ypos) Thuộc tính nền - Background Lặp lại ảnh nền : background-repeat 	Vidu: 	 * Cascade Style Sheets * Các giá trị: Repeat-x : Lặp lại theo phương ngang. Repeat-y: Lặp lại theo phương dọc. Repeat: Lặp lại theo cả hai phương (mặt định) No-repeat: không lặp lại ảnh NOIDUNG{background-repeat: repeat;} THO {background-repeat: none;} Thuộc tính nền - Background Khóa ảnh nền: background-attachment 	 	 * Cascade Style Sheets * Các giá trị: Scroll: Ảnh nền sẽ cuộn cùng nội dung (mặt định) Fixed: Cố định ảnh nền với nội dung Thuộc tính nền - Background Thuộc tính nền rút gọn: Background shorthand Background: màu nền| ảnh nền| Lặp lại ảnh nền| Khóa ảnh nền| Vị trí ảnh nền Background: 	 | 	 | 	 	 | 	 | 	 	 - Những thuộc tính không được đề cập sẽ giữ giá trị mặt định. 	 * Cascade Style Sheets * VD: Background * Cascade Style Sheets * Nội dung Giới thiệu CSS. Cách gán CSS vào tài liệu XML. Cách chọn nội dung định dạng Kế thừa. Các ưu tiên. Các đơn vị trong CSS. Các thuộc tính display. Thuộc tính font. Thuộc tính color. Thuộc tính background. Thuộc tính text. Thuộc tính box. * Cascade Style Sheets * Các thuộc tính văn bản(text) word-spacing letter-spacing text-decoration vertical-align text-transform text-align text-indent line-height * Cascade Style Sheets * Các thuộc tính văn bản(text) Thuộc tính word-spacing : định khoảng cách giữa các từ trong văn bản. Vd: DOAN{word-spacing: 30px} => mỗi từ trong DOAN cách nhau 30px. Với giá trị dương sẽ tăng khoảng cách giữa các từ. DOAN{word-spacing: -10px} => mỗi từ trong DOAN cách nhau -10px. Giá trị âm loại bỏ khoảng cách giữa các từ, làm cho chúng chồng lên nhau. * Cascade Style Sheets * Các thuộc tính văn bản(text) Thuộc tính letter-spacing : định khoảng cách giữa các kí tự trong văn bản. Vd: DOAN{letter-spacing: 30px} => mỗi từ trong DOAN cách nhau 30px. Với giá trị dương sẽ tăng khoảng cách giữa các kí tự. DOAN{letter-spacing: -10px} => mỗi từ trong DOAN cách nhau -10px. Giá trị âm loại bỏ khoảng cách giữa các kí tự, làm cho chúng chồng lên nhau. * Cascade Style Sheets * Các thuộc tính văn bản(text) Thuộc tính text-decoration : thêm các hiệu ứng đặc biệt cho văn bản. Có một trong các giá trị sau: none : bình thường. underline : gạch chân. overline : gạch đầu. line-through : gạch giữa. blink : nhấp nháy. Vd: ... * Cascade Style Sheets * Các thuộc tính văn bản(text) Thuộc tính vertical-align : baseline : sub : super top text-top middle bottom text-bottom * Cascade Style Sheets * Các thuộc tính văn bản(text) Thuộc tính text-transform : quy định chế độ in hoa hay thường của văn bản. Có một trong bốn giá trị : Capitalize : in hoa chữ cái đầu tiên. Uppercase : in thường. Lowercase : in hoa. None : bình thường (mặc định). Vd: * Cascade Style Sheets * Các thuộc tính văn bản(text) Thuộc tính text-align : dùng để canh chỉnh các thành phần của văn bản. left : canh trái. right : canh phải. center : canh giữa. justify : canh đều. Vd: * Cascade Style Sheets * Các thuộc tính văn bản(text) Thuộc tính text-indent : thụt lề văn bản, sử dụng cho một đoạn văn hay một dòng. Vd : DOAN{text-indent: 30px} => dòng đầu tiên của DOAN sẽ thụt vào 30px so với các dòng DOAN{text-indent: -10px} => dòng đầu tiên của DOAN sẽ thụt vào -10px tức là lồi ra 10px so với các dòng khác trong DOAN. * Cascade Style Sheets * Các thuộc tính văn bản(text) Thuộc tính line-height : định chiều cao giữa các dòng, nó có thể nhận một số, một độ dài hoặc tỉ lệ phần trăm kích thước font làm giá trị. Vd : DOAN { line-height: 200% } DOAN { line-height: 0.5in} * Cascade Style Sheets * Nội dung Giới thiệu CSS. Cách gán CSS vào tài liệu XML. Cách chọn nội dung định dạng Kế thừa. Các ưu tiên. Các đơn vị trong CSS. Các thuộc tính display. Thuộc tính font. Thuộc tính color. Thuộc tính background. Thuộc tính text. Thuộc tính box. * Cascade Style Sheets * Thuộc tính đóng hộp(box) Định dạng khối không gian bao quanh một thành phần. Nó bao gồm: padding (vùng đệm), border (viền) margin (canh lề) các tùy chọn. * Cascade Style Sheets * Thuộc tính đóng hộp(box) Thuộc tính margin : canh lề cho văn bản. Có các thuộc tính con : margin-top; margin-bottom; margin-left; margin-right; Vd : DOAN{ margin-top : 80px; margin-bottom : 40px; margin-left : 50px; margin-right : 30px;} viết gọn : DOAN{margin : 80px 30px 40px 50px} * Cascade Style Sheets * Thuộc tính đóng hộp(box) Thuộc tính border : đường viền xung quanh văn bản. Có 3 thuộc tính con : border-width (độ rộng đường viền, nhận giá trị : thin, medium, thick hoặc ). border-top-width border-right-width border-bottom-width border-left-width * Cascade Style Sheets * Thuộc tính đóng hộp(box) border-color (màu đường viền) nhận giá trị : border-style (kiểu đường viền) nhận các giá trị : none (không viền, mặc định), hiden, dotted, dashed, solid, double, groove, ridge, inset và outset). * Cascade Style Sheets * Thuộc tính đóng hộp(box) Vd : DOAN{ border-style: solid; border-width: 1px; 	border-color: red } DOAN{ border-style: solid; border-top-width: 1px; 	border-right-width: 1px; border-bottom-width: 1px; 	border-left-width: 1px } có thể viết : DOAN{border-style: solid; border-width: 1px} Cách dùng ngắn : DOAN { border-bottom: 2px solid blue } * Cascade Style Sheets * Thuộc tính padding Quy định khoảng cách giữa phần văn bản và phần viền của văn bản. Các thuộc tính con : padding-bottom padding-top padding-right padding-left Vd : DOAN { padding-bottom: 1em; padding-top: 1em; padding-right: 1em; padding-left: 1em } DOAN { padding: 1em 1em 1em 1em } DOAN { padding: 1em} DOAN { padding-bottom: 1ex } * Cascade Style Sheets * Thuộc tính kích thước Dùng để định kích thước cho các hộp văn bản. Nhận giá trị : con số, tỉ lệ phần trăm của các yếu tố cha, hoặc giá trị defaut. Có 2 thuộc tính: Width. Height. Vd : DOAN{ padding: 1em; width: 3in; height: 3in } Hoặc : DOAN{ padding: 1em; width: 3in; height: auto } * Cascade Style Sheets * Thuộc tính position Định vị vị trí xuất hiện của văn bản . Nhận 2 giá trị: Absolute : Định vị tuyệt đối, không để lại bất cứ khoảng trống nào, dùng kết hợp với các thuộc tính top, left, right, bottom để xác định tọa độ. Vd : BAI{ position:absolute; top:50px; left:70px } Relative : định vị tương đối, là sự định vị được tính từ vị trí gốc trong tài liệu, để lại khoảng không trong tài liệu. * Cascade Style Sheets * Thuộc tính float Dùng để cố định một thành phần về bên trái hay bên phải không gian bao quanh nó. Thuộc tính float có 3 giá trị: Left: 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. Vd : BAI { display:block; } <- thẻ ngoài cùng IMAGE { background: url(untitled.jpeg) no-repeat center center; width: 134px; height: 196px; float: left; } <- định vị hình chèn vào. DOAN { display: block } <- thẻ nội dung * Cascade Style Sheets * Thuộc tính clear Đi cùng với float để quyết định các phần văn bản có được tràn lên lấp chỗ trống không, thuộc tính clear nhận 4 giá trị : none : mặc định, tràn cả hai bên. left: không được tràn bên trái. right: không được tràn bên phải both: không được tràn cả hai bên. Vd: BAI { display:block; } <- thẻ ngoài cùng IMAGE { background: url(untitled.jpeg) no-repeat center center; width: 134px; height: 196px; float: left; } <- định vị hình chèn vào. DOAN { display : block; clear : left } <- thẻ nội dung * Cascade Style Sheets * Tóm tắt chương * Cascade Style Sheets * HẾT CHƯƠNG * Cascade Style Sheets *