Jump to content
Sign in to follow this  
Jose

[CSS] Kurs CSS

Recommended Posts

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 ®

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...