Omówienie atrybutu stylu HTML
Kod HTML wymaga renderowania atrybutu stylu dla stron internetowych w przeglądarkach takich jak Chrome, FireFox, IE, aby były wyświetlane tak, jak powinny. Tagi HTML mogą zawierać różnorodne informacje, a atrybut style kontroluje wygląd informacji zawartych w blokach HTML za pomocą stylów wbudowanych.
W tym artykule dowiemy się więcej o atrybucie stylu HTML, który jest niczym więcej niż zestawem reguł określających sposób renderowania strony w przeglądarce internetowej.
Lista atrybutów stylu HTML
Oto lista wszystkich właściwości stylu, których można użyć do wpływania na projektowanie elementów HTML i sterowania nimi, wraz z praktycznym przykładem:
1. Kolor tła
Dzięki tej właściwości CSS możemy ustawić kolor tła dla dowolnego elementu HTML, np.
itp.
Przykład
My background is blue
Wynik:
2. Kolor
Kolor czcionki tekstu w elemencie HTML można kontrolować, ustawiając jego atrybut koloru na odpowiednią nazwę koloru lub kod HEX lub kod RGB.
Przykład
My font color is blue
Wynik:
3. Kolor obramowania
Możemy ustawić kolor obramowania dowolnego elementu HTML, jeśli chcemy dodać do niego obramowanie.
Przykład
Moja granica jest czerwona
Wynik:
Jak widać w powyższym kodzie, właściwość border przyjmuje 3 właściwości w następującej kolejności: „Border-width border-style border-color”.
4. Obraz w tle
Możemy również ustawić obraz jako tło, używając właściwości background-image w następujący sposób:
Przykład:
Wynik:
5. Powtarzanie w tle
Jak widać na powyższym przykładzie, gdy obraz jest ustawiony jako tło za pomocą właściwości background-image; domyślnie powtarza obraz zarówno w poziomie, jak i w pionie. Jednak niektóre obrazy mogą wymagać powtórzenia w pionie lub w poziomie lub ich powtórzenie może nie być konieczne. To zachowanie może być kontrolowane poprzez ustawienie pożądanej wartości względem właściwości powtarzania tła i może być użyte tylko wtedy, gdy używany jest obraz tła, w przeciwnym razie nie doda żadnej wartości stylu, gdy zostanie użyty jako samodzielna właściwość.
Wartość „repeat-x” służy do powtarzania obrazu tylko w poziomie.
Wartość „repeat-y” służy do powtarzania obrazu tylko w pionie.
Wartość „bez powtarzania” służy do zatrzymania wszelkiego rodzaju powtórzeń obrazu tła.
Zmodyfikujmy powyższy przykład, aby poprawić obraz tła.
Przykład
Wynik:
Możemy porównać powyższe przykłady i zrozumieć, że za pomocą obrazu tła możemy dodać obraz jako tło, a dzięki powtórzeniu tła możemy kontrolować powtarzanie obrazu tła.
6. Stanowisko w tle
Dzięki tej właściwości możemy zdefiniować pozycję obrazu tła.
Przykład
Wynik:
7. Marginesy
CSS zapewnia nam właściwości do ustawiania marginesów ze wszystkich czterech stron elementu HTML lub możemy dodać marginesy do określonej strony elementu.
Z marginesem u góry można dodać margines na górze elementu, margines z prawej strony doda margines z prawej strony elementu, margines z lewej strony doda margines z lewej strony elementu, a margines z dołu doda margines na dole elementu. Zamiast korzystać z tych 4 właściwości, możemy również użyć właściwości margin i ustawić jej wartości zgodnie z naszymi wymaganiami.
Przykład
p (
margin-top: 25px;
margin-bottom: 75px;
margin-right: 50px;
margin-left: 100px;
)
or
p
(
margin: 25px 50px 75px 100px;
)
8. Padding
Właściwość padding określa przestrzeń między zawartością elementu i jego granicami. Możemy użyć właściwości „padding” lub indywidualnych właściwości padding, takich jak padding-top, padding-bottom, padding-left, padding-right, aby ustawić wypełnienie dla górnej, dolnej, lewej lub prawej strony zawartości elementu.
p (
padding-top: 25px;
padding -bottom: 75px;
padding -right: 50px;
padding -left: 100px;
)
or
p
(
padding: 25px 50px 75px 100px;
)
9. Wysokość i szerokość
Wysokość i szerokość to najbardziej podstawowe właściwości CSS używane do definiowania wysokości i szerokości dowolnego elementu HTML. Można je ustawić na wartość w pikselach, np. 200 pikseli lub wartość procentową, np. 10%, 20% itd.
10. Wyrównanie tekstu
Ta właściwość służy do ustawiania kierunku poziomego, w którym chcemy wyrównać tekst elementu. Wartość można ustawić na środek, prawo lub lewo.
p (
text-align: center;
)
or
p (
text-align: left;
)
or
p (
text-align: right;
)
11. Dekoracja tekstu
Właściwość dekoracji tekstu może być używana do ustawiania dekoracji, takich jak podkreślenie, przejście przez linię lub nadpisanie tekstu w HTML.
Przykład:
To jest podkreślone
Wynik:
12. Odstępy między literami
Jak sama nazwa wskazuje, ta właściwość służy do definiowania odstępów między literami / znakami w słowie. Można mu przypisać dodatnią lub ujemną wartość piksela, aby zwiększyć lub zmniejszyć odstępy między literami.
Przykład:
Moje słowa się pokrywają
Wynik:
13. Wysokość linii
Wysokość linii określa odległość między liniami pionowymi. Podobnie jak odstępy między literami, wysokość linii można również ustawić na dodatnią lub ujemną wartość w pikselach. Przejrzyjmy poniższy przykład, aby lepiej zrozumieć:
Przykład:
Ten akapit ma małą wysokość linii.
Ten akapit ma małą wysokość linii.
Wynik:
14. Kierunek tekstu
Czasami, jeśli treść strony internetowej nie jest w języku angielskim, ale w innym języku, takim jak arabski, który jest zgodny z konwencją od prawej do lewej, musielibyśmy zmienić kierunek tekstu. W takich przypadkach możemy odwrócić kierunek tekstu.
Przykład:
Jestem od prawej do lewej
Wynik:
15. Cień tekstu
Ta właściwość dodaje cień do tekstu.
Przykład:
Mam szary cień
Wynik:
16. Rodzina czcionek
Możemy zdefiniować klasę czcionki dla tekstu w elemencie. Możemy zdefiniować wiele rodzin czcionek oddzielonych przecinkiem jako system rezerwowy, aby obsłużyć scenariusze, w których nie można załadować preferowanej klasy czcionek.
- Styl czcionki: Za pomocą właściwości stylu czcionki możemy dodać kursywę lub efekt ukośny do tekstu.
Przykład:
To jest skośny styl.
Wynik:
- Waga czcionki: ta właściwość określa wagę czcionki.
Przykład:
To jest odważny akapit
Wynik :
Atrybuty stylu przedstawione nad naszymi blokami konstrukcyjnymi przy projektowaniu interfejsu użytkownika i interfejsu użytkownika. Nadal ewoluują wraz z wprowadzaniem nowych wersji CSS.
Polecane artykuły
To jest przewodnik po atrybucie stylu HTML. Tutaj omawiamy listę wszystkich właściwości stylu, które można wykorzystać do wpływania na projektowanie elementów HTML i kontrolowania ich za pomocą praktycznych przykładów. Możesz także zapoznać się z następującymi artykułami, aby dowiedzieć się więcej -
- Style czcionek HTML
- Style list HTML
- Podstawowe tagi HTML
- Zalety HTML
- Ramki HTML
- Odwróć w JavaScript
- Bloki HTML
- Ustaw kolor tła w HTML za pomocą przykładu