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*100a 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 HTMLmoż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 borderlub font.