مقدمه ای برCascading Style Sheets (CSS)

مقدمه ای برCascading Style Sheets (CSS)

 

هیچ شکی نیست که تا بحال در مورد Cascading Style Sheets (CSS)شنیده اید و اطلاعاتی دارید و میدانید که چطورکسانی که طراحی سایت میکنند مشتاق به استفاده از آن هستند.  و احتمالا این نیز میدانید که خرده گیری در مورد آن چه چیزهایی اند و اینکه در چه مواردی کسانی که طراحی سایت میکنند از آن استفاده کنند.

این مقاله مقدمه ای برCascading Style Sheets (CSS) است  برای کاربرانی که در سطح متوسط هستند. منظورم از کاربران سطح متوسط آنهاییست که برخی از HTML هارا بنویسند و قصد استفاده از این CSS را دارند.این مقاله cssرا تعریف میکند و به شما میگوید که در چه مواقعی از آن استفاده کنیم و به چه دردی میخورد.

 Cascading Style Sheets (CSS) چیست؟

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

ساده ترین راه توضیح css بیان یک مثال از آن است:

<style type="text/css">
body {
  background-color: white ;
  color: black ;
  font-family: Arial, Helvetica, sans-serif ;
}
</style>

 

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

چرا CSS استفاده کنیم؟

ممکن است این سوال برایتان پیش بیاید که اگر  مشکل چیست،

  1. Formatting vs Function

دلیل اصلی که توسط دانشمندان css بیان شد این است که به شما اجازه می دهد تا عناصرِ formatting را از عناصرfunctional  بطور جدا نگه دارید.

برای مثال تگ های <h1></h1> و بقیه ی خانواده ی آنها برای استفاده در سر برگ ساز ها طراحی شده اند. زمانی که شما یک متن را به وسیله ی این تگ ها باز میکنید متن بسرعت در سربرگ ظاهر میشود.هرچند طرح حروف ها وسایز نوشته ها در اغلب موارد مورد پسند کسانی که طراحی سایت میکنند نیستند که در نتیجه کاری میکنند که اطااعات درون سربرگ ها با بجای تگ های headerتوسط تگ های <font></font> ظاهر شوند. در نتیجه اطلاعات تان توسط کد های فرمتینگ پراکنده میشوند و با هر تغییر در یک header بقیه ی headerها نیز دست خوش تغییر می شوند.

اگر مایل هستید تمام سر برگ های <h1> شما طرح حروفی sans-serif  با فونت 24کافی ست به سادگی خطوط زیر را استفاده کنید.

h1 {
  font-face: san-serif ;
  font-size: 24pt ;
}

هر زمان <h1> را بکار ببرید مفهوم آن طرح حروفی sans-serif  با فونت 24 خواهد بود. وهر زمان که بخواهید تغییری در فونت وطرح حروف بدهید در یک مکان این تغییر را ایجاد میکنیمنه اینکه تمام صفحات را تغییر دهیم.

زیبایی صفحات از طریق جداول خود را نشان می دهند. چند مرتبه جداول را بصورت زیر خوانده اید؟

<table>
  <tr>
    <td>
      <font face="Arial,Helvetica" size=2>
      ... etc...
      </font>
    </td>
  </tr>
  <tr>
    <td>
      <font face="Arial,Helvetica" size=2>
      ... etc...
      </font>
    </td>
  </tr>
</table>

طراحان سایت بسیار زیاد تازه کار به سرعت متوجه می شوند که اگر آنها سلول های جدول شان را با  <font> tagتکمیل نکنند، این سلول های جدول با فونت های پیش فرض بروزر نشان داده خواهد شد.

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

td {
  font-face: Arial, Helvetica ;
  font-size: 10pt ;
}

  و جداولتان را بدون تگ های فونت بنویسید مثل زیر:

<td>
... etc ...
</td>

و تاثیر مشابه را دریافت می کنید.

  1. یک مکان مرکزی:

همانطور که طرح صفحات به کسانی که طراحی سایت میکنند این اجازه را می دهد که کد فورمتینگ هایتان را در یک مکان در اسناد شان بگذارید این اجازه را نیز به آن ها می دهد که طرح صفحات تان را جدا کنید و آن را در یک فایل جدا بگذارید. سپس آن طرح صفحه را با یک تگ لینک ساده <link> tag درسربرگ اسنادتان به آن ها بارگیری کنید.

بنابراین برای مثال اگر شما طرح صفحه را در یک فایلی به نام "formatting.css" ذخیره کنید، در این صورت یک تگی همانند زیر در سربرگ اسنادتان بگذارید:

<link rel="formatting.css" type="text/css">

چقدر این کار مفید است؟ این کاری برای زمانی مفید است که شما قصد دارید از یک طرح استانداردی برای تمام اسناد در طراحی سایت تان استفاده کنید. از این طریق هر زمانی که بخواهید تغییراتی به عنوان مثال در رنگ زمینه جدول و غیره ایجاد کنید تنها چیزی که باید انجام دهید این است که طرح صفحه را مشخص کنید و تمام اسناد به طور اتوماتیک ظاهر جدیدی در صفحه خواهید داشت. و دیگر نیازی ندارید که تمام تک تک فایل هایتان تغییر دهید که تصادفا فایلی را از دست بدهید وتغییری در آن ایجاد نکنید.

مشتریان ما

ما افتخار ارائه خدمات به تعداد زیادی از مشتریان وفادار خود را داریم و رضایت مشتری را برای خود سرمایه گذاری مطمئن می دانیم.

ویدیو کلیپ آموزشی و دمو

کلیپ آموزش تولید محتوای سایت و بهینه سازی وب

در این کلیپ 3 اصل مهم در سئو و بهینه سازی وب که مورد سوال بسیاری از طراحان سایت و سئوکاران است مطرح می شود و نکاتی کلیدی در خصوص آنها آموزش داده خواهد شد.
سرفصل ها عبارتند از:
1. تولید محتوای سایت
2. لینک های داخلی
3. سرعت بارگذاری سایت
مشاهده کلیپ

Adipisicing elit

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ارتباط و تماس با ما

  • تهران - میدان انقلاب اسلامی - بعد از خیابان جمالزاده - پلاک 91 - طبقه اول
  • دفتر مرکزی :
  • 62 54 67 55 021
  • شنبه تا پنجشنبه از ساعت 9 صبح الی 20
  • شماره های ضروری :
  • 99 22 870 0936 - 363 40 70 0930

درخواست تماس

کانال تلگرام طراحی سایت ویستان اینستاگرام طراحی سایت ویستان آپارات طراحی سایت ویستان