0

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

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

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

نویسنده پشتیبانی وب یار
امتیاز مطلب
5/5 - (5 امتیاز)
تعداد بازدید 1163
تاریخ بروزرسانی ۲۵ اردیبهشت ۱۴۰۱

آموزش ساده CSS برای طراحی سایت :  وقتی شما بااستفاده از زبان برنامه نویسی HTMlکدهای اصلی واسکلت یک ساختمان را ساختید نوبت به استایل دهی به این کدها می رسد به عبارتی شما با زبان css به ضاهر صفحه خود شکل وشمایل می دهید. Css مخفف یا Cascading Style Sheets می باشد.
زبان Css نشان می دهد که هر کدام از تگ هایی کهدر ساختن بدنه اصلی بااستفاده از زبان برنامه نویسی HTMl نوشید در صفحه وب چه شکلی نمایش داده شود به عبارتی به کدهای ساده رنگ ولعاب می دهیم.

چطور دستورات css رادرست بنویسیم

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

p{

Color:black;

}

در قسمت اول که به آن سلکتور می گویند نام تگ Htmlکه میخواهیم به آن استایل دهیم را می نویسیم.
مرحله بعد } را باز می کنیم
در این قسمت هر ویژگی که می خواید به دستورات Html اعمال کنید مانند رنگ ،سایز ، طول وعرض و… رادر این قسمت می نویسید که به این قسمت اعلان می گویند وواجب است که انتهای هر استایل را با ; به پایان رسانید.
ودر آخر { را که در ابتدا باز کردیم می بندیم.

طریقه نوشتن css در آموزش ساده CSS

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

Internalدر زبان css:

طریقه نوشتن css

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

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

<head>

<style>

h {color:silver;}

p {

margin-left:20px;

}

body {

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

}

</style>

</head>

روش دوم inline :

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

مثال :

<!DOCTYPE html>

<html>

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

</html>

روش آخر و مرسوترین روش external از آموزش ساده CSS

روش سوم و مرسوم ترین طریقه نوشتن 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 کلاس یکسان داد.

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

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

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

نام گذاری تگ ها برای استایل دهی در css

همان طور که می دانید کد نویسی سایت را با تگ <div> بخش بندی می کنند. حال اگردر css بخواهیم به div  در صفحه خارجی Style  دهیم.

  1. با class
  2. با id

می توانیم مانند کد های زیر به آن class  یا id دهیم و در صفحه css با نشان “.” برای و  class برای id  “#”،div مورد نظر را فراخوانی کنیم.

تفاوت class  وid

تفاوت کلاس با 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;

}

کامنت گذاری برای خوانایی بیشتر کدهای هر قسمت :

برای استایل دهی به قسمت های مختلف یک صفحه وب برای خوانایی بیشتر بهتر است که هر قسمت را دیگری جدا کنیمتا کدهای css مرتب تری داسته باشیم برای مثال بهتر است که کدهایی که برای قسمت محصولات می زنیم را از کدهایی css قسمت درباره ما به وسیله کامنت گذاری جدا کنیم .به این صورت که اسم قسمتی که به آن استایل می دهیم رابین /*—*/قرار دهیم برای نمونه : /* about us */

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

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

 

5/5 - (5 امتیاز)
مطالب مرتبط
building-a-free-foreign-site
مطالعه :

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

مزیت ساخت سایت در اصفهان برای کسب و کار‌ها
مطالعه :

طراحی وب‌سایت به ساخت، راه‌اندازی و دیزاین صفحات وب گفته می‌شود که در ادامه با مزیت ساخت سایت در اصفهان آشنا می شویم. وب‌سایت‌ها با استفاده از زبان کد‌نویسی طراحی می‌شوند. اما امروزه با پیشرفت فناوری، توانایی‌ها و ویژگی‌های برنامه‌های ساخت وب‌سایت‌ها افزایش یافته و کار را برای برنامه‌نویسان و طراحان وب آسان‌تر کرده است. با توسعه فناوری و استفاده روز افزون مردم از تکنولوژی‌های پیشرفته و همینطور تاثیر شیوع کرونا، باعث شد تا مردم نیاز‌های خود را به صورت آنلاین و حضوری برطرف کنند. همینطور اکثر شرکت‌ها و حتی فروشگاه‌ها کلیه خدمات خود را به صورت اینترنتی در اختیار کاربران و مشتریان خود قرار می‌دهند. از این رو وب‌سایت‌ها اهمیت بسیار زیادی دارند. وب‌سایت‌ها انواع مختلفی از جمله وب‌سایت‌های فروشگاهی، شرکتی، خدماتی و… دارند. طراحی یک وب‌سایت حرفه‌ای می‌تواند شما را در جذب مشتری در اصفهان و شهر‌های دیگر کمک کند، مشتریانی که هم می‌توانند توریست باشند و هم از افراد خود اصفهان. طراحی یک وب‌سایت به خدماتی بستگی دارد که افراد می‌توانند به مشتریان خود ارائه دهند. افراد با طراحی یک وب‌سایت می‌تواند محصولات و یا خدمات خود را به همه مردم ایران و یا حتی جهان معرفی کنند. این خدمات می‌تواند خدمات فروشگاهی و راهبردی باشند. از این رو انتخاب شرکتی که بهترین و به روزترین خدمات ساخته وب‌سایت در اصفهان برای طراحی انواع وب‌سایت‌های تجاری را […]

معرفی شبکه های اجتماعی محبوب
مطالعه :

دنیای امروزه دنیای ارتباطات می باشد واهمیت رسانه ها بیشتر از همیشه احساس می شود. شبکه های اجتماعی با هدف ارتباط گرفتن افراد به وجود آمد و امروزه برای تبلیغات کسب و کارها بسیار مهم تلقی می شود. درعصر ارتباطات اغلب کسب وکارها برای پیشرفت زمینه ی شغلی خود به سمت تبلیغات در شبکه های اجتماعی روی آورده اند.شبکه های اجتماعی محبوب در اطلاع رسانی برای خبرهای روزانه نقش بسیار مهمی را ایفا می کنند. با وب یار همراه باشید تا با بهترین شبکه های اجتماعی در ایران آشنا شویم. در جامعه ی امروزی شبکه های اجتماعی جزئی از زندگی مردم شده که برای تبلیغات ،اطلاع رسانی ها و آموزش و…از این شبکه ها بهره می برند.باتوجه به همگانی شدن شبکه های اجتماعی بین مردم لازم است که در مورد هر کدام از این شبکه ها اطلاعاتی کسب کنیم تا از جوامع امروز عقب نمانیم. تاریخچه مختصری در مورد شبکه های اجتماعی : ریشه شکل گرفتن مفهوم شبکه های اجتماعی در سال 1960در دانشگاه ایلی نویز در آمریکا بود.و بعد از روی کار آمدن مفهوم شبکه های اجتماعی در سال 1997سایتی تشکیل شد که اجازه ایجاد پروفایل به افرادمختلف را داد هدف این سایت جمع کردن لیستی از دوستان در کنار هم بود و بعد از آن هم شبکه های اجتماعی مختلفی با اهداف متنوع روی کار آمد. در سال […]

طراحی قالب وردپرس
مطالعه :

طراحی قالب وردپرس امروزه طرفداران زیادی پیدا کرده است. وردپرس یک سیستم مدیریت محتوای قوی است که می توان با آن قالب های زیبایی طراحی کرد. در مطلب امروز وب یار می خواهیم با نحوه طراحی قالب وردپرس آشنا شویم. بیشتر سایت های دنیای وب امروزی با این سیستم مدیریت طراحی می شودو بازار کار خوبی دارد به ویژه اگر این قالب مختص کسب وکار شما باشد و با توجه به نیاز ها و سلایق شما طراحی شده باشد در این صورت است که علاوه برتکراری نبودن پاسخگوی نیازهای مجموعه شما می باشد. بررسی انواع قالب سایت قالب سایت چیست؟ ابتدا بهتر است کمی به تاریخچه آن بپردازیم. در آغاز قرن جاری و در زمانی که اینترنت هنوز در ابتدای راه خود بود، صفحات سایت‌ها به شکل ساده‌ای طراحی می‌شدند که از چند متن ساده، چند باکس رنگارنگ و شاید یک یا دو تصویر تشکیل شده بودند. تنها افرادی که دارای صفحات وب بودند، کسانی بودند که تخصص فنی در اچ‌تی‌ام‌‌ال برای ساختن یک صفحه سایت را داشتند یا می‌توانستند هزینه انجام این کار را به افرادی که این کار را می‌کردند، پرداخت کنند. اما از آن زمان تاکنون تغییرات زیادی صورت گرفته است و اکنون پلتفرم‌های آنلاین زیادی وجود دارند که به افرادی که تجربه طراحی یا برنامه‌نویسی نسبتا کمی دارند، توانایی اجرای یک وب‌سایت کاملاً کارآمد را می‌دهند. […]

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

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

مرجع جاوا اسکریپت وب یار
مطالعه :

در این لینک مقالات مرجع جاوا اسکریپت برای شما عزیزان فراهم شده تا دسترسی راحت تری به مطالب حوزه جاوااسکریپت داشته باشید. آموزش زبان جاوا اسکریپت javascript + جلسه اول زبان برنامه نویسی جاوا اسکریپت یک زبان سمت کلاینت (کاربر) است و روی اکثر مرورگر های امروزی کار می کند. این زبان به تمام خصوصیت های عناصر html و css دسترسی داشته و نسبت به رویدادهای کاربر واکنش نشان می دهد   محل قرار گیری کدهای جاوا اسکریپت + جلسه دوم تگ های جاوا اسکریپت این توانایی را دارند که در هر جایی از صفحات html به کار روند. آموزش دستورات مهم جاوا اسکریپت + جلسه سوم دستور جاوا اسکریپت شامل مقادیر، عملگرها،کلمات کلیدی و توضیحات است.دستورات جاوا اسکریپت زیر همان کلمات کلیدی رزرو شده ای هستند که نمی توانند به عنوان نام متغیر به کار روند.    آموزش توضیحات در جاوا اسکریپت + جلسه چهارم توضیحات در جاوا اسکریپت به دو صورت به کار می روند: 1- توضیحات تک خطی 2- توضیحات چند خطی تعریف متغیرها در جاوا اسکریپت + قسمت پنجم متغیرها در javaScript حافظ و حامل اطلاعات هستند. یعنی این متغیرها اطلاعاتی را در خود ذخیره نموده و در حین اجرای برنامه با شرایط مختلف تغییر می کنند.  انواع داده ها در JavaScript + جلسه ششم زبان جاوا اسکریپت نیز همانند سایر زبان های برنامه نویسی از انواع داده های عددی (Number)  ، رشته ای (String)  ، […]

دیدگاه ها

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

نشانی ایمیل شما منتشر نخواهد شد.