آموزش foundation-مرجع CSS

تنظیمات پیش فرض فریم ورک foundation

فریم ورک foundation از اندازه ی متن پیش فرض مرورگر(%font-size:100) استفاده می کند. برای بیشتر مرورگرهای رایانه های رومیزی، این مقدار برابر با 16px است. برای مرورگرهای موبایل، این مقدار برابر با 12px است. همچنین فونت پیش فرض "Helvetica Neue" است و مقدار line-height برابر با 1.5 است. این تنظیمات به عنصر <body> اعمال شده است.

بعلاوه ی موارد بالا، تمام عناصر <p> دارای 1.25rem مارجین(margin) از پایین می باشند و همچنین دارای line-height برابر با 1.6 هستند.

نگارش

عناصر زیر، عناصر اچ تی ام الی هستند که در فریم ورک foundation نسبت به پیش فرض های مرورگر کمی متفاوت استایل دهی می شوند. برای دیدن تغییرات، بر روی دکمه ی "امتحان کنید" کلیک کنید.

عنصر	توضیحات	مثال
<h1> - <h6>	سرفصل های h1 - h6	امتحان کنید
<a>	یک لینک به رنگ آبی روشن را ایجاد می کند که دارای افکت hover (به همراه underline ) می باشد	امتحان کنید
<small>	در یک سرفصل، یک متن ثانویه و روشن تر را ایجاد می کند.	امتحان کنید
<blockquote>	یک قطعه محتوا را از یک منبع دیگر مشخص می کند:	امتحان کنید
<strong>	یک متن پر رنگ را مشخص می کند(bold)	امتحان کنید
<em>	یک متن کج شده(italic) را مشخص می کند	امتحان کنید
<abbr>	عنصر abbr یک متن مخفف شده را مشخص می کند. این عناصر دارای یک زیرخط نقطه ای می باشند و نشانگر ماوس بر روی آنها علامت help می باشد.	امتحان کنید
<kbd>	یک مقدار وارد شده توسط صفحه کلید را مشخص می کند مانند: CTRL + p	امتحان کنید
<hr>	یک خط افقی را مشخص می کند.	امتحان کنید
<code>	کدهای خطی را مشخص میکند.	امتحان کنید
<ul>	یک لیست نامنظم را مشخص می کند.	امتحان کنید
<ol>	یک لیست منظم را مشخص می کند.	امتحان کنید
<dl>	یک لیست توضیحات را مشخص می کند.	امتحان کنید

تراز بندی Text

از کلاس های CSS زیر استفاده کنید تا ترازبندی یک متن را تغییر دهید:

کلاس	توضیحات	مثال
.text-left	یک متن را به سمت چپ ترازبندی می کند.	امتحان کنید
.text-right	یک متن را به سمت راست تراز بندی می کند.	امتحان کنید
.text-center	یک متن را در وسط قرار می دهد.	امتحان کنید
.text-justify	Justifies text (stretches the lines so that each line has equal width, like in newspapers	امتحان کنید

تراز بندی متن برای صفحه های نمایش مختلف

از کلاس های CSS زیر استفاده کنید تا ترازبندی متن را برای یک عنصر در صفحه های نمایش مختلف، تغییر دهید:

کلاس	توضیحات	مثال
تراز بندی سمت چپ
.small-text-left	برای تمام اندازه های صفحه ی نمایش، متن را به سمت چپ ترازبندی می کند.	امتحان کنید
.small-only-text-left	تنها برای صفحه های نمایش کوچک، متن را به سمت چپ ترازبندی می کند. عرض کمتر از 40em.	امتحان کنید
.medium-text-left	برای صفحه های نمایش پهن تر از 40.0625em ، متن را به سمت چپ ترازبندی می کند.	امتحان کنید
.medium-only-text-left	برای صفحه های نمایش بین 64em , 40.0625em متن را به سمت چپ تراز بندی می کند.	امتحان کنید
.large-text-left	برای صفحه های نمایش پهن تر از 64.0625em متن را به سمت چپ تراز بندی می کند.	امتحان کنید
.large-only-text-left	برای صفحه های نمایش بین 90em , 64.0625em متن را به سمت چپ تراز بندی می کند.	امتحان کنید
.xlarge-text-left	برای صفحه های نمایش پهن تر از 90.0625em متن را به سمت چپ تراز بندی می کند.	امتحان کنید
.xlarge-only-text-left	برای صفحه های نمایش بین 120em , 90.0625em متن را به سمت چپ تراز بندی می کند.	امتحان کنید
.xxlarge-text-left	برای صفحه های نمایش پهن تر از 120em متن را به سمت چپ تراز بندی می کند.	امتحان کنید

تراز بندی سمت راست
.small-text-right	برای تمام اندازه های صفحه ی نمایش، متن را به سمت راست تراز بندی می کند.	امتحان کنید
.small-only-text-right	تنها برای صفحه های نمایش کوچک، (عرض کمتر از 40em) متن را به سمت راست ترازبندی می کند.	امتحان کنید
.medium-text-right	برای صفحه های نمایش پهن تر از 40.0625em متن را به سمت راست ترازبندی می کند.	امتحان کنید
.medium-only-text-right	برای صفحه های نمایش بین 64em , 40.0625em متن را به سمت راست ترازبندی می کند.	امتحان کنید
.large-text-right	برای صفحه های نمایش پهن تر از 64.0625em متن را به سمت راست ترازبندی می کند.	امتحان کنید
.large-only-text-right	برای صفحه های نمایش بین 90em و 64.0625em متن را به سمت راست ترازبندی می کند.	امتحان کنید
.xlarge-text-right	برای صفحه های نمایش پهن تر از 90.0625em متن را به سمت راست ترازبندی می کند.	امتحان کنید
.xlarge-only-text-right	برای صفحه های نمایش بین 120em , 90.0625em متن را به سمت راست ترازبندی می کند.	امتحان کنید
.xxlarge-text-right	برای صفحه های نمایش پهن تر از 120em متن را به سمت راست ترازبندی می کند.	امتحان کنید

تراز بندی وسط
.small-text-center	برای تمام اندازه های صفحه ی نمایش، متن را به وسط ترازبندی می کند.	امتحان کنید
.small-only-text-center	تنها برای صفحه های نمایش کوچک، متن را به وسط ترازبندی می کند( عرض کمتر از 40em)	امتحان کنید
.medium-text-center	برای صفحه های نمایش پهن تر از 40.0625em متن را به وسط ترازبندی می کند.	امتحان کنید
.medium-only-text-center	برای صفحه های نمایش بین 64em و 40.0625em متن را به وسط ترازبندی می کند.	امتحان کنید
.large-text-center	برای صفحه های نمایش پهن تر از 64.0625em متن را به وسط صفحه ترازبندی می کند.	امتحان کنید
.large-only-text-center	برای صفحه های نمایش بین 90em , 64.0625em متن را به وسط ترازبندی می کند.	امتحان کنید
.xlarge-text-center	برای صفحه های نمایش پهن تر از 90.0625em متن را به وسط ترازبندی می کند.	امتحان کنید
.xlarge-only-text-center	برای صفحه های نمایش بین 120em , 90.0625em متن را به وسط ترازبندی می کند.	امتحان کنید
.xxlarge-text-center	برای صفحه های نمایش پهن تر از 120em متن را به وسط منتقل می کند.	امتحان کنید

Justified - تعدیل شده
.small-text-justify	متن را برای تمام صفحه های نمایش، تعدیل می کند.	امتحان کنید
.small-only-text-justify	تنها برای صفحه های نمایش کوچک، متن را تعدیل می کند( عرض کمتر از 40em).	امتحان کنید
.medium-text-justify	برای صفحه های نمایش پهن تر از 40.0625em متن را تعدیل می کند.	امتحان کنید
.medium-only-text-justify	برای صفحه های نمایش بین 40.0625em, 64em متن را تعدیل می کند.	امتحان کنید
.large-text-justify	برای صفحه های نمایش پهن تر از 64.0625em متن را تعدیل می کند.	امتحان کنید
.large-only-text-justify	برای صفحه های نمایش بین 90em , 64.0625em متن را تعدیل می کند.	امتحان کنید
.xlarge-text-justify	برای صفحه های نمایش پهن تر از 90.0625em متن را تعدیل می کند.	امتحان کنید
.xlarge-only-text-justify	برای صفحه های نمیش بین 120em , 90.0625em متن را تعدیل می کند.	امتحان کنید
.xxlarge-text-justify	برای صفحه های نمایش پهن تر از 120em متن را تعدیل می کند.	امتحان کنید

دیگر کلاس ها

کلاس	توضیحات	مثال
.left	یک عنصر را به سمت چپ شناور می کند.	امتحان کنید
.right	یک عنصر را به سمت راست شناور می کند.	امتحان کنید
.clearfix	شناور بودن را پاک می کند. باید به عنصر والد عناصر شناور اضافه شود.
.hide	یک عنصر را محو می کند( dispaly: none)	امتحان کنید
.list-inline	تمام آیتم های لیست را در یک خط قرار می دهد.	امتحان کنید
.lead	یک عنصر <p> را برجسته می کند.	امتحان کنید
.subheader	برای عناصر <h1> - <h6> یک سرفصل روشن تر را ایجاد می کند.	امتحان کنید

: نوشته شده توسط احسان عباسی; بازدید: 3696

برای درج دیدگاه، ابتدا باید وارد بیاموز شوید.