سبد (0)

تبلیغات

آموزش 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> یک سرفصل روشن تر را ایجاد می کند. 

امتحان کنید
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی