چگونه کد html را به شکل معمولی بیاوریم. تراز کردن عناصر در HTML مثال: قالب بندی متن
با استفاده از تگ‌های قالب‌بندی، می‌توانید متن‌های مهم معنایی را در صفحات برجسته کنید، متون دست‌نویس ایجاد کنید، درج کنید. اسناد HTMLکاراکترهای دارای زیرنویس و زیرنویس و همچنین افزایش و کاهش اندازه قلم.
معناشناسی چیست؟
معناشناسی در HTML عملی است برای ارائه معنا و ساختار به محتوای یک سند با استفاده از یک برچسب مناسب. کد معنایی معنای محتوای یک سند را بدون توجه به سبک یا ظاهر آن توصیف می کند. استفاده از عناصر معنایی چندین مزیت دارد:
- کد معنایی به طور مستقیم بر مقدار کد HTML تأثیر می گذارد. هرچه کد کمتر باشد، سند "سبک تر" است، به این معنی که صفحات وب سریعتر بارگیری می شوند و نیاز کمتری دارند حافظه دسترسی تصادفیدر سمت کاربر سایت سریعتر و ارزان تر می شود.
- کامپیوتر، صفحه خوانبرای کسانی که برچسب ها و ویژگی های آنها مهم است، محتوای یک صفحه وب را به اندازه کافی بخوانید و درک کنید.
- کد معناییهمه چیزهای دیگر برابر هستند، در نتایج موتورهای جستجو بالاتر از صفحه ای با کد غیر معنایی ظاهر می شوند.
بند انگشتی
برای پررنگ کردن متن و جلب توجه به آن، از عنصر درون خطی استفاده می کنیم . دو تگ وجود دارد که می توان از آنها برای برجسته کردن متن استفاده کرد با حروف درشت: برچسب ها و . درک تفاوت معنایی بین آنها مهم است.
برچسب بزنید از نظر معنایی برای اهمیت دادن بیشتر به متن استفاده می شود و بنابراین محبوب ترین گزینه برای متن پررنگ است. برچسب بزنید از سوی دیگر از نظر معنایی به معنای برجسته سازی سبکی متن است که همیشه اینطور نیست بهترین انتخاببرای متن در خور توجه شما باید اهمیت متنی را که می خواهید برای آن بولد تنظیم کنید ارزیابی کنید و برچسب مناسب را انتخاب کنید. حتی اگر مرورگرها آنها را دقیقاً یکسان نشان دهند، موتورهای جستجومی تواند به آنها بدهد معنی متفاوتهنگام تجزیه و تحلیل صفحه
کد HTML با برچسب و :
توجه:فرود تند
اینها دستور العمل ها هستند اولیوو وینگرت.
مثال: متن مهم و پررنگ
- خودت آن را امتحان کن "
توجه:فرود تند اینها دستور العمل ها هستند اولیوو وینگرت.
توجه:فرود تند
اینها دستور العمل ها هستند اولیوو وینگرت.
متن کج
برای متن ایتالیک، که در نتیجه بر آن تاکید می شود، از یک عنصر درون خطی استفاده می کنیم . همانند تگ های متنی پررنگ، دو تگ مختلف وجود دارد که تنظیم می شوند متن مورب، هر کدام معنای معنایی خاص خود را دارند.
برچسب بزنید برای تأکید بر یک قطعه متن استفاده می شود - این محبوب ترین گزینه برای حروف کج است. گزینه دیگر استفاده از تگ است ، که به سادگی برای ایجاد متن ایتالیک استفاده می شود.
کد HTML با برچسب و :
من من عاشقسرزمین مادری!
نام ویکتوریایعنی پیروزی
برچسب ها و
برچسب بزنید اندازه فونت را در مقایسه با متن معمولی یک بار کاهش می دهد. که در اندازه HTMLفونت در واحدهای دلخواه از 1 تا 7 اندازه گیری می شود، متوسط اندازه متن استفاده شده به طور پیش فرض 3 است. بنابراین، اضافه کردن یک برچسب متن را یک واحد معمولی کاهش می دهد. برچسب بزنید برعکس، اندازه فونت را در مقایسه با متن معمولی یک عدد افزایش می دهد.
کد HTML با برچسب و :
این متن معمولی است.
این متن با حروف کوچکتر است.
این متن با حروف بزرگ است.
مثال: فونت کوچک و بزرگ شده
- خودت آن را امتحان کن "
این متن معمولی است.
این متن با حروف کوچکتر است.
این متن با حروف بزرگ است.
تگ HTML
برچسب بزنید برای برجسته کردن یا برجسته کردن متن به دلیل ارتباط آن با متن استفاده می شود. یک مثال خوبعبارت است از برجسته کردن کلمه ای که کاربر به دنبال آن در سند بود. معمولا در مرورگرها رنگ پس زمینهمتن داخل ظرف با رنگ زرد برجسته شده استمانند یک نشانگر جوهر
تگ HTML
برچسب بزنید برای برجسته کردن متنی که در نسخه جدیدی از سند حذف شده است استفاده می شود. این قالب‌بندی به شما امکان می‌دهد تغییراتی که در متن اصلاح‌شده سند ایجاد شده است را پیگیری کنید. مرورگرها معمولاً متن را در یک ظرف علامت گذاری می کنند مانند خط خورده
.
تگ HTML
برچسب بزنید طراحی شده برای برجسته کردن متنی که به آن اضافه شده است نسخه جدیدسند این قالب‌بندی به شما امکان می‌دهد تا ردیابی کنید که کدام قسمت از محتوا در طول آن اضافه شده است اخرین بروزرسانیسند مرورگرها معمولاً متن را در یک ظرف علامت گذاری می کنند .
تگ HTML
برچسب بزنید متن را به صورت زیرنویس نمایش می دهد. متن زیر خط پایه کاراکترهای باقی مانده از خط قرار دارد و از چنین متنی می توان در عمل استفاده کرد، به عنوان مثال، برای نوشتن فرمول های مختلف در زیرنویس .
تگ HTML
برچسب بزنید متن را به صورت فوق نویس نمایش می دهد. متن کوچکتر و بلندتر از خط پایه بقیه کاراکترهای خط به نظر می رسد. از چنین متنی می توان در عمل استفاده کرد، به عنوان مثال، برای نوشتن فرمول ها یا پاورقی های مختلف در بالانویس .
خطوط شکسته و خطوط افقی
برچسب بزنید
(ترجمه خطی)
همانطور که قبلا دیده اید، برچسب
به شما این امکان را می دهد که به صورت منطقی و فیزیکی یک پاراگراف متن را از پاراگراف دیگر جدا کنید، اما اگر بخواهید متن را در داخل یک پاراگراف به یک خط جدید منتقل کنید، چه؟ یک تگ به طور خاص برای این اهداف طراحی شده است.
. یکی از تفاوت های قابل مشاهده بین این تگ و
عدم وجود تورفتگی بعد و قبل از برچسب است
. این اجازه می دهد تا خطوط مجاور متن نزدیکتر به هم قرار گیرند. توانایی تعیین مستقل محل انتقال می تواند هنگام ضبط شعر یا برای جداسازی عناصر مختلف در یک سند مفید باشد. یک عنصر اضافه کنید
در هر خطی که می‌خواهید جریان متن را قطع کنید و یک خط شکسته وارد کنید.
برچسب بزنید
(خط افقی)
خطوط افقی به شما این امکان را می دهد که متن طولانی و با پایان رسمی را به بخش های فرعی جداگانه تقسیم کنید. خطوط افقی در یک سند وب همان نقش راه راه های زینتی را در نشریات چاپی ایفا می کنند. یک تگ برای درج یک خط افقی استفاده می شود
. این تگ تک بلوکی به شما امکان می دهد یک نوار افقی را وارد کنید که عرض آن یا کل عرض ظرفی است که برچسب در آن قرار دارد یا عرض پنجره مرورگر.
مثال: خطوط شکسته و خطوط افقی
- خودت آن را امتحان کن "
این خطوط با استفاده از یک پاراگراف (p) از یکدیگر جدا می شوند:
این اولین پاراگراف است.
این پاراگراف دوم است.
این خط است:
این خطوط با استفاده از تگ br از یکدیگر جدا می شوند:
تانیا ما با صدای بلند گریه می کند
توپی را در رودخانه انداخت
کد HTML با برچسب
,
,
,
,
:
متن حاوی این کلمه است: شانس.
کلمه مشکلاز متن حذف شده است
کلمه پیروزیبه متن اضافه شده است
فرمول آب: N 2 O.
سرعت باد: 20 متر 3/ ثانیه
مثال: قالب بندی متن
- خودت آن را امتحان کن "
یک کلمه در متن وجود دارد: شانس. کلمه مشکل از متن حذف شده است. کلمه به متن اضافه شده است. فرمول آب: H 2 O. سرعت باد: 20m 3 /sec.
متن حاوی این کلمه است: شانس.
کلمه مشکلاز متن حذف شده است
کلمه پیروزیبه متن اضافه شده است
فرمول آب: N 2 O.
سرعت باد: 20 متر 3/ ثانیه
وظایف
وظیفه نهایی
در این درس با عناصر طراحی شده برای علامت گذاری عبارات کوچک و تک تک کلمات آشنا شدید. توجه ویژه ای به طرح منطقی متن با استفاده از برچسب ها برای نشان دادن اهمیت یک کلمه یا عبارت و نه فقط قالب بندی بصری صورت گرفت.
وقت آن است که آنچه را که آموخته اید مرور کنید و پنج کار ساده را تکمیل کنید:
کلمه قوی از نظر معنایی
- خودت تصمیم بگیر"
کلمه "حرفه ای" را به صورت پررنگ برجسته کنید و بدین ترتیب اهمیت معنایی ویژه این کلمه را نشان دهید.
شما باید در رشته خود حرفه ای شوید
شما باید تبدیل شوید حرفه ایشغلت
تاکید بر کلمه
- خودت تصمیم بگیر"
بر کلمه "پر" تاکید کنید. در این حالت به صورت بصری این کلمه باید به صورت مورب نمایش داده شود.
آیا شما هم مثل من کد CSS خود را دوست دارید؟ اگر چنین است، پس، البته، سعی کنید اطمینان حاصل کنید که او نه تنها رفتار و احساس خوبی دارد، بلکه زیبا به نظر می رسد.
امیدوارم ابزارهای توضیح داده شده در زیر به کد شما کمک کند تا به ایده آل نزدیک تر شود.
1.Styleneat
احتمالا ساده ترین سرویس ارائه شده در بررسی.ابزار گزینه های زیادی ندارد:
- خصوصیات را بر اساس حروف الفبا مرتب کنید
- مرتب سازی انتخابگرها بر اساس حروف الفبا (اگر "Safe Organization" علامت زده شود، این گزینه در دسترس نیست)
- امکان انتخاب سبک قالب بندی: چند خطی یا تک خطی
- می‌تواند فایل‌های CSS متصل شده را با استفاده از import به فایل اصلی بکشد و بی‌رحمانه آنها را پردازش کند
- شما می توانید کدی را برای پردازش با استفاده از: یک فیلد متنی، آپلود یک فایل یا ارائه پیوند به CSS ارسال کنید
- نتیجه را می توان به عنوان کد CSS یا آپلود یک فایل به دست آورد
2. FormatCSS
علیرغم ظاهر تهدیدآمیز آن، این ساز به خوبی از عهده عملکردهای خود بر می آید که تعداد زیادی از آنها را دارد.
شما می توانید مقدار زیادی پیکربندی کنید:
- قرار دادن فضاها / زبانه ها / خطوط جدید،
- مرتب سازی خواص و نام انتخابگر،
- تبدیل نام اموال و انتخابگرها به حروف کوچک و غیره
3. CleanCSS
کافی ابزار قدرتمند، که امکانات زیادی را در اختیار ما قرار می دهد:
- می‌توانید CSS را با کپی پیست کردن در قسمت «CSS-Code» یا به‌عنوان پیوندی به فایل سبک تغذیه کنید.
- می توانید نتیجه را به صورت متن یا فایل دریافت کنید
- کاربر می تواند از میان 4 نوع قالب بندی منبع را انتخاب کند: کد را می توان برای کوچکترین اندازه یا برعکس برای خوانایی بهتر بهینه کرد. امکان تنظیم یک قالب قالب بندی در قسمت "الگوی سفارشی" وجود دارد
- قادر به ترکیب قوانین و کاهش سوابق اموال به یک فرم کوتاه
- در صورت لزوم، نظرات و تعاریف نامعتبر را حذف کنید
- مانند خدماتی که در بالا توضیح داده شد، با کمال میل هر آنچه را که دلتان بخواهد بر اساس حروف الفبا مرتب می کند و آن را به پایین تر تبدیل می کند/ حروف بزرگ
UPD> در نظرات آنها پیوندی به دوقلو این سرویس را پیشنهاد کردند: CodeBeautifier. مجموعه توابع تقریباً با CleanCSS یکسان است (سرویس روی CSSTidy نیز اجرا می شود).
4. ProCSSor
به نظر با تجربه من، راحت ترین از همه ارائه شده در این بررسی است.
این سرویس با رابط کاربری دلپذیر و نکات پاپ آپ بسیار واضح به کاربر خوشامد می گوید که به شما امکان می دهد تنظیمات را به سرعت درک کنید.
مانند هر زیباساز که به خود احترام می گذارد، ProCSSor کد را در قسمت ورودی، در قالب یک فایل یا پیوند از ما می پذیرد. نتیجه را برای مرورگر ارسال می کند و لینک دانلود فایل را نمایش می دهد.
این ابزار دارای تنظیمات کافی برای خشنود کردن تقریباً هر کاربری است، فهرست کردن آنها منطقی نیست - بهتر است فوراً آن را امتحان کنید.
یکی از ویژگی های خوب این سرویس است توانایی ذخیره تنظیمات شما، تا دفعه بعد بتوانید مرحله تنظیمات را رد کنید و مستقیماً به فرآیند پالایش بروید.
یکی دیگر از جاذبه های - ProCSSor یک API ارائه می دهد، اسناد را می توانید در اینجا پیدا کنید:
تراز متن آن را تعیین می کند ظاهرو جهت لبه های پاراگراف و می تواند چپ، راست، وسط یا توجیه شود. روی میز شکل 1 گزینه هایی را برای تراز کردن یک بلوک از متن نشان می دهد.
| تراز چپ | تراز سمت راست | تراز وسط | توجیه |
|---|---|---|---|
| Lorem ipsum dolor sit amet، consectetuer adipiscing elit، sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. | Lorem ipsum dolor sit amet، consectetuer adipiscing elit، sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. |
Lorem ipsum dolor sit amet، consectetuer adipiscing elit، sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. |
رایج ترین گزینه تراز چپ است، جایی که متن سمت چپ به لبه فشار داده می شود در حالی که متن سمت راست ناهموار باقی می ماند. تراز راست و مرکز عمدتاً در سرفصل ها و زیر عنوان ها استفاده می شود. در نظر داشته باشید که هنگام استفاده از توجیه، ممکن است فاصله های زیادی بین کلمات متن ظاهر شود که چندان جذاب نیست.
تگ پاراگراف معمولاً برای تنظیم تراز متن استفاده می شود
با ویژگی align که روش تراز را مشخص می کند. همچنین امکان تراز کردن یک بلوک از متن با استفاده از یک برچسب وجود دارد
| کد HTML | شرح |
|---|---|
| یک پاراگراف جدید از متن را اضافه می کند که به طور پیش فرض در سمت چپ تراز شده است. تورفتگی های عمودی کوچک به طور خودکار قبل و بعد از پاراگراف ها اضافه می شوند. | |
متن |
تراز وسط. |
متن |
تراز چپ. |
متن |
|
متن |
تراز عرضی. |
| بسته بندی خودکار خط را غیرفعال می کند، حتی اگر متن از پنجره مرورگر بازتر باشد. | |
| متن |
به مرورگر اجازه می دهد تا یک خط را در مکان مشخص شده بشکند، حتی اگر از یک برچسب استفاده شود |
متن
|
تراز وسط. |
متن
|
تراز چپ. |
متن
|
تراز سمت راست. |
متن
|
تراز عرضی. |
تراز چپ عناصر به طور پیش فرض تنظیم شده است، بنابراین نیازی به تعیین مجدد آن نیست. بنابراین align="left" را می توان حذف کرد.
تفاوت بین پاراگراف (برچسب
) و تگ کنید
ویژگی align کاملاً جهانی است و می تواند نه تنها برای متن اصلی، بلکه برای عناوین مانند اعمال شود
. مثال 1 نحوه تنظیم تراز را در چنین حالتی نشان می دهد.
مثال 1: ترازبندی متن
چگونه یک شیر را بگیریم؟
روش Brute Force
بیابان را به چند ناحیه ابتدایی تقسیم می کنیم که اندازه آن با ابعاد کلی شیر منطبق است، اما از اندازه قفس کوچکتر است. در مرحله بعد، با جستجوی ساده منطقه ای را که شیر در آن قرار دارد را تعیین می کنیم که به طور خودکار منجر به گرفتن آن می شود.
روش دوگانگی
کویر را به دو نیم تقسیم می کنیم. در یک قسمت شیر است، در قسمت دیگر هیچ. نیمه ای که شیر در آن قرار دارد را می گیریم و دوباره آن را به دو نیم تقسیم می کنیم. این کار را تا زمانی که شیر صید شود تکرار می کنیم.
نتیجه مثال در شکل نشان داده شده است. 1.
برنج. 1. متن را به راست و چپ تراز کنید
که در در این مثالعنوان در مرکز پنجره مرورگر، پاراگراف برجسته شده در سمت راست و متن متن در سمت چپ تراز شده است.
HTML Beautifier & Formatter
بارگذاری URL بارگذاری URL
HTML Formatter
HTML کثیف، کوچک یا مبهم خود را در فیلد بالا وارد کنید تا تمیز و زیبا شود. ویرایشگر بالا همچنین شامل شماره خطوط مفید و برجسته سازی نحو است. گزینه های زیادی برای تطبیق زیباکننده با سلیقه قالب بندی شخصی شما وجود دارد.
چه زمانی از HTML Viewer، HTML Formatter، HTML Formatter استفاده می کنید
اغلب هنگام نوشتن HTML، تورفتگی، فاصله و سایر قالب‌بندی‌ها ممکن است کمی نامرتب شوند. همچنین معمول است که چندین توسعه‌دهنده روی یک پروژه کار کنند که تکنیک‌های قالب‌بندی متفاوتی دارند. این ابزار برای سازگار کردن قالب بندی یک فایل مفید است. همچنین معمول است که HTML کوچک یا مبهم شود. می‌توانید از این ابزار برای زیبا و خواندنی کردن کد استفاده کنید تا ویرایش آن آسان‌تر شود.
مثال ها
HTML کوچک شده زیر:
به این زیبایی می شود:
وظیفه اصلی قالب بندی خوانایی و فهم متن در ساختار آن است. حتی راهنماهای کاملی در مورد نحوه قالب بندی کدها وجود دارد که در آن جزئیاتی مانند تعداد فاصله ها یا تورفتگی بریس های فرفری توضیح داده شده است. در واقع، همه چیز بسیار ساده تر است - برای اینکه کد به صورت بصری قابل خواندن باشد کاملاً کافی است و فاصله ها یا جدول ها یک موضوع جزئی هستند.
با این حال، من می خواهم بر این تاکید کنم، اگر می خواهید برای افراد دیگر کد پست کنید، باید به نوعی "استاندارد پایه" پایبند باشید.
بلوک بالشتک
هر بلوک تودرتو باید حاشیه چپ بیشتری نسبت به والد خود داشته باشد.
یعنی ما در حال ساخت یک سلسله مراتب بصری از برچسب ها هستیم که به راحتی قابل پیمایش است. مقایسه با "سبک تخت":
نوین ویرایشگرهای متنبه عنوان مثال، Notepad++ به طور خودکار چنین تورفتگی را توسط Enter ایجاد می کند، که به طور کامل مشکل چینش دستی آنها را برطرف می کند. این تضمین می کند که تگ باز همیشه دارای یک تگ بسته است.
بلوک های "بستن".
ممکن است وضعیتی در کد شما وجود داشته باشد که در آن بلوک‌ها همیشه بلافاصله به دنبال یکدیگر می‌آیند. در این مورد، لازم نیست آنها را بین یکدیگر تقسیم کنید و تورفتگی اضافی ایجاد نکنید.
در این مثال، div.layout-center-wrap همیشه حاوی یک فرزند فوری از div.layout-wrap بدون وقفه است. چنین بلوک هایی را می توان به صورت بصری به عنوان یکی مشاهده کرد. در اینجا مثال دیگری وجود دارد که در آن بلوک ها را می توان در یک سطح قرار داد.
نکته اصلی در اینجا این است که زیاده روی نکنید: نباید بیش از 2-3 بلوک را در یک خط / سطح قرار دهید. اگر متن یا کد بین بلوک ها قرار می گیرد، قطعاً باید در خطوط مختلف قرار گیرند.
این قالب بندی مناسب نیست. اینجوری درست میشه:
Space یا Tab
مهم نیست از آنچه بیشتر دوست دارید استفاده کنید. تا آنجا که من می دانم، تقریباً همه کدنویس ها از جدول ساز استفاده می کنند، زیرا فقط یک بار باید کلید Tab را فشار دهید.
اگر این کار را با فاصله انجام می دهید، برای هر تورفتگی باید 4 فاصله را فشار دهید. یک مشکل رایج این است که به اشتباه می توانید نه 4، بلکه 3، 5 یا تعدادی دیگر را فشار دهید، و در این مورد باید یا تعداد ضربه های کلید را بشمارید یا به صورت بصری نتیجه را کنترل کنید.
از این نظر، جدول‌ساز بسیار "معتبرتر" است. از نقطه نظر فنی، مهم نیست که جدول باشد یا فاصله (کد HTML همچنان فشرده خواهد شد).
استفاده از فضاهای متعدد شبیه سازی یک جدول ساز است. بنابراین این سوال در حوزه قابلیت استفاده نهفته است. اما، اگر تصمیم به استفاده از فاصله دارید، باید 4 کاراکتر برای هر تورفتگی وجود داشته باشد، در غیر این صورت متن خوانایی را از دست می دهد. راهنماهایی وجود دارد که در آنها توصیه می شود 2 فاصله قرار دهید، اما برای من چنین کدی از نظر بصری "درهم و برهم" است.
حروف بزرگ و کوچک
اگر در مورد HTML صحبت می کنیم، همه برچسب ها باید با حروف کوچک باشند. از نظر فنی، باز هم مهم نیست، اما حروف بزرگ به سختی خوانده می شوند. بنابراین، تمام برچسب ها و ویژگی های آنها به شدت با حروف کوچک نوشته می شوند.
اگر ما در مورد زبان های برنامه نویسی صحبت می کنیم، به عنوان یک قاعده، آنها به حروف بزرگ و کوچک حساس هستند، بنابراین حروف بزرگ فقط در صورت لزوم استفاده می شود.
نقل قول های تک و دوتایی
نقل قول های دوگانه تقریباً همیشه استفاده می شود. هنگام جاسازی کد JS در یک صفحه HTML، ممکن است شرایطی پیش بیاید که در آن دو نوع نقل قول لازم باشد:
در این مثال، ویژگی html قاب شده است نقل قول های دوگانه، و در داخل کد js از موارد تک استفاده شده است. استفاده از تنها یک نوع غیرممکن است.
بنابراین، قانون در مورد علامت نقل قول در HTML و CSS ساده: نقل‌قول‌های اصلی دوتایی هستند و اگر مفقود شوند، از تک‌ها استفاده می‌کنیم.
تگ های بسته شدن اختیاری
اینجا ساده است - ما همیشه آن را تنظیم می کنیم. این در مورد تگ های P، LI و دیگران صدق می کند.
در انتهای تک تگ ها اسلش کنید
ما هرگز انجام نمی دهیم. این یادگاری از استاندارد قدیمی XHTML است. خیلی اشتباه:
آره واقعا:
ترتیب صفات در تگ ها
کلاس همیشه اول لیست می شود. در واقع، هنگام تجزیه و تحلیل چیدمان، همیشه به برچسب و کلاس های آن و سپس بقیه ویژگی ها نگاه می شود.
ویژگی هایی که می توانند تک باشند (مانند مورد نیاز) بهتر است در آخر مشخص شوند:
کلاس ها/ویژگی های خالی باید حذف شوند.
قالب بندی کد CSS
کلاس در خط جداگانهو بلوک ویژگی (()) را باز می کند.
برچسب T (رنگ: سفید؛ پس‌زمینه: آبی؛ اندازه قلم: 0.75 rem؛ بالشتک: 1 پیکسل 10 پیکسل؛ شعاع حاشیه: 3 پیکسل؛ )
اگر چندین کلاس به طور همزمان مشخص شود، آنها در خطوط جداگانه قرار می گیرند:
مقاله، کنار، پاورقی، سرصفحه، ناوبری، بخش (نمایش: بلوک؛ )
اگر کلاس کوتاه باشد و از یک ویژگی تشکیل شده باشد، می توان آن را در یک خط قرار داد:
W100-max ( حداکثر عرض: 100٪؛ ) .w-hide (نمایش: هیچکدام؛ ) .w-auto (عرض: خودکار؛ )
واحدهای اندازه گیری برای صفر نوشته نمی شوند (در جایی که این مهم نیست)، به جای 0px باید به سادگی 0 را نشان دهید.
برای اعداد کسری با صفر بهتر است به جای 0.8em 0.8em را مشخص کنید. اما این شرط اجباری نیست و می توانید از هر گزینه ای استفاده کنید، نکته اصلی این است که حداقل در سطح یک فایل css یکنواختی وجود داشته باشد.
اگر این ویژگی از علامت کوتاه پشتیبانی می کند، می توان از آن برای مثال به جای حاشیه استفاده کرد: 0 20px 0 20px; شما می توانید حاشیه را مشخص کنید: 0 20px;
اگر مقدار رنگ را می توان کوتاه کرد، می توان این کار را انجام داد، به عنوان مثال، به جای #FFAA88، #FA8 را مشخص کنید. اینجا نکته مهممشکل این است که اغلب این رنگ به صورت دستی تنظیم نمی شود، بلکه از برنامه های قطره چکان کپی می شود. آنها معمولاً از نماد 6 رقمی کامل استفاده می کنند. همچنین برخی از برنامه ها حروف کوچک و برخی دیگر حروف بزرگ می دهند: #FFAA88 یا #ffaa88. بنابراین هر گزینه ای برای تنظیم رنگ مناسب است. تغییر دستی حروف هر بار احمقانه است.
نام رنگ حروف باید با احتیاط استفاده شود و بهتر است فقط در مرحله نمونه سازی استفاده شود. در کد به دست آمده، بهتر است آنها را با مقادیر هگزادسیمال جایگزین کنید، به عنوان مثال، به جای رنگ: قرمز; باید رنگ را مشخص کنید: #F00; . این رویکرد به شما امکان می دهد که رنگ را مستقیماً در یک ویرایشگر کد مانند Notepad++ تغییر دهید (به نماد # واکنش نشان می دهد).
ترتیب ویژگی های CSS می تواند هر کدام باشد. می توانید آنها را به ترتیب اضافه سفارش دهید، می توانید آنها را بر اساس عملکرد گروه بندی کنید. از نظر فنی، سفارش می تواند هر کدام باشد، بنابراین هیچ قانونی در اینجا وجود ندارد.
باید درک کرد که قالب بندی کد CSS صرفاً یک قرارداد است. در واقع، چنین کدهایی توسط کامپایلر Sass فشرده و کوچک می شوند. اگر برای مشاهده نیاز دارید آن را قالب بندی کنید، هیچ کس در ذهنش این کار را به صورت دستی انجام نمی دهد: ده ها سرویس آنلاین برای قالب بندی زیبا کد با هر تنظیماتی وجود دارد. بنابراین، قالب بندی CSS فقط در مرحله توسعه مورد نیاز است.
