Đang tải... (xem toàn văn)
Cascading Style Sheet (CSS) là một ngôn ngữ quy định cách trình bày của các thẻ html trên trang web. Là ngôn ngữ đang được sử dụng rất nhiều trong thiết kế web hiện nay. Nói nôm na thì CSS được dùng để xây dựng bố cục giao diện của trang web, trình bày cho các thẻ html như tô màu chữ, chữ in đậm in nghiêng, qui định chiều dài chiều rộng cho thẻ html. Chương này sẽ hướng dẫn cách sử dụng CSS trong trang web, mời các bạn cùng tham khảo.
CHƯƠNG VII CASCADING STYLE SHEET-CSS I Bảng kiểu (style sheet) nhằm thoả mản nhu cầu – – – Thẩm mỹ Giữ tính thống cho trang HTML Định dang số tính chất thơng thường lúc cho tất đối tượng trang Tiện ích CSS : – – – GIỚI THIỆU Tiết kiệm thời gian Khi thay đổi định dạng cần thay đổi CSS, trang khác tự động cập nhật thay đổi Có thể dùng CSS với JavaScript để tạo hiệu ứng đặc biệt Bất lợi CSS: – – Khơng trình duyệt chấp nhận hồn tồn Phải thời gian để học cách sử dụng II PHÂN LOẠI-CÁCH TẠO Phân loại : Có loại – – – Inline style Internal style External style Inline style: Là kiểu gán cho dòng đoạn văn bản, cách sử dụng thuộc tính style bên tag muốn định dạng Cú pháp: a) Nội dung văn muốn định dạng Ví dụ :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 – Cách tạo: Taọ bảng mẫu chung phần đầu trang cặp tag – Sử dụng: Trong phần body, nội dung muốn sử dụng định dạng theo bảng mẫu đặt tag định nghĩa phần head Cú pháp: TagName{property1:value1;property2:value …} (lặp lại cho 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à bảng kiểu lưu trữ thành file bên liên kết với trang HTML Bảng kiểu áp dụng ảnh hưởng cho tất trang website Cách tạo: – Tạo tập tin văn – Nhập tên 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 có phần mở rộng css Ví dụ: Tạo tập tin Sheet1.css H2 {color:blue; {color:blue; font-style:italic} font-style:italic} H2 P{text-align:justify; text-indent:8pt; text-indent:8pt; P{text-align:justify; font:10pt/15pt “Myriad “MyriadRoman”,”Verdana”} Roman”,”Verdana”} font:10pt/15pt V TẠO CÁC TAG TÙY Ý Có loại tag chung kết nối Class hay ID để tạo tag tuỳ ý, cần phân biệt đối tượng cấp khối cấp hàng Đối tượng cấp khối đoạn văn, thường bắt đầu dòng chứa đối tượng cấp khối khác gồm 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 yếu tố hàng khác gồn tag: B, Font… Các tag DIV SPAN: kết nối với phần tử cấp khối ID để tạo tag tuỳ ý Trong DIV phù hợp với đối tượng cấp khối, SPAN phù hợp với đối tượng cấp hàng TẠO TAG CẤP KHỐI TÙY Ý Cú pháp: Bằng cách thêm CLASS ID vào tag DIV định mẫu cần có Trong phần Style bảng mẫu bên ta nhập: DIV.ClassName{property1: value1; property2:value2;…} với ClassName tên lớp sử dụng hoặc: DIV#Idname{property1: value1; property2:value2; …} với IDName tên định danh tag DIV Áp dụng tag cấp khối tuỳ ý vào trang HTML Tại đầu phần văn muốn định dạng, ta nhập cú pháp Nội dung (bên chứa tag
) Ví dụ : ID Selectors DIV.control{background:magenta;font-size:28pt} DIV#intro{color: magenta;text-indent:0pt;fontweight: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 TẠO CÁC TAG TRONG HÀNG TÙY Ý Kết nối nhiều kiểu định dạng văn 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 hàng tuỳ ý vào trang HTML: Tại đầu đoạn văn muốn định dạng, nhập cú pháp: nội dung văn Hoặc: Nội dung văn Ví dụ : ID Selectors SPAN.control{background:magenta;font-size:200%} SPAN#intro{font-variant:small-caps;color: orange;fontweight: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 VI CÁC THUỘC TÍNH ĐỊNH DẠNG ĐỊNH DẠNG VĂN BẢN Chọn 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 x-small, small, medium, large, x-large, xx-large Font-size:12pt (giá trị cụ thể) Có thể định dạng thuộc tính chữ nghiêng, đậm cở chữ lúc: Font: italic bold size Màu chữ: Color: colorName #rrggbb Màu chữ: Background:colorName #rrggbb Định khoảng từ, ký tự: Word-spacing:n (n: khoảng cách từ, tính pixel) Letter-spacing:n (n: khoảng cách từ, tính 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