1. Trang chủ
  2. » Mẫu Slide

Bài giảng Phát triển ứng dụng Web – Web Programming: Chương 2 - ThS. Lương Trần Hy Hiến

10 17 0

Đang tải... (xem toàn văn)

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Định dạng
Số trang 10
Dung lượng 847,48 KB

Nội dung

• 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. 9.[r]

(1)

1

CSS - Cascading Style Sheet

(2)

2

Nội dung

1 Giới thiệu

2 Định nghĩa style

3 Phân loại sử dụng

(3)

1 Giới thiệu

• Bảng kiểu (style sheet) nhằm thoả mãn nhu cầu

– Giữ tính thống cho trang HTML

– Định dạng số tính chất thơng thường lúc cho tất đối tượng trang

• Lợi ích:

– Tiết kiệm thời gian

– Để thay đổi định dạng ==> cần thay đổi thuộc tính CSS ==> 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:

(4)

4

2 Định nghĩa Style <tag style=

“property1 :value1; property2 :value2; ………

propertyN :valueN;”

>

</tag>

.SelectorName {

property1 :value1; property2 :value2; ………

propertyN :valueN;

}

<tag class=“SelectorName”> …

</tag>

Cú pháp ghi chú: /* … */

/* Đây ghi */

SelectorName{

(5)

5

2 Định nghĩa Style

(6)

6

3 Phân loại sử dụng

1 Inline Style Sheet

Style định nghĩa tag 2 Internal Style Sheet

Style định nghĩa tag <style> 3 External Style Sheet

(7)

3.1 Inline Style Sheet

• Sử dụng thuộc tính style bên tag muốn định dạng

• Cú pháp:

<TagName style=”property1: value1; property2:

value2; …”>

Nội dung văn muốn định dạng

(8)

3.1 Inline Style Sheet (tt) – Ví dụ

<BODY>

<P style="color:#0033CC; border:#FF0000">

This paragraph has an inline style applied to it</P> <P> This paragraph is displayed in the default style <P> Can you see the <SPAN style = “color:red”> difference </SPAN>in this line

</BODY>

(9)

3.2 Internal Style Sheet

• Thích hợp cho trang riêng lẻ

• Cách tạo: Tạo bảng mẫu chung phần đầu trang cặp tag <head>

• 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

(10)

3.2 Internal Style Sheet (tt) – Ví dụ

Ngày đăng: 11/03/2021, 13:06

TỪ KHÓA LIÊN QUAN

TÀI LIỆU CÙNG NGƯỜI DÙNG

TÀI LIỆU LIÊN QUAN