Archiwum tagu: style CSS

Wysuwane/górne menu z jQuery i CSS

Wysuwane/górne menu to nie tylko zaokrąglone kształty, ale przede wszystkim  rozwijane menu po najechaniu na pole wyszukiwania. Dodatkowo pole oferuje różne opcje wyszukiwania, dzięki którym można wybrać i zawęzić wyszukiwanie.

jquery_16

ZOBACZ DEMO

Strukturę menu przedstawiam poniższy rysunek . Jak widać, menu oparte jest na liście nieuporządkowanej. Nasz UL składa się z czterech przedmiotów. Pierwszy z nich to logo z krótkim podmenu. Następnie logowanie, link z menu Pomoc i wyszukiwania przedmiotów z podmenu. Każde menu jest wyświetlany po najechaniu na odpowiedni link.

jquery_15

To jest struktura bazy, której użyjemy tutaj:

<ul id="menu">
  <li class="logo">
     <img style="float:left;" alt="" src="menu_left.png"/>
     <ul id="main">
     <li>Welcome to
     <b>Create Vimeo-like top navigation</b> tutorial!</li>
       </ul>
  </li>
    <li><a href="#">Login</a>
    </li>
    <li><a href="#">Help</a>
      <ul id="help">
         <li><a href="#">General help</a></li>
         <li><a href="#">Posts</a></li>
         <li><a href="#">Pages</a></li>
      </ul>
    </li>
    <li class="searchContainer">
  <div>
  <input type="text" id="searchField" />
  <img src="magnifier.png" alt="Search" onclick="alert
                    ('You clicked on search button')" /></div>
  <ul id="search">
    <li><input id="cbxAll" type="checkbox" />All</li>
    <li><input id="Articles" type="checkbox" />Articles</li>
    <li><input id="Tutorials" type="checkbox" />Tutorials</li>
    <li><input id="Reviews" type="checkbox" />Reviews</li>
    <li><input id="Resources" type="checkbox" />Resources</li>
      </ul>
    </li>
</ul>
<img style="float:left;" alt="" src="menu_right.png"/>

oraz styl CSS:

/* menu */
#menu{ margin:0px; padding:0px; list-style:none; color:#fff;
                line-height:45px; display:inline-block;
    float:left; z-index:1000; }
#menu a { color:#fff; text-decoration:none; }
#menu > li {background:#172322 none repeat scroll 0 0;
                cursor:pointer; float:left; position:relative;
    padding:0px 10px;}
#menu > li a:hover {color:#B0D730;}
#menu .logo {background:transparent none repeat scroll 0% 0%;
                padding:0px;
    background-color:Transparent;}
/* sub-menus*/
#menu ul { padding:0px; margin:0px; display:block;
                                    display:inline;}
#menu li ul { position:absolute; left:-10px; top:0px;
                margin-top:45px; width:150px; line-height:16px;
    background-color:#172322; color:#0395CC; /* for IE */
                display:none; }
#menu li:hover ul { display:block;}
#menu li ul li{ display:block; margin:5px 20px;
              padding: 5px 0px; border-top: dotted 1px #606060;
    list-style-type:none; }
#menu li ul li:first-child { border-top: none; }
#menu li ul li a { display:block; color:#0395CC; }
#menu li ul li a:hover { color:#7FCDFE; }
/* main submenu */
#menu #main { left:0px; top:-20px; padding-top:20px;
               background-color:#7cb7e3; color:#fff;
    z-index:999;}
/* search */
.searchContainer div { background-color:#fff; display:inline;
                padding:5px;}
.searchContainer input[type="text"] {border:none;}
.searchContainer img { vertical-align:middle;}

Nasze menu musi posiadać jeszcze zaokrąglone narożniki. Nic prostszego, rozwiązanie opisane jest na obrazku poniżej:

jquery_171

Dla przykładu weźmy podmenu Pomoc:

<li><a href="#">Help</a>
 <ul id="help">
   <li>
     <img class="corner_inset_left"
                 alt="" src="corner_inset_left.png"/>
      a href="#">General help</a>
     <img class="corner_inset_right"
                 alt="" src="corner_inset_right.png"/>
   </li>
     <li><a href="#">Posts</a></li>
     <li><a href="#">Pages</a></li>
     <li class="last">
      <img class="corner_left" alt="" src="corner_left.png"/>
      <img class="middle" alt="" src="dot.gif"/>
      <img class="corner_right" alt="" src="corner_right.png"/>
     </li>
 </ul>
</li>

Dodaliśmy dwa zdjęcia umieszczone wewnątrz pierwszej LI, żeby stworzyć “łopatki”. Ponadto, mamy jeszcze jedną LI do końca listy, która zawiera dwa absolutnie pozycjonowany rogach i jeden 1×1px rozciągnięte zdjęcie, aby wypełnić puste miejsce. Do tego potrzebne są dodatkowe style:

/* corners*/
#menu .corner_inset_left {position:absolute; top:0px;
                                             left:-12px;}
#menu .corner_inset_right {position:absolute; top:0px;
                                             left:150px;}
#menu .last {background:transparent none repeat scroll 0% 0%;
                                      margin:0px; padding:0px;
    border:none; position:relative; border:none; height:0px;}
#menu .corner_left {position:absolute; left:0px; top:0px;}
#menu .corner_right {position:absolute; left:132px; top:0px;}
#menu .middle {position:absolute; left:18px; height: 20px;
                                      width: 115px; top:0px;}

Źródło: www.jankoatwarpspeed.com


Style CSS

Za pomocą języka XHTML tworzymy strukturę, jak np. tabele, tytuły czy akapity, a korzystając ze stylów nadajemy im odpowiednie właściwości i formatowanie, np. kolor, pogrubienie, pochylenie, tła, wielkość liter i inne elementy odpowiedzialne za kształt i wygląd.

Wystarczy więc przypisać do tytułu strony nazwę stylu, np. “glowny” i zdefiniować w jednym miejscu, jakie właściwości ma mieć główny tytuł. Może być pogrubiony, niebieski, napisany czcionką Arial o wielkości 16 pikseli. Wszystkie tytuły główne mogą mieć ten sam styl zapisany w jednym pliku. Jest to bardzo przydatne, gdy nagle musimy zmienić wygląd tytułów. Wtedy wystarczy w jednym miejscu zmienić właściwości stylu “glowny” i efekt będzie widoczny od razu na wszystkich stronach we wszystkich tytułach oznaczonych tym stylem. Prawda, że rewelacyjny wynalazek? Takie podejście pozwala szybko zmienić kolorystykę, kształt czy właściwości określonego stylu przypisanego konkretnym elementom HTML.

Jak zdefiniować swoje style?

Własne style możesz nazwać dowolnie, w sposób dla Ciebie czytelny. Mogą nazywać się np. “naglowek”, “akapitczerwony” lub “pogrubienie”. Aby je stworzyć musisz zadeklarować je w osobnym pliku lub wprost na wybranej stronie WWW.

W nagłówku strony, w sekcji head umieść swoją definicję stylu pomiędzy tagami style.

<?xml version="1.0" encoding="ISO-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
  <style type="text/css"><!--

    h1, td { color: green; }
    .naglowek { color: red; font-size:16px; }
    .pogrubiony { font-weight: bold; }

  --></style>
 <meta http-equiv="Content-type" content="text/html;
charset=ISO-8859-2" />
 <title>tytuł strony</title>
</head>
<body>

  Dalsza treść strony, gdzie będą używane Twoje style...

</body></html>

W przykładzie został zdefiniowany jeden styl dla elementów h1 i td i dwa style o nazwach “naglowek” i “pogrubiony”. Najłatwiejszą notacją (bo style można definiować na kilka sposobów) i chyba najczęściej spotykaną jest przypisanie stylu do elementu HTML. Inną popularną notacją jest kropka i nazwa stylu. Kropka określa, że styl jest selektorem klasy, czyli oznacza, że klasa będzie miała nadaną przez nas nazwę, którą można potem użyć w definicji klasy dla elementu HTML.

Brzmi nieco zawile? Ale teorią się nie przejmuj, ważniejsza jest praktyka. Pamiętaj o kropce i za nią umieść nazwę stylu. Następnie w nawiasach klamrowych musisz opisać jakie cechy będzie miał stworzony przez Ciebie styl.

Wszystkie tytuły h1 i komórki tabeli td będą miały kolor zielony (color: green;) Nagłówek ma mieć czerwony kolor (color: red;) i wielkość 16 pikseli (font-size: 16px;). Styl pogrubiony będzie tylko pogrubiony (font-weight: bold;).

Dowolny element HTML, który ma mieć styl naglowek powinien mieć atrybut class z nazwą naszego stylu (ale już bez kropki):

<p class="naglowek">Nagłówek strony</p>

Bez problemu możesz ten styl przypisać kilka razy do różnych elementów na stronie:

<p class="naglowek">Nagłówek strony</p>
<div class="naglowek">Inny nagłówek strony</div>
<a href="http://www.reporter.pl" class="naglowek">Duży link</a>

Kropka oznacza, że wszystkie elementy na stronie (polecenia XHTML), dla których zdefiniujesz klasę “naglowek” będą miały ten styl. Gdy przypiszesz styl do elementu XHTML, tylko te elementy mają określone właściwości (tak zrobiliśmy z komórkami tabeli i tytułami h1).

Jak już wiesz, aby kawałek tekstu miał pogrubiony styl, wystarczy go zdefiniować z kropką na początku:

.pogrubiony { font-weight: bold; }

Tak określony styl może się odnościć do dowolnych elementów XHTML - możesz pogrubić akapity, tabele, linki i generalnie wszystkie tagi języka XHTML. Dodając przed kropką nazwę elementu XHTML, możesz ograniczyć działanie tego stylu tylko do wybranych poleceń języka XHTML. Zastosujmy pogrubienie tylko w akapitach:

p.pogrubiony { font-weight: bold; }

I użyjmy go w praktyce:

<p class="pogrubiony">TYLKO TEN tekst zostanie pogrubiony</p>
<div class="pogrubiony">Ten tekst nie zostanie pogrubiony</div>
<a href="http://reporter.pl" class="pogrubiony">Link bez pogrubienia</a>

Takie podejście pozwala stworzyć wiele stylów o nazwie “pogrubiony”, ale każdy będzie odnosił się tylko do określonego elementu języka HTML:

p.pogrubiony { font-weight: bold; }
br.pogrubiony { font-weight: bold; color: red; }

Łatwo zapamiętać, że brak nazwy elementu przed kropką dotyczy wszystkich tagów HTML, a wyszczególniona nazwa przed kropką we własnej definicji stylu ogranicza działanie stylu tylko do tego elementu języka HTML.

Jest jeszcze jeden zapis własnej definicji stylu, gdzie zamiast kropki stosuje się znak #:

#zielony { color: green; }

Tym razem odwołanie do stylu nie następuje przez podanie atrybutu class, ale przez identyfikator elementu, czyli atrybut id:

<p id="zielony">zielony akapit</p>

Ważną rzeczą jest, aby na jednej stronie nie było dwóch elementów HTML (np. dwóch lub więcej akapitów), które mają taką samą nazwę ID. Identyfikator jest unikatowy. Jeżeli chcesz stosować więcej identyfikatorów musisz je np. ponumerować:

#zielony1 { color: green; }
#zielony2 { color: green; }
#zielony3 { color: green; }

<p id="zielony1">zielony akapit</p>
<span id="zielony2">zielony akapit</span>
<p id="zielony3">zielony akapit</p>

Tutaj również można ograniczyć zakres działania stylu dla wybranego elementu dodając jego nazwę przed definicją stylu:

p#zielony { color: green; }

W praktyce zapis z identyfikatorami id nie jest często stosowany, ponieważ z definicji każdy element XHTML musi mieć inny identyfikator i tych styli byłoby bardzo dużo. Natomiast styl zapisany w ten sposób ma zastosowanie w dynamicznym HTML, a więc w powiązaniu z JavaScriptem i DOMem, gdzie odwołania do elementów HTML możliwe są poprzez identyfikatory id.

Zdecydowanie najczęściej spotykany jest przykład pierwszy, gdzie po kropce podajesz nazwę stylu, a w nawiasach określasz wszystkie style i parametry jakie mają być przypisane do danej nazwy. Potem w elementach HTML wystarczy za pomocą atrybutu class przypisać określoną nazwę stylu, aby go użyć w dowolnym miejscu na stronie.

Dołączanie stylów

Jednym ze sposobów jest umieszczenie stylów wprost przy elemencie, którego dotyczy korzystając z atrybutu style. Można w ten sposób nadać konkretny styl wybranemu elementowi HTML, bez konieczności stosowania arkusza zewnętrznego lub wewnętrznego:

<p style="color:red; font-size:16px;">
dowolny akapit
</p>

Takie rozwiązanie jest stosowane wyjątkowo, gdy trzeba zmienić wygląd jednego elementu (lub kilku elementów) na stronie lub nadpisać wygląd konkretnego elementu HTML, który wcześniej został zadeklarowany w stylach zewnętrznych lub osadzonych na stronie.

Nie powinno się stosować stylów wprost w elementach HTML, ponieważ trudno je potem znaleźć w kodzie strony i kłopotliwe jest ich poprawianie. Mimo chaosu, jaki może wprowadzić taki zapis, jest on w praktyce dosyć często stosowony z lenistwa, bo łatwiej dokonać zmiany stylu konkretnego elementu niż wypisywać wszystkie style w zewnętrznym arkuszu i potem przypisywać każdy ze stylów do poszczególnych elementów.

Definicje stylów można umieścić wprost na konkretnej stronie WWW, w sekcji nagłówkowej strony, czyli pomiędzy tagami <head> i </head>, np. zaraz po określeniu tytułu dla strony:

<head>
  <meta http-equiv="Content-type" content="text/html;
charset=ISO-8859-2" />
  <title>Tytuł strony </title>
  <style type="text/css"><!--

  body, p {
    font-family: Arial, sans-serif;
    font-size: 14px;
  }
  a { text-decoration: none; }
  .menu:active {color: navy; }
  .menu:link {color: navy; }
  .menu:visited {color: navy; }
  .menu:hover {color: #3333cc; }

  --></style>
</head>

Style są umieszczone wprost na konkretnej stronie WWW i nawet jeżeli ktoś skopiuje stronę na dysk lokalny i nie będzie miał połączenia z Siecią, w dalszym ciągu style będą w dokumencie zachowane.

To bardzo dobry sposób osadzania stylów w przypadku języków skryptowych (np. PHP), ponieważ style można dołączyć z jednego pliku za pomocą dyrektywy include.

Nieco gorzej jest z wykorzystaniem tej metody w wypadku statycznych stron HTML, gdyż modyfikacja stylu wymaga zmodyfikowania zapisu na wszystkich stronach należących do witryny. Wtedy wygodniej skorzystać z metody dołączenia zewnętrznego arkusza z dowolnego miejsca w Sieci lub z wybranego katalogu na stronie WWW.

Zamiast osadzać style CSS na stronie można je dołączyć z zewnętrznego pliku za pomocą elementu link:

<head>
  <meta http-equiv="Content-type" content="text/html;
charset=ISO-8859-2" />
  <title>Tytuł strony </title>
  <link rel="stylesheet" type="text/css" href="/style.css" />
</head>

Można też podać pełną ścieżkę do serwera i dołączać więcej niż jeden arkusz stylów:

<link rel="stylesheet" type="text/css" href="http://serwer1/style.css" />
<link rel="stylesheet" type="text/css" href="http://serwer2/style.css" />

Dołączany plik style.css powinien zawierać od razu definicje stylów, jak poniżej:

body, p {
  font-family: Arial, sans-serif;
  font-size: 14px;
}
a { text-decoration: none; }
input { width: 200px; }

Ten sposób dołączania stylów jest bardzo wygodny, ponieważ w praktyce istnieje tylko jeden plik ze stylami, który może być dołączany z dowolnej lokalizacji w Sieci. Modyfikacje wystarczy przeprowadzać tylko w jednym pliku. Jego wadą jest to, że podczas zapisywania strony na dysk, style mogą zostać zgubione i bez dostępu do pliku ze stylami strona może prezentować się mało ciekawie.

Dopuszczalna jest również kombinacja zastosowania stylów z zewnętrznego pliku w stylach znajdujących się na stronie:

<style type="text/css"><!--

@import url(http://serwer.pl/katalog/style.css)
body, p {
  font-family: Arial, sans-serif;
  font-size: 14px;
}
a { text-decoration: none; }

--></style>

W tym celu można skorzystać z polecenia @import dołączającego do stylów na stronie dodatkowe style znajdujące się w pliku w dowolnym miejscu w sieci. Style znajdujące się poniżej dołączanego stylu mogą rozszerzyć style z pliku lub zastąpić je na konkretnej stronie.

O stylach można by napisać całkiem sporą książkę, a przedstawione powyżej podstawy mają tylko zaznajomić Cię z tematyką i pomóc szybko zacząć je stosować na stronach. Mam nadzieję, że ten krótki, ale treściwy wstęp, nieco wyjaśnił Ci posługiwanie się stylami w praktyce.

Powodzenia!


Dobór kolorów na stronie internetowej

Projektując wygląd strony, warto zwrócić uwagę na dobór kolorów. Każda przeglądarka stron www pozwala uzyskać na ekranie jednocześnie 256 różnych kolorów, jednak tylko 216 z nich poprawnie wyświetlają wszystkie przeglądarki internetowe. Używając “bezpiecznego” zestawu barw masz pewność, że kolor zostanie pokazany tak samo w każdym systemie operacyjnym (paleta 256 kolorów w systemie Windows nie odpowiada tym samym kolorom systemowym w komputerze Macintosh). Jeżeli użyjesz większej ilości kolorów, mogą one zostać zamienione do podobnych kolorów z podstawowego zestawu barw, czyli wspomnianych, “bezpiecznych” 216 kolorów.

Dowolny kolor składa się z trzech podstawowych barw: czerwonej, zielonej i niebieskiej, czyli tzw. RGB (R - red, G - green, B - blue). Do dyspozycji mamy 256 odcieni każdego z tych kolorów i poprzez ich mieszanie otrzymujemy dowolny inny kolor. Kolor RGB zapisywany jest w postaci #RRGGBB, gdzie RR to zapisany szesnastkowo (heksadecymalnie) kolor czerwony (red), GG to kolor zielony (green), a BB to kolor niebieski (blue). Oznacza to, że każdy kolor może przyjmować wartości od 00 do FF. W stylach CSS pojawia się jeszcze zapis dziesiętny koloru RGB w postaci rgb(RR,GG,BB), gdzie każda składowa może przyjmować wartości od 0 do 255. Bezpieczne kolory operują wielokrotnością liczby 33 w systemie szesnastkowym (00, 33, 66, 99, CC, FF) i 51 w systemie dziesiętnym (0, 51, 102, 153, 204, 255).

Można też używać nazw kolorów. Obecnie dostępnych nazw jest 140, niektóre z nich to: white (kolor biały - #FFFFFF), black (kolor czarny - #000000), green, blue, fuchsia, yellow, lime, olive, purple, teal, silver, red, navy, maroon, gray, aqua. Należy jednak pamiętać, że nie w pełni odpowiadają one bezpiecznej palecie, np. zapis szesnastkowy koloru maroon to #800000. Oczywiście, nie ma takiego w tablicy bezpiecznych kolorów!

Można nie zwracać uwagi na różnicę jeśli umieszczamy tylko zielony napis lub zieloną tabelę. Wtedy nawet lepiej stosować nazwy, bo nie trzeba zastanawiać się, jak zapisać kolor zielony za pomocą #RRGGBB. Informacja ta zaczyna nabierać znaczenia wyłącznie przy łączeniu bitmapy (GIF, JPEG) z kolorami na stronie www wprowadzonymi np. takimi instrukcjami:

color: #00ff66; - ustala kolor czcionki za pomocą stylu,
background-color: #00ff66; - ustala kolor tła za pomocą stylu.

Obecnie nie zaleca się stosowania atrybutów HTML. Powinno się je zamieniać na style CSS. W stylach, w miejsce #RRGGBB można wpisać kolor w postaci szesnastkowej (np. #CCFFCC), nazwy angielskiej (np. maroon) lub wartości RGB - rgb(20,20,99). Oto odpowiedniki:

alink - a:active { color: #RRGGBB; }
bgcolor - background-color: #RRGGBB;
color - color: #RRGGBB;
link - a:link { color: #RRGGBB; }
text - color: #RRGGBB;
vlink - a:visited { color: #RRGGBB; }

Projektując wygląd strony można również skorzystać ze znajdujących się w internecie serwisów wspomagających dobieranie kolorów i projektujących bezpieczne zestawy barw dla tabel, linków, tekstu czy tła.