ppt

Download Report

Transcript ppt 

Cascading Style Sheet (CSS)
CSS
• การใช้งาน CSS
• Class และ ID
• Pseudo Class
การใช้งาน CSS
1.
2.
3.
การใส่ CSS แบบ inline
การใส่ CSS ที่ < HEAD>
การใส่ CSS แบบ import file
การใช้งาน CSS, การใส่ CSS แบบ inline
<TAGNAME STYLE=attribute1:value1;attribute2:value2;…,
attribute n:value n;>
TAGNAME : ชื่อ tag ใดๆของ html
attribute1, attribute2, attribute n : ชื่อรู ปแบบ
value1,value2,value n : ค่าที่กาหนดให้รูปแบบ
การใช้งาน CSS, การใส่ CSS แบบ inline
ตย.
<HTML><HEAD></HEAD><BODY>
<B>Line1</B>
<B STYLE=color:red;>Line2</B>
<B>Line3</B>
</BODY></HTML>
การใช้งาน CSS, การใส่ CSS แบบ inline
ตย.
<HTML><HEAD></HEAD><BODY>
<B>Line1</B>
<B STYLE=font-size:14pt;color:red;>Line2</B>
<B>Line3</B>
</BODY></HTML>
การใช้งาน CSS, การใส่ CSS แบบ inline
ตย.
<HTML><HEAD></HEAD><BODY>
<H1> Line1 </H1>
<H1 STYLE=font-size:14pt;color:red;text-align :center;> Line2 </H1>
<H1>Line3</H1>
</BODY></HTML>
การใช้งาน CSS, การใส่ CSS ที่ <HEAD>
<HEAD>
<STYLE TYPE=text/css>
TAGNAME {
attribute1 : value1;
attribute2 : value2;
…
attribute n : value n;
}
</STYLE>
</ HEAD >
การใช้งาน CSS, การใส่ CSS ที่ <HEAD>
TAGNAME : ชื่อ tag ของ html ที่ไม่มี < >
attribute1, attribute2, attribute n : ชื่อรู ปแบบ
value1,value2,value n : ค่าที่กาหนดให้รูปแบบ
ตย.
การใช้งาน CSS, การใส่ CSS ที่ <HEAD>
<HTML><HEAD>
<STYLE TYPE=text/css>
B{
font-size:14pt;
color:red;
}
</STYLE>
</HEAD>
<BODY>
<B>Line1</B>
<B>Line2</B>
<B>Line3</B>
</BODY></HTML>
ตย.
การใช้งาน CSS, การใส่ CSS ที่ <HEAD>
<HTML><HEAD>
<STYLE TYPE=text/css>
B{
font-size:14pt;
color:red;
}
H1{font-size:14pt;color:red;}
</STYLE>
</HEAD>
<BODY>
<B>Line1</B> <B>Line2</B> <B>Line3</B>
<H1>Line4</H1> <H1>Line5</H1> <H1>Line6</H1>
</BODY></HTML>
การใช้งาน CSS, การใส่ CSS แบบ import file
ไฟล์ Style.css
TAGNAME {
attribute1 : value1;
attribute2 : value2;
…
attribute n : value n;
}
TAGNAME : ชื่อ tag ของ html ที่ไม่มี < >
attribute1, attribute2, attribute n : ชื่อรู ปแบบ
value1,value2,value n : ค่าที่กาหนดให้รูปแบบ
การใช้งาน CSS, การใส่ CSS แบบ import file
ไฟล์ page.html
<LINK REL=stylesheet TYPE=text/css HREF=stylefile.css >
stylefile.css : ชื่อไฟล์ที่เก็บ style sheet ไว้ตอ้ งเป็ น .css
การใช้งาน CSS, การใส่ CSS แบบ import file
ตย. mystylefile.css
B{
font-size:14pt;
color:red;
}
H1{font-size:14pt;color:red;}
การใช้งาน CSS, การใส่ CSS แบบ import file
ตย. testpage.html
<HTML><HEAD>
<link rel=stylesheet type=text/css href=mystylefile.css>
</HEAD>
<BODY>
<B>Line1</B> <B>Line2</B> <B>Line3</B>
<H1>Line4</H1> <H1>Line5</H1> <H1>Line6</H1>
</BODY></HTML>
Class และ ID
การใส่ CSS แบบ inline และ การใส่ CSS ที่ < HEAD>
ทาให้เสี ย tag ของ html ไป 1 tag โดยไม่สามารถเรี ยกใช้รูปแบบเดิมได้
การใช้ Class และ ID แก้ปัญหานี้ได้
1.
2.
Class
ID
Class
.CLASSNAME {
attribute1 : value1;
attribute2 : value2;
…
attribute n : value n;
}
.CLASSNAME : ชื่อ Class
attribute1, attribute2, attribute n : ชื่อรู ปแบบ
value1,value2,value n : ค่าที่กาหนดให้รูปแบบ
Class
ตย. testpage.html (ใช้ Class สำหรับกำรใส่ CSS ใน <HEAD>)
<HTML><HEAD>
<STYLE TYPE=text/css>
.myred{font-size:14pt;color:red;}
.mygreen{font-size:20pt;color:green;}
</STYLE>
</HEAD>
<BODY>
<B>Line1</B> <B class=myred>Line2</B> <B class=mygreen>Line3</B>
<H1>Line4</H1> <H1 class=mygreen>Line5</H1> <H1 class=myred>Line6</H1>
</BODY></HTML>
Class
ตย. mystylefile.css (ใช้ Class สำหรับกำรใส่ CSS แบบ import file)
.myred{
font-size:14pt;
color:red;
.mygreen{
font-size:20pt;
color:green; }
}
Class
ตย. testpage.html (ใช้ Class สำหรับกำรใส่ CSS แบบ import file)
<HTML><HEAD>
<link rel=stylesheet type=text/css href=mystylefile.css>
</HEAD>
<BODY>
<B>Line1</B> <B class=myred>Line2</B>
<B class=mygreen>Line3</B>
<H1>Line4</H1> <H1 class=mygreen>Line5</H1>
<H1 class=myred>Line6</H1>
</BODY></HTML>
ID
#ID {
attribute1 : value1;
attribute2 : value2;
…
attribute n : value n;
}
#ID : ชื่อ ID
attribute1, attribute2, attribute n : ชื่อรู ปแบบ
value1,value2,value n : ค่าที่กาหนดให้รูปแบบ
ID
ตย. testpage.html (ใช้ ID สำหรับกำรใส่ CSS ใน <HEAD>)
<HTML><HEAD>
<STYLE TYPE=text/css>
#myred{font-size:14pt;color:red;}
#mygreen{font-size:20pt;color:green;}
</STYLE>
</HEAD>
<BODY>
<B>Line1</B> <B id=myred>Line2</B> <B id=mygreen>Line3</B>
<H1>Line4</H1> <H1 id=mygreen>Line5</H1> <H1 id=myred>Line6</H1>
</BODY></HTML>
ID
ตย. mystylefile.css (ใช้ ID สาหรับการใส่ CSS แบบ import file)
#myred{
font-size:14pt;
color:red;
#mygreen{
font-size:20pt;
color:green; }
}
ID
ตย. testpage.html (ใช้ ID สาหรับการใส่ CSS แบบ import file)
<HTML><HEAD>
<link rel=stylesheet type=text/css href=mystylefile.css>
</HEAD>
<BODY>
<B>Line1</B> <B id=myred>Line2</B>
<B id=mygreen>Line3</B>
<H1>Line4</H1> <H1 id=mygreen>Line5</H1>
<H1 id=myred>Line6</H1>
</BODY></HTML>
Pseudo Class
เป็ นการกาหนดรู ปแบบตัวอักษร/รู ปภาพของการเชื่อมโยง มี 4 ตัว
1.
2.
3.
4.
A:LINK การเชื่อมโยงที่ยงั ไม่ได้เรี ยกใช้
A:ACTIVE การเชื่อมโยงที่กาลังเรี ยกใช้ กาลังเปิ ดเพจ
A:VISITED การเชื่อมโยงที่เรี ยกใช้แล้ว
A:HOVER การเชื่อมโยงที่เมาส์ช้ ี
Pseudo Class
ตย. testpage.html (ใช้ Pseudo Class สำหรับกำรใส่ CSS ใน <HEAD>)
<HTML><HEAD>
<STYLE TYPE=text/css>
A:LINK{
font-size:14pt;
color:red;
text-decoration: underline;
}
A:ACTIVE{
font-size:14pt;
color:BLUE;
text-decoration: none;
}
A:VISITED{
font-size:14pt;
color:GREEN;
text-decoration: none;
}
A:HOVER{
font-size:14pt;
color:YELLOW;
text-decoration: none;
}
</STYLE>
</HEAD>
<BODY>
<A href="HTTP://www.google.co.th">SEARCH</A>
</BODY></HTML>
Pseudo Class
ตย. mystylefile.css (ใช้ Pseudo Class สำหรับกำรใส่ CSS แบบ import file)
A:LINK{
font-size:14pt;
color:red;
text-decoration: underline;
}
A:ACTIVE{
font-size:14pt;
color:BLUE;
text-decoration: none;
}
A:VISITED{
font-size:14pt;
color:GREEN;
text-decoration: none;
}
A:HOVER{
font-size:14pt;
color:YELLOW;
text-decoration: none;
}
Pseudo Class
ตย. testpage.html (ใช้ Pseudo Class สำหรับกำรใส่ CSS แบบ import file)
<HTML><HEAD>
<link rel=stylesheet type=text/css href=mystylefile.css>
</HEAD>
<BODY>
<A href="HTTP://www.google.co.th">SEARCH</A>
</BODY></HTML>
แทก STRONG
<STRONG> TEXT</STRONG>
ให้ผลการทางานเหมือน
<B>TEXT</B>
แทก SPAN
SPAN แทกที่ไม่มีการใช้เป็ นข้อกาหนดตัวอักษรใดๆ
inline
<SPAN STYLE=attribute:value;>text</SPAN>
class
<SPAN CLASS=classname>text</SPAN>
id
<SPAN ID=idname>text</SPAN>
แทก <TABLE>
<TABLE ID=idname>
<TR ID=idname>
<TD ID=idname>text1</TD>
<TD>text2</TD>
</TR>
<TABLE>
แทก <TABLE>
<TABLE STYLE=style_in_line>
<TR STYLE=style_in_line>
<TD STYLE=style_in_line>text1</TD>
<TD>text2</TD>
</TR>
<TABLE>
แทก <TABLE>
<TABLE CLASS=classname>
<TR CLASS=classname>
<TD CLASS=classname>text1</TD>
<TD>text2</TD>
</TR>
<TABLE>
แทก <TABLE>
ตย. mystylefile.css (ใช้ Class สำหรับกำรใส่ CSS แบบ import file)
.myyellow{
font-size:30pt;
color:yellow;
.mygreen{
font-size:20pt;
color:green; }
.mysmall{
font-size:10pt;}
}
แทก <TABLE>
ตย. testpage1.html (ใช้ Class สำหรับกำรใส่ CSS แบบ import file)
<HTML><HEAD>
<link rel=stylesheet type=text/css href=mystylefile.css>
</HEAD><BODY>
<TABLE>
<TR CLASS=myyellow>
<TD>LINE1</TD>
<TD>LINE2</TD>
</TR>
<TR>
<TD CLASS=mygreen>LINE3</TD>
<TD>LINE4</TD>
</TR>
<TABLE>
</BODY></HTML>
Class
ตย. testpage2.html (ใช้ Class สำหรับกำรใส่ CSS แบบ import file)
<HTML><BODY>
<HEAD>
<link rel=stylesheet type=text/css href=mystylefile.css>
</HEAD>
<TABLE CLASS=myyellow>
<TR>
<TD>LINE1</TD>
<TD>LINE2</TD>
</TR>
<TR>
<TD CLASS=mysmall>LINE3</TD>
<TD>LINE4</TD>
</TR>
<TABLE>
</BODY></HTML>
หมายเหตุ(Comment)
/* comment */
Work2 CSS
1. เรี ยกเปิ ด work2_CSS_After ใน Browser แล้วทางานกับ
work2_CSS_Before เพื่อให้ได้ผลลัพธ์เหมือนใน work2_CSS_After
2. อ่านเพิ่มเติมเรื่ อง CSS
http://realdev.truehits.net/cascade/charpter1.php
หัวข้อ Pseudo Class
Advance Rules
References