سبک های HTML

سبک های HTML


برای مشخص کردن اینکه هرعنصر HTML چگونه به کاربر نمایش داده شود و یا تعیین استایل عناصر HTML شما به CSS نیاز دارد.

HTML و عناصر آن به تنهایی خیلی محدود است. این موضوع خوب نیست، زیرا عناصر HTML که به صورت انفرادی به کار گرفته می شوند ظاهر چندان جالبی ندارند و برای ساخت صفحات وب حرفه ای قطعا نیاز به استایل بندی آنها خواهید داشت.

امّا استایل دهی به HTML توسط خود HTML انجام نمی شود. این موضوع وظیفه زبان CSS است.

CSS چیست؟

CSS مخفف عبارت Cascading Style Sheets است و هدف آن اینست که نویسندگان/طراحان وب را قادر به استفاده از سبک ها در وب سایت خود کنند.

با CSS می توانید بسیاری از امکانات سبک و استایل را برای هر عنصر HTML مشخص کنید. هر استایل نیز مانند ویژگی دارای دو بخش است اول نام و دوم مقدار (ارزش) که توسط دو نقطه (:) از یک دیگر جدا می شوند. هر استایل نیز با علامت نقطه ویرگول (;) جدا می شود.

مانند این:

color:red;font-size;20px;

برای خوانایی بهتر این کدها بهتر است بین آنها فاصله بگذاریم:

color: red; font-size: 20px;

همچنین می توانید هر استایل را در یک خط مجزا بنویسید:

color: red;

font-size: 20px;

انواع صفحه استایل

روش های مختلفی برای پیاده سازی سبک ها یا استایل ها در یک سند HTML وجود دارد. به طور کلی، کدهای CSS با استفاده از سبک درون خطی، صفحه استایل جاساز شده و صفحه استایل خارجی به HTML اضافه می شود.

استایل درون خطی

کدبالا نمونه ای از سبک های درون خطی است. به این دلیل که ما استایل را در خود تگ HTML مشخص می کنیم به آن استایل درون خطی گفته می شود.

<p style="color: red; font-size: 20px;">این یک متن با استایل است</p>

برای مشاهده نتیجه اینجا کلیک کنید.

درحالی که استایل های داخلی یک روش سریع و مناسب برای اضافه کردن سبک ها به یک سند HTML است، امّا باید از این روش کمتر استفاده کنید.

اضافه کردن سبک های درون خطی در سراسر یک وب سایت می تواند کار شما و موتورهای جستجو برای درک وب سایتتان را دشوار کند. اگر این سبک ها در بسیاری از قسمت های سایت اعمال شود، یک تغییر کوچک در استانداردهای HTML و مرورگرها می تواند به کلی سایت شما را بهم بریزد.

استایل جاساز شده

یک گام بالاتر از سبک های داخلی، سبک های جاساز شده است. سبک های جاساز شده به عنصر <head> سند (یا عنصر <noscript> که درون عنصر <head> قرار دارد) اضافه می شود و می تواند شامل همه (یا حداقل بیشتر) عناصر سند باشد. این می تواند خواندن کدهای سند را راحت تر از استایل درون خطی کند، به خصوص اگر برای بسیاری از عناصر استفاده شود.

برای اضافه کردن سبک های جاساز شده به یک صفحه وب، سبک ها را بین تگ های <style> قرار دهید و کدهای خود را بنویسید.

<!DOCTYPE html>

<html>

<head>

<title>مثالی از سبک های جاساز شده</title>

<style>

body {

background-color: black;

color: azure;

font-size: 1.1em;

}

h1 {

color: white;

}

#start {

font-size: 1.5em:

}

.colorfont {

color: red;

}

</style>

</head>

</body>

<h1>استایل جاساز شده</h1>

<p id="start">این پاراگراف با استایل جاساز شده تغییر شکل می دهد</p>

<p class="colorfont">این پاراگراف نوع دیگری از تعیین سی اس اس در صفحه وب است</p>

</body>

</html>

برای مشاهده نتیجه اینجا کلیک کنید.

استایل خارجی

با در نظر گرفتن یک گام پیشرفته تر، می توانید تمام استایل های خود را به یک صفحه استایل خارجی قرار دهید.

سبک های خارجی به ایجاد یک فایل جداگانه که حاوی تمام اطلاعات استایل است اشاره دارد. این فایل پس از آن به عنوان دوست بسیاری از صفحات HTML یا حتی کل سایت مرتبط می شود.

برای اضافه کردن صفحه استایل خارجی به یک صفحه وب، از تگ <link> استفاده می کنیم، URL مربوط به صفحه استایل را در ویژگی href و همچنین rel=”stylesheet” را هم اضافه کنید.

برای مثال زیر، سبک های خود را از مثال بالا (جاسازی شده) کپی کرده، آنها را به یک صفحه استایل خارجی منتقل کرده، آپلود نموده و سپس به سند زیر اضافه کردیم.

<!DOCTYPE html>

<html>

<head>

<title>مثالی از سبک های جاساز شده</title>

<link rel="stylesheet" href="http://rozup.ir/view/2860161/style external.css">

</head>

</body>

<h1>استایل جاساز شده</h1>

<p id="start">این پاراگراف با استایل جاساز شده تغییر شکل می دهد</p>

<p class="colorfont">این پاراگراف نوع دیگری از تعیین سی اس اس در صفحه وب است</p>

</body>

</html>

بنابراین دیگرفایل HTML ما حاوی کدهای CSS نیست بلکه کد CSS در یک فایل خارجی قرار داده شده است.

قانون @import

شما همچنین می توانید از قوانین CSS @import برای وارد کردن یک صفحه استایل خارجی استفاده کنید.

برای انجام این کار، از تگ <style> استفاده نمایید.

<style>

@import 'externalstyle.css';

</style>

توجه داشته باشید که این روش می تواند بر عملکرد آن تأثیر بگذارد و اغلب برای استفاده از روش اول (به عنوان مثال با تگ <link>) کارآیی بیشتری دارد.

با این وجود، قانون @import نیز می تواند از صفحه استایل خارجی خود (به منظور وارد کردن یک صفحه استایل دیگر به آن) استفاده شود بدون اینکه مسائل مربوط به کارایی مشابه را داشته باشد.

شما فقط به یک روش استفاده از سبک ها در یک سند محدود نمی شوید. بلکه می توانید هرسه روش را در صورت لزوم ترکیب کنید.

بسیاری از وب سایت های مدرن بیشتر از استایل های خارجی استفاده می کنند.

امّا، دلایل معتبر بسیاری وجود دارد که چرا ممکن است نیاز به استفاده از یک یا هر دو روش دیگر باشد.

انتخابگرها

صفحات استایل جاساز شده و صفحات استایل خارجی از سلکتورها یا انتخابگرها برای مشخص کردن عنصر و برای اعمال استایل ها در HTML استفاده می کنند. برای مثال، انتخابگر عنصر <body> خودش است یعنی body.

در اینجا یک صفحه استایل است که برای نمونه های بالا استفاده می شود:

body {

background-color: black;

color: azure;

font-size: 1.1em;

}

h1 {

color: white;

}

#start {

font-size: 1.5em:

}

.colorfont {

color: red;

}

دو انتخابگر اول body و h1 است. آنها عناصر HTML همان نام را انتخاب می کنند و استایل ها را به آن عناصر اعمال می کنند. یعنی هرچه تیتر h1 در این سند قرار دهید با ویژگی بالا نمایش داده می شود و کل صفحه وب نیز با پس زمینه مشکی نمایش داده می شود.

انتخابگر بعدی #start است. این انتخابگر ID (شناسه) می باشد. این عنصر را برروی صفحه وب انتخاب می کند که یک شناسه id را به مقدار start تنظیم می کند. به عبارت دیگر، id=”start”.

انتخابگر بعدی .colorfont است. این یک انتخاب class (کلاس) است. این انتخابگر تمام عناصر در سند html را انتخاب می کند که یک ویژگی کلاس با مقدار .colorfont دارد. به عبارت دیگر، class=”colorfont”.

همانطور که مشاهده کردید انواع مختلفی از انتخابگرها وجود دارد که می توانید از آنها برای عناصر HTML خود استفاده کنید.

در اینجا برخی از مواردی که می توانید با انتخابگرهای CSS انجام دهید را نام برده ایم:

- تنها عناصری را انتخاب کنید که ویژگی دارند.

- عنصری را انتخاب کنید که ویژگی مشخص با مقدار خاص دارد.

- یک عنصر خاص را انتخاب کنید، امّا فقط زمانی که آن را در داخل یک عنصر خاص دیگر قرار می دهید.

- تنها اولین فرزند یک عنصر خاص را انتخاب کنید.

- تنها آخرین فرزند یک عنصر خاص را انتخاب کنید.

- شما حتی می توانید مشخص کنید که کدام فرزند (به عنوان مثال، فرزند4، 5، 6... و غیره) انتخاب شود.

- یک عنصر را تنها زمانی که آن را شناور کرده اید، انتخاب کنید.

و خیلی چیزهای دیگر...

در جلسه ی بعد در مورد رنگ ها در HTML صحبت می کنیم.

جلسه قبل | جلسه بعد

تبلیغات در پایین ادامه ی مطلب

نظرات شما


    نام
    ایمیل (منتشر نمی‌شود) (لازم)
    وبسایت
    :) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
    نظر خصوصی
    مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
    کد امنیتیرفرش کد امنیتی