۱۹
خرداد

جلسه ۰۲ : آموزش نصب و راه اندازی Pure CSS

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزشی

فهرست

مقدمه

با سلام خدمت کاربران گرامی سایت پی وی لرن و آن دسته از کاربرانی که علاقمند به دوره آموزش Pure CSS هستند. در این جلسه گذشته به بررسی نقاط قوت Pure CSS پرداختیم و در ادامه نیز قرار آموزش نصب و راه اندازی Pure CSS را ارائه نماییم.

آموزش نصب و راه اندازی Pure CSS

دو راه برای استفاده از Pure وجود دارد :

نصب لوکال Local Installation

شما می توانید فایل pure.css را در دستگاه Local یا محلی خود دانلود کنید و آن را در کد HTML خود قرار دهید.

CDN Based Version بر اساس نسخه CDN

شما می توانید فایل pure.css را به کد HTML خود بطور مستقیم از شبکه تحویل محتوا (CDN) وارد کنید.

نصب لوکال

بر روی https://purecss.io/start/ کلیک کنید تا آخرین نسخه موجود را دانلود نمایید.
فایل دانلود شده pure-min.css را در یک پوشه از وبسایت خود قرار دهید، به عنوان مثال در / CSS

مثال

شما می توانید فایل CSS را در فایل HTML خود به صورت زیر وارد کنید :

مثال :

<html>
   <head>
      <title>The PURE.CSS Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel="stylesheet" href="pure-min.css">
	  
      <style>
         .grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;			
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center;					
         }
      </style>
	  
   </head>
  
  
  <body>
      <div class="grids-example">
         <div class="pure-g">
            <div class="pure-u-1-3"><p>First Column</p></div>
            <div class="pure-u-1-3"><p>Second Column</p></div>
            <div class="pure-u-1-3"><p>Third Column</p></div>
         </div>
      </div>
   </body>
</html>

<html>

<head>

<title>The PURE.CSS Example</title>

<style>

.grids-example {

background: rgb(250, 250, 250);

margin: 2em auto;

border-top: 1px solid #ddd;

border-bottom: 1px solid #ddd;

font-family: Consolas, 'Liberation Mono', Courier, monospace;

text-align: center;

}

</style>

</head>

<body>

<div class="pure-u-1-3"><p>First Column</p></div>

<div class="pure-u-1-3"><p>Second Column</p></div>

<div class="pure-u-1-3"><p>Third Column</p></div>

</div>

</body>

</html>

کد های بالا موجب ایجاد نتیجه ای به صورت زیر می شود:

آموزش نصب و راه اندازی Pure CSS

بر اساس نسخه CDN

شما می توانید فایل pure.css را به کد HTML خود بطور مستقیم از شبکه تحویل محتوا (CDN) وارد کنید.
yui.yahooapis.com محتوا را برای آخرین نسخه فراهم می کند.
ما از نسخه CDN yui.yahooapis.com در طول این آموزش استفاده می نماییم.

مثال

اجازه بدهید مثال بالا را با استفاده از pure.css از PureCSS.io CDN بازنویسی کنیم.

مثال :

<html>
   <head>
      <title>The PURE.CSS Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
	  
      <style>
         .grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;			
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center;					
         }
      </style>
   </head>
  
   <body>
      <div class = "grids-example">
         <div class = "pure-g">
            <div class = "pure-u-1-3"><p>First Column</p></div>
            <div class = "pure-u-1-3"><p>Second Column</p></div>
            <div class = "pure-u-1-3"><p>Third Column</p></div>
         </div>
      </div>
   </body>
</html>

<html>

<head>

<title>The PURE.CSS Example</title>

<style>

.grids-example {

background: rgb(250, 250, 250);

margin: 2em auto;

border-top: 1px solid #ddd;

border-bottom: 1px solid #ddd;

font-family: Consolas, 'Liberation Mono', Courier, monospace;

text-align: center;

}

</style>

</head>

<body>

<div class = "pure-u-1-3"><p>First Column</p></div>

<div class = "pure-u-1-3"><p>Second Column</p></div>

<div class = "pure-u-1-3"><p>Third Column</p></div>

</div>

</body>

</html>

کد های بالا موجب ایجاد نتیجه ای به صورت زیر می شود:

آموزش نصب و راه اندازی Pure CSS

کلام آخر

در این جلسه به آموزش نصب و راه اندازی Pure CSS پرداختیم.
جلسه بعد به آموزش طراحی ریسپانسیو در Pure CSS خواهیم پرداخت.
با پی وی لرن همراه باشید.

QR: جلسه ۰۲ : آموزش نصب و راه اندازی Pure CSS

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۰۲ : آموزش نصب و راه اندازی Pure CSS

مقدمه

آموزش نصب و راه اندازی Pure CSS

نصب لوکال Local Installation

CDN Based Version بر اساس نسخه CDN

نصب لوکال

مثال

بر اساس نسخه CDN

مثال

کلام آخر

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ