0

هیچ محصولی در سبد خرید نیست.

طراحی سایت در اصفهان, سئو سایت اصفهان, ساخت سایت اصفهان, طراحی سایت حرفه ای اصفهان, بهینه سازی سایت , بازاریابی و دیجیتال مارکتینگ 09133886881 احمدپور

آموزش ساده CSS

نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 529
تاریخ بروزرسانی ۴ تیر ۱۳۹۸

آموزش ساده CSS برای طراحی سایت

Style دهی به عناصر HTML روش های گوناگونی دارد. اگر شما هم در نوشتن style عناصر خود دچار مشکل هستید و نمی دانید از کدام روش استفاده کنید با تیم وب یار از طراحی سایت اصفهان  همراه باشید. به طور کلی طریقه نوشتن css به سه صورت انجام می گیرد (internal, inline ,external)  اولین روش به آن internal style sheet می گویند. در این روش کد های css را درون فایل html و تگ head  قرار می دهیم. این روش زمان بارگذاری صفحه را افزایش می دهد. بنابراین اصلا توصیه نمی شود. تنها مزیت این روش نسبت به روش بعدی (درون خطی) این است که می تواند از خاصیت ارث بری کلاس ها استفاده کند؛ یعنی می توانید از یک style در چندین جای صفحه استفاده کنید.

طریقه نوشتن css

در ادامه مثالی از شیوه کد نویسی این روش را برایتان قرار می دهیم:

<head>

<style>

h {color:silver;}

p {

margin-left:20px;

}

body {

background-image:url(“images/bg.gif”);

}

</style>

</head>

 

روش دوم از طریقه نوشتن inline style sheet ، css است. در این روش دقیقا style را درون عنصری تعریف می کنیم که می خواهیم به آن استایل بدهیم. این روش برای سایت هایی که تعداد صفحات کمتری دارند می تواند استفاده شود اما هرگز توصیه نمی شود زیرا مانند روش قبل سرعت بارگذاری صفحه را افزایش می دهد .

مثال :

<!DOCTYPE html>

<html>

<body> <h1 style=”color:blue”>این یک عنوان است</h1> <p style=”color:red”>این یک پاراگراف است.</p> </body>

</html>

روش سوم و مرسوم ترین طریقه نوشتن css روش external style sheet (ظاهر سازی به روش خارجی) است. این روش بسیار ایده ال است. و سرعت بارگذاری صفحه در آن نسبت به روش های قبل بالاتر است زیرا به طور مثال اگر شما بخواهید رنگ یا فونت تگ p درون صفحه html را تغییر دهید لازم نیست مانند روش بالا در کنار هر تگ p ،style مورد نظرتان را اضافه کنید کافی است صفحه ای جدا گانه به نام style.sheet باز کرده و style مورد نطرتان را تنها با یک بار نوشتن به کلیه تگ های p اضافه کنید

P:{

Color:red;

Font-size:12px;

}

 

در این طریقه نوشتن  css باید دقت کنید که لینک به صفحه مربوط به css خود را در صفحه html تان به شکل زیر قرار دهید

<head>
<link href=”css/style.css” rel=”stylesheet” type=”text/css”>
</head>

در کد بالا قسمت rel و type را لازم نیست تغییر دهید اما باید لینک صفحه css خود را به درستی در قسمت href قرار دهید تا صفحه html شما به صفحه css لینک شود در غیر این صورت عنصر ها stlye های مورد نظر را نمی گیرند.

همان طور که می دانید کد نویسی سایت را با تگ <div> بخش بندی می کنند. حال اگر بخواهیم به div  در صفحه خارجی Style  دهیم می توانیم مانند کد های زیر به آن کلاس یا id دهیم و در صفحه css با نشان “.” برای کلاس و “#” برای id ،div مورد نظر را فراخوانی کنیم. تفاوت کلاس با id در این است که id  یکسان فقط به یک عنصر یا div تعلق می گیرد (انحصاری) است اما می توان به چند عنصر یا div کلاس یکسان داد.

صفحه html:

<html>

<body>

<div id=”search”></div>

<div class=”search-submit”><p>hello world</p></div>

</body>

صفحه css:

#search{

Width:500 px;

Height:200px;

Float:right;

}

.search-submit{

Width:500 px;

Height:200px;

Float:right;

}

حال اگر بخواهیم به تگ p درون کلاس search-submit ، style دهیم باید به صورت زیر بنویسیم:

.search-submit  P {

Color:red;

}

سخن پایانی:

در مطلب فوق سعی بر آن بود که شما را با روش های style دهی عناصر html آشنا کنیم تا طریقه نوشتن css

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

 

مطالب مرتبط
آموزش بوت استرپ
مطالعه :

مقدمه – آموزش بوت استرپ با سلام به وب یاری های عزیز، این جلسه آموزش بوت استرپ را با آموزش کلاس های well  و jumbotron ادامه می دهیم. همچنین این جلسه با ایجاد header برای صفحه در بوت استرپ آشنا خواهید شد. پس در ادامه با تیم طراحی سایت اصفهان وب یار همراه باشید.   کلاس well در بوت استرپ با استفاده از کلاس well می توان یک کادر با گوشه های گرد و پس زمینه ی خاکستری رنگ در اطراف یک عنصر ایجاد کرد. برای استفاده شی well کافی است کلاس well را به یک div اضافه کنید. همچنین این کلاس مقداری padding دارد. لازم به ذکر است که به طور پیش فرض اندازه ی شی well در حالت متوسط قرار دارد که با استفاده از کلاس های well-sm و well-lg می توان این سایز را تغییر داد. کلاس well-sm برای کوچکتر نشان دادن شی well استفاده می شود. کلاس well-lg برای بزرگتر نشان دادن سایز well در بوت استرپ به کار برده می شود. در کد زیر نحوه ی استفاده از این کلاس ها نشان داده شده است. <div class=”well”>well class in Bootstrap</div> <div class=”well well-sm”>well-sm class in Bootstrap</div> <div class=”well well-lg”>well-lg class in Bootstrap</div>   خروجی این کد را می توانید در تصویر زیر مشاهده کنید.   آموزش کلاس jumbotron در بوت استرپ برای جلب توجه کاربران […]

مطالعه :

آپلود فایل در php معمولا در بعضی از سایت ها لازم می شود که فرمی را در سایت تعبیه نموده که توسط آن کاربران بتوانند فایل های مورد نظر خود را در سایت آپلود نمایند ( از جمله آپلود فایل رزومه ، عکس و…). حال قبل از آموزش آپلود فایل در php و کدنویسی فرم ارسال فایل لازم است که ابتدا مطمئن شوید که تنظیمات آن فعال است. برای این کار اول باید فایل php.ini را بررسی نمایید و file_uploads را به حالت on قرار دهید. روش دسترسی به فایل php.ini در لوکال هاست و cpanel در ادامه آموزش داده شده است.   آموزش آپلود فایل در php   Php.ini  در لوکال هاست (نرم افزار Xamp) این فایل در وب سرور Xampp با توجه به نسخه های مختلف ، عموما در مسیر های زیر وجود دارد: \xampp\php\php.ini \xampp\apache\bin\php.ini \xampp\etc\php.ini       این قطعه کد ابتدا یک فرم آپلود ایجاد نموده و سپس اطلاعات موردنظر خود را به فایل upload.php می فرستد تا برروی آن اطلاعات را پردازش کند. درون تگ input ، مشخصه type را برابر file قرار داده‌ایم تا اعلام کنیم که نوع ورودی، به صورت فایل می‌باشد. بنابراین درون فرم، یک دکمه browse به کاربر نمایش داده‌می‌شود تا با آن بتواند فایل موردنظر را از کامپیوتر خود انتخاب نماید.   کدنویسی قسمت php فایل upload.php را ایجاد […]

آموزش کار با مسنجر تلگرام(ترفندهای تلگرام)
مطالعه :

آموزش کار با مسنجر تلگرام و ترفندهای تلگرام دانلود آموزش ارسال انبوه و تبلیغات به لیست شماره ها و انبوه کاربران تلگرام(ارسال اس ام اس به تلگرام) بر اساس مناطق و شماره های شما در حال حاضر قابلیت ارسال تا 90 هزار عدد در ماه آماده ارسال می باشد. تست شده در تاریخ 15 آذر 99 با ارسال روزانه بیش از 3 هزار ارسال بدون هزینه پنل .   تمامی نرم افزار های ارسال رایگان به لیست مخاطبان تلگرام همراه با تست و آموزش و بروزترین ورژن ها بصورت هدیه در پکیج خدمتتان قرار داده شده . امروزه مسنجر تلگرام یکی از محبوب ترین مسنجرها در میان مسنجرهایی از قبیل واتس آپ, لاین,وایبر,و اینستاگرام است,علت این موضوع هم امکانات تلگرام از قبیل امکان ارسال پیام صوتی به صورت گروهی,امکان ارسال انواع فایل ازقبیل ویدیو,صوت,عکس تا حجم حداکثر ۱۰۰۰ مگابایت,دارا بودن  سیستم رمز نگاری فوق العاده قدرتمند برای مسایل امنیتی,۱۰۰% رایگان(بر خلاف مسنجری همچون واتس آپ که بعد از مدتها باید هزینه پرداخت کرد. ). چنانچه در نحوه نصب تلگرام بر روی کامپیوتر مشکل دارید مطلب آموزش تصویری نصب تلگرام بر روی کامپیوتر را بخوانید.   فوت و فن های تلگرم: اما خب اکثر افرادی که با تلگرام کار میکنند,در کار کردن با تلگرام مشکلات,ابهاماتی در ذهنشان دارند, همچنین حتی برخی از افرادی که شاید در کار کردن با تلگرام مشکلی […]

seoچیست؟
مطالعه : 20 دقیقه

سئو سایت اصفهان یکی از خدمات تیم طراحی سایت و سئو سایت وب یار می باشد. آیا تا کنون به سئو سایت خود فکر کرده اید؟ آیا می دانید برای بهینه سازی سایت خود چه فاکتورهایی را باید در نظر بگیرید؟

طراحی سایت وب یار
مطالعه :

چرا تیم طراحی سایت وب یار را انتخاب کنیم ؟ در این مطلب میخواهیم به این سوال پاسخ داده و مزایای کار با تیم وب یار را برای شما عزیزان یادآوری کنیم: – طراحی زیبا و حرفه ای قالب: وبــ یار پس از اخذ سفارش از شما به طراحی حرفه ای وایر فریم و قالب زیبا و رنگ بندی متناسب با موضوع وب سایت توسط کارشناسان گرافیک می پردازد. لازم به ذکر است که طراحی قالب از ابتدا با توجه به کدنویسی استاندارد انجام می شود و طراحی قالب قبل از شروع کدنویسی توسط مشتری قابل تغییر و ویرایش می باشد. -کدنویسی استاندارد و سئو شده: در مرحله کدنویسی برنامه نویسان تیم وب یار موظفند که از ابتدا کدها را استاندارد بنویسند و به همین دلیل سایت های طراحی شده توسط تیم ما از نظر سئو بسیار قدرتمندند و با تمامی مرورگرهای روز دنیا سازگار می باشند. -آموزش مدیریت سایت با پنل مدیریت فارسی: تیم وبــ یار پس از تحویل سایت مشتری در یک جلسه آموزش رایگان تمامی راه کارهای مدیریت سایت را همراه با تکنیک های اولیه سئو که یک مدیر سایت باید با آنها آشنا باشد را در اختیار مشتریان خود قرار می دهد. پنل مدیریت سایت  کاملا فارسی بوده و حتی برای اشخاصی که هیچ دانش فنی در خصوص وب ندارند کاملا ساده و راحت می باشد. […]

قالب فروشگاهی پرستاشاپPrestaShop-webyar
مطالعه :

تا به حال به این فکر کرده اید که چطور میشه از طریق اینترنت هم کسب درآمد کنید؟ تا به حال خواسته اید شما هم یک فروشگاه اینترنتی داشته باشید تا محصولات خودتان را ۲۴ ساعته در معرض دید مشتری بگذارید؟ هدف اصلی بسیاری از شرکت ها از حضور در اینترنت، کسب درآمد از طریق فروش محصولات، بدست گرفتن بازار آنلاین و ارائه خدمات بهتر به مشتریان و در نتیجه فروش بیشتر محصولات خود می باشد. به این صورت که با استفاده از این روش، خریدار علاوه بر صرفه جویی در وقت و هزینه ( خصوصا” هزینه های ایاب و ذهاب )، با آرامش کامل، کالاهای مورد نظر خود را انتخاب و خریداری نموده و بدون هیچ مشکلی آنها را درب منزل و یا محل کار تحویل می گیرد. فروشگاه اینترنتی چیست؟ فروشگاه آنلاین (فروشگاه اینترنتی) یک وب سایت است که مانند یک فروشگاه سنتی، اجناس مختلفی را برای فروش عرضه می‌کند. خریداران پس از ورود به سایت فروشگاه،کالاهای مورد نظر خود را سفارش می‌دهند. پس از تکمیل سفارش، هزینه‌ی آن به چند شیوه قابل پرداخت است: با کارت‌های بانکی،شیوه پرداخت نقدی به مأمور پست در زمان تحویل کالا، و یا واریز به حساب. پس از مشاهده و تأیید سفارش توسط مسئول فروشگاه، مأمور پست کالا را در محل فروشنده تحویل می‌گیرد و به دست خریدار می‌رساند. اداره‌ فروشگاه اینترنتی […]

دیدگاه ها

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *