Bài giảng Thiết kế Web tĩnh - Phần 1: Ngôn ngữ HTML - Chương 7: Cascading Style Sheet (CSS)

 CHƯƠNG VII 
CASCADING STYLE SHEET-CSS 
 I. GIỚI THIỆU 
 Bảng kiểu (style sheet) nhằm thoả mản nhu cầu 
 – Thẩm mỹ 
 – Giữ tính thống nhất cho trang HTML. 
 – Định dang một số tính chất thông thường cùng một lúc cho 
 tất cả các đối tượng trên trang 
 Tiện ích của CSS : 
 – Tiết kiệm thời gian 
 – Khi thay đổi định dạng chỉ cần thay đổi CSS, các trang 
 khác sẽ tự động cập nhật sự thay đổi đó 
 – Có thể dùng các CSS cùng với JavaScript để tạo các hiệu 
 ứng đặc biệt 
 Bất lợi của CSS: 
 – Không một trình duyệt nào chấp nhận nó hoàn toàn 
 – Phải mất thời gian để học cách sử dụng 
 II. PHÂN LOẠI-CÁCH TẠO 
1. Phân loại : Có 3 loại 
 – Inline style 
 – Internal style 
 – External style 
 a) Inline style: Là kiểu được gán cho một dòng 
 hoặc một đoạn văn bản, bằng cách sử dụng 
 thuộc tính style bên trong tag muốn định dạng 
 Cú pháp: 
<TagName Style=”property1:value1;property2: 
 value2; …”> 
 Nội dung văn bản muốn định dạng 
 Ví dụ : 
<P style = “color:aqua ; font-Style:italic; text- 
 Align:center”> 
This paragraph has an inline style applied to it 
 This paragraph is displayed in the default style. 
 Can you see the difference 
 in this line 
b) Internal style : 
 Là bảng mẫu thích hợp cho trang riêng lẻ với nhiều văn 
 bản. 
 – Cách tạo: Taọ bảng mẫu chung trên phần đầu 
 trang trong cặp tag 
 – Sử dụng: Trong phần body, nội dung nào 
 muốn sử dụng định dạng theo bảng mẫu trên 
 thì đặt trong tag được định nghĩa trong phần 
 head 
Cú pháp: 
TagName{property1:value1;property2:value 2 …} 
(lặp lại cho mỗi tag có thuộc tính cần định dạng) 
 H1,H2 { color: limegreen; font-family: Arial } 
 This is the H1 element 
 This is the H2 element 
 This is the H3 element with its default style as 
 displayed in the browser 
c) External style : 
 Là một bảng kiểu được lưu trữ thành một file bên ngoài 
 và được liên kết với trang HTML. 
 Bảng kiểu này sẽ được áp dụng và ảnh hưởng cho tất cả 
 các trang của một website. 
 Cách tạo: 
 – Tạo một tập tin văn bản mới 
 – Nhập tên các tag muốn định dạng thuộc tính 
 theo mẫu: 
 TagName{property1: value1; property2:value2;…} 
 – Lưu tập tin với định dạng Text Only và có 
 phần mở rộng .css 
 Ví dụ: 
Tạo tập tin Sheet1.css 
 H2 {color:blue; font-style:italic} 
 P{text-align:justify; text-indent:8pt; 
 font:10pt/15pt “Myriad Roman”,”Verdana”} 
 Cách dùng External style: 
 Cú pháp: 
 <Link Rel=StyleSheet Type=”text/css” Href=”tên 
 tập tin.css”> 
 Ví dụ: 
 Changing the rules 
 <LINK REL=stylesheet HREF=”sheet1.css” 
 TYPE=”text/css”> 
 Changing the rules is fun 
 Changing the rules may not be such fun 
 The H2 element again 
 III. ĐỊNH BẢNG MẪU CHO LỚP (CLASS) 
 Có thể chia các yếu tố trong HTML thành các lớp để áp 
dụng kiểu mẫu hiệu quả hơn 
Cú pháp: 
 .ClassName{property1: value1; property2:value2;…} 
 Trong phần , đánh dấu phần nằm trong lớp bằng cú 
pháp: 
Nội dung 
Ví dụ: 
 .water{color:blue} 
 .danger{color:red} 
 test water 
 test danger 
 IV. ĐỊNH CÁC TAG RIÊNG BIỆT 
 Dùng áp dụng cho một phần tử riêng biệt trên trang Web 
Cú pháp: 
 TagName#IDName{property1: value1; 
 property2:value2;…} 
 Trong tag Body nhập cú pháp: 
 Nội dung 
 Ví dụ : 
 ID Selectors 
 p#control {color: red;font-weight:bold; text-indent:18pt} 
 p{color: magenta;text-indent:0pt} 
 A hardware device that allows the user to make 
 electronic copies of graphics or text. 
 Short for picture element. A pixel refers to the small dots that 
 make up an image on the screen. 
 V. TẠO CÁC TAG TÙY Ý 
 Có 2 loại tag chung có thể kết nối Class hay các ID để 
 tạo các tag tuỳ ý, cần phân biệt đối tượng cấp khối và 
 cấp hàng 
 Đối tượng cấp khối như một đoạn văn, thường bắt đầu 
 một dòng mới và có thể chứa các đối tượng cấp khối 
 khác gồm các tag: P, H1, Body, table 
 Đối tượng cấp hàng không tạo dòng mới, thường chứa 
 văn bản và các yếu tố trong hàng khác gồn các tag: B, 
 Font… 
 Các tag DIV và SPAN: có thể kết nối với các phần tử 
 cấp khối và ID để tạo ra các tag tuỳ ý. Trong đó DIV 
 phù hợp với các đối tượng cấp khối, SPAN phù hợp với 
 các đối tượng cấp hàng 
 1. TẠO TAG CẤP KHỐI TÙY Ý 
Cú pháp: 
Bằng cách thêm một CLASS hoặc ID vào tag DIV và định 
mẫu cần có 
Trong phần Style hoặc một bảng mẫu bên ngoài ta nhập: 
DIV.ClassName{property1: value1; property2:value2;…} 
với ClassName là tên lớp sẽ sử dụng. hoặc: 
DIV#Idname{property1: value1; property2:value2;…} 
với IDName là tên định danh của tag DIV 
 Áp dụng tag cấp khối tuỳ ý vào trang HTML 
 Tại đầu phần văn bản muốn định dạng, ta nhập 
 cú pháp 
 Nội dung 
 (bên trong có thể chứa các tag hoặc ) 
 Ví dụ : 
 ID Selectors 
 DIV.control{background:magenta;font-size:28pt} 
 DIV#intro{color: magenta;text-indent:0pt;font-weight:bold} 
 A hardware device that allows the user to 
 make electronic copies of graphics or text. 
 Short for picture element. A pixel refers to the 
 small dots that make up an image on the screen. 
 2. TẠO CÁC TAG TRONG HÀNG TÙY Ý 
 Kết nối nhiều kiểu định dạng văn bản trong một tag 
 Cú pháp: 
Trong phần Style, nhập cú pháp: 
SPAN.Clname{property1: value1; property2:value2;…} 
Hoặc: 
SPAN#IDname{property1: value1; property2:value2;…} 
Áp dụng tag trong hàng tuỳ ý vào trang HTML: Tại đầu 
đoạn văn bản muốn định dạng, nhập cú pháp: 
 nội dung văn bản 
Hoặc: 
 Nội dung văn bản 
 Ví dụ : 
 ID Selectors 
 SPAN.control{background:magenta;font-size:200%} 
 SPAN#intro{font-variant:small-caps;color: orange;font-
 weight:bold} 
 A <SPAN 
 style="color:red">hardware device that allows the user to make 
 electronic copies of graphics or text. 
 Short for picture element. A pixel refers to the 
 small dots that make up an image on the screen. 
 VI. CÁC THUỘC TÍNH ĐỊNH DẠNG 
ĐỊNH DẠNG VĂN BẢN 
 Chọn bộ font: 
 font-family: familyname1, familyname2… 
 Tạo chữ nghiêng: 
 Font-style: italic 
 Tạo chữ đậm: 
 Font-weight: bold 
 Định cỡ chữ: 
 Font-size: xx-small hoặc x-small, small, medium, 
 large, x-large, xx-large hoặc Font-size:12pt (giá trị cụ 
 thể) 
 Có thể định dạng các thuộc tính chữ nghiêng, đậm và cở 
 chữ cùng một lúc: 
 Font: italic bold size 
 Màu của chữ: 
 Color: colorName hoặc #rrggbb 
 Màu nền của chữ: 
 Background:colorName hoặc #rrggbb 
 Định khoảng các giữa các từ, các ký tự: 
 Word-spacing:n (n: khoảng cách giữa các từ, tính 
 bằng pixel) 
 Letter-spacing:n (n: khoảng cách giữa các từ, tính 
 bằng pixel) 
 Canh lề cho văn bản: 
 Text-Align: left, right, center, justify 
 Thay đổi dạng chữ: 
 Text-transform: capitalize, uppercase, 
 lowercase 
 ĐỊNH DẠNG DANH SÁCH 
List-style:circle chấm tròn rổng 
List-style: disc chấm tròn đen 
List-style: square chấm đen vuông 
List-style: decimal đánh số ả rập 
List-style: lower-alpha thứ tự alpha 
List-style: upper-alpha thứ tự alpha chữ in hoa 
List-style: upper-roman số la mã hoa 
List-style: lower-roman số la mã thường 
List-style-image:url: hình làm bullet 
 Ví dụ: 
 Inline style 
 Internal style 
 External style 
 ĐỊNH DẠNG NỀN TRANG 
 bacground-color: màu nền 
 background-image: ảnh nền 
 Background- position: vị trí đặt ảnh nền gồm các giá 
 trị:left, right, center, top, bottom,inherit 
 background-repeat: ảnh lặp 
 – Repeat: lặp trên cả trang 
 – Repeat-x: lặp theo chiều ngang 
 – Repeat-y: lặp theo chiêù đứng 
 background-attachment: giữ ảnh cuộn /không cuộn 
 theo trang của trình duyệt 
 Ví dụ: 
 <body style="background-image:url(../image/h1.jpg); 
 background-position:top; background-repeat:repeat-x; 
 background-attachment:inherit"> 
 ĐỊNH DẠNG ĐƯỜNG VIỀN 
 border-style: kiểu đường viền 
 border-collapse: collapse: đường viền lún 
 border-bottom-style 
 border-left-style:double 
 border-right-style:double Định dạng từng cạnh của khung 
 border-top-style 
 border-left-color 
 ĐỊNH DẠNG HYPERTEXT LINK 
 Text-Decoration:none: không gạch dưới 
 A:visited{color:#rrggbb} 
 A:link{styles cho vị trí chưa được xem} 
 A:active{style cho những link đang click} 
 A:hoever{style khi trỏ lướt qua link} 
 a:hover { color: #FF00FF;}