رفتن به مطلب
محفل من
Mostafa

آموزش گام به گام CSS

پست های پیشنهاد شده

Css چیست ؟ (سی اس اس چیست)

css چیست ؟ الگوهای آبشاری یا روی‌ انداز آبشاری سَبْک یا سی‌ اس‌ اس (به انگلیسی: CSS: Cascading Style Sheets ) در کنار اچ‌تی‌ام‌ال هستهٔ فناوری ساخت صفحه‌های وب هستند. سی‌اس‌اس روشی ساده برای نمایش چیدمان و جلوه‌های تصویری (مانند نوع قلم، رنگ و اندازه‌ها) بر صفحه‌های وب است. الگوهای آبشاری از جنس زبان‌های نشانه‌گذاری، با ساختار متن سادهٔ رایانه هستند و درون هرکدام، دستورهایی آبشار مانند و پی‌درپی، برای چگونگی نمایش هر صفحه وب افزوده می‌شود. به گفته‌ای ساده تر، این دستورها روش نشان داده شدن قلم‌ها و اندازه شان، رنگ‌ها و پس زمینه‌ها، روش چیدمان موزاییک‌های دربرگیرنده داده‌ها (دیواره ها)، و بسیاری دیگر از عنصرهای ساختار هر صفحه وب را، درون خود جای می‌دهند.

کاربرد اصلی css چیست ؟ بیشترین استفاده‌ای که از این زبان در حال حاضر می‌شود مشخص کردن سبک صفحهٔ وب اچ‌تی‌ام‌ال و اکس‌اچ‌تی‌ام‌ال است ولی آن را می‌توان بر هر نوع مستند اکس‌ام‌ال از جمله اس‌وی‌جی و اکس‌یوال اعمال کرد. نگهداری و تغییر مشخصات سی‌اس‌اس به عهدهٔ کنسرسیوم وب جهانگستر است.

یکی از مهمترین نکته ها برای طراحی سایت ، استفاده بهینه از  css میباشد در این بخش از آموزش css به شرح ویژگی های اساسی و مهم در طراحی وب سایت میپردازیم و روشهای اضافه کردن CSS به صفحه را مورد بررسی قرار میدهیم.

سه روش برای اضافه کردن CSS به صفحه وجود دارد :

CSS خارجی
CSS داخلی
سبک درون خطی

برای آسان کردن کار موتور های جستجو سعی کنید از انیمیشن های فلش و یا تگ های span بوسیله css ،  کمتر استفاده کنید. با استفاده از css از دوباره نویسی کدهای HTML که باعث کند شدن لود صفحه میشود جلوگیری میکنیم.

مزایای Css

با اینکه در سال‌های نخست پیدایش طراحی وب، طراح‌ها از جدول‌ها و ترفند پنهان سازی آنها برای چیدمان کمک می‌گرفتند، روش مدرن طراحی وب، این روند را منسوخ کرده است. چیدمان اکنون، تنها با دیواره (یا DIV)، که برتری‌های فراوانی نسبت به جدول‌ها (یا TABLE) دارند، انجام می‌شود. هر دیواره، یک موزاییک مجازی بخش کننده صفحه‌است که کار چیدمان را آسان‌تر انجام می‌دهد. جدول‌ها به جایگاه نمایش داده‌های ستونی خود بازگشتند و دیگر از آنها برای چیدن داده‌های صفحه‌های وب استفاده نمی‌شود. الگوهای آبشاری، افزون بر سبک تر کردن هر صفحه وب و پاک‌تر کردن آن، از داده‌های تصویری و نمایشی استاندارد، روش طراحی وب را به میزان فراوانی آسان تر و دسترسایی و کارایی وب را بهتر کرده‌اند.

به کمک CSS میتونیم از دوباره نویسی کدهای HTML که باعث مشکل شدن کدنویسی و همچنین کند شدن سرعت بارگذاری صفحه در اینترنت میشه جلوگیری کنیم.

برای مثال می تونیم یک بار نوع فونت مورد استفاده در یک صفحه را تعیین کنیم و دیگر مجبور نباشیم کد مربوط به فونت را در صفحه به کارببریم.
در واقع بطور کلی میشه گفت CSS این امکان رو ایجاد میکنه تا طراح بتونه چندین مشخصه توی طراحی صفحه رو به یکباره تعیین کنه و همچنین میشه گفت برای کنترل دقیق مشخصات صفحه و استاندارد کردن تگ های غیراستاندارد HTML و طراحی Layout صفحه میتونیم CSS رو بکار ببریم.

مزایای CSS بصورت خلاصه : (در مورد هرکدوم از این مزایا میشه مفصل صحبت کرد و مفهوم اونا رو در عمل باید دید)

CSS در وقت صرفه جویی میکنه (همونطور که گفتم با تعیین یکباره مشخصات)
تغیییرات مجدد تگ های HTML بسیار راحت میشه.
طراحی صفحه بدون نیاز به تگ های قالب بندی HTML
طراحی صفحات دینامیک به کمک javascript
و …

سبک درون خطی ( Inline )

این روش از نوشتن css دارای بالاترین اولویت اجرا نسبت به دو روش دیگر است. استفاده از این روش تمامی Style های موجود در دو روش دیگر را نادیده میگیرد.این روش در واقع  هدف واقعی  استفاده از css را کاهش میدهد .

برای اینکه طراحی سایت بهینه تری داشته باشید پیشنهاد میشود که از این روش فقط در مواقع ضروری استفاده کنید.

با استفاده از ویژگی style در یک عنصر میتوانید از این روش نوشتن css استفاده کنید.

مثال :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

 

CSS داخلی

یکی از روشهای تعریف css استفاده از روش Internal Style Sheet میباشد. برای استفاده از این روش  بایستی کد های CSS را در فایل HTML ، درون تگ<head> قرار دهید.

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

مزایای استفاده از این سبک :

تنها بر روی صفحاتی که از این سبک استفاده کرده اند تاثیر میگذارد.
بر خلاف سبک درون خطی ، این روش میتواند از خاصیت ارث بری کلاس ها استفاده کند.برای مثال میتوانید از یک Style در چندین جای همان صفحه اسفاده کنید.
این سبک ممکن است اولویت بالاتری از CSS خارجی ها داشته باشند.

معایب استفاده از این سبک :

تنها در صفحاتی که در آن هستند تاثیر میگذارند.
افزایش زمان بارگزاری صفحه

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

CSS خارجی

یکی از روشهای تعریف css استفاده از روش External Style Sheet میباشد.

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

از CSS خارجی زمانی استفاده میشود که آن style در بیشتر صفحات استفاده شده باشد.
با استفاده از CSS خارجی ، شما با تغییر دادن تنهایک فایل میتوانید ظاهر سایت خود را تغییر دهید.هر صفحه بایستی به CSS Style مورد نظر خود لینک داده شود. بهترین روش برای گذاشتن CSS Style در صفحات وب ، CSS خارجی میباشد
با استفاده از تگ <link> در داخل بخش head شما میتوانید یک CSS خارجی تعریف کنید.
مثال :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

CSS خارجی را میتوان در هر ویرایشگر متنی نوشت ، CSS Style ها باید با  فرمت css. ذخیره شوند. با استفاده از این سبک در واقع شما از یک Style میتوانید در چندین صفحه از وب سایت خود استفاده کنید.

اصول نوشتن کدهای CSS

در این بخش از آموزش css ، اصول نوشتن کدهای css را شرح میدهیم.

گذاشتن فاصله بین مقدار و واحد اشتباه است

مثال صحیح :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

مثال غلط:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

قوانین نام گذاری فایل های css

از کاراکترهای خاص استفاده نکنید.کاراکترهای مجاز عبارتند از :حروف a-z ، اعداد ۰-۹ ، خط زیر (_) ، خط فاصله (-)
از کاراکتر فضای خالی استفاده نکنید ( ) مثلا : style Master.css  ، این نامگذاری میتواند در وب سرور شما مشکل ایجاد کند.
نام فایل بایستی با یک حرف شروع شود.
برای نام گذاری فایل از حروف کوچک استفاده کنید.
نام فایل را تا آنجا که ممکن است کوتاه تعریف نمایید.
فراموش نکنید که حتما فایل را با پسوند css ذخیره کنید.

با رعایت تمامی این نکات شما طراحی سایت بهینه تری را خواهید داشت .

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

تنظیم ابعاد در CSS

برای تنظیم ابعاد عناصر در CSS  از چند ویژگی میتوان استفاده کرد که مهمترین و اصلی ترین آنها Width و Height میباشد.

در ذیل به توضیح این ویژگی ها با توجه به ورژن تعریف شده در CSS میپردازیم.

height :  این ویژگی در تمام مرورگر ها پشتیبانی میشود.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

با دو ویژگی max-height و max-width شما میتوانید حداکثر مقدار را برای یک عنصر تنظیم کنید.

max-height :  این ویژگی در تمام مرورگر ها پشتیبانی میشود. به استثتا IE6 و ورژن های پایین تر

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

max-width : این ویژگی در تمام مرورگر ها پشتیبانی میشود. به استثتا IE6 و ورژن های پایین تر

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

با دو ویژگی min-height و min-width شما میتوانید حداقل  مقدار را برای یک عنصر تنظیم کنید.

min-height : این ویژگی در تمام مرورگر ها پشتیبانی میشود. به استثتا IE6 و ورژن های پایین تر

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

min-width : این ویژگی در تمام مرورگر ها پشتیبانی میشود. به استثتا IE6 و ورژن های پایین تر

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

width :  این ویژگی در تمام مرورگر ها پشتیبانی میشود.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

عرض استاندارد برای طراحی سایت :

برای تنظیم عرض استاندارد برای طراحی سایت  با توجه به رزولیشن استاندارد و یا رزولیشنی که اکثر مخاطبان از آن اسفاده میکنند (۷۶۸*۱۰۲۴) ، بهتر است عرض ۹۸۰px را  تنظیم کنید. این عرض طبق استاندارد های صفحات وب انتخاب شده است.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

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

انواع مختلفی از این ویژگی وجود دارد که به شرح هر یک از آنها میپردازیم

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

background-color : این خاصیت رنگ پس زمینه یک عنصر را مشخص میکند، برای مثال برای تنظیم رنگ پس زمینه بدنه سایت از کد زیر استفاده میکنیم :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

background-image : با استفاده از این ویژگی تصویر پس زمینه یک عنصر را مشخص میکنیم ،برای مثال برای تنظیم تصویر  پس زمینه بدنه سایت از کد زیر استفاده میکنیم :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

background-repeat : با استفاده از این ویژگی میتوانیم مشخص کنیم که تصویر چگونه تکرار شود.اگر میخواهیم تصویر ما به صورت افقی  تکرار شود  زمانی که خود تصویر نیز افقی است (برای جلوگیری از گذاشتن عکس سایز بزرگ که باعش کند شدن بالا آمدن سایت میشود و به هیچ عنوان در طراحی سایت پیشنهاد نمیشود ) :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

زمانی که بخواهیم تصویر فقط یک بار و بدون تکرار نمایش داده شود از دستور زیر استفاده میکنیم :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

background-attachment : برای اینکه بتوانیم تصویر پس زمینه را ثابت انتخاب کنیم از این ویژگی استفاده میکنیم. مقدار پیش فرض آن scroll میباشد.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

background-position : این خاصیت موقعیت  یک عنصر را مشخص میکند، برای مثال برای تنظیم موقعیت تصویر به گوشه سمت راست –  بالا  از کد زیر استفاده میکنیم :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

این سه خط را میتوان به صورت خلاصه تر نوشت :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

 Font Family

در این بخش از آموزش css ، تنظیم قلم و فونت را آموزش میدهیم.

در css دو نوع از خانواده فونت ها وجود دارد.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

با ویژگی font-family شما میتوانید نوع قلم مورد نظر را برای متن تنظیم کنید،چنانچه میخواهید از یک فونت خاص استفاده کنید ، نوع فونت مورد نظر خود را اول بنویسید ، چون ممکن است این فونت در کامپیوتر های دیگر موجود نباشد و باعث بهم ریختگی نظم خطوط شود میتوانید نام چند فونت دیگر را نیز وارد کنید.
برای مثال :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

در صفحات نمایش کامپیوترها فونت های خانواده sans-serif نسبت به فونت های خانواده serif آسانتر خوانده میشوند و عمومی تر هستند.

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

Font Style
با این ویژگی شما نوع نمایش متن را مشخص میکنید.این ویژگی دارای دومقدار زیر میباشد :

normal   :متن به صورت معمولی نمایش داده میشود
italic   : متن به صورات ایتالیک نمایش داده میشود
oblique  :  متن به صورت مورب نمایش داده میشود

مثال :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

Font Size
این ویژگی سایز متن را مشخص میکند. اندازه متن در طراحی وب سایت بسیار حائز اهمیت است. ویژگی font-size را میتوانید به صورت مطلق یا نسبی مقداردهی کنید . اگرچه در زوم و رزولیشن های مختلف این مقدار تغییر میکند.ولی این تغییر اندازه برای کل صفحه میباشد وشامل یک بخش نیست. سایز پیش فرض برای یک متنن نرمال ۱۶px تعریف میشود.
برای متن هایی که در بالای صفحه (header) نمایش داده میشوند از تگ های <h1> – <h6> و تگ <p> برای پاراگراف های خود استفاده کنید، در مورد این تگ ها در قسمت آموزش HTML میتوانید بیشتر اطلاعات کسب کنید .
مثال :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

تنظیم فونت با واحد EM
در نسخه های اولیه Internet Explorer به دلیل پشتتیباتی نشدن واحد px بسیاری از طراحان از واحد em استفاده میکردند.
هر ۱em رابر با ۱۶px میباشد.
مثال :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

این واحد در تمامی مرورگرها پشتیبانی میشود.

Text Color

در این بخش از آموزش css ، تنظیم متن و نوشته را آموزش میدهیم.

ویژگی color  برای تنظیم رنگ متن استفاده میشود.این ویژگی با ۳ روش زیر میتواند مقدار دهی شود

HEX : مثال : “#ff000”
RGB:  مثال :   (rgb(255,0,0
نام رنگ :  مثال :  red

رنگ پیش فرض در یک صفحه وب سایت بستگی به رنگ انتخاب شده در بدنه وب سایت شما دارد
مثال :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

با تغییر رنگ بدنه شما در واقع رنگ background صقحه را تغییر میدهید

Text Alignment
برای تنظیم متن در حالت افقی از این ویژگی استفاده میکنیم،این ویژگی میتواند با یکی ازمقادیر زیر مقداردهی شود

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

با مقدار  Justify تمامی خطوط عرض یکسانی خواهند داشت

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

Text Decoration

این ویژگی بیشتر برای پاک کردن یا اضافه کردن فرم خاص به متن مورد استفاده قرار میگیرد

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

در این مثال در واقع اگر متن شما دارای فرمت خاصیمانند زیر خط (underline) یا هر فرمت دیگری بود ،این فرمت را پاک میکند.
مقادیری که میتواند این ویژگی بگیرد در مثال زیر آمده است

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

 لیست UL و LI در سی اس اس

در این بخش از آموزش css ، تنظیم لیست ها را آموزش میدهیم.

ویژگی هایی که برای یک لیست در css وجود دارد به ما این امکان را میدهد که  List را در ۳ حالت زیر نمایش دهیم.

تنظیم لیست یه صورت مرتب
تنظیم لیست به صورت نامرتب
تنظیم تصویر برای نشانگر لیست

در HTML  دو نوع ار انواع لیست وجود دارد

unordered lists     آیتم های لیست با یک نشانگرد گرد شکل مشکی ، نمایش داده میشوند
ordered lists     آیتم های لیست با اعداد یا حروف ، نشانه گذاری میشوند.

Css  این انعطاف پپذیری را به شما میدهد که نشانگر آیتم های لیست خود را به یک تصویر مدل دهید،که برای زیبایی طراحی سایت شما موثر میباشد.
با ویژگی list-style-type  شما میتوانید marker  لیست خود را به شکل مورد نظر خود تغییر دهید، این ویژگی شامل مقادیر زیر میباشد.

 

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

 

با ویژگی   list-style-image  شما میتوانید تصویر مورد نظر خود را برای  نشانگر لیست تنظیم نمایید.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

 

این ویژگی ممکن است در تمام مرورگرها پشتیبانی نشود . در مثال زیر راه حل قطعی برای پشتیبانی تمام مرورگرها را میبینید.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

برای اینکه تمام این ویژگی ها را در یک خط اعمال کنید از مثال زیر میتوانید استفاده کنید ، که به ترتیب ۱ list-style-image -3   list-style-position -2 list-style-type  مقداردهی میشوند.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

Border , Margin , Padding

در این بخش از آموزش css ، تنظیم خواص باکس ها را آموزش میدهیم. همه ی عناصری که در  HTML   تعریف میشوند میتوانند این ویژگی ها را داشته باشند.

این بخش یکی از مهمترین آموزش ها ، در سی اس اس و طراحی قالب سایت می باشد.

طول یک Element   در واقع شامل مجموع مقدار تمامی این ویژگی ها به علاوه طول خود شی می باشد .
برای مثال جمع کل طول یک شی با ویژگی های زیر ۳۰۰px  میباشد.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

 

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

خواص مربوط به سرریزی Overflow عناصر در CSS

در این بخش از آموزش css ، ویژگی Overflow را آموزش میدهیم.

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

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

در مثال بالا ، در صورتی که ارتفاع و عرض محتوای داخل div بیشتر از مقدار طول و عرض تعیین شده شود ، div بصورت اسکرول نمایش داده میشود.

مقادیری که میتوانید در این خصوصیت استفاده کنید :

visible : حالت پیش فرض است که بصورت معمولی نمایش داده می شود.

hidden : در این حالت در صورتی که محتوا از طول و عرض عنصر تجاوز کند ، نمایش داده نمیشود.

scroll : که در بالا گفته شد، عنصر اسکرول عمودی و افقی خواهد خورد.

auto : در این حالت که بسیار پر استفاده است مانند اسکرول عمل میکند، با این تفاوت اساسی که اسکرول بر اساس موقعیت افقی یا عمودی خواهد خورد و در صورتی که تجاوز نکند ، اسکرول نخواهد خورد.

این ویژگی درتمام مرورگرها پشتیبانی میشود.

محل قرارگیری عناصر – خواص مربوط به Position

در این بخش از آموزش css به توضیح خواص مربوط به Position میپردازیم.

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

عناصری که از ویژگی Position استفاده میکنند،ویژگی های زیر را نیز میتوانند داشته باشند.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

چهار روش مختلف برای موقعیت دهی عناصر در صفحه وجود دارد:

Static Positioning
تمام عناصر در HTML   در حالت پیش فرض به صورت استاتیک موقعیت دهی شده اند.عناصری که از این ویژگی استفاده میکنند از ویژگی های top  و .. تبعیت نمیکنند.

Fixed Positioning
یک عنصر با موقعیت ثابت نسبت به پنجره مرورگر ، موقعیتش تنظیم میشود.عنصر زمانی که از این موقعیت استفاده کند، حتی زمانی  که پنجره وب سایت اسکرول بخورد ، عنصر حرکتی نمیکند. به دلیل اینکه اینترنت اکسپلورر بیشتر از سایر مرورگرها مورد استفاده قرار می گیرد و از ویژگی fixed در CSS پشتیبانی نمی کند زیاد به این ویژگی نمی پردازیم.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

Relative Positioning
یک عنصر با این ویژگی نسبت به وضعیت جاری خود در صفحه موقعیت دهی میشود.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

Absolute Positioning
مشخص می کند که عنصر مربوطه باید در محل تعیین شده به نمایش در آید نه محلی که کد آن نوشته شده است.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

Overlapping Elements
زمانی که عناصر روی هم قرار میگیرند با این ویژگی میتوانید اولویت نمایش را برای عناصر مشخص کنید

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

z-index فقط در مواقعی که از ویژگیهای زیر استفاده شود،میتواند مورد استفاده قرار گیرد:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

float

در این بخش از آموزش css به توضیح ویژگی محل قرارگیری عناصر – خواص Clear , Float میپردازیم.

با این ویژگی از css موقعیت یک عنصررا می توانید سمت چپ یا راست تنظیم کنید.

یکی از پرکاربردترین ویژگی ها در css میباشد. بادادن این ویژگی به تگ ها شما میتوانید سایت های چند ستونه ایجاد کنید.

این خاصیت یکی از پایه های اساسی در طراحی قالب بر اساس div می باشد.

وقتی به یک عنصر در کد خود float به سمت چپ یا راست میدهید ، عنصر مورد نظر به آن سمت خاص میرود و بقیه عنصر هایی که بعد از تگ مذکور آمده اند و float ندارند به سمت مخالف رانده میشوند و اطراف عنصر مورد نظر قرار میگیرند.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

clear

اگر عنصر ی بعد از عنصری که ویژگی float را دارد، خاصیت clear داشته باشد، اطراف عنصر ی که ویژگی float را دارد قرار نمی گیرد.

عنصر ی که خاصیت clear=both دارد و float نیز شده باشد، فقط عنصر هایی را که قبل از خودش آمده است، clear میکند . و عنصرهای بعدی را تحت تاثیر قرار نمیدهد

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

cursor
انواع مختلفی از نمایش مکان نما در صفحه را مشخص میکند.
زمانی که روی یک عنصری که مشخص کرده ایم میرویم مکان نما به شکل مورد نظر نشان داده میشود.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

visibility

مخفی کردن عناصر در css با این ویژگی امکان پذیر است :

none
hidden

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

اگر به تگ های زیر این ویژگی را نسبت دهید تمامی عناصری که داخل آنها قرار میگیرد نیز از این ویژگی ارث میبرند :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

ولی در تگ های زیر فقط خود عنصر از این ویژگی تبعیت میکند :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

display
این ویژگی مشخص میکند که چگونه یک عنصر نمایش داده می شود :

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

با تغییر ویژگی display برای عنصرهایی که چاپ آن‌ها ضروری نیست، می‌توانید تنها متن اصلی صفحه را به چاپگر بفرستید. بسیاری از بخش‌های سایت مانند سربرگ، منوها و تبلیغات نیازس نیست که در ز خروجی چاپ نمایش داده شوند.

مقادیری که میتواند Display بگیرد:

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

اگر به یک DIV این خاصیت را بدهید، یعنی آن عنصر میتواند کل سطر خود را اشغال کند و مانند یک بلاک رفتار میکند و هیچ عنصر دیگری را در کنار خود جا نمی دهد. این خاصیت باعث میشود عنصر ما مثل تگ h1 عمل کند.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

یعنی DIV در یک خط قرار گرفته که چندین عنصر در آن خط قرار داردند و باید بقیه عنصر ها را در کنار خود جا دهد و بپذیرد .

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

یعنی عنصر نمایش داده نشود.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

کاربردی مانند Display:inline دارد

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

هر یک از بلاک هایی که این خاصیت را دارا باشند بصورت یک آیتم نشون داده میشوند و یک بولت در کنارآن نمایش داده میشود. مانند تگ ul.

Opacity

با ویژگی Opacity میتوانید شفافیت تصاویر را تغییر دهید.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

در مثال بالا زمانیکه opacity=40  تنظیم شده است ، تصویر کدر تر نمایش داده میشود و زمانیکه opacity=100 در نظر گرفته شده است تصویر به صورت کاملا شفاف نمایش داده میشود.این حالت زمانی اتفاق میفتد که img:hover  انجام گیرد.یعنی با زفتن ماوس روی تصویر عکس به صورت شفاف نمایش داده میشود.

 

 

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

واحد های شمارش در css  شامل واحدهای زیر میباشند.

  1. %   >>  درصد
  2. in >> اینچ
  3.  cm  >> سانتیمتر
  4. mm  >> میلیمتر
  5. em  
  6. ex 
  7. pt >>  برابر با ۱/۷۲ اینچ
  8. pc >> برابر با ۱۲ point
  9. px  >> پیکسل

مرجع انتخابگرها در CSS

 

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.
 


این مثال تمامی عناصری که class=”intro”  هستند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

 

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.
 

این مثال تمامی عناصری که “id=”name هستند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

 

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.
 

این مثال تمامی عناصر را  انتخاب و style مورد نظر را به آنها اعمال میکند.

 

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.
 

 

این مثال تمامی تگ های <p> را  انتخاب و style مورد نظر را به آنها اعمال میکند.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.
 

این مثال تمامی تگ های <p> و h1  را  انتخاب و style مورد نظر را به آنها اعمال میکند.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.
 

 

تمام تگ های <p> که در داخل تگ <div> قرار دارند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.
 

تمام تگ های <p> که  والد (parent) آنها تگ <div> میباشد را  انتخاب و style مورد نظر را به آنها اعمال میکند.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.
 

تمام تگ های <p> که بلافاصله بعد از  تگ <div> قرار دارند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

 

 

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.
 

تمام تگ های<a> که ویژگی target  را نیز دارند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

تمام تگ های<a> که ویژگی target=_blank  را دارند، انتخاب و style مورد نظر را به آنها اعمال میکند.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.
 

تمام تگ های<a> که ویژگی “title=pars”  را دارند، انتخاب و style مورد نظر را به آنها اعمال میکند.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.
 

تمامی عناصری  که  ویژگی “lang”  آنها با “fa” آغاز میشود، انتخاب و style مورد نظر را به آنها اعمال میکند.

 

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.
 

تمام تگ های<a> که روی آنها کلیک نشده است را، انتخاب و style مورد نظر را به آنها اعمال میکند.

 

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.
 

تمام تگ های<a> که روی آنها کلیک شده است را، انتخاب و style مورد نظر را به آنها اعمال میکند.

 

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.
 

تمام تگ های<a> را زمانی که با ماوس روی آنها میروید، انتخاب و style مورد نظر را به آنها اعمال میکند.

 

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.
 

تمام تگ های input  را زمانی که انتخاب میکنید، style مورد نظر را به آنها اعمال میکند.

 

 

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.
 

اولین کلمه از تمام تگ های <p>  را  انتخاب و style مورد نظر را به آنها اعمال میکند.

ویژگی هایی که در first-letter  میتوانند مورد استفاده قرار بگیرند.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

اولین خط از تمام تگ های <p>  را  انتخاب و style مورد نظر را به آنها اعمال میکند.

ویژگی هایی که در first-line  میتوانند مورد استفاده قرار بگیرند.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

تمام تگ های <p> که اولین فرزند (child) از پدر و مادر (parent) خود است را  انتخاب و style مورد نظر را به آنها اعمال میکند.

 

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.
 

به اول تمام تگ های <p> ، لینک 

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.
را اضافه میکند.

 

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.
 

بعد تمام تگ های <p> ، لینک 

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.
را اضافه میکند.

 

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.
 

تمام تگ های <p> که با ویژگی  “lang=it” شروع میشوند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

 

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.
 

تمام تگ های <ul> که والد مشترکی با  تگ  <p> دارند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

 

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.
 

تمام تگ های div که با ویژگی  “class=test” شروع میشوند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

 

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

 

تمام تگ های div که با ویژگی  “class=test” تمام میشوند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

 

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.
 

تمام تگ های div که  ویژگی  “class=test” را شامل میشوند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

 

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.
 

اولین  تگ <p>  را  انتخاب و style مورد نظر را به آنها اعمال میکند.

 

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.
 

آخرین تگ <p>  را  انتخاب و style مورد نظر را به آنها اعمال میکند.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.
 

هر تگ <p>  که تک فرزند (only child) والد (parent) خود باشد را  انتخاب و style مورد نظر را به آنها اعمال میکند.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.
 

هر تگ <p>  که دومین فرزند (only child) والد (parent) خود باشد را  انتخاب و style مورد نظر را به آنها اعمال میکند.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.
 

هر تگ <p>  که دومین فرزند (only child) والد (parent) خود از آخر باشد را  انتخاب و style مورد نظر را به آنها اعمال میکند.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.
 

هر تگ <p>  که دومین تگ <p> از والد (parent) خود  باشد را  انتخاب و style مورد نظر را به آنها اعمال میکند.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.
 

هر تگ <p>  که دومین تگ <p> از والد (parent) خود از آخر باشد را  انتخاب و style مورد نظر را به آنها اعمال میکند.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.
 

برای هر تگ <p>  که آخرین فرزند (child) از والد (parent) خود  باشد را  انتخاب و style مورد نظر را به آنها اعمال میکند.

 

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

 

تگ HTML  ، را  انتخاب و style مورد نظر را به آنها اعمال میکند.

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.
 

هر تگ <p>  که محتوایی نداشته باشد را  انتخاب و style مورد نظر را به آنها اعمال میکند.

 

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.

 

تمام تگ های <input>  که  “type=”text باشند و فعال باشند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

 

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.
 

تمام تگ های <input>  که  “type=”text باشند وغیر فعال باشند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

 

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.
 

تمام تگ های <input>  که  “type=”checked باشند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

 

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.
 

تمامی تگ ها جز  تگ <p>  را  انتخاب و style مورد نظر را به آنها اعمال میکند.

 

مخفی

    برای مشاهده مطلب باید در سایت ثبت نام کنید و سپس وارد شوید.
 

متن هایی که با دوبار کلیک کردن بر آنها انتخاب میشوند ، style مورد نظر را به آنها اعمال میکند

 

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

برای ارسال دیدگاه یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید دیدگاهی ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در سایت ما ثبت نام کنید. عضویت خیلی ساده است !

ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید

ورود به حساب کاربری
    • 1 Posts
    • 3 Views
    • 1 Posts
    • 3 Views
    • 1 Posts
    • 4 Views
    • 1 Posts
    • 3 Views
    • 1 Posts
    • 6 Views
    • 1 Posts
    • 4 Views
    • 1 Posts
    • 7 Views

  • سفارش پروژه برنامه نویسی

×
×
  • اضافه کردن...