Download
1 / 28
280 likes | 435 Views
CSS-Cascading Style Sheets. Tổng quan. CSS là gi`? Tại sao nên sử dụng CSS Cú pháp CSS Các cách sử dụng CSS Một số thuộc tính trong CSS. 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
E N D
Tổng quan • CSS là gi`? Tại sao nên sử dụng CSS • Cú pháp CSS • Các cách sử dụng CSS • Một số thuộc tính trong CSS
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
CSS là gi`? Tại sao nên sử dụng CSS • Tạisaonênsửdụng CSS: • Tiếtkiệmcôngsức • Kiểmsoátkiểucáchvàsựsắpđặtcủanhiềutrangmộtlần.
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
Thứ tự xếp lớp Mặc định của trình duyệt External style sheet Internal style sheet Inline style sheet Thànhphần HTML
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.
Cú pháp CSS Ví 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; }
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}
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>
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>
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
Cú pháp CSS Ví dụ:*#wer345 {color: green} Style trên sẽ áp dụng cho phần tử đầu tiên có giá trị ID là “wer345”. H1 dưới đây được áp dụng style này. <h1 id=“wer345”>Some text </h1> • Lời chú thích trong CSS Dòng chú thích được đặt trong cặp dấu /**/ Ví dụ: /* Đây là dòng chú thích*/ p{ Text-align: center; Color: black /* Qui định màu chữ*/ }
Các cách sử dụng CSS External Style Sheet(Style bênngoài) Internal Style Sheet(bêntrongcặpthẻ <head>) Inline Style Sheet(Style nộituyến)
Các cách sử dụng CSS? • 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
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>
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>
Một số thuộc tính trong CSS • Thuộc tính Border • Thuộc tính Font • Thuộc tính Text • Thuộc tính Padding • Thuộc tính Margin
Một số thuộc tính trong CSS • Thuộc tính Border Qui định đường bao xung quanh một thành phần:
Một số thuộc tính trong CSS • Thuộc tính font: Qui định phông chữ trong văn bản.
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.
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.
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ử
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
Một số thuộc tính trong CSS Margin Border padding Width x height
