برچسب: CSS آماده

طراحی نوار ناوبری شیشه ای (Glassmorphism) با کلاس های Tailwind CSS

طراحی سایت شیشه ای (Glassmorphism)، یک گرایش طراحی است که در اواخر سال 2020 محبوبیت زیادی پیدا کرد. در این روش یک پس زمینه تار روی یک عنصر اعمال می شود و به آن حس شفافیت و حالت شیشه ای می دهد. این ترند طراحی تقریباً جدید بوده و اخیراً مورد توجه زیادی قرار گرفته است. من کاملاً مشتاق امتحان چیز های جدید هستم و یکی از کار هایی به تازگی انجام دادم، دادن حالت شیشه ای مات به نوار ناوبری وب سایت با استفاده از کلاس های کاربردی پس زمینه در فریم ورک Tailwind CSS بود. این کار خیلی خوب بود، پس فکر کردم به شما هم نشان دهم چگونه این را خودتان طراحی کنید.

Tailwind CSS و کلاس های جدید پس زمینه

همه فیلتر های زبان CSS در گذشته توسط Tailwind پشتیبانی نمی شدند، اما با انتشار نسخه 2.1 آن و مجموعه ای از کلاس های کاربردی مفید، از جمله کلاس های فیلتر پس زمینه جدید هم اکنون برای استفاده در دسترس ما است. دستیابی به افکت شیشه ای روی نوار ناوبری خیلی ساده است، فقط باید از کلاس های کاربردی، فیلتر پس زمینه و پس زمینه تار در Tailwind CSS استفاده کنیم و کمی شفافیت را تنظیم کنیم.

نکته: قبل از حرکت ب سمت ادامه مطلب، مطمئن شوید که نسخه Tailwind v2.1 را نصب کرده اید!

ساختار اصلی نوار ناوبری شیشه ای قبل از اعمال Tailwind

بیایید با استفاده از عنصر معنایی «nav» و پر کردن آن با چند آیتم شروع کنیم.

<nav>
  <div>
    <div>
      <span>My Logo</span>
      <div>
        <a href="#"> Dashboard </a>
        <a href="#"> About </a>
        <a href="#"> Projects </a>
        <a href="#"> Contact </a>
      </div>
    </div>
  </div>
</nav>

قبل از اعمال افکت شیشه ای با Tailwind، بیایید نوار ناوبری را به طوری سبکی تنظیم کنیم تا در واقع شبیه یک نوار ناوبری مرتب باشد.

<nav className="sticky top-0 z-10 bg-white">
  <div className="max-w-5xl mx-auto px-4">
    <div className="flex items-center justify-between h-16">
      <span className="text-2xl text-gray-900 font-semibold">Logo</span>
      <div className="flex space-x-4 text-gray-900">
        <a href="#"> Dashboard </a>
        <a href="#"> About </a>
        <a href="#"> Projects </a>
        <a href="#"> Contact </a>
      </div>
    </div>
  </div>
</nav>

بسیاری از این سبک ها خود توضیحی هستند، اما اجازه دهید به چند نکته اشاره کنم:

روی عنصر nav یک رنگ پس زمینه اعمال شده است. اگر رنگ پس زمینه وجود نداشته باشد، کلاس های فیلتر چیزی برای محو کردن نخواهند داشت.
عنصر nav چسبنده است، اگر وقتی صفحه را به پایین اسکرول می کنیم نوار را نبینیم، هیچ فایده ای ندارد که بخواهیم به نوار ناوبری حالتی شیشه ای بدهیم.
یک z-index برای ناوبری اعمال می شود، فقط برای اینکه سایر عناصر را از بین نبرند.

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

استفاده از کلاس های فیلتر و تاری پس زمینه در Tailwind

اکنون که ساختار اصلی ناوبری وجود دارد، بیایید به آن یک حالت جادویی اضافه کنیم، برای این کار باید کلاس های ابزار فیلتر پس زمینه و پس زمینه تار را به عنصر nav اضافه کنید.

<nav className="... backdrop-filter backdrop-blur-lg">.....</nav>

اگر در این مرحله صفحه را به پایین اسکرول کنید، به نظر می رسد چیزی تغییر نکرده است. اگرچه کلاس های کاربردی Tailwind در حال کار هستند، ما باید کدورت پس زمینه نوار ناوبری را تنظیم کنیم تا حالت شیشه ای آن آشکار شوند.

هرچه کدورت پس زمینه کمتر باشد، محتوای بیشتری از طریق عنصر نشان داده می شود. با خیال راحت کمی با مقدار آن بازی کنید، تا مقدار دلخواهتان را پیدا کنید. مثلاً من کلاس bg-opacity-30 را به نوار ناوبری خود اضافه کرده ام.

<nav className="...bg-opacity-30">.....</nav>

نوار ناوبری اکنون حالتی شیشه ای دارد و جلوه جالبی را بدون از بین بردن تجربه کاربر در وب سایت به آن اضافه می کند. ما می توانیم همین جا توقف کنیم، اما یک کار دیگر هم وجود دارد که می توانیم انجام دهیم.

تا اکنون ما موفق به شیشه ای کردن نوار ناوبری به کمک Tailwind شدیم، اما همانطور که در تصویر پایین می بینید تشخیص نوار ناوبری شیشه ای مات از پس زمینه وب سایت دشوار است.

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

<nav className="...border-b border-gray-200">.....</nav>

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

مشکلات نوار ناوبری شیشه ای در فایرفاکس

درست است. اگر تغییرات خود را در فایرفاکس پیش نمایش کنید، خواهید دید که تاری اصلاً نشان داده نمی شود. به نظر می رسد، فایر فاکس از CSS پس زمینه تاری پشتیبانی نمی کند. پس راه حل چیست؟

خوشبختانه، سام سلیکوف در مورد این موضوع یک توییت سفارشی را در توییتر نوشته و پست کرده است. این توییت کاربرانی را هدف قرار می دهد که از فایرفاکس استفاده می کنند. برای اینکه بتوانید شفافیت نوار ناوبری را در این مرورگر افزایش دهید، فایل tailwind.config.js را باز کنید و کد زیر را در قسمت plugins اضافه کنید. (برای ایجاد تغییرات در tailwind.config.js می توانید به مقاله مربوط به فریم ورک Tailwind که در ابتدای مقاله به آن پیوند داده بودیم مراجعه کنید.)

const plugin = require('tailwindcss/plugin');
module.exports {
    ...
    plugins: [
        ...
    plugin(function ({ addVariant, e, postcss }) {
      addVariant('firefox', ({ container, separator }) => {
        const isFirefoxRule = postcss.atRule({
          name: '-moz-document',
          params: 'url-prefix ()',
        });
        isFirefoxRule.append(container.nodes);
        container.append(isFirefoxRule);
        isFirefoxRule.walkRules((rule) => {
          rule.selector = `.${e(
            `firefox${separator}${rule.selector.slice(1)}`
          )}`;
        });
      });
    }),
  ],
}

حالا به قسمت مربوط به نوار ناوبر برگردید و کلاس زیر را وارد کنید:

<nav className="...firefox:bg-opacity-90">.....</nav>

اگر چه نوار ناوبری اکنون هم کاملاً تار نیست، اما کدورت کمی افزایش می یابد اما همچنان جلوه شفاف خود را حفظ می کند.

نتیجه:

Tailwind CSS به بهبود خود ادامه می دهد و با انتشار نسخه 2.1، بسیاری از فیلتر های CSS اکنون با کلاس های کاربردی مرتبط پشتیبانی می شوند و شما به راحتی می توانید از آن برای طراحی های شیشه ای استفاده کنید درست مانند همین نوار ناوبری شیشه ای که ما طراحی کردیم.

شاید بپرسید چه زمانی می توان از glassmorphism استفاده کرد؟ در حالی که ساخت کل رابط های کاربری با استفاده از این مد طراحی می تواند وسوسه انگیز باشد، اما لطفاً توجه داشته باشید که به دلیل ماهیت نیمه شفاف آن نگرانی هایی در مورد دسترسی دارد، پس اگر از طراحی شیشه ای استفاده می کنید، از آن کم استفاده کنید.

منبع:
braydoncoyer.dev

1400/09/02برچسب‌ها:CSS آماده, زبان css, طراحی سایت, طراحی سایت موبایل

آشنایی با فریم ورک Tailwind و مقدمه ای بر آشنایی با Tailwind CSS

فناوری CSS یکی از بزرگترین تغییرات در توسعه و طراحی وب سایت ها بود. CSS قابلیت های ظاهری و آزادی بیشتری را برای طراحی فراهم کرد. البته با رشد CSS، پیچیدگی آن نیز کم کم افزایش یافت. البته اکنون نوشتن CSS مانند گذشته چالش برانگیز نیست، اما اجرای آن می تواند دشوار باشد. مرحله بعدی در پیشرفت CSS توسعه کتابخانه ها و فریم ورک ها بود. از معروف ترین نمونه فریم ورک های CSS فریم ورک های Bootstrap و Tailwind هستند.

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

فهرست مطالب

Tailwind CSS چیست؟
روش های مختلف برای نصب و پیکربندی Tailwind CSS.
نحوه استفاده از کلاس های مبتنی بر ابزار نسبت به کلاس های از پیش نوشته شده معمولی.

نکته: برای دنبال کردن این آموزش، درک اولیه HTML و CSS ضروری بوده و هر گونه تجربه قبلی با چارچوب CSS یک مزیت اضافی است.

فریم ورک Tailwind CSS چیست؟

Tailwind یک فریم ورک CSS است که توسط آدام واتان ایجاد شد. برخلاف سایر فریم ورک‌ ها، Tailwind از کلاس هایی از پیش ساخته تشکیل نمی شود تا به تگ های HTML اضافه شود. در عوضTailwind، از یک رویکرد متفاوت استفاده می کند، Tailwind با استفاده از کلاس های مبتنی بر ابزار، سطح بسیار پایین تری از کنترل را به ارمغان می آورد.

نصب و راه اندازی Tailwind

بیایید مستقیماً وارد این فریم ورک شویم و Tailwind CSS را نصب کنیم تا بتوانیم اطلاعات بیشتری در مورد آن کشف کنیم. البته بسته به نوع استفاده شما از این فریم ورک، شما دو راه برای نصب Tailwind CSS دارید.

روش اول: نصب با استفاده از CDN

استفاده از CDN رایج ترین روش استفاده از هر چارچوبی در CSS است و Tailwind نیز از این قاعده مستثنی نیست. برای این کار ما باید ابتدا فایل CSS مربوط به Tailwind را از CDN به شکل یک پیوند در قسمت head فایل HTML خود اضافه می کنیم.

برای این کار شما باید ابتدا یک فایل HTML ایجاد کنید و نامی برای آن بگذارید. ما نام فایل خود را .index.html خواهیم گذاشت، سپس در داخل آن، کد HTML boilerplate را بنویسید و CDN را مطابق شکل زیر اضافه کنید:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Section Tailwind Demo</title>
    <link
      href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
      rel="stylesheet"
    />
  </head>
  <body></body>
</html>

تا اینجا ما Tailwind CSS را در پروژه خود نصب کرده ایم. البته باید توجه داشته باشید که نصب فریم ورک Tailwind CSS با استفاده از CDN خود دارای چند شرط مهم است، که باید به آن ها توجه کنید، برخی این شرایط مانند:

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

روش دوم: نصب با استفاده از NPM

استفاده از روش NPM تجربه کاملی از کار با Tailwind CSS را به شما می دهد. این یک روش نصب رایج است زیرا اکثر فریم ورک های جاوا اسکریپت از رویکردی مشابه آن استفاده می کنند. البته بسته به معماری فریم ورک، تفاوت های کمی در فرآیند نصب آن ها وجود دارد.

برای این کار ابتدا، باید یک دایرکتوری ایجاد کنیم که در ادامه در آن کار خواهیم کرد. سپس در ترمینال خود، کد زیر را اجرا کنید:

mkdir section-tailwind-demo && cd section-tailwind-demo

npm init -y

اجرا در ترمینال:

npm install tailwindcss@latest postcss@latest autoprefixer@latest

دستور بالا تمام asset های مورد نیاز ما را نصب می کند. بعد از آن، ما باید یک اسکریپت برای پیکربندی Tailwind CSS و PostCss ایجاد کنیم. برای تولید این اسکریپت ها، از “tailwind cli”، یکی از ابزار ارائه شده توسط فریم ورک Tailwind CSS استفاده می کنیم.

اجرا در ترمینال:

npx tailwind init -p

دو فایل tailwind.config.js و .postcss.config.js آن نیز به شکل زیر اند:

tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

.postcss.config.js

فایل .postcss.config.js هم باید شبیه به کد زیر باشد:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

اکنون که با موفقیت محیط مورد نظر خود را راه اندازی کردیم، اجازه دهید Tailwind CSS را نیز در پروژه خود راه اندازی کنیم. برای این کار ابتدا دو فایل ایجاد کنید. یک فایل HTML به نام index.html و یک فایل stylesheet به نام style.css.

قسمت HTML می تواند دستور پایه boilerplate را در ابتدای article داشته باشد. در فایل CSS نیز باید به autoprefixer اطلاع دهیم که از Tailwind CSS استفاده خواهیم کرد. ما این کار را با وارد کردن فایل‌های Tailwind CSS، مطابق شکل زیر انجام می دهیم:

@tailwind base;
@tailwind components;
@tailwind utilities;

در نهایت، ما باید Tailwind CSS خود را بسازیم، بنابراین در ترمینال اجرا به چنین چیزی نیاز داریم:

npx tailwindcss-cli@latest build -o css/tailwind.css

این دستور، یک فایل tailwind.css در پوشه CSS ایجاد می کند. همچنین دستور -o در دستور ما، مخفف راه خروجی است و ما مشخص کردیم که فایل خروجی ما در مسیر css/tailwind.css قرار بگیرد.

توجه: برای کار با این دستور نیازی به داشتن یک فایل CSS نیست، زیرا ما فایل CSS Tailwind را تولید می کنیم. با این حال، ممکن است برای افزودن سبک های سفارشی، به فریم ورک Tailwind CSS در این فایل، یا مخلوط کردن Tailwind CSS با CSS سفارشی، به فایل style.css نیاز داشته باشیم.

یک روش متفاوت برای پردازش CSS این است که آن را در تولید با افزودن یک اسکریپت در package.json انجام دهید. ما از postcss cli برای اجرای عملیات در طول زمان ساخت استفاده می کنیم. برای انجام این کار، ابتدا باید PostCSS CLI را نصب کنیم.

برای این کار، این را در ترمینال اجرا کنید:

npm install postcss-cli

بعد، اسکریپت ساخت را در package.json به این صورت اضافه می کنیم:

 "scripts": {
 "build": "postcss style.css -o css/tailwind.css"
 }

اکنون، زمانی که npm run build را اجرا می کنید، باید فایل مربوط به فریم ورک CSS Tailwind را همانطور که می خواستیم در یک پوشه CSS کامپایل کنید. سپس باید فایل Tailwind CSS خود را مانند یک فایل CSS معمولی به HTML اضافه کنیم.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link  rel="stylesheet"  href="css/tailwind.css" /
>

  </head>
  <body></body>
</html>

به این ترتیب، تا این جا ما همه چیز را آماده کرده ایم و فریم ورک Tailwind نصب شده است.

کار با کلاس های کاربردی فریم ورک Tailwind

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

در تگ Body در صفحه HTML، اضافه کنید:

<button>Section</button>

بیایید چند کلاس به دکمه خود اضافه کنیم زیرا اینگونه ساده به نظر می رسد. در Tailwind CSS، مقدار رنگ بسته به شدت رنگ از 100 تا 900 متغیر است. کلاس کاربردی برای پس زمینه bg است. برای اینکه پس زمینه دکمه مان به رنگ سبز ملایم، رنگ شود، کلاس bg-green-100 را اضافه می کنیم.

در مرحله بعد، بیایید متن را در دکمه استایل کنیم. برای این کار از کلاس متنی utility استفاده می کنیم. برای اضافه کردن متن به رنگ، کلاس text-green-100 را اضافه می کنیم، اما ویژگی های مربوط به رنگ باقی می مانند.

تا کنون دکمه ما خوب به نظر می رسد، بنابراین اکنون بیایید padding را به آن اضافه کنیم. نحوه کار با padding بسیار ساده است، به این صورت است که اول ویژگی، اندازه و سپس مقدار آن می آید.

این برای همه ویژگی ها مانند اندازه، فاصله و حاشیه اعمال می شود. برای اضافه کردن مقادیر به padding، کد به صورت pb-8 خواهد بود. این مقادیر از 0 تا 64 متغیر است. برای اینکه ببینید دامنه ها چگونه کار می کنند، می توانید آن ها را تست کنید.

در مثال ما، padding ما دارای مقادیر py-2 برای بالا و پایین، و px-6 برای چپ و راست خواهد بود. بیایید مقداری حاشیه هم در بالا، با my-20 و مقداری در سمت چپ با mx-20 اضافه کنیم.

اکنون، بیایید دکمه را با ابزار rounded utility گرد تر کنیم. می توانید فهرست کاملی از ابزار های مرزی شعاع و همه کلاس های آن ها را در مستندات بیابید. ما از شعاع مرزی 0.5em استفاده خواهیم کرد که مربوط به lg گرد است.

در نهایت، اجازه دهید مقادیر شناور به آن اضافه کنیم تا دکمه زنده تر شود. برای انجام این کار، کلاس‌های hover:hover:bg-green-600 و hover:text-green-200 را اضافه می کنیم.

با آن، ما دکمه خود را بدون CSS استایل داده ایم. نکته مهمی که باید به آن دقت کنید این است که فریم ورک Tailwind CSS تا چه حد به شما کنترل بر استایل و عناصر می دهد. در نهایت کد نهایی ما به این صورت است:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Section-Tailwind-Demo</title>
    <link  rel="stylesheet"  href="css/tailwind.css" /
>

  </head>
  <body>
 <button

      type="button"
      class="hover:bg-green-600 hover:text-green-200 bg-green-100 text-green-700 mx-20 my-20 px-6 py-2 rounded-lg"
    >
      Section
    </button>
 </body>
</html>

شکل نهایی کد (دکمه ما) باید به شکل روبرو باشد:

نتیجه:

فریم ورک Tailwind CSS یک تغییر دهنده بازی در نحوه استفاده ما از CSS است. همانطور که در بالا نشان داده شد، استفاده و یادگیری کلاس های مربوط به ابزار های آن بسیار آسان است. در نتیجه، اکنون باید بتوانید با استفاده از Tailwind CSS یک طرح بندی ساده بسازید.

Tailwind CSS به شما کنترل بیشتری بر ظاهری که می خواهید می دهد، که این می تواند یک مزیت یا یک نقطه ضعف باشد. با سایر فریم ورک ها، ظاهر پایه معمولا به اندازه ای خوب است، که یک توسعه دهنده شروع به کار کند. اما این ظاهر پایه در مورد Tailwind CSS نیست زیرا شما باید همه کار ها را خودتان انجام دهید.

منبع:
www.section.io

1400/08/26برچسب‌ها:CSS آماده, طراحی رابط کاربری, طراحی رابط کاربری (UI), طراحی سایت

مزایای استفاده از CSS های آماده استفاده چیست و از کجا می توان آن ها را گرفت؟

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

CSS آماده استفاده چیست و مزایای آن چیست؟

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

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

Style Sheets ساده ترین راه برای ایجاد یک استایل پیش فرض برای HTML را ارائه می دهد. بنابراین، هنگام ویرایش فقط یک فایل CSS، می توانید کل متن را تغییر داده و به طور مثال رنگ ها را در همه صفحات لینک دهید! CSS همچنین کد گذاری شما را بسیار آسان می کند زیرا مجبور نیستید به طور مکرر تگ های قالب بندی را برچسب بزنید. این کد ساده باعث بارگیری سریع تر و کاهش پهنای باند می شود.

الگو های CSS سازگاری 100٪ با Macromedia Dreamweaver و Microsoft FrontPage و همچنین بسیاری از ویرایشگران وب دیگر دارند. استفاده از این فناوری آسان تر و سریع تر از کدگذاری HTML است.

بلوک ها به جای جداول در الگو های CSS استفاده می شوند و می توانید بلوک های محتوا را با کشیدن و رها کردن آن ها در ویرایشگر HTML خود جابجا کنید. علاوه بر این، این برچسب ها توسط JavaScript و سایر زبان های برنامه نویسی وب بهتر درک می شوند و برخی دیگر از خبر های خوب این است که اکنون، برای اصلاح طرح سایت خود نیازی به کنار آمدن با جداول پیچیده HTML ندارید!

از کجا می توان CSS آماده گرفت؟

فناوری CSS گامی بزرگ در جهت توسعه وب است. محتوای جداگانه و ارائه نیز انعطاف پذیری بیشتری به وب سایت شما می بخشد. شما با تغییرات بعدی وب سایت خود مشکلی نخواهید داشت. همه تمپلت ها بر اساس فناوری ها و استاندارد های وبسایت معروف www.w3c.org ساخته شده اند که وب سایت شما را حتی کاربر پسندتر می کند.

می توانید تمپلت ها و CSS های آماده را از طریق وبسایت های زیر دریافت کنید:

چگونه از CSS های آماده استفاده کنیم؟

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

CSS آماده خود را در همان دایرکتوری صفحات HTML که می خواهید از آن الگو استفاده کنید، ذخیره کنید. به عنوان مثال، اگر می خواهید صفحه “index.html” از الگوی “style.css” استفاده کند، پس style.css را در همان پوشه ای که “index.html” را در آن ذخیره می کنید ذخیره کنید.
فایل HTML را در یک ویرایشگر متن مانند VS Code باز کنید.
تگ هایی که باید در تگ head قرار بگیرند را در جای خود قرار دهید. آدرس فایل CSS را بین این تگ ها وارد کنید تا فایل HTML به فایل تمپلت CSS لینک داده شود. فایل الگوی شما ممکن است نام دیگری داشته باشد، بنابراین از نام صحیح به جای “style.css” استفاده کنید. بخش هد HTML شما شبیه به این مثال است:

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

مزایای استفاده از CSS آماده

به طور مداوم کارآمد است

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

زمان کمتری نیاز دارد

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

تعمیر و نگهداری کم

CSS آماده تعمیر و نگهداری وب سایت را ساده کرده و به توسعه دهندگان و طراحان وب یک صفحه را برای مدیریت می دهد، این امر برای توسعه دهندگان وب آسان سازی قالب، مدیریت و تغییر عناصر را به همراه دارد.

سخن آخر

حال که می دانید CSS های آماده استفاده دقیقاً چه چیزی هستند و مزایای استفاده از آن ها چیست، بد نیست به وب سایت های معرفی شده سری بزنید و سعی کنید از آن ها استفاده کنید. اگر در حال یادگیری زبان CSS هستید توصیه می کنیم پست های ما در مورد چگونگی استفاده از زبان CSS و طراحی وب سایت در Visual Studio را بررسی کنید. امیدواریم این پست برای شما مفید بوده باشد.

1400/04/03برچسب‌ها:CSS آماده, بهترین زبان برنامه نویسی, زبان css, طراحی وب سایت