›
›

Bài giảng Thiết kế và lập trình Web - Bài 3: CSS – Casscading Style Sheets

Download
Thiết kế và lập trình Web  
Bꢀi 3  
CSS – Casscading Style Sheets  
Viện CNTT & TT  
Thiết kế và lập trình Web  
Nội dung  
. Giới thiệu CSS  
. Định nghĩa Style  
. Sử dụng và Phân loại CSS  
. Selector trong CSS và phạm vi ảnh hưởng  
Thiết kế và lập trình Web  
Nội dung  
. Giới thiệu CSS  
. Định nghĩa Style  
. Sử dụng và Phân loại CSS  
. Selector trong CSS và phạm vi ảnh hưởng  
Thiết kế và lập trình Web  
Giới thiệu về CSS  
. CSS = Casscading Style Sheets  
. Dùng để mô tả cách hiển thị các thành phần trên trang  
WEB  
. Ban đầu HMTL  
– Tập các quy tắc cho phép NSD xem các trang Web  
– Không hỗ trợ nhà thiết kế có nhiều quyền chi phối thiết  
kế  
=> Các trình duyệt bổ sung thêm các thẻ HTML riêng,  
không theo chuẩn  
. W3C (World Wide Web Consortium) ra đời CSS cho  
phép hỗ trợ nhà thiết kế  
Thiết kế và lập trình Web  
Giới thiệu về CSS  
. Style tiết kiệm thời gian  
. CSS dễ thay đổi  
. Sự nhất quán  
. Khả năng chi phối đa dạng  
. Tạo ra định dạng chung cho toàn bộ Web  
Thiết kế và lập trình Web  
Without CSS  
With CSS  
Thiết kế và lập trình Web  
Nội dung  
. Giới thiệu CSS  
. Định nghĩa Style  
. Sử dụng và Phân loại CSS  
. Selector trong CSS và phạm vi ảnh hưởng  
Thiết kế và lập trình Web  
Định nghĩa Style  
Kiểu 1  
<tag style =  
Kiểu 2  
SelectorName {  
property1:value1;  
property2:value2;  
………  
“property1:value1;  
property2:value2;  
………  
propertyN:valueN;}  
propertyN:valueN;”>…</tag>  
<tag class = “SelectorName”>  
………  
</tag>  
Ví dụ:  
Ví dụ:  
<h1 style=“  
.TieuDe1 {  
color : blue;  
color: red;  
font-family : Arial;” > DHKHTN </h1>  
font-family: Verdana, sans-serif; }  
<h1 class=“TieuDe1”> DHBKHN </h1>  
Thiết kế và lập trình Web  
Định nghĩa Style – Ghi chú  
. Giống Ghi chú trong C++  
. Sử dung /*Ghi chú*/  
. Ví dụ :  
. SelectorName {  
property1:value1; /*Ghi chu 1*/  
property2:value2; /*Ghi chu 2*/  
………  
propertyN:valueN;}  
Thiết kế và lập trình Web  
Nội dung  
. Giới thiệu CSS  
. Định nghĩa Style  
. Sử dụng và Phân loại CSS  
. Selector trong CSS và phạm vi ảnh hưởng  
Thiết kế và lập trình Web  
Sử dụng và Phân loại CSS – Phân loại  
. Gồm 3 loại CSS  
– Inline Style Sheet (Nhúng CSS vào tag HTML)  
– Embedding Style Sheet (Nhúng CSS vào trang web)  
– External Style Sheet (Liên kết CSS với trang web)  
Thiết kế và lập trình Web  
Sử dụng và Phân loại CSS - Inline Style Sheet  
. Định nghĩa style trong thuộc tính style của từng tag  
HTML.  
. Theo cú pháp kiểu 1.  
. Không sử dụng lại được.  
. Ví dụ:  
<H1 STYLE="color: yellow">This is yellow</H1>  
Thiết kế và lập trình Web  
Sử dụng và Phân loại CSS - Embedding Style Sheet  
. Còn gọi là Internal Style Sheet hoặc Document-Wide Style Sheet  
. Mọi định nghĩa style được đặt trong tag <style> của trang HTML.  
. Định nghĩa style theo cú pháp kiểu 2.  
. Trang HTML có nội dung như sau:  
<head>  
<style type=“text/css” >  
<!--  
SelectorName {  
property1:value1;  
property2:value2;  
………  
propertyN:valueN;}  
-->  
</style>  
</head>  
Thiết kế và lập trình Web  
Sử dụng và Phân loại CSS - Embedding Style Sheet  
<HTML>  
<HEAD>  
<TITLE>  
Embedded Style Sheet  
</TITLE>  
<STYLE TYPE="text/css">  
<!--  
P {color: red;  
font-size: 12pt;  
font-family: Arial;}  
-->  
</STYLE>  
</HEAD>  
<BODY BGCOLOR="#FFFFFF">  
<P>This is red, 12 pt. and Garamond.</
</BODY>  
</HTML>  
Thiết kế và lập trình Web  
Sử dụng và Phân loại CSS - External Style Sheet  
. Mọi style đều lưu trong file có phần mở rộng là *.CSS.  
. File CSS: lưu trữ nhiều style theo cú pháp kiểu 2.  
. Trong file HTML: liên kết bằng tag link. Cú pháp:  
. Trang HTML : Liên kết bằng tag style với @import url. Cú pháp  
Thiết kế và lập trình Web  
Sử dụng và Phân loại CSS - External Style Sheet  
Trong tập tin MyStyle.CSS  
H2  
Trong trang Web : demo.htm  
<html>  
{
<head>  
FONT-WEIGHT: bold;  
FONT-SIZE: 16pt;  
COLOR: white;  
FONT-STYLE: italic;  
FONT-FAMILY: Arial;  
BACKGROUND-COLOR: red;  
font-color: white  
}
<title>Cass………</title>  
<link HREF="MyStyle.css"  
REL="stylesheet" >  
</head>  
<body>  
<h2>This is an H2 </h2>  
</body>  
</html>  
Thiết kế và lập trình Web  
Sử dụng và Phân loại CSS – So sánh, Đánh giá  
Inline Style Sheet  
Embedding Style Sheet  
External Style Sheet  
Khai báo  
Kiểu 1  
Kiểu 2  
Kiểu 2  
<p style=“color:red;”>  
Test  
</p>  
<style type=“text/css”>  
.TieuDe1{color: red;}  
</style>  
<link rel=“stylesheet “  
href=“main.css” />  
Cú pháp  
<p class=“TieuDe1”>  
Test  
</p>  
<p class=“TieuDe1”>  
Test  
</p>  
Ưu điểm  
Khuyết điểm  
Thiết kế và lập trình Web  
Sử dụng và Phân loại CSS – Độ ưu tiên  
. Thứ tự ưu tiên áp dụng định dạng khi sử dụng các  
loại CSS (độ ưu tiên giảm dần) :  
1. Inline Style Sheet  
2. Embedding Style Sheet  
3. External Style Sheet  
4. Browser Default  
Thiết kế và lập trình Web  
Thiết kế và lập trình Web  
Nội dung  
. Giới thiệu CSS  
. Định nghĩa Style  
. Sử dụng và Phân loại CSS  
. Selector trong CSS và phạm vi ảnh hưởng  
Tải về để xem bản đầy đủ
pdf 75 trang yennguyen 20381 Free
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Thiết kế và lập trình Web - Bài 3: CSS – Casscading Style Sheets", để tải tài liệu gốc về máy hãy click vào nút Download ở trên

File đính kèm:

  • pdfbai_giang_thiet_ke_va_lap_trinh_web_bai_3_css_casscading_sty.pdf