CSS-Cascading Style Sheets
description
Transcript of 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
Các cách sử dụng CSS
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
Các cách sử dụng CSS
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
Một số thuộc tính trong CSS
Thuộc tính BorderQui định đường bao xung quanh một thành phần:
04/20/23 19
Một số thuộc tính trong CSS
Thuộc tính font:
Qui định phông chữ trong văn bản.
04/20/23 20
Một số thuộc tính trong CSS
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
Một số thuộc tính trong CSS
Thuộc tính Giá trị
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
Một số thuộc tính trong CSS
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
Thuộc tính Giá trị
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
Một số thuộc tính trong CSS
Thuộc tính Margin:Xác định khoảng trống xung quanh phần tử
04/20/23
Thuộc tính Giá trị
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
Một số thuộc tính trong CSS
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
Một số thuộc tính trong CSS
04/20/23
padding
Width x height
26
Trân Trọng
04/20/23 27
Thảo luận
04/20/23 28