CSS-Cascading Style Sheets

CSS-Cascading Style Sheets

04/20/23 1

Tổng quan

CSS là gi`? Tại sao nên sử dụng CSSCú pháp CSSCác cách sử dụng CSSMột số thuộc tính trong CSS

04/20/23 2

CSS là gi`? Tại sao nên sử dụng CSS

CSS (Cascading Style Sheets)- Tập tin định kiểu theo tầng

Styles định nghĩa cách các thành phần HTML hiển thị như thế nào

Các style thông thường được lưu trữ trong một style sheets

04/20/23 3

CSS là gi`? Tại sao nên sử dụng CSS

Tại sao nên sử dụng CSS:

1. Tiết kiệm công sức

2. Kiểm soát kiểu cách và sự sắp đặt của nhiều trang một lần.

04/20/23 4

Thứ tự xếp lớp

Style nào sẽ được sử dụng khi có hơn một style được chỉ định cho một thành phần HTML?

Tất cả các style sẽ được xếp chồng và thứ tự ưu tiên từ trong ra ngoài

04/20/23 5

Thứ tự xếp lớp

Thành phần HTMLThành phần HTML

Inline style sheet

Internal style sheet

External style sheet

Mặc định của trình duyệt

04/20/23 6

Cú pháp CSS Cấu trúc của một CSS gồm 3 phần: bộ chọn- selector;

thuộc tính- property; giá trị- value

Bộ chọn{ thuộc tính: giá trị;}

Ví dụ:Body {color: black;}

Trong đó: body: là Bộ chọn

color: là thuộc tính

black: value

Nếu có nhiều thuộc tính, các thuộc tính được ngăn cách với nhau bởi dấu chấm phẩy “;” và mỗi thuộc tính trên 1 dòng.

04/20/23 7

Cú pháp CSSVí dụ:

P{ font-family: tahoma;

text-align: center;

color: blue;

} Hoặc cũng có thể nhóm các bộ chọn có cùng thuộc tính với nhau:

Ví dụ:

H1,h2,h3,h4{

color: green;

}

04/20/23 8

Cú pháp CSS

Giới thiệu bộ chọn Lớp (Class) Định nghĩa các style khác nhau cho cùng một kiểu thành

phần HTML.

Ví dụ: Muốn có 2 kiểu của phân đoạn trong văn bản: 1 đoạn căn phải, 1 đoạn căn giữa

p.right{text-align: right}

p.center{text-align: center}

04/20/23 9

Cú pháp CSS

Và sử dụng trong văn bản HTML như sau:<p class=”right”>

Phân đoạn này sẽ căn bên phải

</p>

<p class=”center”>

Phân đoạn này sẽ căn giữa

</p>

Chú ý: Chỉ có một thuộc tính lớp có thể được chỉ định trên một thành phần HTML

Ví dụ sau là sai:

<p class= ”right ” class= ”center”>

This is a paragraph

</p>

04/20/23 10

Cú pháp CSS Có thể bỏ tên thẻ trong bộ chọn để định nghĩa một style

được sử dụng nhiều lần bởi các thành phần HTML khác.

Ví dụ: .center {text-align: center}

và được gọi đến như sau:

<h1 class=“center”>

This is paragraph1

</h1>

<p class=“center”>

This is paragrahp2

</h2>

04/20/23 11

Cú pháp CSS

Bộ chọn mã (ID) Chỉ cho phép áp dụng cho một phần tử. Một thuộc tính ID

phải là duy nhất trong một văn bản.

Các cách định nghĩa:

Ví dụ:

p#para1

{

text-align:center;

color: red;

}

Style trên sẽ áp dụng cho phần tử p có giá trị ID là para1

04/20/23 12

Cú pháp CSS

04/20/23 13

Các cách sử dụng CSS

External Style Sheet(Style bên ngoài)External Style Sheet(Style bên ngoài)

Internal Style Sheet(bên trong cặp thẻ <head>)Internal Style Sheet(bên trong cặp thẻ <head>)

Inline Style Sheet(Style nội tuyến)Inline Style Sheet(Style nội tuyến)

04/20/23 14

Các cách sử dụng CSS?

1. Style sheet ngoài:

Cho phép ứng dụng đến nhiều trang của website. Mỗi trang muốn liên kết với style sheet này, cần sử dụng thẻ <link> được đặt trong cặp thẻ <head></head>

Ví dụ:

<head>

<link rel=“stylesheet” type=“text/css” href=“mystyle.css”

</head> Khi đó trình duyệt sẽ chỉ định về style từ file

“mystyle.css” và định dạng văn bản theo file này

04/20/23 15


2. Style sheet trong:

Style sheet trong cần sử dụng khi văn bản đơn có một style duy nhất. Định nghĩa style sheet trong bằng thẻ <style> đặt trong cặp thẻ <head></head>.

Ví dụ:

<head>

<style type=“text/css”>

p{ text-align: left}

hr{color: red}

</style>

</head>

04/20/23 16


3. Style sheet nội tuyến:

Áp dụng cho một sự kiện đơn lẻ của một thành phần.

Để định nghĩa các style nội tuyến, ta sử dụng thuộc tính style trong thẻ có liên quan.

Ví dụ:

<p style=“color=blue; margin-left:20px”>

This is a paragraph

</p>

04/20/23 17

Một số thuộc tính trong CSS

Thuộc tính BorderThuộc tính FontThuộc tính TextThuộc tính PaddingThuộc tính Margin

04/20/23 18


Thuộc tính BorderQui định đường bao xung quanh một thành phần:

04/20/23 19


Thuộc tính font:

Qui định phông chữ trong văn bản.

04/20/23 20


Thuộc tính Text:

Xác định diện mạo của văn bản.

04/20/23

Thuộc tính Giá trị

Color_Thiết lập màu cho chữ color

Direction_Thiết lập hướng chữ Ltr, rtl

Letter-spacing_khoảng cách giữa các chữ

Normal, length

Text-align_căn chỉnh văn bản trong một thành phần

Left, right, center, justify

Text-indent_Thụt đầu dòng văn bản trong một thành phần

Length,%

21



Text-shadow None, color, length

Text-transform_Kiểm soát kí tự trong một thành phần

None, capitalize, uppercase,lowercase

Word-spacing_Tăng hoặc giảm khoảng trống giữa các từ

Normal, length

White-space_Thiết lập bao nhiêu khoảng trắng trong một thành phần

Normal, pre, nowrap

04/20/23 22


Thuộc tính padding: Xác định khoảng trống giữa thành phần đường bao và nội dung.

04/20/23


Padding Padding-left, padding-right, padding- bottom

Padding-bottom_Thiết lập khoảng đệm tại đáy của một phần tử

Length, %

Padding-top_Thiết lập khoảng đệm trên đỉnh của một phần tử

Length, %

Padding-right_Thiết lập khoảng đệm phải Length, %

Padding-left_Thiết lập khoảng đệm trái Length, %

23


Thuộc tính Margin:Xác định khoảng trống xung quanh phần tử

04/20/23


Margin Margin-Top, Margin-Bottom, Margin-Left, Margin-Right

Margin-bottom_Thiết lập lề đáy của một phần tử

Auto, length, %

Margin-Top_Thiết lập lề đỉnh của một phần tử

Auto, length, %

Margin-Left_Thiết lập lề trái của một phần tử

Auto, length, %

Margin-Top_Thiết lập lề phải của một phần tử

Auto, length, %

24


Lưu ý:

• Thuộc tính padding: không cho phép giá trị âm

• Thuộc tính Margin: cho phép giá trị âm

• Trình duyệt Netscape và IE thiết lập mặc định lề cho thẻ body là 8px. Opera không thiết lập. Để thay thế, Opera thiết lập một khoảng đệm là 8px

04/20/23 25

Margin

Border


04/20/23

padding

Width x height

26

Trân Trọng

04/20/23 27

Thảo luận

04/20/23 28

CSS-Cascading Style Sheets

Documents