بیایید مثالی از یک شیوه نامه ارائه دهیم - یک فایل ایجاد کنید style.cssو سبک ها را بنویسید:

بدنه ( فونت-خانواده: Arial، Verdana، Sans-serif؛ /* خانواده قلم */ اندازه قلم: 12pt؛ /* اندازه فونت اصلی بر حسب نقاط */ رنگ پس زمینه: #f0f0f0؛ /* رنگ پس زمینه صفحه وب * / رنگ: #000000؛ /* رنگ متن متن */ ) h1 ( رنگ: #a52a2a؛ /* رنگ سرصفحه */ اندازه قلم: 24pt؛ /* اندازه قلم در نقاط */ font-family: Georgia, Times, serif ; /* خانواده قلم */ وزن قلم: عادی؛ /* وزن متن عادی */ )

در اینجا استایل هایی را برای بدنه صفحه تنظیم کرده ایم و برای عنوان

. همچنین می توانید سبک های خاصی را برای هر عنصر صفحه دیگر در وب سایت خود تنظیم کنید.

حالا بیایید شیوه نامه خود را به سایت متصل کنیم:

سلام دنیا!

این اولین صفحه من با سبک های CSS است

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

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

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

سبک های داخلی

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

نحو عمومی

<тег style="свойство:значение; свойство:значение; ...">...

نمونه ای از اتصال استایل های درون خطی به CSS

بند 1

بند 2

نتیجه در مرورگر

بند 1

بند 2

سبک های داخلی

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

نمونه ای از اتصال استایل های داخلی به CSS

بند 1

بند 2

نتیجه در مرورگر

بند 1

بند 2

سبک های خارجی

استایل های خارجی در یک فایل جداگانه با استفاده از . در این حالت، تمام استایل ها در یک فایل متنی معمولی با پسوند css قرار می گیرند و بر عناصر تمام صفحاتی که این فایل به آنها متصل است تأثیر می گذارد. معمولاً ایجاد سبک های سایت با این روش شروع می شود زیرا فقط با کمک آن تمام مزایای CSS احساس می شود زیرا با تغییر داده ها در تنها یک فایل می توانید نمایش تعداد زیادی صفحه را به طور همزمان کنترل کنید. و در حال حاضر در فرآیند کار در سایت، در صورت لزوم، سبک های داخلی یا داخلی اضافه می شود.

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

نمونه ای از اتصال استایل های خارجی به CSS

بند 1

بند 2

محتویات فایل style.css

بدنه ( پس‌زمینه: #ccccff; /* رنگ پس‌زمینه صفحه */) p (رنگ: قرمز؛ /* رنگ متن پاراگراف */ font-family: Helvetica, sans-serif; /* قلم پاراگراف */ اندازه قلم: 150 % .

نتیجه در مرورگر

بند 1

بند 2

همانطور که می بینید، همه چیز بسیار ساده است. به طور کلی، با نام تقریباً تمام ویژگی های CSS می توانید متوجه شوید که چه تغییراتی ایجاد می کنند، البته اگر حداقل کمی انگلیسی بلد باشید.

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

از جمله CSS از طریق قانون import @

راه دیگر برای اتصال استایل های موجود در فایل های جداگانه استفاده از قانون است . این قانون برای ترکیب چندین شیوه نامه در یکی استفاده می شود که گاهی اوقات بسیار راحت است. اتصال در شیوه نامه های خارجی یا داخلی انجام می شود؛ برای این، پس از نام قانون، ساختار url() نوشته می شود، جایی که آدرس فایل CSS در نقل قول ها (" ") نشان داده می شود. یا url() اصلاً نوشته نمی شود، اما نقل قول ها و آدرس فایل بلافاصله اضافه می شوند. نحو کلی به شرح زیر است.

در یک شیوه نامه خارجی

@import url ("آدرس فایل"); @import "آدرس فایل"؛ ...

در باطن

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

مثال 1: اتصال معمولی سبک های خارجی

محتوای صفحه

مثال 2: اتصال استایل های خارجی با قانون @import CSS

محتوای صفحه

محتویات فایل style1.css

آدرس @import ("style/style2.css"); آدرس @import ("style/style3.css"); در زیر اینجا، علاوه بر این، می‌توان استایل‌های منظمی با ویژگی‌ها، مقادیر و غیره وجود داشته باشد.

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

توصیه نمی‌کنم فوراً از همه این روش‌های متنوع CSS استفاده کنید - روی شیوه نامه‌های معمولی خارجی تمرکز کنید، زیرا این گزینه اصلی است. اگر بخواهید، البته می توانید آزمایش کنید، اما نه بیشتر. به طور کلی، شما همیشه می توانید تصمیم بگیرید که چگونه CSS را متصل کنید، نکته اصلی این است که چه چیزی را متصل کنید. :)

سبک های سفارشی

بسیاری از مرورگرها این توانایی را دارند که یک فایل با CSS توسط خود کاربران اضافه کنند تا بتوانند ظاهر سایت‌هایی را که مشاهده می‌کنند، به قول خودشان، «مطابق با خودشان» تغییر دهند. به عنوان مثال، اندازه فونت و فونت، رنگ متن و پس‌زمینه برخی عناصر و غیره را تغییر دهید. طبیعتا در این حالت استایل ها توسط خود کاربر ایجاد می شوند. برای مثال، در اینترنت اکسپلورر می‌توانید سبک‌های سفارشی را با رفتن به مسیرهای زیر فعال کنید: Tools → Internet Options → General → Appearance.

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

نحوه اتصال css به html در یک فایل جداگانه

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

این روش ارجح ترین است. این به شما امکان می دهد سبک های وب سایت را جدا از اسناد HTML توسعه دهید. سپس می‌توان از این استایل در یک فایل style.css در بسیاری از صفحات استفاده کرد.

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

روش های اتصال دیگری نیز وجود دارد. از آنها فقط به عنوان یک گزینه اضافی استفاده کنید.

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

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

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

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

استایل شیت ساده

بیایید نگاهی بیندازیم که ابتدایی ترین استایل شیت چگونه به نظر می رسد و از چه عناصری تشکیل شده است. این نمونه ای از استایل CSS برای همه تگ ها است

که در صفحه وب هستند:

اکنون متن چگونه خواهد بود؟

در مرورگر و هر خط به چه معناست؟ بسیار ساده است: فونت دارای سبک و رنگ پررنگ #1E824C (کد رنگ هگزا دسیمال) خواهد بود و با 1em نمایش داده می شود (یک واحد نسبی برابر با اندازه فونت پیش فرض در مرورگر).

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

انتخابگر با مشخص کردن آن، به مرورگر می‌گوییم که دقیقاً می‌خواهیم استایل را روی چه چیزی اعمال کنیم. در مورد ما، انتخابگر p است. بلوک اعلامی این نام تمام محتوایی است که بین پرانتزهای فرفری () بعد از انتخابگر قرار دارد. ویژگی Style این دستوری است که گزینه قالب بندی مورد نظر را مشخص می کند (به عنوان مثال، می خواهید سبک قلم، وزن قلم، رنگ رنگ، اندازه قلم، اندازه قلم، و غیره را تغییر دهید). بعد از نام ملک باید یک علامت دو نقطه قرار گیرد. بعداً در مورد ویژگی های CSS بیشتر خواهید آموخت. مقدار Property بعد از دو نقطه، خود مقدار خاصیت نوشته می شود که خودتان آن را تعریف می کنید و به این ترتیب استایل خود را ایجاد می کنید. بسته به ویژگی، باید مقدار مناسب را مشخص کنید.

به عنوان مثال، سبک قلم با کلمات کلیدی bold، bolder و غیره مشخص می شود، رنگ با مقدار هگزادسیمال، RGB(A)، HSL(A) یا کلمات کلیدی قرمز، نارنجی، سفید و غیره، اندازه فونت توسط CSS مشخص می شود. واحد (درصد) % ، پیکسل ها px، نکته ها pt, ارتفاع فونت) یا ثابت های کوچک، متوسط، بزرگ و غیره. پس از تعیین مقدار ویژگی، یک نقطه ویرگول قرار می گیرد.

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

P (وزن قلم:پررنگ;رنگ:#1E824C;اندازه قلم:1em;)

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

اغلب، هنگام توصیف یک سبک، از یک شکل فشرده از نماد استفاده می شود، که در آن تمام ویژگی های یک انتخابگر در یک بلوک نشان داده می شود:

P (وزن قلم: پررنگ؛ رنگ: #1E824C؛ اندازه قلم: 1em؛ )

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

P (وزن قلم: پررنگ؛) p (رنگ: #1E824C؛) p (اندازه قلم: 1em؛)

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

برای راحتی بیشتر، می توانید نظرات را مستقیماً در CSS اضافه کنید. در آن‌ها می‌توانید توضیحات و یادداشت‌هایی بنویسید تا به شما در پیمایش شیوه نامه‌ها کمک کند.

نظرات در CSS بین کاراکترهای /* و */ نوشته می شوند. آنها در صفحه وب در مرورگر نمایش داده نمی شوند و فقط در کد قابل مشاهده هستند. توسعه دهندگان همچنین اغلب از نظرات برای پنهان کردن موقت بخش های غیر ضروری کد CSS استفاده می کنند. نظرات به این صورت است:

/* سبک متن اصلی */ p ( وزن قلم: پررنگ؛ رنگ: #1E824C؛ اندازه قلم: 1em؛ )

استایل شیت های داخلی و خارجی

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

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

شیوه نامه های خارجی بسیار رایج تر هستند. فقط باید جدول را با استفاده از تگ به تمام صفحات وب ضروری متصل کنید با ویژگی rel (رابطه بین صفحه و فایل موجود را تعریف می کند) و مقدار stylesheet، به این معنی که فایل شامل یک شیوه نامه است. ویژگی href مسیر (URL) فایل css شما است:

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

درس: ایجاد یک شیوه نامه

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

در پوشه یک سند HTML با مثالی از یک صفحه ساده و یک تصویر (برای استفاده در آموزش) پیدا خواهید کرد. سند HTML را در مرورگر خود باز کنید. خواهید دید که صفحه کاملا عادی به نظر می رسد. برای اینکه ظاهری جذاب‌تر به آن ببخشید، بیایید آن را استایل کنیم.

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

اتصال CSS به HTML

برای شروع، هر ویرایشگر متنی را در رایانه خود باز کنید (نت پد این کار را انجام می دهد) و یک فایل خالی به نام style ایجاد کنید و آن را با پسوند css ذخیره کنید (در پایان باید یک فایل style.css داشته باشید). فایل را در پوشه ای که سند HTML دانلود شده در آن قرار دارد ذخیره کنید.

سند HTML را در یک ویرایشگر متن و همچنین در مرورگر باز کنید (برای مشاهده آسان تغییرات در ظاهر صفحه). بین تگ ها اضافه کنید کد زیر:

کارهایی را که انجام دادید به اختصار خلاصه کنید. با چسباندن این کد در سند HTML خود، شما:

• پیوندی به فونتی به نام Roboto Condensed ارائه داد که از سرور Google گرفته می شود (در ادامه بیشتر در مورد فونت های Google به شما خواهیم گفت).
• شیوه نامه خارجی ما style.css را متصل کرد (فعلا خالی است).

سبک نوشتن CSS

تغییرات خود را در سند HTML ذخیره کنید و به فایل .css خالی که ایجاد کرده اید بروید. بیایید یک استایل به صفحه اضافه کنیم:

Html ( padding-top: 5px; background-image: url(background.jpg)؛ )

تغییرات خود را ذخیره کنید تبریک می گویم، شما اولین قانون خود را نوشته اید - این به برچسب مربوط می شود . اولین ویژگی - padding-top - یک padding بالای 5 پیکسل بین پنجره مرورگر و محتوای صفحه وب اضافه می کند. با ویژگی دوم، background-image، یک تصویر برای پس‌زمینه کل صفحه با مشخص کردن مسیر فایل گرافیکی (که در همان پوشه سند HTML قرار دارد) اضافه کرده‌اید.

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

بدنه (عرض: 75%؛ بالشتک: 40 پیکسل؛ حاشیه: 15 پیکسل خودکار؛ رنگ پس‌زمینه: #EBEBEB؛ شعاع حاشیه: 30 پیکسل؛ )

تغییرات را در فایل ذخیره کنید. حالا تو:

• منطقه را برای محتوای برچسب تنظیم کنید ، که برابر با 75٪ از عرض پنجره مرورگر است.
• یک حاشیه 40 پیکسلی از همه طرف های منطقه محتوا ارائه می کند.
• ناحیه را در مرکز صفحه قرار داد و همچنین یک تورفتگی در بالا و پایین 15 پیکسل ایجاد کرد.
• رنگ پس زمینه #EBEBEB را برای ناحیه محتوا تنظیم کنید.
• گوشه های ناحیه مستطیلی را گرد کرد و شعاع گرد 30 پیکسل را مشخص کرد.

سند HTML را دوباره به روز کنید. در همان زمان، مطمئن شوید که حافظه پنهان غیرفعال است یا صفحه را با استفاده از یک کلید ترکیبی خاص بارگیری مجدد کنید و تمام فایل های مرتبط با آن را به روز کنید (به عنوان مثال، برای Chrome این Ctrl+F5).

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

تغییر فونت با استفاده از CSS

وقت آن است که متن خود را تزئین کنیم. این کد را به شیوه نامه خود اضافه کنید و تغییرات خود را ذخیره کنید:

H1 ( رنگ: #E87E04؛ اندازه قلم: 2em؛ حاشیه سمت چپ: 20 پیکسل؛ خانواده فونت: "Roboto Condensed"، sans-serif; ) h2 (رنگ: #E87E04؛ اندازه قلم: 1.7em؛ حاشیه سمت چپ : 20 پیکسل؛ خانواده فونت: "Roboto Condensed"، sans-serif; ) p (رنگ: #22313F؛ ارتفاع خط: 150%؛ حاشیه بالا: 20 پیکسل؛ حاشیه سمت چپ: 20 پیکسل؛ خانواده فونت: "Roboto Condensed" "، بدون دندانه؛ )

پس از نوشتن این، رنگ فونت ها را برای تگ های h1، h2، p تنظیم کردید، اندازه آنها را مشخص کردید، یک حاشیه از لبه سمت چپ 20 پیکسل اضافه کردید و علاوه بر آن برای

قسمت بالایی را 20 پیکسل فرورفتیم و ارتفاع خط (فاصله خط متن) را 50 درصد بزرگتر از استاندارد تعیین کردیم. علاوه بر این، فونت Roboto Condensed را به هر سه تگ متصل کردید (به همین دلیل باید در همان ابتدا پیوندی به آن در فایل HTML ارائه می دادید).

صفحه را در مرورگر خود به روز کنید و نتیجه را تحسین کنید. در این آموزش یک چیز دیگر را امتحان خواهیم کرد. این کد را به CSS اضافه کنید:

تاکید (وزن قلم: پررنگ؛ )

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

شما باید با صفحه ای مانند این روبرو شوید:

به عنوان یک تمرین، سعی کنید اندازه متن را تغییر دهید

(فرض کنید 1.1em) و همچنین فضای بین را افزایش دهید

و لبه سمت چپ منطقه محتوا 10 پیکسل دیگر.

نتیجه گیری

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

هر سبک CSS از چندین عنصر تشکیل شده است: یک انتخابگر، یک ویژگی سبک و مقدار این ویژگی.

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

شما باید علائم را به دقت دنبال کنید: دو بریس فرفری (در ابتدای بلوک تبلیغاتی باز می شود و در پایان بسته می شود). بدون این براکت ها، CSS به درستی کار نخواهد کرد.

لازم است یک دونقطه بعد از ویژگی و یک نقطه ویرگول بعد از مقدار قرار دهید.

برای راحتی و خوانایی بهتر کد CSS خود، هر ویژگی را در یک خط جدید بنویسید و از فاصله ها و تب ها کوتاهی نکنید.

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

اتصال داخلی

یک شیوه نامه داخلی مجموعه ای از سبک ها است، بخشی از کد یک صفحه وب که همیشه باید بین تگ های باز و بسته ظاهر شود.کد HTML در بدنه تگ صفحه وب. مثال:

متن زرد با فونت Verdana