CASCADING STYLE SHEET-CSS... Ví d : This paragraph has an inline style applied to it This paragraph is displayed in the default style.. This is the H1 element This is the H2 elemen
Trang 1CASCADING STYLE SHEET-CSS
Trang 3II PHÂNăLO I-CÁCHăT O
1 Phânălo iă: Có 3 lo i
– Inline style
– Internal style
– External style
Trang 4a) Inline style : L à ki u đ c gán cho m t dòng
Trang 5 Ví d :
<BODY>
<P style = “color:aqua ; font-Style:italic; text-
Align:center”>
This paragraph has an inline style applied to it
<P> This paragraph is displayed in the default style
<P> Can you see the <SPAN style = color:red> difference
</SPAN> in this line
</BODY>
Trang 6b) Internal style :
Là b ng m u thích h p cho trang riêng l v i nhi u v n
b n
– Cách t o: Ta b ng m u chung trên ph n đ u
trang trong c p tag <head>
– S d ng: Trong ph n body, n i dung nào
mu n s d ng đ nh d ng theo b ng m u trên
thì đ t trong tag đ c đ nh ngh a trong ph n
head
Trang 8<H1>This is the H1 element</H1>
<H2>This is the H2 element</H2>
<H3>This is the H3 element with its default style as displayed in the browser</H3>
</BODY>
</HTML>
Trang 9c) External style :
Là m t b ng ki u đ c l u tr thành m t file bên ngoài
và đ c liên k t v i trang HTML
B ng ki u này s đ c áp d ng và nh h ng cho t t c các trang c a m t website
Trang 12<H2> Changing the rules is fun</H2>
<P> Changing the rules may not be such fun <H2>The H2 element again</H2>
</BODY>
</HTML>
Trang 13III NHăB NGăM UăCHOăL Pă(CLASS)
Trang 14<P class=“water”>test water
<P class=“danger”>test danger
</BODY>
</HTML>
Trang 17 Các tag DIV và SPAN: có th k t n i v i các ph n t
c p kh i và ID đ t o ra các tag tu ý Trong đó DIV
phù h p v i các đ i t ng c p kh i, SPAN phù h p v i các đ i t ng c p hàng
Trang 181 T OăTAGăC PăKH IăTÙYăÝ
Trang 19 Áp d ng tag c p kh i tu ý vào trang HTML
Trang 22Áp d ng tag trong hàng tu ý vào trang HTML: T i đ u
Trang 23<SPAN class='control'> A </SPAN ><SPAN
style="color:red"> hardware device that allows the user to make electronic copies of graphics or text.</span>
<SPAN ID='intro'> Short for picture element A pixel refers to the small dots that make up an image on the screen </SPAN>
</BODY>
</HTML>
Trang 24VI CÁCăTHU CăTÍNHă NHăD NG
NHăD NGăV NăB N
Trang 26NHăD NGăDANHăSÁCH
List-style:circle ch m tròn r ng
List-style: disc ch m tròn đen
List-style: square ch m đen vuông
List-style: decimal đánh s r p
List-style: lower-alpha th t alpha
List-style: upper-alpha th t alpha ch in hoa
List-style: upper-roman s la mã hoa
List-style: lower-roman s la mã th ng
List-style-image:url: hình làm bullet
Trang 28NHăD NGăN NăTRANG
bacground-color: màu n n
background-image: nh n n
Background- position: v trí đ t nh n n g m các giá
tr :left, right, center, top, bottom,inherit
background-repeat: nh l p
– Repeat: l p trên c trang
– Repeat-x: l p theo chi u ngang
– Repeat-y: l p theo chiêù đ ng
background-attachment: gi nh cu n /không cu n
theo trang c a trình duy t
Trang 29 Ví d :
<body style="background-image:url( /image/h1.jpg); background-position:top; background-repeat:repeat-x; background-attachment:inherit">
Trang 30NHăD NGă NGăVI N
Trang 31NHăD NGăHYPERTEXTăLINK
Text-Decoration:none: không g ch d i
A:visited{color:#rrggbb}
A:link{styles cho v trí ch a đ c xem}
A:active{style cho nh ng link đang click}
A:hoever{style khi tr l t qua link}
a:hover { color: #FF00FF;}