CSS-тегі font қысқартылған сипаты
Алдыңғы сабақта біз мәтін үшін көптеген
сипаттарды қарастырдық. Бұл сипаттардың әрқайсысын
бөлек көрсету жиі әлдеқайда ыңғайсыз,
сондықтан CSS-те ыңғайлылық үшін
арнайы қысқартылған font сипаты бар.
Бұл сипат бір уақытта қаріп өлшемін,
отбасын, қалыңдығын, курсивін
және жол аралығын орнатуға мүмкіндік береді.
Сипатталатын сипаттың келесі синтаксисі бар:
font-style font-weight font-size / line-height font-family
Бұл жағдайда сипаттардың реті маңызды,
және міндетті болып табылады font-size
және font-family. Жоғарыда синтаксисте сипатталғандардан
басқа сипаттардың
осы қысқартылған сипатқа кірмейтініне назар аударыңыз.
Мысалдармен қарастырайық.
Мысал
Бізде келесі стильдер бар делік:
p {
font-size: 16px;
font-family: Arial;
}
Оларды қысқартылған сипат арқылы қайта жазайық:
p {
font: 16px Arial;
}
Мысал
Бізде келесі стильдер бар делік:
p {
font-size: 16px;
font-family: Arial;
line-height: 50px;
}
Оларды қысқартылған сипат арқылы қайта жазайық:
p {
font: 16px/50px Arial;
}
Мысал
Бізде келесі стильдер бар делік:
p {
font-size: 16px;
font-family: Arial;
font-weight: bold;
}
Оларды қысқартылған сипат арқылы қайта жазайық:
p {
font: bold 16px Arial;
}
Мысал
Бізде келесі стильдер бар делік:
p {
font-size: 16px;
font-family: Arial;
font-weight: bold;
line-height: 50px;
font-style: italic;
}
Оларды қысқартылған сипат арқылы қайта жазайық:
p {
font: bold italic 16px/50px Arial;
}
Практикалық тапсырмалар
Қысқартылған font сипатын қолданып,
кодты қысқартыңыз:
p {
font-family: "Times New Roman";
font-size: 13px;
line-height: 20px;
}
Қысқартылған font сипатын қолданып,
кодты қысқартыңыз:
p {
width: 300px;
font-family: Arial;
color: red;
font-size: 40px;
font-weight: bold;
}
Қысқартылған font сипатын қолданып,
кодты қысқартыңыз:
p {
font-family: Arial;
font-size: 40px;
font-weight: bold;
text-indent: 50px;
font-style: italic;
line-height: 60px;
}