Rozdział 7.
Przycinanie elementu
W odróżnieniu od określania właściwości width i heighł, które kontrolują wymiary elementu,
przycinanie określa, jaka część elementu będzie w rzeczywistości widoczna na ekranie. Reszta elementu cały czas będzie umieszczona na stronie, jednak będzie niewidoczna dla osób oglądających ją i traktowana przez przeglądarkę jako pusty obszar. Na rysunku 7.8 pierwszy obrazek został wyświetlony w całości, natomiast drugi jest przycięty.
1. polNpol {
Rozpocznij regułę podając selektor i otwierający nawias klamrowy. W tym przykładzie stworzona została klasa polNpol, którą będzie można wykorzystać w dowolnym znaczniku HTML-owym.
2. position: relative;
Określ położenie elementu, bądź to jako względne, bądź jako bezwzględne.
3. clip:
Zapisz właściwość clip i dwukropek.
4. rect(80 70)
Teraz zapisz rect, aby zdefiniować, że przycinany obszar będzie miał kształt kwadratu, Następnie zapisz nawias otwierający, dwie wartości oddzielone od siebie spacją i nawias zamykający. (Pierwsza podana w nawiasie wartość będzie określała szerokość obszaru, jaki będzie widoczny, natomiast druga - jego wysokość.) Obie wartości mogą być wielkościami określającymi długość lub słowem kluczowym auto, którego wykorzystanie sprawi, że wielkość przycinanego obszaru określi przeglądarka (zazwyczaj będzie to 100%).
5. ;}
Zakończ regułę podając średnik i zamykający nawias klamrowy }.
Listing 7.8. W Navigcitorze znacznik akapitu zostanie przycięty do szerokości 80 i wysokości 70 pikseli. Navigator ma problemy
w znaczniku obraz ka (<IUG>), dlatego też w tym przykładzie został on zagnieżdżony w akapicie
<html>
<head>
<meta http-equi'v-wContenr-TypeM -*content=Mtext/htinl; charser_=IS0-8859-2"> <title>Listing 7.8</title>
<style type="text/css">
.polNpol { position: relative; clip: ->rect( 80 70 ) ; }
</style>
</head>
cbody bgcolor="#FFFFFFH>
<IMG SRC=” . ./.i ma ges/rysi .gif” width=*"150" height. ■" 126" align="left">
<p class="polNpol">
<IMG SRC-"../images/rysl .gif'' width=”150M height"”126" aiign«"left" >
</p>
</body>
</html>
E>le Ed* yisw Cpinnry/^toi y&fc
' di. / 3 :>'» ^ -i m
6*d R*smo Hotn* Sctarch Gucte Ptiol Seanły S JMHi
i ' -M.ąpya z
Rysunek 7.8. Pierwsza wersja obrazka w ogóle nie jest obcięta, wersja druga jest przycięta w połowie szerokości i wysokości
128