Forum.Legalne.info: [CSS] Kurs CSS - Forum.Legalne.info

Skocz do zawartości

Otwarty

Ikona Shoutbox

    Rozszerz pole shoutboxa

Ikona Zaloguj się na forum

    • Login:
    • Hasło:


    Zapamiętaj mnie
Strona 1 z 1
  • Nie możesz rozpocząć nowego tematu
  • Nie możesz odpowiadać w tym temacie

[CSS] Kurs CSS

#1 Użytkownik jest niedostępny   Jose 

  • Rozkręca się
  • Grupa: Użytkownicy
  • Postów: 14
  • Dołączył: 12-April 09
  • Miejscowość127.0.0.1

Napisany 23 May 2009 - 11:23 AM

Czym jest CSS?
CSS (Cascading Style Sheets - Kaskadowe Arkusze Stylów) to język

internetowy do określenia wyświetlenia strony WWW. CSS jest ściśle

powiązane z (x)HTML, bez którego nie miało by do czego służyć.

Kurs CSS

Umieszczanie CSS

Są na to cztery sposoby : zewnętrzny arkusz, arkusz importowany, wewnętrzny

arkusz, oraz wydzielanie CSS w bloku.

1. Należy stworzyć plik style.css, wypełnić go treścią, oraz pomiędzy

znacznikami <head> i </head> wpisać
<link rel="stylesheet" type="text/css" href="style.css" />


2. Aby zaimportować style z innego serwera, należy w sekcji head strony wpisać

<style type="text/css">
 /* <![CDATA[ */
 @import url(adres zewnętrznego arkusza stylów);
 /* ]]> */
 </style>


3. Wewnętrzny arkusz wstawiamy poprzez kod
<style type="text/css">zawartość naszego css'a</style>


4. Możemy również dopisać arkusz to wybranego bloku. Żeby to zrobić, należy

wpisać kod
<selektor style="nasze style">treść bloku</selektor>

Oczywiście zamiast selektor wpisujemy nasz znacznik np. div.

Komentarze

Do naszych stylów dopisujemy
/* KOMENTARZ CSS */


Ogólna struktura CSS

selektor {
 
 atrybut: wartosc;
 
 }


Typografia

Kolor czcionki
Żeby ustawić kolor czcionki, należy wpisać
color: #color; /* w miejsce #color wpisujemy kolor w RGB */


Czerwony - #FF0000
Biały - #FFFFFF
Czarny - #000000
itd, itp.

Rozmiar czcionki
Żeby ustalić rozmiar czcionki należy wpisać
font-size: rozmiar; /* w miejsce rozmiar wpisujemy rozmiar w pikselach 
 np. 11px */


Krój czcionki
Żeby określić rodzaj czcionki wpisujemy
font-family: czcionka; /* w miejsce czcionka wpisujemy nazwę czcionki 
 np. Tahoma */


Dekoracja czcionki
Dekorować czcionki nie powinno się w html, ponieważ te znaczniki są

zdeprecjonowane, należy to robić w css, w ten sposób
text-decoration: dekoracja; /* zamiast dekoracja, wpiszemy jeden z 
 poniższych przykładów */

underline - podkreślenie
overline - nadkreślenie
line-through - przekreślenie
blink - miganie

oraz ten

font-style: styl; /* zamiast styl wpisujemy jeden z ponizszych przykladow 
 */

italic - kursywa
oblique - czcionka pochyła

i ten

font-weight: pogrubienie; / *zamiast pogrubienie wpisujemy bold, lub normal */


Pozycja na ekranie

Pozycja selektora

Żeby dany element był we wskazanym miejscu na stronie, należy użyć pozycji
absolutnej. Aby to zrobić, należy wpisać
position: absolute;
 top: xd; /* zamiast xd wpisujemy odleglosc w pikselach od gory */
 left: xd; /* zamiast xd wpisujemy odleglosc w pikselach od lewej strony */
 right: xd; /* zamiast xd wpisujemy odleglosc w pikselach od prawej strony */
 bottom: xd; /* zamiast xd wpisujemy odleglosc w pikselach od dolu */


Pozycja tekstu
text-align: wyrownanie; /* zamiast wyrownanie wpisujemy: */


left - do lewej strony
right - do prawej strony
center - do środka
justify - do obu stron

Margines
Margines (wcięcie) ustawiamy w ten sposób
margin-pozycja: wartosc; /* zamiast pozycja wstawiamy poniższe 
 przykłady a w miejsce wartosc margines w pikselach */


left - lewy margines
right - prawy margines
top -górny margines
bottom - dolny margines

Tło

Obrazek tła
Aby ustawić tło, jako obrazek, należy wpisać poniższy kod
background-image: url(adres_obrazka); /* w miejsce adres_obrazka 
 wpisujemy bezposredni link do naszego obrazka */


Kolor tła
Aby ustawić kolor tła, należy wpisać poniższy kod
background-color: kolor; /* w miejsce kolor wpisujemy kolor w RGB 
 */


Powtarzanie tła
background-repeat: powtarzanie; /* w miejsce powtarzanie wpisujemy 
 jeden z ponizszych wyrazen */


repeat - powtarzanie tła w obu kierunkach (domyślnie)
repeat-x - powtarzanie tła tylko w kierunku poziomym
repeat-y - powtarzanie tła tylko w kierunku pionowym
no-repeat - brak powtarzania tła (zostanie wyświetlone jako pojedynczy

obrazek)

Ramka

Grubość obramowania
border: liczba; /* jako liczba wpisujemy dowolna liczbe w px np. 0 
 */


Kolor obramowania
border-color: kolor; /* jako kolor wpisujemy kolor obramowania w RGB 
 */


Typ obramowania
border: typ; /* jako typ wpisujemy jeden z poniższych przykładów */

none - brak ramki
hidden - ukryta ramka
solid - tradycyjna, jedna linia
dotted - linia składająca się z kropek
dashed - linia składająca się z kresek
double - linia podwójna
groove - linia wklęsła przestrzenna
ridge - linia wypukła przestrzenna
inset - linia wklęsła
outset - linia wypukła

To już koniec :D. Mam nadzieję, że Wam pomogłem zapoznać się z CSS. W
wolnym czasie napiszę coś więcej o CSS.


By Jose © All right reserved ®
1

Prześlij ten temat:


Strona 1 z 1
  • Nie możesz rozpocząć nowego tematu
  • Nie możesz odpowiadać w tym temacie

1 Użytkowników czyta ten temat
0 użytkowników, 1 gości, 0 anonimowych użytkowników


               
           
       
Nasza strona internetowa wykorzystuje cookies (pol.: ciasteczka)

Na naszej stronie wykorzystujemy ciasteczka (ang. cookies), dzięki którym nasz serwis może działać lepiej - więcej o tym w Naszej polityce prywatności. W każdej chwili możesz wyłączyć ten mechanizm w ustawieniach swojej przeglądarki. Korzystanie z naszego serwisu bez zmiany ustawień dotyczących cookies, umieszcza je w pamięci Twojego urządzenia.

Akceptuję   Zmiana ustawień