Rozdział II Dodawanie CSS do HTML
Co to jest ten CSS ?
To jest skrót jak domyślacie się z poprzedniego działu
C – cascade
S – style
S – sheet
Czyli po polsku kaskadowy arkusz styli
Po co on jest?
On właśnie koloruje nam stronkę, ustawia butony itp.
Jak stworzyć CSS?
Otóż otwieramy nowy dokument w notepadzie++ bądź w notatniku i wpisujemy
tam:
*{
margin: 0px;
padding: 0px
}
.rectangle {
width: 1000px;
margin-left:
auto;
margin-right:
auto;
}
Co to jest?
Tak więc:
* - oznacza że kalibrujemy stronkę
marginesy są ustawione na 0px, tak samo jak paddingi czyli odległości.
. recangle – jest klasą czyli
pudełkiem do którego wrzucamy np. menu, logo lub treść właściwą strony.
Przygotowałem dla was łamigłówkę którą możecie rozwiązać sobie lub
przeczytać rozwiązanie.
<html>
<head>
<head>
<meta charset="utf-8">
<meta name="description" content="Jeśli interesuje cię
historia powstania państwa polskiego to dobrze trafiłeś. u nas znajdziesz to
czego szukasz"/>
<meta name="keywords" content="historia polski, II
wojna światowa w polsce, powstanie państwa polskiego, średniowiecze w Polsce,
PRL, "/>
<meta http-equiv="X-UA-Compatible"
content="IE=edge,chrome=1"/>
</head>
<body>
<div id=”container”>
</body>
</html>
Są tutaj dwa błędy.
Odp. Znacznik <head> powtarza się
Znacznik <div
id=”container”> nie ma taga zamykającego.
Jeśli zgadłeś znaczy że poważnie podszedłeś do nauki, jeśli nie to znaczy
że potrzebujesz jeszcze trochę czasu aby powtórzyć materiał nie zniechęcaj się wróć
do poprzednich działów i utrwal to co ci uciekło. Powodzenia.
Wszystko jest ok tylko jeszcze jedna sprawa a mianowicie jak CSS będzie
widziany w pliku HTML?
Już śpieszę z odpowiedzią otóż
jeżeli wkleimy tę linijkę kodu do dokumentu HTML w sekcji
<head></head> to powinniśmy mieć już wyobrażenie o możliwościach
jakie niesie nam CSS.
<link rel="stylesheet" href="style.css"
/>
A oto wspomniany prze mnie CSS:
*{
margin: 0px;
padding: 0px
}
.rectangle {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#container{
text-align: justify;
width: 1000px;
border: 5px, solid,
#000000;
background-color:
#ffffff;
font-size: 30px;
margin-left: auto;
margin-right: auto;
}
Potestujmy jeżeli zrobiłeś wszystko dobrze to powinieneś otrzymać:
- stronę o szerokości 1000px
- ramkę o grubości 5px koloru
czarnego pojedynczą
- tekst o rozmiarze 30 px
Tak więc, jeśli już rozumiesz znaczenie CSS to cieszy mnie to
niezmiernie, a jeśli nie to napisz w komentarzu czego nie zrozumiałeś postaram
się pomóc.
Podsumujmy rozdział II
Wiesz co to CSS
Wiesz jak wstawiać CSS do dokumentu HTML
Czyli podstawy mamy za sobą.
Jeśli jak dotąd nie zwątpiłeś w swoje zdolności zapraszam dalej. Jeśli
tak to zawsze możesz zadać pytanie w komentarzu postaram się udzielić jak
najdokładniejszej odpowiedzi.
Brak komentarzy:
Prześlij komentarz