افزودن CSS CSS چیست، سبک های CSS برای چیست؟سبک های css خود را داشته باشید

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

چندین گزینه برای اجرای این عملیات وجود دارد: استفاده از شیوه نامه های تو در تو، شیوه نامه های خارجی و استایل درون خطی.

امروز در مورد روش دوم صحبت خواهیم کرد.

تزریق سبک به تگ HTML

ذات این روشچیز این است ترخیص لازمداخل تگ جاسازی می کنیم. برای این، جداگانه ویژگی - سبک. این صفت قابل بکارگیری استبه هر برچسب، اما فقط در بدنه سایت، یعنی درون بدن. مقدار این ویژگی عبارت سبکی است که باید به عنصر داده شده اعمال شود.

به عنوان مثال، بیایید اندازه های مختلف فونت را برای دو پاراگراف مختلف متن تنظیم کنیم:

< p style= "font-size:25px;" >این قطعه متن را روی ارتفاع 25 پیکسل تنظیم کنید. < p style= "اندازه قلم: 15 پیکسل؛ رنگ:#2400ff;"> و این متن با حروف به ارتفاع 15 پیکسل خواهد بود و همچنین آن را آبی رنگ می کنیم تا استفاده از چندین سبک را به طور همزمان نشان دهیم.

ایرادات

این مثال به خوبی نشان می دهد که چگونه چنین آویزان کردن سبک ها کد صفحه را مسدود می کند.

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

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

حتی هنگام استفاده از سبک های درون خطی، استفاده از کلاس های کاذب غیرممکن می شود، که دستان یک طراح وب را به شدت گره می زند.

همچنین شایان ذکر است که سردرگمی که مطمئناً در استفاده از ویژگی style به وجود می آید. این سردرگمی به دلیل استفاده از نقل قول های مختلف در هنگام نوشتن سبک ها ایجاد می شود.

برای وضوح، بیایید به مثال زیر نگاه کنیم:

< div style= "font-family: "Roboto Condensed"، sans-serif"> ورودی صحیح است. < div style= "font-family: "Robot Condensed"، sans-serif"> پس نیز درست است. < div style= "font-family: " Roboto Condensed ", sans-serif" >این یک ورودی صحیح نیست. < div style= "font-family: " Roboto Condensed ", sans-serif" >و این هم درست نیست.

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

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

با وجود تمام کاستی ها، سبک درون خطی بیهوده اختراع نشد. مدیران وب‌سایت‌ها اغلب در صورت استایل‌سازی برنامه‌ای به آنها مراجعه می‌کنند. به عنوان مثال، بیایید به این کد نگاه کنیم

< div id= "productRate" > < div style= "width: 40%" >

نوشتن عرض مورد نظر برای این بلوک ساده ترین عملیات خواهد بود.

وضعیت مشابهی ممکن است زمانی رخ دهد که لازم باشد تصویر پس‌زمینه (به عنوان مثال) کاربر تحت نقش مدیر جایگزین شود. در این حالت، تگ img ممکن است کار نکند. بنابراین، ارزش رجوع به ویژگی style را دارد:

< div style= "background:url(fon.jpg)" >

همچنین، برنامه نویسان اغلب به سبک های درون خطی در فرآیند چیدمان پنجره های پاپ آپ اشاره می کنند. اغلب این فرآیند به این صورت است: بلوکی که در حال طراحی است روی display:block تنظیم می شود و بقیه پنجره ها با استفاده از display:none پنهان می شوند تا از نظر بصری در کار برنامه نویس تداخل نداشته باشند. به عنوان مثال:

< div class = "element" style= "display:block" >پنجره بازشو که در حال حاضر در حال ارائه است

نتیجه

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

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

پیاده سازی این وظیفهاز سه طریق امکان پذیر است:

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

بیایید نگاه دقیق تری به هر گزینه بیندازیم و در عین حال با قوانین نحوی نوشتن CSS آشنا شویم.

ویژگی سبک

تقریباً هر تگ HTML دارای یک ویژگی است سبک، که نشان می دهد برخی توضیحات سبک برای این تگ اعمال می شود.

اینگونه نوشته شده است:

سبک = "">

هر چیزی که بین نقل قول های صفت نوشته خواهد شد سبکو شرح سبک برای عنصر داده شده، در این مورد عنصر خواهد بود

خوب مثلا:

style="color: #ff0000; font-size:12px"> این یک پاراگراف با سبک سفارشی است

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

با همین اصل، تقریباً برای هر عنصر HTML می‌توانید یک سبک جداگانه مشخص کنید.

style="background-color: #c5ffa0">

style="color: #0000ff; font-size:18px"> همه چیز درباره فیل ها

یک فیل بخر

style="color: #ff0000; font-size:14px">

style="color: #0000ff; font-size:16px"> یک فیل اجاره کنید

style="color: #ff0000; font-size:14px">

اما بار دیگر، این روش تزریق CSS تنها در صورتی خوب است که شما نیاز به تنظیم سبک خاصی برای تعداد کمی از عناصر HTML داشته باشید.

برچسب بزنید (با صفت همنام اشتباه نگیرید) که در آن توصیف عناصر مورد نیاز ما رخ می دهد.

به مثال نگاه کنید، نظراتی در زیر وجود خواهد داشت.

همه چیز درباره فیل ها

در این سایت اطلاعاتی در مورد فیل ها خواهید یافت.

یک فیل بخر

در اینجا می توانید بهترین فیل ها را با قیمت های رقابتی خریداری کنید!!

یک فیل اجاره کنید

فقط اینجا میتونی هر فیل رو اجاره کنی!!

همانطور که از مثال می بینید، ما دقیقاً به همان نتیجه ای دست یافته ایم که در مورد اول، فقط اکنون برای هر عنصر به صورت جداگانه یک سبک تجویز نمی کنیم، بلکه آن را در "سر" سند قرار می دهیم، در نتیجه نشان می دهد که همه سرفصل ها

,

- آبی و پاراگراف خواهد بود

- قرمز. تصور کنید اگر صد پاراگراف از این دست و حدود پانزده عنوان در صفحه وجود داشته باشد، و خود سند با «حذف» تمام توصیفات سبک تکراری برای هر عنصر، وزن کمتری داشته باشد، چقدر کار برای ما آسان‌تر می‌شود.

حالا نظرات وعده داده شده:

برچسب بزنید یک اعلان مستقیم از سبک های عناصر خاص HTML مطابق دستور زیر وجود دارد:

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

CSS در یک فایل خارجی جداگانه.

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

بنابراین، دفترچه یادداشت (یا ویرایشگر دیگری) را باز کنید و متن زیر را در آن بنویسید:

بدنه (رنگ پس زمینه: #c5ffa0)
a (رنگ:#000060؛ وزن قلم: پررنگ؛)
a:hover (رنگ:#ff0000؛ فونت-وزن: پررنگ؛ متن-تزیین: هیچکدام)
h1 (رنگ: #0000ff؛ اندازه قلم: 18 پیکسل)
h2 (رنگ: #ff00ff؛ اندازه قلم: 16 پیکسل)
p (رنگ: #600000؛ اندازه قلم: 14 پیکسل)

سعی می کنم در فصل های بعدی این آموزش در مورد چیزهای عجیب و غریبی که نوشتیم با جزئیات به شما بگویم.

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

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

برچسب بزنید دارای صفات:

href- مسیر فایل.
رابطه- رابطه بین سند جاری و فایل ارجاع شده را تعریف می کند.

• نماد میانبر - مشخص می کند که فایل ارائه شده یک است.
• برگه سبک- مشخص می کند که فایل شامل یک شیوه نامه باشد.
• application/rss+xml - یک فایل XML برای توصیف فید اخبار.

نوع- نوع داده MIME فایل موجود.

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

برای رفع سوء تفاهمات احتمالی، تکرار می کنم. صفت رابطهیک مقدار اختصاص دهید برگه سبکاز آنجایی که ما یک شیوه نامه آبشاری را به عنوان یک فایل خارجی اضافه می کنیم، مسیر فایل css را مشخص می کنیم (در این مثال، فایل نامیده می شود. mystyle.cssو در کنار سند HTML که در آن نوشته شده است قرار دارد لینک داده شده) نیز نشان می دهد که فایل داده شدهمتنی و حاوی توضیحات سبک است type="text/css"

حالا این خط را در سرفصل های صفحات سایت خود وارد می کنیم و از نتیجه لذت می بریم..

فایل mystyle.css
بدنه (رنگ پس زمینه: #c5ffa0)
a (رنگ:#000060؛ وزن قلم: پررنگ؛)
a:hover (رنگ:#ff0000؛ فونت-وزن: پررنگ؛ متن-تزیین: هیچکدام)
h1 (رنگ: #0000ff؛ اندازه قلم: 18 پیکسل)
h2 (رنگ: #ff00ff؛ اندازه قلم: 16 پیکسل)
p (رنگ: #600000؛ اندازه قلم: 14 پیکسل)
فایل index.html

منو:

همه چیز درباره فیل ها

در این سایت اطلاعاتی در مورد فیل ها خواهید یافت.

منو:

یک فیل بخر

در اینجا می توانید بهترین فیل ها را با قیمت های رقابتی خریداری کنید!!

منو:

یک فیل اجاره کنید

فقط اینجا میتونی هر فیل رو اجاره کنی!!

در مثال بالا، "سایت فیل"، در حال حاضر سه صفحه وجود دارد که هر کدام به یک صفحه پیوند دارند. css خارجیفایل - mystyle.css. بنابراین، ما به طور قابل توجهی آن را "تخلیه" کردیم و طراحی کل سایت را "موبایل" کردیم. تصور کنید اگر صد صفحه کامل در این سایت بود چند کیلوبایت برنده می شدیم!؟ همچنین اگر نیاز به تغییر چیزی در طراحی آن داشته باشیم چقدر در زمان صرفه جویی می کند!؟

در این فصل، ما به سه روش برای جاسازی CSS در یک سند HTML نگاه کردیم. استفاده از کدام یک بهتر است؟

• از ویژگی استفاده کنید سبکبرای هر عنصر اگر این عنصر با سبکی متفاوت از عناصر دیگر تنها در کل سایت باشد.
• از تگ استفاده کنید
  
  

  این یک عنوان است

  
  

  این یک پاراگراف است.

  
  

  CSS خارجی

  یک شیوه نامه خارجی برای تعریف سبک برای بسیاری از صفحات HTML استفاده می شود.

  با یک شیوه نامه خارجی، می توانید ظاهر و احساس کل یک وب سایت را با تغییر یک فایل تغییر دهید!

  برای استفاده از شیوه نامه خارجی، پیوندی به آن در بخش اضافه کنید صفحات HTML:

  مثال

  
  
  
  
  
  

  این یک عنوان است

  
  

  این یک پاراگراف است.

  
  

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

  این چیزی است که "styles.css" به نظر می رسد:

  بدن (
  رنگ پس زمینه: آبی پودری
  }
  h1 (
  رنگ آبی؛
  }
  پ(
  رنگ: قرمز؛
  }

  فونت های CSS

  ویژگی رنگ CSS رنگ متن مورد استفاده را مشخص می کند.

  ویژگی CSS font-family فونت مورد استفاده را مشخص می کند.

  ویژگی CSS font-size اندازه متن مورد استفاده را تعیین می کند.

  مثال

  
  
  
  
  
  

  این یک عنوان است

  
  

  این یک پاراگراف است.

  
  

  مرز css

  ویژگی مرزی CSS مرزی را در اطراف یک عنصر HTML تعریف می کند:

  مثال

  پ(
  }
  

  بالشتک CSS

  ویژگی padding CSS، padding (فضا) بین متن و حاشیه را تعریف می کند:

  مثال

  پ(
  حاشیه: 1px پودر آبی جامد.
  بالشتک: 30 پیکسل
  }

  از نویسنده:سلام، خوانندگان عزیز پورتال webformyself. در ساخت سایت، طراحی یک منبع وب از اهمیت بالایی برخوردار است. این چیزی است که زبان css (سبک شیت های آبشاری) مسئولیت آن را بر عهده دارد که امروز در مورد آن صحبت خواهیم کرد. یا بهتر بگویم در مورد اتصال و استفاده از آن. چند سبک css برای سایت در نظر بگیرید که در طراحی صفحات وب استفاده می شود.

  اتصال css

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

  باید گفت که به طور کلی امکان گنجاندن استایل ها در فایل html نیز وجود دارد. به عنوان مثال، آنها را می توان با استفاده از ویژگی style یا همان تگ تعریف کرد. به این سبک های درون خطی می گویند. این رویکرد امروزه مورد استقبال قرار نمی گیرد و استانداردهای توسعه مدرن را نقض می کند.

  اما شما می‌پرسید چگونه این کار را درست انجام دهیم؟ برای این شما باید ایجاد کنید فایل جدیدبا پسوند css و سپس آن را به html وصل کنید. این کار بسیار ساده با استفاده از تگ پیوند انجام می شود که وظیفه اتصال فایل های خارجی را بر عهده دارد. به این صورت انجام می شود:

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

  همانطور که قبلاً فهمیدید برچسب مجرد است. در مورد ویژگی های آن کمی بیشتر به شما می گویم:

  rel = "stylesheet" - به طور کلی، ویژگی rel به منظور تعیین نقش فایل در صفحه نوشته می شود. در مورد ما، نقش یک شیوه نامه است که نشان داده شده است.

  type = "text/css" - به اصطلاح نوع MIME که معمولاً برای همه فایل های موجود مشخص می شود تا مرورگر آنها را به درستی تفسیر کند. مرورگرهای وب مدرن نیازی به نوشتن این ویژگی ندارند.

  href = "style.css" یک ویژگی استاندارد است که آدرس فایل خارجی ما را مشخص می کند. در این مورد بر اساس این نوشته می شود که فایل دارای سبک نام، پسوند css و در همان پوشه سند html قرار دارد.

  همانطور که می بینید در اتصال فایل های css فقط ویژگی href تغییر می کند، بقیه موارد نیازی به تغییر ندارند. شما می توانید هر تعداد استایل شیت را که دوست دارید به صفحه متصل کنید، اما بیشتر از 2-4 مورد بهینه در نظر گرفته نمی شود، زیرا درخواست های زیاد به سرور نیز چندان خوب نیستند.

  از کجا می توانم استایل های آماده css را برای سایت تهیه کنم؟

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

  

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

  انتخابگر یکی از ویژگی های زبان css است که مختص آن است. آنها برای چه چیزی مورد نیاز هستند؟ خوب، این کد را تصور کنید:

  متن عنوان

  متن در یک پاراگراف

  و چگونه می توانیم به عنوان مثال یک پاراگراف و یک عنوان را در css استایل کنیم؟ این همان چیزی است که انتخابگرها برای دسترسی به عناصر مورد نیاز شما هستند. مثلا:

  p( اندازه قلم: 12px; ) .title(اندازه قلم: 36px;)

  اندازه فونت: 12px; عنوان ( اندازه فونت: 36px;

  اندازه فونت همه پاراگراف ها را روی 12 پیکسل قرار دادیم، در حالی که عناصر با کلاس عنوان (در مورد ما h1) اندازه بسیار بزرگتر 36 پیکسل را دریافت کردند. توجه داشته باشید که در مورد پاراگراف ها، سبک ها برای همه آنها اعمال می شود، مهم نیست که تعداد آنها در صفحه چقدر باشد.

  انتخابگر دوم فقط یک عنصر را مورد خطاب قرار می دهد - با کلاس عنوان. البته می توان المان های دیگر را دقیقاً با همان کلاس ایجاد کرد، ممنوع نیست و همان قانون را می گیرند، اما اگر فقط در آن بنویسیم تگ html h1 (بدون کلاس عنوان)، پس هیچ قانونی برای آن اضافه نخواهد شد.

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

  به عنوان مثال، در شیوه نامه کد زیر را مشاهده می کنیم:

  Nav(عرض: 300 پیکسل؛ پس‌زمینه: aqua؛ ...) .nav a (نمایش: بلوک؛ رنگ: #ccc؛ ...)

  ناو ( عرض: 300 پیکسل

  در حال حاضر از این می توانیم نتیجه بگیریم که جایی در صفحه html ما باید عنصری با کلاس nav وجود داشته باشد و پیوندها باید در آن قرار داشته باشند. اگر این درست باشد، ظاهر بر آنها اعمال می شود و ظاهر آنها بر همین اساس تغییر می کند. اگر چنین عناصری یافت نشد، کد به سادگی نادیده گرفته می شود.

  باز هم، در شبکه می توانید موارد زیادی را پیدا کنید قالب های آماده، که در آن می توانید این اتصال کلاس را مشاهده کنید، بنابراین اگر چیزی را در html تغییر دهید، باید عملیات مربوطه در style sheet انجام شود.

  چگونه برای سایت استایل های css بسازیم؟

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

  

  مهمترین شرط برای توسعه سریع، تمرین مداوم است، همراه با دانش جدیدی که خودتان یاد خواهید گرفت. شرکت ما می تواند تمرین مشابهی را به شما ارائه دهد.

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

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

  در این مورد من با شما خداحافظی می کنم. وبلاگ webformyself ما را بخوانید تا دانش ساخت وب سایت خود را بهبود ببخشید.

  > سبک های اصلی css برای ایجاد یک سایت به عنوان یک قاعده، استایل های نمایش کانتینرها و محتویات آنها در یک شیوه نامه نوشته می شود که معمولاً stile.css نامیده می شود، اگرچه می توانید آن را هر طور که دوست دارید نام گذاری کنید. نکته اصلی این است که در صفحه در برچسب مسیر صحیح به شیوه نامه بود

  برای استایل دادن به یک ظرف در یک صفحه، می‌توانید به آن یک کلاس بدهید. به عنوان مثال ظرف

  می توانید استایلی به نام chapka_saita اختصاص دهید، سپس کلاس به ظرف موجود در صفحه اختصاص داده می شود.

  محتوا

  . شیوه نامه سبک های chapka_saita را مشخص می کند. نام در جدول stile.css با یک نقطه شروع می شود.

  Chapka_saita (استایل ها را در براکت های فرفری مشخص کنید)

  همچنین، اگر یک کلاس به آن اختصاص داده نشده باشد، می‌توان استایل را مستقیماً برای کانتینر مشخص کرد. به عنوان مثال استایل برای ظرف

  محتوا

  با نام ظرف شروع می شود

  سربرگ (در پرانتزهای مجعد نشان دهنده سبک ها است)

  همچنین می‌توانید با استفاده از یک شناسه استایل‌ها را برای کانتینرها مشخص کنید، سپس به این شکل به نظر می‌رسد

  محتوا

  ، در شیوه نامه، شناسه با علامت پوند شروع می شود

  #blok1 (در کروشه های فرفری استایل ها را مشخص کنید)

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

  Chapka_saita (در بادبندهای فرفری سبک ظرف اصلی)
  .chapka_saita h1, h2 ( سبک سرفصل ها در برچسب ها

  و

  برای این ظرف)
  .chapka_saita a ( سبک برای پیوندهای موجود در این ظرف )
  .chapka_saita a:hover ( سبک‌های پیوند شناور)
  .chapka_saita img ( سبک های تصاویر در این ظرف )
  خود سبک‌ها درون این بریس‌های مجعد نوشته شده‌اند و با نقطه ویرگول از هم جدا می‌شوند.

  فونت-خانواده: Arial; فونت ظرف را که معمولاً در برچسب استفاده می شود را تنظیم می کند ، که در آن تمام محتوای صفحه

  ارتفاع خط: 1.2; ارتفاع خطوط را برای فونت تعیین می کند

  تورفتگی

  بالشتک: 10 پیکسل لایه داخلی محتوا را از حاشیه کانتینر تنظیم می کند، در این حالت، بالشتک 10 پیکسل است، می توانید مقدار را به صورت درصد یا به صورت em تعیین کنید.
  حاشیه: 5 پیکسل حاشیه های ظرف را تنظیم می کند،
  حاشیه: 10px 5px 0px 15px; تورفتگی ها را می توان به طور جداگانه برای هر طرف مشخص کرد
  حاشیه پایین: 10 پیکسل. شما می توانید تورفتگی را فقط در یک طرف مشخص کنید، در این حالت، تورفتگی از پایین 10 پیکسل است. همین امر را می توان در مورد بالشتک نیز اعمال کرد.

  در زیر نمونه ای از سبک ها برای تگ آورده شده است

  بدنه (حاشیه-چپ: خودکار؛ حاشیه-راست: خودکار؛ عرض: 930 پیکسل؛ اندازه قلم: 12 پیکسل؛ فونت-خانواده: Arial؛ ارتفاع خط: 1.2؛ تصویر پس زمینه: url(images/fon.jpg)؛ )

  سبک برای متن

  اندازه فونت: 12px; اندازه فونت را مشخص می کند، می تواند بر حسب پیکسل، درصد یا ems مشخص شود
  رنگ: #0000ff; رنگ فونت را نشان می دهد، در این مورد #0000ff آبی، می تواند به عنوان یک کلمه مشخص شود، به عنوان مثال رنگ: سبز; یعنی رنگش سبزه
  text-decoration: هیچ; زیر خط را حذف می کند، برای پیوندها برای حذف زیر خط استفاده می شود
  text-transform:بزرگ; تمام حروف متن را بزرگ می کند، به جای حروف بزرگ، می توانید مقادیر دیگری بنویسید و برعکس، زیر خط بالا یا پایین، خط خطی ایجاد کنید.
  فونت-وزن: پررنگ; فونت را پررنگ می کند، می توان از مقادیر دیگر به جای پررنگ استفاده کرد
  text-align:left; تراز متن را تنظیم می کند، در این مورد سمت چپ، در سمت چپ ظرف، می توانید مقدار conter، hight را تنظیم کنید.
  text-shadow: 1px 2px 1px 0px #000000; رنگ: #f9f5ed; سایه برای متن

  سبک های کانتینری

  پس زمینه رنگ: #DCDCDC; یک رنگ پس زمینه به ظرف اختصاص می دهد، در این مورد خاکستری #DCDCDC
  پس زمینه-تصویر: url(images/fon.jpg); تصویر پس زمینه را تنظیم می کند

  حاشیه: 1px جامد #E8E8E8; یک حاشیه اختصاص می دهد، عبارت solid به معنای یک حاشیه جامد است، #E8E8E8 رنگ حاشیه است. شما می توانید یک حاشیه جداگانه برای هر طرف مشخص کنید، به عنوان مثال border-top: 2px solid #E8E8E8;
  شعاع حاشیه: 10 پیکسل با گرد کردن گوشه‌های ظرف، می‌توانید یک گرد کردن متفاوت در هر گوشه حاشیه-شعاع تنظیم کنید: 2px 6px 10px 0px.
  box-shadow: #2C2C29 10px 10px 10px; سایه برای ظروف

  عرض: 926 پیکسل؛ عرض ظرف را مشخص می کند
  ارتفاع: 240 پیکسل; ارتفاع ظرف

  شناور به سمت چپ؛ ظرف را به سمت چپ فشار می دهد، به طور پیش فرض کانتینرها به ترتیب حرکت می کنند، و اگر می خواهید چندین بلوک را در یک خط ردیف کنید، باید ویژگی float:left را تنظیم کنید. و عرض ارتفاع: px; به طوری که به صورت عرضی در ظرف اصلی قرار می گیرند.
  float:right; همان است، اما ظروف در سمت راست فشار داده می شوند.
  اگر می‌خواهید ظرف را در وسط بسازید، عرض را مشخص کنید و تورفتگی‌ها به صورت avto هستند، به عنوان مثال: margin-left: auto; margin-right: auto; عرض: 150 پیکسل