کۆرسی HTML - ستایل لە HTML

پێشەکی

style attribute لە HTML دا بۆ زیادکردنی شێواز بەکاردێت بۆ تاگەکان، وەک ڕەنگ، فۆنت، قەبارە و زیاتر.

نمونەی سەرەتایی

<!DOCTYPE html>
<html lang="ku" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>نمونەی Style لە HTML</title>
</head>
<body>
    <h1>نمونەکانی Style</h1>
    
    <p style="color: red;">من سوورم</p>
    <p style="color: blue;">من شینم</p>
    <p style="font-size: 30px;">من گەورەم</p>
</body>
</html>

Style Attribute لە HTML

بۆ دانانی ستایلی تاگێکی HTML، دەتوانیت style attribute بەکاربهێنیت.

Syntax (ڕێنووس)

<tagname style="property:value;">

property = خاسیەتێکی CSS
value = بەهایەکی CSS

ڕەنگی پاشبنەما (Background Color)

خاسیەتی background-color لە CSS دا ڕەنگی پاشبنەمای تاگی HTML دیاری دەکات.

نمونە: دانانی ڕەنگی پاشبنەما بۆ پەڕە

<!DOCTYPE html>
<html lang="ku" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ڕەنگی پاشبنەما</title>
</head>
<body style="background-color: powderblue;">
    <h1>پەڕەیەک بە پاشبنەمای شین</h1>
    <p>ئەم پەڕەیە ڕەنگی پاشبنەمای powderblue هەیە</p>
</body>
</html>

نمونە: دانانی ڕەنگی پاشبنەما بۆ دوو تاگی جیاواز

<!DOCTYPE html>
<html lang="ku" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>چەند ڕەنگێکی پاشبنەما</title>
</head>
<body>
    <h1 style="background-color: tomato;">سەردێڕ بە پاشبنەمای سوور</h1>
    <p style="background-color: lightblue;">پەرەگرافێک بە پاشبنەمای شینی ڕووناک</p>
</body>
</html>

ڕەنگی دەق (Text Color)

خاسیەتی color لە CSS دا ڕەنگی دەق دیاری دەکات بۆ تاگێکی HTML.

نمونە

<!DOCTYPE html>
<html lang="ku" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ڕەنگی دەق</title>
</head>
<body>
    <h1 style="color: blue;">سەردێڕێکی شین</h1>
    <p style="color: red;">پەرەگرافێکی سوور</p>
    <p style="color: green;">پەرەگرافێکی سەوز</p>
</body>
</html>

Fonts (فۆنتەکان)

خاسیەتی font-family لە CSS دا جۆری فۆنت دیاری دەکات بۆ عناسرێکی HTML.

نمونە

<h1 style="font-family: Arial, sans-serif;">سەردێڕ بە فۆنتی Arial</h1>
<p style="font-family: 'Courier New', monospace;">دەقێک بە فۆنتی Courier New</p>
<p style="font-family: Georgia, serif;">دەقێک بە فۆنتی Georgia</p>

قەبارەی دەق (Text Size)

خاسیەتی font-size لە CSS دا قەبارەی دەق دیاری دەکات بۆ عناسرێکی HTML.

نمونە

<h1 style="font-size: 40px;">سەردێڕێکی گەورە</h1>
<p style="font-size: 20px;">دەقێکی مامناوەند</p>
<p style="font-size: 12px;">دەقێکی بچووک</p>