docStyle (CSS) (część II)
download 
Reklamacja Transkrypt
Style (CSS) (część II)
Style (CSS)
(część II)
Marginesy
marginesy zewnętrzne: margin-top, margin-bottom, margin-left, marginn-right
np.: margin-top:12px; lub margin: top right bottom left, margin: topbottom,
rightleft, margin: all np.: margin: 10px 30px;
marginesy wewnętrzne: padding-top, padding-bottom, padding-left, paddingright , np.: padding-top:12px; lub padding: top right bottom left, padding:
topbottom, rightleft, padding: all np.: margin: 10px 30px;
Obramowania
Styl ramki border-style , wartości: np. none , dotted , dashed , solid.
Grubość ramki border-width, wartości np.: thin, medium, thick.
Kolor ramki border-color definiowany za pomocą standardowych określeń.
Obramowania cząstkowe
Górna część ramki border-top: kolor, grubość, styl, lub border-top-color,
border-top-width , border-top-style .
Dolna, lewa, prawa część ramki border-bottom, border-left, border-right.
Tabele w CSS
Atrybut border - pierwszeństwo ma styl CSS, tylko nie określone obramowania
w CSS będą prezentowane zgodnie z border z HTML.
Rozmiary elementów na stronie
Metody: width, height, auto (przeglądarka sama dobiera rozmiar)
Kontrola przeglądarki:
Atrybut overflow, wartości: visible nadmiarowa zawartość jest widoczna,
hidden nadmiarowa zawartość nie jest widoczna, scroll dostępne są zawsze
paski przewijania, auto w przypadku wystąpienia nadmiarowej zawartości będą
widoczne paski przewijania.
Zmiana rozmiaru elementu
Atrybut:max-width, min-width, max-height, min-height .
Pozycjonowanie elementu na stronie
Cecha position, wartości: absolute pozycjonowanie jest ustalane względem
najbliższego elementu nadrzędnego, fixed pozycja jest ustalana względem okna
przeglądarki, relative pozycja względna, static - właściwości: top, bottom,
left, right. są ignorowane, pozycja elementu wynika ze struktury dokumentu
(domyślne).
div{ position:relative;
width:250px;
height:50px;
background-color:red;
border:2px solid black; }
Kadrowanie elementów
Cecha clip, wartości auto lub rect (działa tylko dla pozycjonowania absolute)
#img1{
position:absolute;
/* rect(pgY, pgX, ldY, ldX) */
clip:rect(0px,120px,100px,10px);
}
Ukrywanie elementów
Cecha visibility wartości visible, hidden, collapse (wiersz lub kolumna tabeli
ukryta)
Zmiana sposobu wyświetlania elementów
Cecha display wybrane wartości block element wyświetlany blokowo(jeden
pod drugim), inline element wyświetlany wierszowo, list-item - wyświetlany
jak element listy, table element zachowuje się podobnie jak do tabela.
np.
#w1{ display:inline; }
Przepływ na stronie
Cecha flow (powoduje przepływ elementu o ile tylko jest wolna przestrzeń),
wartości left - lewy przepływ, right - prawy przepływ, none - brak.
<head>
<meta http-equiv="content-type" content="text/html; charset=Windows1250">
<title>Moja strona WWW</title>
<style type="text/css">
div{
border:2px solid black;
background-color:green;
margin:4px;
width:100px;
height:40px;
}
#w1{float:right}
</style>
</head>
<body>
<div id="w1">Pierwsza warstwa</div>
<div id="w2">Druga warstwa</div>
</body>
Wyłączanie przepływów
Cecha clear, wartości left blokuje lewy przepływ, right blokuje prawy
przepływ, both blokuje z obu stron.
#w1{float:right;}
#w2{clear:right;}
Przykład: Otaczanie tekstem
</head>
<style type="text/css">
#n1{ float:right;
border:1px solid black;
margin:2px 8px 0px 5px;
padding:2px;
width:10em;
text-align:right;
background-color:yellow;
#i1{ float:left;
margin:2px 18px; }
p{ text-align:justify; }
}
</style>
</head>
<body>
<h3 id="n1">To jest krótka informacja o autorze witryny</h3>
<p>
<img src="obraz.jpg" alt="obraz" id="i1" /><span>
----- Tekst ------</span></p>
</body>
Zadania do wykonania:
1. Napisz kod, w którym dwa akapity znajdujące się obok siebie zostaną objęte jednym
obramowaniem.
2. Utwórz dwa akapity na stronie. Oba elementy powinny mieć obramowania w różnych
kolorach. Ramki obu elementów powinny się stykać.
3. Umieść na stronie tekst, który będzie w całości objęty podwójną ramką kreskowaną
o szerokości linii 5 pikseli.
4. Wykorzystując style CSS napisz kod tabeli zawierający 5 wierszy, w której
poszczególne wiersze będą oddzielone poziomymi liniami.
5. Wykorzystując style CSS utwórz tabelę o trzech kolumnach, każda kolumna będzie
miała osobne jednolite obramowanie
6. Napisz kod strony, w której obszar dokumentu zawiera obramowanie i jest
ograniczony do rozmiarów 200 na 100 pikseli.
7. Umieść na stronie trzy warstwy o rozmiarach 200 na 100 pikseli ustawione obok
siebie w jednym rzędzie. (nie używaj pozycjonowania bezwzględnego).
8. Umieść na stronie niewielki obraz, znajdujący się na stałe w prawym dolnym rogu
okna przeglądarki. Obraz powinien być odnośnikiem do dowolnego adresu WWW.
9. Użyj stylów CSS do sformatowania formularza z poprzednich zajęć laboratoryjnych.
10. Umieść na stronie tekst rozmieszczony w dwóch osobnych szpaltach. W każdej
szpalcie powinien być tytuł oblewany tekstem od prawej strony.
