pierwsze kroki www : css
Marek
dla strony g��wnej man np taki css:
table {
text-align: center;
color: red;
background-color: yellow;
font-size: 40pt;
font-family: Arial;
border-style: solid;
border-collapse: collapse;
border-width: 13px;
}
tr,td {
color: yelllow;
border-style: solid;
border-width: 3px;
width: 400px;
}
body {
font-size: 12 pt;
font-family: Arial;
margin-top: 10;
margin-bottom: 10;
margin-left: 10;
margin-right: 10;
background-color: yellow;
color: red;
}
Dla podstron chcia�bym inne parametry. Jak to zrobi�? Oddzielny plik css
dla ka�dej strony, czy jako� inaczej ?
I jeszcze dwie sprawy.
1. Czy da si� zrobi� automat, by nieale�nie od wielko�ci pliku graficznego
wpasowa� go do tabeli w ten spos�b, bi stworzy� 2 kolumny po 600 px
szeroko�ci ka�da ?
2. Czy w xhtml mo�na stosowa� nazwy kolor�w /nb red, green/ czy powinno si�
stosowaďż˝ kody hex ?
vcore
> Dla podstron chciałbym inne parametry. Jak to zrobić? Oddzielny plik css
> dla każdej strony, czy jakoś inaczej ?
Klasy i identyfikatory
http://www.w3schools.com/Css/css_id_class.asp
> I jeszcze dwie sprawy.
> 1. Czy da się zrobić automat, by nieależnie od wielkości pliku graficznego
> wpasować go do tabeli w ten sposób, bi stworzyć 2 kolumny po 600 px
> szerokości każda ?
Tworzysz klasę .obrazek i definiujesz dla niego styl CSS, czyli dodajesz deklarację do pliku ze stylem:
img.obrazek { width: 600px; height: 600px; }
↑ Powyżej zdefiniowana jest szerokośc i wysokośc obrazka na 600px, możesz je oczywiśćie dowolnie zmienić
w kodzie strony umieszczasz natomiast:
<img class="obrazek" src="obrazek.jpg" />
↑ Obrazek umieszczony w kodzie będzie szeroki i wysoki na 600px
Pamiętaj jednak że klasa w stylu CSS musi byc poprzedzona kropką, natomiast kropki tej nie można
stawiać definiując klasę dla danego elementu czyli w stylu css .klasa01 a w kodzie strony klasa01
> 2. Czy w xhtml można stosować nazwy kolorów /nb red, green/ czy powinno się
> stosować kody hex ?
Można
A tak poza tym, jeśli chcesz zrobić margines z każdej strony o takiej samej wielkości wystarczy że
zadeklarujesz to tak:
margin: 10px;
A jeśli ma być inny dla każdej strony definiujesz to tak:
margin: 10px 20px 30px 40px;
10px - wartośc marginesu górnego
20px - wartośc marginesu prawego
30px - wartość marginesu dolnego
40px - wartość marginesu lewego
↑ zgodnie z ruchem wskazówek zegara
lub tak:
margin: 10px 20px;
10px - wielkośc marginesu górnego i dolnego (lub jak wolisz w pionie)
20px - wielkość marginesu prawego i lewego (poziom)
to samo tyczy się borderów:
border: 1px solid #fff;
1px - szerokość
solid - rodzaj (może być dotted, dashed, double itp.)
#fff - kolor, może być też oczywiście white, black, red, yellow
nie musisz deklarować kolejno jego wielkości, koloru i rodzaju
font-family tak samo, wystarczy że zadeklarujesz font-family dla body, wszystkie inne elementy które
się w nim znajdują (czyli wszystkie) dziedziczą tą wartość (czyli na całej stronie będzie czcionka
która została zdefiniowana dla body)
--
www.blog.vcore.pl ◦ Blog prywatny
www.webprogress.com.pl ◦ WebProgress - Nowoczesne aplikacje internetowe
Marek
> Tworzysz klasÄ .obrazek i definiujesz dla niego styl CSS, czyli dodajesz
deklaracjÄ do pliku ze stylem:
>
> img.obrazek { width: 600px; height: 600px; }
jak to umiesci� w pliku w kt�rym juz mam:
(po jednym przyk�adzie juz sobie powinienem poradzi�)
table {
text-align: center;
color: red;
background-color: yellow;
font-size: 40pt;
font-family: Arial;
border-style: solid;
border-collapse: collapse;
border-width: 13px;
}
tr,td {
color: yelllow;
border-style: solid;
border-width: 3px;
width: 400px;
}
body {
font-size: 12 pt;
font-family: Arial;
margin-top: 10;
margin-bottom: 10;
margin-left: 10;
margin-right: 10;
background-color: yellow;
color: red;
}
> w kodzie strony umieszczasz natomiast:
> <img class="obrazek" src="obrazek.jpg" />
czyli do typowej defininicj img dodajďż˝ class="nazwa zdefiniowenaej klasy" ?
> PamiÄ taj jednak Ĺźe klasa w stylu CSS musi byc poprzedzona kropkÄ ,
natomiast kropki tej nie moĹźna
mo�esz przyk�adowo uzupe�nic "m�j" css ?
idea iest taka, �eby ka�da z podstron mia�a inne parametry /kolor, margines itp/
> A tak poza tym, jeĹ li chcesz zrobiÄ margines z kaĹźdej strony o takiej
samej wielkoĹ ci wystarczy Ĺźe
> zadeklarujesz to tak:
>
> margin: 10px;
>
> A jeĹ li ma byÄ inny dla kaĹźdej strony definiujesz to tak:
>
> margin: 10px 20px 30px 40px;
jak rozr�ni�, do kt�rych podstron b�dzie dana definicja ? Dal ka�dej robi si�
oddzielny css, czy to siďż˝ upycha w jednmym ? Jak ?
Dzi�uj�, bardzo du�o mi "rozja�ni�e�"
Marek
--
Wys�ano z serwisu OnetNiusy: http://niusy.onet.pl
Mirosław Zalewski
czytelników pl.comp.www spłynęła, gdy tako rzekł(a) Marek:
> jak rozróżnić, do których podstron będzie dana definicja ? Dal każdej
> robi się oddzielny css, czy to się upycha w jednmym ? Jak ?
Ja bym po stronie serwera sprawdzał jaka strona jest żądana i w
zależności od tego kierował do osobnego stylu CSS. W najprostszej
wersji to mogłoby wyglądać jakoś tak:
<link rel="stylesheet" type="text/css"
href="/style.<?=$_GET['page']?>.css">
Wtedy musisz tylko dbać aby odpowiednie nazwy plików zgadzały się z
nazwą żądania page.
Ponieważ nie ma sensu się powtarzać (zakładam że większość elementów
strony pozostaje niezmienna) warto stworzyć plik ogólny, aplikowany
wszystkim stronom, a elementy zmienne wyszczególniać do innych plików —
będą one wtedy mniejsze.
Jeśli chcesz mieć wszystko w jednym pliku, też się da. Najprościej
wtedy pamiętać że zawsze masz dwa elementy nadrzędne którym może być
nadana klasa. I taki plik mógłby wyglądać tak:
.container {
background-color: red;
}
html.newsy .container {
background-color: blue;
}
html.artykuly .container {
background-color: yello;
}
Ale nadawanie atrybutów elementowi <html> i tak powinno być wykonane po
stronie serwera. Poza tym taki jeden plik CSS byłby olbrzymi i zawierał
masę niepotrzebnych informacji.
Wracając jeszcze do Twoich dwóch pytań:
1. można użyć max-width (samo width zawsze przeskaluje obraz do danej
szerokości — jeśli będzie on mniejszy, to efekt nie będzie
zadowalający), ale zdecydowanie lepszym rozwiązaniem jest umieszczenie
na serwerze miniaturek. Wyobraź sobie że masz obraz o wielkości, dajmy
na to 3000x1500 px. Możesz go wstawić przez
img {
width: 300px;
height: 150px;
}
<img src="/obraz.jpg" alt="ja nad morzem">
ale wtedy przeglądarka pobierze duży obraz (który najprawdopodobniej
waży kilka MB) i przeskaluje go. Od razu przeskalowany obraz będzie
zajmował mniej miejsca i szybciej pobierze się na komputer użytkownika,
dodatkowo zabierając mu mniej transferu (co ma zwłaszcza znaczenie w
przypadku urządzeń przenośnych). Same plusy.
2. Odpowiem przewrotnie — nie, ponieważ xHTML nie pozwala na żadne
atrybuty prezentacyjne w strukturze dokumentu. Powinny one zostać
przeniesione do CSS — a co za tym idzie pytanie powinno brzmieć czy CSS
pozwala na używanie opisowych nazw kolorów.
Uprzedzając Twoje pytanie — tak, w CSS można użyć jednej z 17 nazw
kolorów[1]. Gdybyś zadał sobie odrobinę trudu żeby poszukać informacji
o tym, znalazłbyś je. Dowiedziałbyś się także, że większość
przeglądarek obsługuje znacznie bogatszą paletę interpretowanych
nazw[2].
Jednak używanie wartości hex (RGB) jest bezpieczniejsze i daje większą
kontrolę. Ale wybór należy do Ciebie.
I taka uwaga na marginesie, odnośnie tego co niedawno pisałeś w
<hfu3ib$1ok$1...@achot.icm.edu.pl> — to też uważasz za zaawansowany
problem? Z tego co wywnioskowałem po Twoich postach, zarabiasz na życie
tworząc strony internetowe i bynajmniej nie robisz tego od wczoraj. Zaś
zagadnienia które poruszasz w tym wątku są tak banalnie podstawowe, że
aż strach. I nie chodzi o to że ich nie opanowałeś — nikt nie rodzi się
z taką wiedzą, każdy kiedyś jest początkującym. Ale jeśli pytanie takie
zadaje osoba która robi coś zawodowo, to stawia pod znakiem zapytania
jej przygotowanie merytoryczne do wykonywanej czynności.
[1] - http://www.w3.org/TR/CSS21/syndata.html#color-units
[2] - http://www.w3schools.com/TAGS/REF_COLORNAMES.ASP
--
Niżej podpisany, zamieszkały w http://minio.xt.pl ,
Mirosław Zalewski
Marek
> <hfu3ib$1ok$1...@achot.icm.edu.pl> — to też uważasz za zaawansowany
> problem? Z tego co wywnioskowałem po Twoich postach, zarabiasz na życie
> tworząc strony internetowe i bynajmniej nie robisz tego od wczoraj. Zaś
> zagadnienia które poruszasz w tym wątku są tak banalnie podstawowe, że
> aż strach.
przeczytałem tu ani jednego /mea culpa/ Generalnie www się nigdy nie
zajmowałem a to, w czym mi tak bardzo "rozjaśniłeś" jest prawdopodobne
jednorazowa (i z konmieczności bardzo szybką) akcją którą po prostu muszę
wykonać :). To mój pierewsy kontakt z html- co widac :)
Chociaż... nigdy się nie mówi nigdy i ni e wiadmo, co człowieka wciągnie :)
Robert Kusmierz
Witam
>> problem? Z tego co wywnioskowałem po Twoich postach, zarabiasz na życie
>> tworząc strony internetowe i bynajmniej nie robisz tego od wczoraj. Zaś
> NIe, to zbiezność nicków i nie moje posty. Swój wrzuciłem jak jeszcze nie
> przeczytałem tu ani jednego /mea culpa/ Generalnie www się nigdy nie
Nazwisk nie macie? Chociaz dodajcie "herbu TAG" lub z "miasta Łodzi
pochodzi". Cokolwiek, bo juz mialem takze pisac, ze troche przesadzasz z
pisaniem na grupe (ta i inne) z problemami dziecka NEO).
--
Robert Kusmierz
www.robertkusmierz.com | Serwis prywatny
Paweł Piskorz
> Jeśli chcesz mieć wszystko w jednym pliku, też się da. Najprościej
> wtedy pamiętać że zawsze masz dwa elementy nadrzędne którym może być
> nadana klasa. I taki plik mógłby wyglądać tak:
html nie może mieć klasy, musisz się zadowolić id ;)
http://www.w3.org/TR/xhtml1/dtds.html#dtdentry_xhtml1-strict.dtd_html