Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 41 trang
THÔNG TIN TÀI LIỆU
Thông tin cơ bản
Định dạng
Số trang
41
Dung lượng
684,71 KB
Nội dung
1 BẢNG KIỂU- CSS Cascading Style Sheets 8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH 2 GIỚI THIỆU Bảng kiểu (Cascading style sheet) là một ngôn ngữ quy định cách trình bày cho các tài liệu web viết bằng HTML, XHTML, XML, UML … – Sử dụng CSS nhằm thỏa mãn: –Thẩm mỹ –Giữ tính thống nhất cho trang HTML. –Định dạng 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 8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH 3 GIỚI THIỆU Tiện ích của CSS : Tiết kiệm thời gian thiết kế cấu trúc chung của website 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 Tất cả các trình duyệt mới nhất đều hỗ trợ CSS. Nhược điểm của CSS : Giao diện của trang web có thể bị xô lệch, di chuyển khi hiển thị trong các trình duyệt khác nhau. Reset các thuộc tính CSS. 8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH 4 GIỚI THIỆU Học CSS cần những gì? Kiến thức về HTML, XHTML Javascript Trình soạn thảo: Notepad, wordpad, dreamweaver… Phiên bản trình duyệt mới nhất. Thực hành, thực hành và thực hành… 8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH Học CSS xong làm đƣợc gì? Định dạng văn bản các trang web theo cùng style Định dạng bảng biểu Thiết kế đƣợc menu ngang hoặc popup Tạo hiệu ứng động trên trang web… 8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH 5 6 QUY ƢỚC CÁCH VIẾT CSS Cú pháp: selector {properties:value} Ví dụ: Trong HTML viết: <body bgcolor=“#808080”> Trong CSS viết: body{background-color:#808080; margin-left:0px} Giải thích các thành phần: Selector: đối tƣợng sẽ áp dụng các thuộc tính trình bày (các thẻ HTML, class, id ) Properties: các thuộc tính quy định cách trình bày Value: giá trị của thuộc tính. 8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH 7 ĐƠN VỊ TRONG CSS Đơn vị Mô tả % Phần trăm in Inch (1inch=2.54cm) cm Centimeter mm Millimeter ex 1ex=chiều cao chữ x in thường của font chữ hiện hành pt Point (1pt=1/72 inch) pc Pica (1pc=12pt) px Pixel em 1em=kích thước của font hiện hành. Đơnvị đo chiều dài: 8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH 8 Đơn vị đo màu sắc Đơn vị Mô tả Color-name Tên màu tiếng anh. Ví dụ: black, white, red RGB(r,g,b) Màu RGB với 3 giá trị r,g,b có giá trị từ 0-255 kết hợp với nhau để tạo ra màu khác nhau. RGB(%r,%g,%b) Màu RGB với 3 giá trị r,g,b có giá trị từ 0-100% kết hợp với nhau để tạo ra màu khác nhau. HexadecimalRGB Mã màu RGB dạng hệ thập lục phân. Ví dụ: #FFFFFF: Trắng, #000000:đen 8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH 9 Dựa vào vị trí đặt CSS trong tài liệu HTML ta có 3 loại CSS: CSS Nội tuyến- Inline style CSS bên trong thẻ style- Internal style CSS bên ngoài- External style Nếu không sử dụng CSS thì nội dung trang web đƣợc định dạng theo style mặc định của trình duyệt Phân loại CSS 8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH 10 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 </TagName> INLINE STYLE 8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH [...]... (EMBEDDED STYLE) Internal style (embedded style) : Là bảng kiểu thích hợp cho trang riêng lẻ với nhiều văn bản Cú pháp: selector{property1:value1;property2:value 2 …} (lặp lại cho mỗi tag có thuộc tính cần định dạng) 8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH 12 Ví dụ: p{ color: red; font-family: Tahoma } h1 { color:... 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 thẻ 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 Có thể chọn Encoding là UTF-8 nếu có chú thích bằng tiếng... Nhƣ-Khoa CNTH 30 Định kiểu CSS cho thẻ SPAN Ta có thể 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 hoặc một bảng kiểu bên ngoài ta nhập: SPAN.Classname {property1: value1; property2:value2;…} Hoặc: SPAN#Idname {property1: value1; property2:value2;…} Quỳnh Nhƣ-Khoa CNTH 8/3/2012 ThS.Nguyễn Thị 31 Áp dụng định kiểu cho thẻ SPAN Tại đầu đoạn văn bản muốn định dạng, nhập cú... Ví dụ: Changing the rules Changing the rules is fun Changing the rules may not be such fun The H2 element again 8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH 18 ĐỊ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... id="layer1"> Position: cung cấp điểm tham chiếu cho thẻ div Các giá trị có thể là: absolute (điểm tham chiếu vị trí cho thẻ div là góc trái phía trên của cửa sổ trình duyệt); relative: điểm tham chiếu vị trí tính từ vị trí gốc của văn bản top,left: xác định vị trí thẻ div từ trên xuống và từ trái sang _z-index: nếu chồng hai thẻ div lên nhau bằng cách cho các phần tử chỉ vị trí nó giống hệt nhau,... html khác 26 Thẻ SPAN Thẻ SPAN dùng để định dạng cho một phần text trong hàng Thẻ SPAN tạo ra một móc nối giữa phần text đƣợc định dạng với phần text còn lại mà không tạo ra dòng mới Ví dụ Đây là sự khác biệt so với nội dung còn lại 8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH 27 Định kiểu CSS cho thẻ DIV Cú pháp: Bằng cách thêm một CLASS hoặc... sẽ đƣợc hiển thị trong phần nội dung web Cách khắc phục: Thêm dấu vào sau khối lệnh CSS Ví dụ: 8/3/2012 ThS.Nguyễn Thị Quỳnh Nhƣ-Khoa CNTH 14 EXTERNAL STYLE /LINKED STYLES External style (linked style): Là một bảng kiểu đƣợc lƣu trữ thành một file bên... tuỳ ý: DIV và SPAN 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 thẻ: 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ồm các tag: B, Font… 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... và định kiểu cần có Trong phần Style hoặc một bảng kiể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 danhQuỳnh Nhƣ-Khoa CNTH của tag DIV 8/3/2012 ThS.Nguyễn Thị 28 Áp dụng định kiểu cho thẻ DIV Tại đầu phần văn bản muốn định dạng, ta nhập cú pháp . vị trí đặt CSS trong tài liệu HTML ta có 3 loại CSS: CSS Nội tuyến- Inline style CSS bên trong thẻ style- Internal style CSS bên ngoài- External style Nếu không sử dụng CSS thì nội. CNTH 5 6 QUY ƢỚC CÁCH VIẾT CSS Cú pháp: selector {properties:value} Ví dụ: Trong HTML viết: <body bgcolor=“#808080”> Trong CSS viết: body{background-color:#808080; margin-left:0px}. Thêm dấu <! ở trƣớc và > vào sau khối lệnh CSS Ví dụ: <STYLE TYPE=”text /css > <! p{ color: red; font-family: Tahoma } h1 { color: limegreen; font-family: Arial } > </STYLE>