Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 31 trang
THÔNG TIN TÀI LIỆU
Thông tin cơ bản
Định dạng
Số trang
31
Dung lượng
261,5 KB
Nội dung
CASCADING STYLE SHEET-CSS CASCADING STYLE SHEET-CSS CHƯƠNG VII CHƯƠNG VII I. I. GIỚI THIỆU GIỚI THIỆU Bảng kiểu (style sheet) Bảng kiểu (style sheet) nhằm thoả mản nhu cầu nhằm thoả mản nhu cầu – Thẩm mỹ Thẩm mỹ – Giữ tính thống nhất cho trang HTML. 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 Đị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 tất cả các đối tượng trên trang Tiện ích của CSS : Tiện ích của CSS : – Tiết kiệm thời gian Tiết kiệm thời gian – Khi thay đổi định dạng chỉ cần thay đổi CSS, các trang 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 đó 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 Có thể dùng các CSS cùng với JavaScript để tạo các hiệu ứng đặc biệt ứng đặc biệt Bất lợi của CSS: 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 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 Phải mất thời gian để học cách sử dụng II. II. PHÂN LOẠI-CÁCH TẠO PHÂN LOẠI-CÁCH TẠO 1. 1. Phân loại : Phân loại : Có 3 loại Có 3 loại – Inline style Inline style – Internal style Internal style – External style External style a) a) Inline style Inline style : L : L à kiểu được gán cho một dòng à 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 hoặc một đoạn văn bản, bằng cách sử dụng thuộc tính thuộc tính style style bên trong tag muốn định dạng bên trong tag muốn định dạng Cú pháp Cú pháp : : <TagName Style=”property1:value1;property2: <TagName Style=”property1:value1;property2: value2; …”> value2; …”> Nội dung văn bản muốn định dạng Nội dung văn bản muốn định dạng </TagName> </TagName> Ví dụ Ví dụ : : <BODY> <BODY> <P style = “color:aqua” <P style = “color:aqua” This paragraph has an inline style applied to it This paragraph has an inline style applied to it <P> This paragraph is displayed in the default style. <P> This paragraph is displayed in the default style. <P> Can you see the <SPAN style = color:red> difference <P> Can you see the <SPAN style = color:red> difference </SPAN> in this line </SPAN> in this line </BODY> </BODY> b) b) Internal style : Internal style : Là bảng mẫu thích hợp cho trang riêng lẻ với nhiều văn Là bảng mẫu thích hợp cho trang riêng lẻ với nhiều văn bản. bản. – Cách tạo: Taọ bảng mẫu chung Cách tạo: Taọ bảng mẫu chung trên phần đầu trên phần đầu trang trang trong cặp tag <head> trong cặp tag <head> – Sử dụng: Trong phần body, nội dung nào 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 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 thì đặt trong tag được định nghĩa trong phần head head Cú pháp: Cú pháp: < < Head> Head> <Style <Style TYPE=”text/css” TYPE=”text/css” > > TagName TagName { { property1:value1;property2:value 2 … property1:value1;property2:value 2 … } } (lặp lại cho mỗi tag có thuộc tính cần định dạng) (lặp lại cho mỗi tag có thuộc tính cần định dạng) </Style> </Style> </Head> </Head> <HTML> <HTML> <HEAD> <HEAD> <STYLE TYPE=”text/css”> <STYLE TYPE=”text/css”> H1,H2 { color: limegreen; font-family: Arial } H1,H2 { color: limegreen; font-family: Arial } </STYLE> </STYLE> </HEAD> </HEAD> <BODY> <BODY> <H1>This is the H1 element</H1> <H1>This is the H1 element</H1> <H2>This is the H2 element</H2> <H2>This is the H2 element</H2> <H3>This is the H3 element with its default style as <H3>This is the H3 element with its default style as displayed in the browser</H3> displayed in the browser</H3> </BODY> </BODY> </HTML> </HTML> c) c) External style External style : : Là một bảng kiểu được lưu trữ thành một file bên ngoài 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. 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ả 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ác trang của một website. Cách tạo Cách tạo : : – Tạo một tập tin văn bản mới 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 Nhập tên các tag muốn định dạng thuộc tính theo mẫu: theo mẫu: TagName{property1: value1; property2:value2;…} TagName{property1: value1; property2:value2;…} – Lưu tập tin với định dạng Text Only và có Lưu tập tin với định dạng Text Only và có phần mở rộng phần mở rộng .css .css Ví dụ: Ví dụ: Tạo tập tin Tạo tập tin Sheet1.css Sheet1.css Body{Background-color:blue;font:Tahoma;font-size:20pt} H2 {color:blue; font-style:italic} P{text-align:justify; text-indent:8pt; font:10pt/15pt “Verdana”} A:hover {text-decoration:underline;color:red} Body{Background-color:blue;font:Tahoma;font-size:20pt} H2 {color:blue; font-style:italic} P{text-align:justify; text-indent:8pt; font:10pt/15pt “Verdana”} A:hover {text-decoration:underline;color:red} [...]... duyệt Ví dụ: ĐỊ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... 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 Tag Body 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... biệt trên trang Web NgườI ta thường dùng kỹ thuật này để định nghĩa trên các thực đơn Cú pháp: TagName#IDName{property1: value1; property2:value2;…} < /style> 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} < /STYLE> ... 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;fontweight:bold} < /STYLE> A hardware device that allows the user to make electronic copies of graphics or text. 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} < /STYLE> test water test danger IV ĐỊNH CÁC TAG RIÊNG BIỆT Dùng thuộc tính ID để sử dụng style. .. Class=”ClassName” IDname=”Idname”> 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} < /STYLE> A hardware device that allows the user to make electronic copies of graphics or text. Short...Cách dùng External style: Kết nối tập tin HTML vớI tập tin css trong phần head ta nhập nộI dung này vào Cú pháp: Ví dụ: Changing the rules Changing the rules . CASCADING STYLE SHEET-CSS CASCADING STYLE SHEET-CSS CHƯƠNG VII CHƯƠNG VII I. I. GIỚI THIỆU GIỚI THIỆU Bảng kiểu (style sheet) Bảng kiểu (style sheet) nhằm thoả. II. II. PHÂN LOẠI-CÁCH TẠO PHÂN LOẠI-CÁCH TẠO 1. 1. Phân loại : Phân loại : Có 3 loại Có 3 loại – Inline style Inline style – Internal style Internal style – External style External style a) a) Inline. Sheet1.css Sheet1.css Body{Background-color:blue;font:Tahoma;font-size:20pt} H2 {color:blue; font -style: italic} P{text-align:justify; text-indent:8pt; font:10pt/15pt “Verdana”} A:hover {text-decoration:underline;color:red} Body{Background-color:blue;font:Tahoma;font-size:20pt} H2