Skocz do zawartości


tablety.pl
Zdjęcie
* * * * * 1 głosy

CSS - Podstawy




  • Zaloguj się, aby dodać odpowiedź
1 odpowiedź w tym temacie

#1 barblask

barblask

    Good Rank

  • Użytkownicy +
  • 637 postów
  • Płeć:Mężczyzna
  • Lokalizacja:Skąd? Ja wiem skąd

Napisano 30 01 2006 - 00:36

css podstawy
Css steruje wyglądem naszej strony. Przy pomocy styli ustalamy rozmiary, pozycje, zachowanie się i inne atrybuty potrzebne do ułożenia na stronie tak jak sobie chcemy wszystkich jej elementów.

Możemy stosować style na trzy sposoby. Dla przykładu będziemy powiększać czcionkę tekstu w znaczniku <p>. Mamy sobie: <p>jakiś tekst</p>

1. Możemy nadać styl w samym kodzie strony
i wyglądać to będzie tak:
<p style="font-size: 25px;">jakiś tekst</p>

2. Wewnętrzny arkusz styli.
W sekcji head umieszczamy
<head>
  <style type="text/css">
	<!--
			p {font-size: 25px;}
	 -->
  </style>
</head>

a w body zostaje nie zmienione <p>jakiś tekst</p>
Dodatkowo takie rozwiązanie zmieni wszystkie teksty w <p>, czyli jeśli napiszemy następne akapity na tej stronie to też będą one miały tekst wielkości 25 pikseli.

3. Zewnętrzny arkusz styli.
Jeśli chcielibyśmy w jednym miejscu edytować wygląd dla wszystkich stron i w jednej linijce(dla naszego przykładu)powiększyć wszystkie <p> to do tego jest zew. arkusz styli.
<body> tak jak wyżej jest nieruszone, natomiast różni się <head>. Tam wstawiamy link do zewnętrznego pliku styli:
<head>
	<link rel="stylesheet" href="ścieżka_do/style.css" type="text/css">
</head>

gdzie ścieżka.css należy zastąpić ścieżką do pliku który zaraz zrobimy. Tę linijkę umieszczamy w każdej stronie która ma korzysta z tych styli.

Robimy nowy pliczek i w moim przypadku umieszczam go w katalogu ścieżka_do i nazywam style.css(ważne jest tylko rozszerzenie).
Cały plik style.css wyglądać będzie tak
p {font-size:25px;}



Jeśli piszemy w zewnętrznym, lub wewnętrznym arkuszu styli należy pamiętać o nawiasach {} nawet, jeśli miały by być puste. Druga sprawa to nie wolno zapomnieś o średnikach ; .

#2 barblask

barblask

    Good Rank

  • Użytkownicy +
  • 637 postów
  • Płeć:Mężczyzna
  • Lokalizacja:Skąd? Ja wiem skąd

Napisano 30 01 2006 - 01:32

Hurtowa edycja elementów-arkusz styli
Gdy chcemy edytować na kilka sposobów wygląd tego samego elementu i korzystamy z pierwszego sposobu (patrz post wyżej) to nie ma najmniejszego problemu. style="" i tak piszemy w każdym edytowanym elemencie. Ale jeśli korzystamy z zew. lub wew. arkusza styli, a na stronie chcemy różne akapity różnie formatować należy im nadać ID. ID nadajemy w elemencie formatowanym czyli <p id="wielki">jakiś tekst</p>. Mamy sobie dwa akapity.
<p id="wielki">jakiś tekst</p>
<p id="czerwony">inny tekst</p>

Pierwszy akapit nazwałem 'wielki' a drugi 'czerwony'.
Teraz w arkuszu styli wpisujemy
#wielki {font-size: 25px;}
#czerwony {color: red}

Po takim zabiegu wszystko co będzie w <p id="wielki"></p>Będzie pisane dużymi literami, a wszystko co będzie w <p id="czerwony"> będzie pisane normalnymi, ale czerwonymi literami.

Jeśli chcemy aby np.akapity wyglądały wyglądały inaczej w różnych częściach strony(czyt. różnych częściach kodu ;) ) możemy zrobić to bez nadawania ID. Weźmy dla przykładu <table> i <center>. Gdzieś w tabelce jest <p>tekst w tabelce</p> a poza tabelką mamy też <center><p>tekst wyśrodkowany<p><center>Czyli mniej więcej tak:
<body>
    <table>
        <tr>
            <td> <p>tekst w tabelce</p> </td>
        </tr>
    </table>
    <center>
                <p>tekst wyśrodkowany</p>
    </center>
</body>

Aby 'tekst wyśrodkowany' był troszkę większy, natomiast 'tekst w tabelce' był czerwony w stylach piszemy
center p {font-size:15px;}
table p {color:red;}

Ktoś może zauważyć, że ten sam efekt uzyskamy po :
center {font-size:15px;}
table {color:red;}

Ten kod zmienia wszystko co jest w <table> na czerwone litery, a w <center> na czerwone. A ja chciałem zmienić tylko akapity. Jeśli w np. tabelce umieszczę np. listę <li> to przy pierwszym kodzie czerwony będzie tylko akapit, przy drugim akapit i lista też.

Jeśli robisz stronę w oparciu o tabele, czy też divy Dobrze jest każdej sekcji strony nadać osobne ID np. #naglowek #tresc #menu #stopka. Tabela będzie wyglądała tak:
<body>
   <table>
      <tr>
         <td>&nbsp;</td>
         <td id="naglowek">         </td>
      </tr>
      <tr>
         <td id="menu">             </td>
         <td id="tresc">            </td>
      </tr>
      <tr>
         <td>&nbsp;</td>
         <td id="stopka">           </td>
      </tr
   </table>
</body>

A dla DIVów tak:
<body>
<div id="naglowek">        </div>
<div id="menu">            </div>
<div id="tresc">           </div>
<div id="stopka">          </div>
</body>

Wtedy możemy oddzielnie edytować elementy w każdym z tych miejsc na stronie.

Chcemy mieć:
- w #menu wszystko pisane na czerwono.
- w #tresc zielone akapity<p>, a tekst pogrubiony<b> dodatkowo wielkości 25px.
- w #naglowek i #stopka wszystko niebieskie (nie tylko akapity).
- dodatkowo wszystkie tytuły <h1> na całej stronie chcemy mieć pisane czcionką 12px.
Wygląda to tak:
#menu {color:red;}
#tresc p {color:green;}
#tresc b {color:green;font-size:25px;}
#naglowek,#stopka {color:blue;}
h1 {font-size:12px;}

Wszystko powinno być jasne. #nagłowek i #stopka dałem po przecinku ponieważ mają te same wartości w nawiasie. Przy '#tresc b' w nawiasie są dwie wartości oddzielone średnikiem. 'h1' ma być wszędzie formatowany więc stoi sobie samotnie.
ps.:tabele jak i divy zostawiłem puste. Możecie sobie powstawiać tam co chcecie i potestować.
ps2.: tabele i divy będą się wam rozjeżdżały ale możecie w css dodać
#nagłówek,#stopka{width:100%;float:left;}
#tresc {width:80%;float:right;}
#menu{width:20%;float:left;}

Natomiast jeśli chcecie zobaczyć jak się układają to wystarczy pokolorować tła dodając jeszcze np.to:
#naglowek{background:#9c0}/*sraczkowaty kolor*/
#menu{background:#3f0}/*seledynowe tlo*/
#tresc{background:#f6f}/*jakieś takie różowe*/
#stopka{background:#bbb}/*szary odklad*/

i już nie powinno być problemów

To tyle słowem wstępu do świata css. Powinno te parę słów ułatwić poszukiwania wymarzonego desingu :angry: .

Na deser podam link do stronki pod którą są pisane różne style(www.csszengarden.com).
Czysta wersja bez styli
189.css
171.css
066.css
051.css
i cała masa innych

:D :D :)
=========
Błędy są naszym najskrytszym wyborem. Wiedz błądźmy, badźmy...




Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych