مقاله زیر یک طرح کلی برای برگه‌های سبک HTML ارائه می‌کند. HTML Cascading Style Sheet برگه ای با قوانین و ویژگی هایی است که به مرورگر می گوید چگونه HTML را با استفاده از تمام سبک های مشخص شده ارائه کند. CSS راهی است که با آن به هر صفحه وب استایل می دهیم.
برگه های سبک HTML چیست؟
CSS دارای تمام ویژگی هایی مانند پس زمینه، رنگ ها، فونت ها، فاصله ها، حاشیه ها و غیره است که می توانیم برای هر عنصر در صفحات تعریف کنیم.
برگه‌های سبک HTML همچنین برای تنظیم طرح‌بندی صفحه، مانند جایی که سرصفحه، پاورقی یا هر عنصر دیگری در صفحه قرار می‌گیرد، استفاده می‌شود. CSS همیشه همراه با HTML صحبت می شود زیرا صفحات بدون هیچ سبکی بسیار کم رنگ هستند و هیچ عنوانی و غیره را برجسته نمی کنند و اندازه فونت یکسان در سراسر صفحه وجود دارد که اصلاً ظاهر خوبی به کاربران نمی دهد.
چگونه از شیوه نامه های HTML استفاده کنیم؟
در گذشته، سبک ها، اسکریپت ها، HTML همه چیز در یک صفحه نوشته می شد. این باعث شد که صفحات بسیار طولانی و خواندن و ویرایش آنها بسیار دشوار باشد. سپس راه برای جداسازی HTML، سبک ها و جاوا اسکریپت آمد.
راه هایی برای گنجاندن برگه های سبک HTML در یک صفحه وب
3 روش وجود دارد که از طریق آنها می توانیم سبک ها را بگنجانیم:
1. Inline Styling یا استایل برخط
این روشی برای نوشتن سبک برای هر عنصر در خود HTML در داخل یک ویژگی به نام style است.
این شیوه طراحی به هیچ وجه توصیه نمی شود زیرا HTML درهم به نظر می رسد، و ما نمی توانیم از رویکرد "یک بار بنویسید، در مکان های زیادی استفاده کنید" را دنبال کنیم.
مثال:
<h1 style=”font-size: 10px;margin-top: 10px;”>Hello World!</h1>
2. Internal Styling یا استایل داخلی
این عبارت است از گنجاندن سبک ها در تگ Style و قرار دادن آن در یک صفحه وب در بالای HTML. این شیوه بهتر ظاهر خطی است، زیرا می‌توانیم سبک‌های مشترک را در کنار هم داشته باشیم، در صورتی که لازم باشد برای چندین عنصر در یک زمان استفاده شود.
ویرایش فایل HTML در مرحله توسعه آسانتر است و نیازی نیست هر بار فایل CSS مربوطه را باز کنیم و هر بار آن را ویرایش کنیم.
مثال:
<html> <head> <style> .container-block { font-size: 10px; margin-top: 10px; } </style> </head> <body> <div class=”container-block”> Hello World! </div> </body> </html>
3. External Styling یا استایل خارجی
این روش رایج ترین و بهترین راه برای داشتن سبک برای یک صفحه وب است که شبیه به استایل داخلی است، اما تفاوت این است که استایل ها در یک فایل جداگانه با پسوند css نوشته می شوند و اشاره به آن در تگ head صفحه وب قرار می گیرد.
نحو برای پیوند دادن فایل CSS در صفحه وب به صورت زیر است:
<link rel="stylesheet" type="text/css" href="theme.css">
سبک‌ها باید در تگ head، که بالای تگ بدنه (یعنی محتوای واقعی) HTML است، گنجانده شوند.
اولویت بین استایل برخط(Inline) یا داخلی و یا خارجی چیست؟
سبک های درون خطی اولویت بیشتری نسبت به داخلی دارند و سپس آخرین اولویت برای استایل خارجی است.
Inline>Internal>External
بهترین روش ها در هنگام استفاده از CSS:
- CSS را می توان به جای یک فایل به تعدادی فایل تفکیک کرد.
- فایل‌های CSS جدا شده را می‌توان یکی یکی در تگ head با استفاده از تگ‌های پیوند گنجاند.
- یا یک فایل CSS می تواند چندین عبارت import برای وارد کردن بقیه فایل های CSS داشته باشد. این به طور منطقی CSS را جدا می کند اما در نهایت می شود. همه سبک ها از یک فایل رندر می شوند.
- سبک ها را می توان برای هر عنصر صفحه وب با انتخابگرها به عنوان تگ HTML، نام کلاس ها، شناسه ها، هر نام ویژگی تعریف کرد.
- برخی از انتخابگرهای شبه یا pseudo در دسترس هستند مانند:
- before
- after
- nth-child
- first-child
- last-child
- hover
- visited
- هنگامی که فایل‌های CSS چندگانه در صفحه گنجانده می‌شوند، آخرین مورد بالاترین اولویت را دارد و سبک‌های موجود فایل‌های قبلی با انتخابگر یکسان را لغو می‌کند.
- Stylesheets باید قبل از خود HTML استفاده شوند تا در هنگام بارگذاری صفحه، سبک ها اعمال شوند. اگر در پایان گنجانده شود، HTML ابتدا بارگذاری می شود و سپس به آرامی استایل ها اعمال می شود که تجربه بسیار بدی را به کاربر می دهد.
ویژگی های مختلف HTML Cascading Style Sheets
ویژگی های مختلف در زیر ذکر شده است:
- CSS انیمیشن ها را ارائه می دهد: قبلاً جاوا اسکریپت فقط برای انیمیشن ها استفاده می شد. اما آخرین نسخه CSS، یعنی CSS3، انیمیشن‌ها را با استفاده از ویژگی‌ها ارائه می‌کند.
- پیشوندهای فروشنده یا Vendor : قبل از اینکه مرورگرها نسخه استاندارد/نام ویژگی را برای هر ویژگی جدید منتشر کنند، مرورگرها برخی از پیشوندهای فروشنده را برای مدتی به عنوان آزمایش در اختیار ما قرار می دهند. توسعه دهندگان باید منتظر بمانند تا مرورگر نسخه های استاندارد خود را منتشر کند، و در عین حال، ویژگی های آزمایشی را می توان با پیشوندهای فروشنده استفاده کرد.
- CSS Transition: ویژگی Transition برای رفتن تدریجی به یک مقدار از دیگری در مدت زمان معین استفاده می شود. -webkit-transition: width 2s, height 4s
- CSS Transforms: ویژگی Transforms در CSS به شما امکان می دهد عناصر را ترجمه، بچرخانید، مقیاس بندی و چوله کنید.
کوئری های رسانه
موبایل، دسکتاپ، آی پد رفتار متفاوتی دارند. با این حال، ما نمی توانیم صفحات را به همان شیوه استایل بندی کنیم. استانداردهای وب قبلی به گونه ای طراحی شده اند که برای هر نوع دستگاهی CSS متفاوتی نیاز داشتیم.
با پیشرفت استانداردهای وب و نحوه ساخت وب، مرورگرها به گونه ای توسعه یافته اند که یک CSS واحد داشته باشند که برای هر نوع دستگاهی قابل استفاده باشد. برای تغییر سبک‌های دستگاه‌ها بر اساس عرض و ارتفاع، از پرس‌وجوهای رسانه‌ای استفاده می‌شود که می‌توانیم حداقل یا حداکثر عرض دستگاه را مشخص کنیم و سبک‌ها را درون آن بنویسیم.
مثال:
@media screen and (max-width: 767px){
.container
{
width: 60%;
padding: 20px;
}
}
سبک ها قطعا برای وب یک موهبت هستند. و از آنجایی که توسعه وب در زمان‌های اخیر به طور تصاعدی افزایش یافته است، CSS3 قطعاً تقاضای زیادی برای ایجاد صفحات بسیار تعاملی و بصری پیدا کرده است.
منبع: educba.com
