5.1 Atrybut stylu tagu
I jeszcze kilka przydatnych rzeczy o HTML. Gdy sieć zaczęła zyskiwać na popularności, rosło zapotrzebowanie na piękne lub bardzo pięknie zaprojektowane strony internetowe. Ten problem został rozwiązany za pomocą style
.
Ogólna postać tego atrybutu ma następujący format:
<tag style="name=value;name2=value2;nameN=valueN">
Wartość atrybutu, oddzielona style
średnikiem, zawiera listę wszystkich „stylów”, które należy zastosować do tagu.
Powiedzmy, że chcesz wyświetlić obraz jako kwadrat, 100*100
a także uczynić go półprzezroczystym. Aby to zrobić, musisz dodać do niego specjalne style:
- szerokość=100px;
- wysokość=100px;
- nieprzezroczystość=0,5;
Następnie kod HTML z tym obrazem będzie wyglądał następująco:
<img src="logo.png" style="width=100px;height=100px;opacity=0.5">
Istnieją setki, jeśli nie tysiące, stylów. A twórcy przeglądarek nieustannie wymyślają nowe. Dobrze, że studiujesz na programistę Java, a nie web designera :)
5.2 Popularne style CSS
Jest mało prawdopodobne, że napiszesz dużo kodu HTML lub zmodyfikujesz jego style w swoim życiu, ale wszystko może się zdarzyć. Na przykład piszesz kilka małych stron HTML, aby przetestować API
. Dlatego znajomość podstawowych stylów HTML
może być pomocna.
Poniżej znajduje się 10 najczęstszych dla programistów backendowych:
# | Nazwa | Przykład | Opis |
---|---|---|---|
1 | szerokość | szerokość: 100px | szerokość elementu w pikselach |
2 | wysokość | wzrost: 50% | wysokość elementu jako procent (szerokości rodzica) |
3 | wyświetlacz | Nie wyświetla się | element wyświetlacza (nie wyświetlaj elementu) |
4 | widoczność | widoczność: ukryta | widoczność elementu (element jest ukryty, ale miejsce jest dla niego zarezerwowane) |
5 | kolor | kolor czerwony; | kolor tekstu |
6 | kolor tła | kolor tła: dym | kolor tła |
7 | granica | obramowanie: 1 px jednolita czerń; | obramowanie (szerokość 1px, kolor czarny, linia ciągła) |
8 | czcionka | czcionka: verdana 10 pkt | czcionka: verdana, rozmiar 10 pkt |
9 | wyrównanie tekstu | wyrównanie tekstu: środek; | wyrównanie tekstu w poziomie |
10 | margines | margines: 2px | wypełnienie poza elementem |
Nie musisz pamiętać tych tagów, wszystko jest w Internecie. Co więcej, każdy „styl” ma swój własny zestaw prawidłowych wartości i własny format opisu wartości. Spójrz przynajmniej na border
lub font
.