css-tutoriale &laquo; WordPress.com Tag Feed http://wordpress.com/tag/css-tutoriale/ Feed of posts on WordPress.com tagged "css-tutoriale" Fri, 25 Jul 2008 18:30:47 +0000 http://wordpress.com/tags/ en <![CDATA[Tło na stronie CSS]]> http://webmasterka.wordpress.com/2008/01/03/tlo-na-stronie/ Thu, 03 Jan 2008 20:09:32 +0000 0wned http://webmasterka.wordpress.com/2008/01/03/tlo-na-stronie/ img

Jest to kolejny artykuł z serii "css dla początkujących". Tym razem pokażę jak zmienić kolor tła oraz jak wstawić powtarzające się tło (obrazek) na stronie. Aby wszystko w pełni funkcjonowało nie zapomnijmy o osadzeniu pliku style.css

1. Zmiana koloru tła strony. Wybieramy sobie dany kolor w postaci #HEX. Do tego celu możemy zajrzeć do poniższego linku:

plik style.css

html, body {
background-color: #000000; /* czarny kolor tła */
}

…………………………… . . . . .

2. Powtarzające się tło

plik style.css

html, body {
background-image:url(tlo.jpg); /* podajemy ścieżkę do tła */
background-repeat:repeat; /* ustawiamy powtarzanie */
}

Inne opcje:

  • reapeat-x; powtarzanie poziomo
  • repeat-y; powtarzanie pionowo
  • no-repeat; bez powtarzania

Weboholic: znajdziemy tutaj ciekawe tła

…………………………… . . . . .

3. Dwa tła na stronie

plik index.html

<div id="box1"></div>
<div id="box2"></div>

plik style.css

#box1 {
background-image:url(tlo.jpg);
background-repeat:repeat;
width:100px;
height:300px;
}
#box2 {
background-image:url(tlo2.jpg);
background-repeat:repeat;
width:200px;
height:100px;
}

Podgląd

]]> <![CDATA[Style css w osobnym pliku]]> http://webmasterka.wordpress.com/2008/01/03/style-css-w-osobnym-pliku/ Thu, 03 Jan 2008 18:50:27 +0000 0wned http://webmasterka.wordpress.com/2008/01/03/style-css-w-osobnym-pliku/ Jest kilka sposobów na to aby połączyć .html ze stylami css. Moim zdaniem najlepszą opcją jest odwołanie się do arkuszu stylów osadzonych w osobnym pliku. Dzięki temu możemy uniknąć niepotrzebnego bałaganu w kodzie, a skrypt który piszemy staje się bardziej czytelny.

W sekcji <head></head> umieszczamy następującą linijkę kodu:

<link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8" />

W pliku style.css na samej górze wstawiamy:

@charset "utf-8";

]]> <![CDATA[Przyciski w CSS - dla początkujących ! ]]> http://webmasterka.wordpress.com/2008/01/01/przyciski-css-dla-poczatkujacych/ Tue, 01 Jan 2008 17:05:50 +0000 0wned http://webmasterka.wordpress.com/2008/01/01/przyciski-css-dla-poczatkujacych/ przyciski

Tutorial pokazuje jak wykonać proste przyciski w CSS a właściwie menu w CSS. Po najechaniu myszką, przycisk zmieni swoje atrybuty. Sposób prosty lecz efektowny i estetyczny.

Potrzebne nam będą dwa pliki:

  • index.html
  • style.css

W pliku index.html w sekcji <head></head> podajemy ścieżkę do arkuszu stylów CSS:
<link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8" />

Następnie w <body></body> tworzymy pudełeczko "menu" w którym znajdować będą się nasze przyciski

<div class="menu">
<a href="#">About</a>
<a href="#">Webmasterka</a>
<a href="#">Portfolio</a>
<a href="#">Kontakt</a>
</div>

(a href="możemy tutaj umieścić link")

Następnie w arkuszu stylów style.css odwołujemy się do naszych elementów:

@charset "utf-8";
html, body {
text-align:left; /* tekst z lewej strony */
font-family:Verdana,Arial; /* czcionka */
font-size:16px; /* wielkość czcionki */
background-color:#f6f4ee; /* kolor tła naszej strony */
}
* { /* odwołujemy się do całego dokumentu */
margin:0; /* strona przylega do */
padding:0; /* krawędzi przeglądarki */
}
.menu {
background-color:#f5fbfb; /* tło naszego "pudełeczka" */
padding:10px; /* elementy oddalone o 10px od brzegów "pudełeczka" */
float:left;
}
a { /* odwołujemy się do wszystkich selektorów a */
padding: 10px;
margin: 10px; /* odległości między linkami */
background-color: #FFFFFF;
border-style: solid; /* styl obramowania */
outline: none; /* bez obwódki po kliknięciu */
text-decoration:none; /* bez dekoracji tekstu */
color: #666666;
float:left; /* linki są obok siebie */
}
a:link, a:visited{ /* link zwykły i odwiedzony */
border-color: #86ebec; /* kolor obramowania */
}
a:hover{ /* link po najechaniu myszką */
color:#a1db6d;
border-color: #bafeff;
}

Przyciski można zmieniać wg. własnych potrzeb stosując różne wariacje kolorów itp.

Podgląd

]]>