???? ?? ?????? ????? ???? ?? ????

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

طراحی سایت در مشهد

رایا پارس

ahrefs

طراحی سایت

CSS چیست؟
HTML چیست؟
تلفیق CSS و HTML
غرض از گویش css چیست؟
ساختار CSS
نحوه‌ی اضافه کردن کدهای CSS به فایل HTML
۱- نوشتن inline CSS یا css خطی
۲- نوشتن CSS در بخش HEAD پوشه
۳- نوشتن CSS در فایل خارجی
محدودیت‌های CSS
مزایای CSS
عده بندی
تالیف کننده
علی حاجی جعفر
CSS چیست؟
همانگونه که در بالا گفته شد، CSS به معنی «ورقه‌های سبک آبشار» یا «برگه‌های آبشاری» است که آبشاری بودن صفحه‌های CSS به این معنی می باشد که استایل، کلاس یا هر چیزی که به یک صفحه CSS داده گردد، روی عناصر فرزند (Children) این صفحه‌ها هم تاثیرگذار خواهد بود. چنانچه بخواهیم مثالی در این مورد بزنیم مثل این خواهد بود که در‌حالتی که شما رنگ متن را در یک برگه CSS آبی تعیین فرمائید، این به معنای قرمز بودن کل سرنویس‌ها (هدینگ) و جمله‌های متنی هست که قرار هست در این برگه CSS نوشته گردد.
براین اساس( CSS ) زبانی هست که توسط آن کارکشته خواهید تا استیل طراحی صفحه های وبسایت تان را یکبار تعریف و به صفحات مورد نیازتان ایفا نمائید. به کارگیری از CSS باعث تمیزتر شدن کدهای اپ نویسی تان می‌شود، تغییراتی که در آتی می‌خواهید اعمال نمایید را سهل می کند و همچنین روئت کرد شما را بیشتر به طراحی معطوف می کند تا رمز و کله زدن با کدهای نرم افزار نویسی. CSS در کنار HTML قرار میگیرد تا هسته تولید یک وبسایت را به وجود بیاورند. البته HTML چیست؟ برای اینکه به فهم کاملی از CSS برسیم بایستی تعریف مختصری از HTML داشته باشیم.
HTML چیست؟
HTML برگرفته از (Hyper Text Markup Language) می‌باشد و یک لهجه آرم‌گذاری استاندارد برای صفحه ها وب به حساب می‌آید. این زبان بنیاد صفحه های وب را تشکیل می دهد. هر آنچه که در صفحه می بینید از عنوان ها، متن ها و تصاویر همگی با HTML در شیت‌ی وب قرار داده شده‌اند.
در بالا مورد نیاز است بدانید html یک گویش نرم افزار نویسی نیست! بلکه یک طرز یا لهجه علامت‌گذاری می باشد که برای ساختاربندی اجزای کاغذ به فعالیت برده میگردد. HTML زبانی است که همه ارکان جانور در صفحات وب مثل جعبه های متن، دکمه ها و غیره بوسیله اون ساخته می‌شن و با ترکیب اون با کدهای CSS ظاهر ورقه شکل می‌گیره.
تلفیق CSS و HTML
در شرایطی که یک شیت وب را شامل اجزای زیر بدانیم:
محتوا (content): کدهای HTML مسئول تولید این بخش می باشند.
نمایش (presentation): کدهای CSS مسئول ساخت این قسمت هستند.
خلق و خوی (Behavior): این قسمت وب به وسیله JavaScript ساخت‌و‌ساز میگردد.
مثال ملموس تر میشود “اسکلت آدم را HTML فرض کنید و شکل،ظاهر ، رنگ مو، نژاد را CSS و رفتاری که از این آدم بروز می کند را JavaScript.
هدف از لهجه css چیست؟
غرض از ساخت گویش برنامه نویسی css در واقع جداسازی اطلاعات محتوا (که به وسیله زبانی مانند HTML درج گردیده اند) از اطلاعات ظاهری مانند ورقه بندی، رنگ و سایز و نوع فونت می باشد. این جداسازی موجب افزایش سرعت در دسترسی به وب سایت، انعطاف پذیری بیشتر برای کنترل ویژگی های ظاهری، امکان طراحی تعدادی برگه با یک فرمت یکسان و خودداری از پیچیدگی و انجام کارهای تکراری در ساخت وب سایت می‌گردد.
ساختار CSS
برای اینکه با سختار CSS آشنا شویم می بایست بگوییم که ساختار یک خط از کد CSS شامل یک گزینش‌گر (selector) می‌باشد که به یک یا چند تگ از html اشاره می‌کند. در مقابل انتخاب‌گر یک بلاک قرار میگیرد که سبک خاصی را به عنصر تعیین شده ایفا می‌کند. برای مثال این ساختار را در نظر درصورتی که در نظر بگیرید:
h1{font-size : 18px;}
که در اینجا h1 انتخابگر میباشد، font-size ویژگی می‌باشد و 18px مقدار آن می باشد.
روش‌ی اضافه کردن کدهای CSS به فولدر HTML
برای اضافه کردن کدهای CSS به سند HTML و سایر کدها، می توان از روش‌های زیر استفاده کرد.
۱- نوشتن inline CSS یا css خطی
درین نحوه شما با نوشتن واژه‌ی style درون هر تگ، میتوانید کدهای css مد لحاظ خود را به آن اضافه نمائید:
- نوشتن CSS در بخش HEAD فایل
همان گونه که می دانید در HTML یک بخش به نام head جای‌دارد که می توانید در آن
۳- نوشتن CSS در فایل خارجی
این طریق بهترین خط مش برای اضافه کردن استایل‌هاست. برای این کار کافیست تمام کدهای CSS را در یک فایل نوشته و با پسوند css. ذخیره نمایید. آن‌گاه این فایل را در هر head پوشه html خود فراخوانی فرمایید:
محدودیت‌های CSS
با اینکه CSS تا اینجای کار گسترش بسیار زیادی داشته، اما نمی‌قدرت اذعان کرد که کاملا ایده آل می‌باشد و هیچ محدودیتی برای طراح وبسایت ساخت و ساز نمی‌کند. در‌حالتی که بخواهیم به محدودیت‌های CSS اشاره کنیم، شاید به ۵ تا ۶ آیتم محدودیت بتوان اشاره کرد که در عوض آزادی عملی که این زبان در اختیار ما می‌گذارد، این محدودیت‌ها چیزی نیستند.
به عنوان مثال در CSS نمی‌قدرت برای rules اسم گزینش کرد. تعیین اسم برای یک rule، به عنوان مثال، می‌تواند برای ارجاع دادن یک اسکریپت سمت استفاده کننده (Clien-side) به یک rule هنگام تغییر‌و تحول selector آن، کارآمد باشد. همچنین محدودیت‌های دیگری مثل عدم توانایی انتقال Style از یک rule به rule دیگر و چن مورد دیگر از محدودیت در CSS وجود دارااست که ممکن می‌باشد مانند محدودیت‌هایی که در نسخه‌های پیشین CSS وجود داشتند، در آجل حل شوند.
مزایای CSS
می‌توان با ذهنی آسوده خاطرنشان کرد که CSS یکی‌از مفیدترین و پرکاربردترین اجزا دنیای طراحی وب سایت می‌باشد. دسترسی طراحان وب به CSS سبب توسعه‌های زیادی در دنیای طراحی وب شده است.
یکی از مهمترین مزایای CSS صرفه جویی در وقت و انرژی طراحان وب می باشد. تصور کنید که CSS وجود نداشت و شما به عنوان یک طراح وب سایت، می بایست برای هر تغییر تعالی و کوچکی، تعدادی بار یک کلاس یا Style را به صورت inline در پوشه HTML وارد می‌کردید. اما فعلا با وجود CSS در کنار HTML، طراحی وب بسیار سهل‌تر خواهد بود.
جمع بندی
در پایان بایستی بدین نکته اشاره کنیم که با دقت به تمام محدودیت های ذکر شده درباره‌ی CSS، هنوز هم مزایای آن، کفه معیار را به نفع آن سنگین می کند. و حرف آخر اینکه در حالتی‌که به طراحی کردن تارنما به عنوان یکی از کارهای اساسی برای درآمدزایی و یا یادگیری در زمان ها فراعت فکر میکند، یادگیری طراحی سایت را با اصول CSS و HTML در تقدم خود قرار دهید.

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

طراحی سایت در مشهد

رایا پارس

ahrefs

طراحی سایت

CSS چیست؟
HTML چیست؟
تلفیق CSS و HTML
غرض از گویش css چیست؟
ساختار CSS
نحوه‌ی اضافه کردن کدهای CSS به فایل HTML
۱- نوشتن inline CSS یا css خطی
۲- نوشتن CSS در بخش HEAD پوشه
۳- نوشتن CSS در فایل خارجی
محدودیت‌های CSS
مزایای CSS
عده بندی
تالیف کننده
علی حاجی جعفر
CSS چیست؟
همانگونه که در بالا گفته شد، CSS به معنی «ورقه‌های سبک آبشار» یا «برگه‌های آبشاری» است که آبشاری بودن صفحه‌های CSS به این معنی می باشد که استایل، کلاس یا هر چیزی که به یک صفحه CSS داده گردد، روی عناصر فرزند (Children) این صفحه‌ها هم تاثیرگذار خواهد بود. چنانچه بخواهیم مثالی در این مورد بزنیم مثل این خواهد بود که در‌حالتی که شما رنگ متن را در یک برگه CSS آبی تعیین فرمائید، این به معنای قرمز بودن کل سرنویس‌ها (هدینگ) و جمله‌های متنی هست که قرار هست در این برگه CSS نوشته گردد.
براین اساس( CSS ) زبانی هست که توسط آن کارکشته خواهید تا استیل طراحی صفحه های وبسایت تان را یکبار تعریف و به صفحات مورد نیازتان ایفا نمائید. به کارگیری از CSS باعث تمیزتر شدن کدهای اپ نویسی تان می‌شود، تغییراتی که در آتی می‌خواهید اعمال نمایید را سهل می کند و همچنین روئت کرد شما را بیشتر به طراحی معطوف می کند تا رمز و کله زدن با کدهای نرم افزار نویسی. CSS در کنار HTML قرار میگیرد تا هسته تولید یک وبسایت را به وجود بیاورند. البته HTML چیست؟ برای اینکه به فهم کاملی از CSS برسیم بایستی تعریف مختصری از HTML داشته باشیم.
HTML چیست؟
HTML برگرفته از (Hyper Text Markup Language) می‌باشد و یک لهجه آرم‌گذاری استاندارد برای صفحه ها وب به حساب می‌آید. این زبان بنیاد صفحه های وب را تشکیل می دهد. هر آنچه که در صفحه می بینید از عنوان ها، متن ها و تصاویر همگی با HTML در شیت‌ی وب قرار داده شده‌اند.
در بالا مورد نیاز است بدانید html یک گویش نرم افزار نویسی نیست! بلکه یک طرز یا لهجه علامت‌گذاری می باشد که برای ساختاربندی اجزای کاغذ به فعالیت برده میگردد. HTML زبانی است که همه ارکان جانور در صفحات وب مثل جعبه های متن، دکمه ها و غیره بوسیله اون ساخته می‌شن و با ترکیب اون با کدهای CSS ظاهر ورقه شکل می‌گیره.
تلفیق CSS و HTML
در شرایطی که یک شیت وب را شامل اجزای زیر بدانیم:
محتوا (content): کدهای HTML مسئول تولید این بخش می باشند.
نمایش (presentation): کدهای CSS مسئول ساخت این قسمت هستند.
خلق و خوی (Behavior): این قسمت وب به وسیله JavaScript ساخت‌و‌ساز میگردد.
مثال ملموس تر میشود “اسکلت آدم را HTML فرض کنید و شکل،ظاهر ، رنگ مو، نژاد را CSS و رفتاری که از این آدم بروز می کند را JavaScript.
هدف از لهجه css چیست؟
غرض از ساخت گویش برنامه نویسی css در واقع جداسازی اطلاعات محتوا (که به وسیله زبانی مانند HTML درج گردیده اند) از اطلاعات ظاهری مانند ورقه بندی، رنگ و سایز و نوع فونت می باشد. این جداسازی موجب افزایش سرعت در دسترسی به وب سایت، انعطاف پذیری بیشتر برای کنترل ویژگی های ظاهری، امکان طراحی تعدادی برگه با یک فرمت یکسان و خودداری از پیچیدگی و انجام کارهای تکراری در ساخت وب سایت می‌گردد.
ساختار CSS
برای اینکه با سختار CSS آشنا شویم می بایست بگوییم که ساختار یک خط از کد CSS شامل یک گزینش‌گر (selector) می‌باشد که به یک یا چند تگ از html اشاره می‌کند. در مقابل انتخاب‌گر یک بلاک قرار میگیرد که سبک خاصی را به عنصر تعیین شده ایفا می‌کند. برای مثال این ساختار را در نظر درصورتی که در نظر بگیرید:
h1{font-size : 18px;}
که در اینجا h1 انتخابگر میباشد، font-size ویژگی می‌باشد و 18px مقدار آن می باشد.
روش‌ی اضافه کردن کدهای CSS به فولدر HTML
برای اضافه کردن کدهای CSS به سند HTML و سایر کدها، می توان از روش‌های زیر استفاده کرد.
۱- نوشتن inline CSS یا css خطی
درین نحوه شما با نوشتن واژه‌ی style درون هر تگ، میتوانید کدهای css مد لحاظ خود را به آن اضافه نمائید:
- نوشتن CSS در بخش HEAD فایل
همان گونه که می دانید در HTML یک بخش به نام head جای‌دارد که می توانید در آن
۳- نوشتن CSS در فایل خارجی
این طریق بهترین خط مش برای اضافه کردن استایل‌هاست. برای این کار کافیست تمام کدهای CSS را در یک فایل نوشته و با پسوند css. ذخیره نمایید. آن‌گاه این فایل را در هر head پوشه html خود فراخوانی فرمایید:
محدودیت‌های CSS
با اینکه CSS تا اینجای کار گسترش بسیار زیادی داشته، اما نمی‌قدرت اذعان کرد که کاملا ایده آل می‌باشد و هیچ محدودیتی برای طراح وبسایت ساخت و ساز نمی‌کند. در‌حالتی که بخواهیم به محدودیت‌های CSS اشاره کنیم، شاید به ۵ تا ۶ آیتم محدودیت بتوان اشاره کرد که در عوض آزادی عملی که این زبان در اختیار ما می‌گذارد، این محدودیت‌ها چیزی نیستند.
به عنوان مثال در CSS نمی‌قدرت برای rules اسم گزینش کرد. تعیین اسم برای یک rule، به عنوان مثال، می‌تواند برای ارجاع دادن یک اسکریپت سمت استفاده کننده (Clien-side) به یک rule هنگام تغییر‌و تحول selector آن، کارآمد باشد. همچنین محدودیت‌های دیگری مثل عدم توانایی انتقال Style از یک rule به rule دیگر و چن مورد دیگر از محدودیت در CSS وجود دارااست که ممکن می‌باشد مانند محدودیت‌هایی که در نسخه‌های پیشین CSS وجود داشتند، در آجل حل شوند.
مزایای CSS
می‌توان با ذهنی آسوده خاطرنشان کرد که CSS یکی‌از مفیدترین و پرکاربردترین اجزا دنیای طراحی وب سایت می‌باشد. دسترسی طراحان وب به CSS سبب توسعه‌های زیادی در دنیای طراحی وب شده است.
یکی از مهمترین مزایای CSS صرفه جویی در وقت و انرژی طراحان وب می باشد. تصور کنید که CSS وجود نداشت و شما به عنوان یک طراح وب سایت، می بایست برای هر تغییر تعالی و کوچکی، تعدادی بار یک کلاس یا Style را به صورت inline در پوشه HTML وارد می‌کردید. اما فعلا با وجود CSS در کنار HTML، طراحی وب بسیار سهل‌تر خواهد بود.
جمع بندی
در پایان بایستی بدین نکته اشاره کنیم که با دقت به تمام محدودیت های ذکر شده درباره‌ی CSS، هنوز هم مزایای آن، کفه معیار را به نفع آن سنگین می کند. و حرف آخر اینکه در حالتی‌که به طراحی کردن تارنما به عنوان یکی از کارهای اساسی برای درآمدزایی و یا یادگیری در زمان ها فراعت فکر میکند، یادگیری طراحی سایت را با اصول CSS و HTML در تقدم خود قرار دهید.