فرمت خودکار css ابزارهای قالب بندی CSS

31.03.2019 اهن

تبدیل و حالت دادن به متن

1. تبدیل متن - تبدیل متن

با استفاده از از این ملکمی تواند متن را به بالا و حروف کوچک s یا حروف اول هر کلمه که بزرگ (بزرگ) بود را به حروف کوچک تبدیل کنید. به ارث برده.

نحو

H2 (تبدیل متن: هیچکدام؛) h2 (تبدیل متن: بزرگ کردن؛) h2 (تبدیل متن: بزرگ؛) h2 (تبدیل متن: حروف کوچک؛)
برنج. 1. تبدیل متن با استفاده از ویژگی text-transform

2. جهت نوشتن جهت متن

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

نحو

P (جهت: ltr;) p (جهت: rtl;)

3. جهت املای کلمات در متن یونیکد-بیدی

این ویژگی همراه با ویژگی جهت برای پشتیبانی از املای کلمات در متن دو طرفه استفاده می شود. ارثی نیست.

نحو

P (unicode-bidi: عادی؛) p (unicode-bidi: embed;) p (unicode-bidi: bidi-override;)

4. تزیین متن متن-تزیین

ویژگی متن را تزئین می کند. همچنین خط زیر لینک ها را حذف می کند. ارثی نیست.

نحو

A (متن-تزیین: هیچکدام؛) دهانه (تزیین متن: زیرخط؛) دهانه (متن-تزیین: روی خط؛) دهانه (متن-تزیین: خط از طریق؛) شکل. 2. تزئین متن با استفاده از ویژگی text-decoration

5. قالب بندی حرف اول و سطر اول یک پاراگراف

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

/ * پاراگراف اول * / p: حرف اول (اندازه قلم: 2em؛ حاشیه سمت راست: 2 پیکسل؛ رنگ: # EE9966؛ وزن قلم: پررنگ؛ متن-سایه: -1px -1px 1px سفید، 1px 1px 1px # 9E9D99;) p: خط اول (رنگ: # EE9966;) / * پاراگراف دوم * / p: حرف اول (اندازه قلم: 1.2em؛ بالشتک: 5px 10px؛ حاشیه سمت راست: 5px؛ پس‌زمینه: # EE9966. رنگ: # FAF4F4؛ شناور: سمت چپ؛ شعاع حاشیه: 50% 0؛ وزن قلم: پررنگ؛) / * پاراگراف سوم * / p: حرف اول (اندازه قلم: 1.2em؛ بالشتک: 5px 10px؛ حاشیه- سمت راست: 5 پیکسل؛ حاشیه پایین: 2 پیکسل؛ پس‌زمینه: # EE9966؛ رنگ: # FAF4F4؛ شناور: چپ؛ وزن فونت: پررنگ؛) / * پاراگراف چهارم * / ص: حرف اول (اندازه قلم: 1.2em. بالشتک: 3 پیکسل 10 پیکسل؛ حاشیه-راست: 5 پیکسل؛ پس‌زمینه: # EE9966؛ رنگ: # FAF4F4؛ شناور: چپ؛ وزن قلم: پررنگ؛ شعاع حاشیه: 50 درصد؛) / * پاراگراف پنجم * / ص: حرف اول (اندازه قلم: 1.5em؛ بالشتک: 2px 10px؛ حاشیه سمت راست: 5px؛ پس‌زمینه: # FAF4F4؛ حاشیه: 6px دوبل؛ رنگ: # EE9966؛ شناور: چپ؛ وزن قلم: پررنگ؛) / * بند ششم * / p: حرف اول (font-si ze: 1..png)؛ حاشیه: 2 پیکسل جامد # EE9966; رنگ: # 544E3E; شناور به سمت چپ؛ فونت-وزن: پررنگ; box-shadow: 1px 1px 1px # 9E9D99; )

6. قالب بندی نقل قول ها

ویژگی نوع علامت نقل قول مورد استفاده در سند برای نقل قول های تودرتو را مشخص می کند. به طور پیش فرض، متن محصور شده در برچسب با نقل قول قالب بندی می شود. ... همچنین می توانید با استفاده از ویژگی content با تنظیم مقادیر open-quote و close-quote نقل قول تولید کنید. یک مقدار خاص به عنوان مقدار استفاده می شود. کاراکتر HTMLیا یک کاراکتر یونیکد. به ارث برده.

نحو

P (به نقل از: "" "" "";) p (به نقل از: هیچ؛)

جدول 1. نقل قول در HTML

شرح	ظاهر	شماره یونیکد	کد HTML / Mnemonics
نقل قول دوگانه	"	\0022	"
آپستروف	"	\0027	"
باز کردن نقل قول	‘	\2018	‘
پایان نقل قول	’	\2019	’
پایان نقل قول دوگانه	“	\ 201C	“
نقل قول مضاعف درست	”	\ 201D	”
علامت نقل قول پایین دوبل	⹂	\ 2E42	⹂
باز کردن علامت نقل قول سمت چپ "Harringbone"	«	\ 00AB	«
بستن علامت نقل قول سمت راست "هرینگبون"	»	\ 00BB	»
نقل قول باز تک پایین	‚	\ 201A	‚
پشت تکی بالایی	‛	\ 201B	‛
نقل قول باز دوبل پایین	„	\ 201E	„
پشت دوبل بالا	‟	\ 201F	‟
علامت نقل قول زاویه فرانسوی تک باز (سمت چپ).	‹	\2039	‹
علامت نقل قول فرانسوی زاویه بسته (راست).	›	\ 203A	›

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

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

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

Div (عرض: 50 پیکسل)
این همان است که:

Div (عرض: 50 پیکسل)
پسندیدن:

}
قالب بندی چند خطی

Navigation_rss_icon (
موقعیت: مطلق;
سمت چپ: 940px;
پایین: 0px;
}
#navigation_rss (
موقعیت: مطلق;
سمت چپ: 720px;
تبدیل متن: حروف بزرگ;
رنگ: # 897567;
ارتفاع خط: 2.5em;
}
#ناوبری_rss li (
صفحه نمایش: درون خطی
}

رنگ: #fffffe;
text-decoration: هیچ;
padding: 0px 2px;
فاصله حروف: -0.05em;
}
#navigation_rss li a: شناور (
رنگ: # eed2a1;
text-decoration: هیچ;
}
من شرط می بندم که این رایج ترین گزینه است. خواندن آن بسیار آسان است زیرا در گزیده های کوتاه ارائه می شود، به همین دلیل است که آموزش ها اغلب به این شکل قالب بندی می شوند. در مثال ارائه شده در بالا، خیر خط خالیبین پرانتز بسته شدن و قسمت بعدی، و در واقع این مورد بیشترین استفاده را دارد.

قالب بندی چند خطی با پاراگراف بندی

Navigation_rss_icon (
موقعیت: مطلق;
سمت چپ: 940px;
پایین: 0px;
}
#navigation_rss (
موقعیت: مطلق;
سمت چپ: 720px;
font-family: Verdana، Arial، Helvetica، sans-serif;
تبدیل متن: حروف بزرگ;
رنگ: # 897567;
ارتفاع خط: 2.5em;
}
#ناوبری_rss li (
صفحه نمایش: درون خطی
}
#navigation_rss li a: link, #navigation_rss li a: بازدید شده (
رنگ: #fffffe;
text-decoration: هیچ;
padding: 0px 2px;
فاصله حروف: -0.05em;
}
#navigation_rss li a: شناور (
رنگ: # eed2a1;
text-decoration: هیچ;
}
بلوک هایلایت شده به این معنی است که این قسمت از قسمت های قبلی خاص تر و مهم تر است و همچنین عناصر فرزند را نمایش می دهد.

قالب بندی تک خطی

Div.wrapper (حاشیه: 0 خودکار؛ بالشتک: 200 پیکسل 0 0 0؛ عرض: 960 پیکسل؛ شاخص z: 2)
ul.nav (موقعیت: مطلق؛ بالا: 0؛ سمت چپ: 430 پیکسل؛ بالشتک: 120 پیکسل 0 0 0)
ul.nav li (نمایش: درون خطی؛ حاشیه: 0 10 پیکسل 0 0)
div.column (float: چپ؛ حاشیه: 0 70px 0 0؛ padding: 0 0 0 70px؛ عرض: 340px)
div.post_wrapper (پس‌زمینه: url (http://cdn.images.elliotjaystocks.com/presentation/hr_long.png) مرکز پایین بدون تکرار؛ حاشیه: 0 0 40px 0؛ padding: 0 0 40px 0)
div.wrapper img، div.wrapper a img، div.article_illustration_mini (پس‌زمینه: # d3d4cb؛ padding: 10px؛ حاشیه: 1px solid # 999)
div.wrapper a: hover img (پس‌زمینه: #fff)
این احتمالا مقرون به صرفه ترین گزینه است، زیرا تمام کدها در یک متن جامد، بدون هیچ فاصله یا خط جدیدی فشرده می شوند. درست است، اگر می خواهید کد را ویرایش کنید، این روش به پیمایش دائمی، هم عمودی و هم افقی نیاز دارد. علاوه بر این، این روش کاملاً زشت به نظر می رسد و در صورتی که در آینده نیاز به ویرایش کد داشته باشید، احتمالاً یافتن متن مورد نیاز برای شما بسیار دشوار خواهد بود.

قالب بندی تک خطی با زبانه ها

p، li، dd (فونت: 13px / 18px "Lucida Grande"، Arial، Helvetica، Sans-Serif؛ حاشیه: 0 0 15px 0؛ رنگ: # 5e5d5d؛)
td, th (فونت: 13px / 18px "Lucida Grande"، Arial، Helvetica، Sans-Serif؛ تراز متن: چپ؛)
قالب بندی تک خطی با پاراگراف بندی

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

قالب بندی ساده یک خطی

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

H1، h2، h3 (فونت: 24px Helvetica، Sans-Serif؛ حاشیه: 0 0 10px 0;)
h1 (اندازه قلم: 36 پیکسل؛)
h2 (اندازه قلم: 30 پیکسل؛)
h2 a، h2 a: بازدید شده (رنگ: # 2e2e2e؛)
h2 a: شناور (رنگ: # fe4902؛ حاشیه پایین: 1 پیکسل نقطه‌دار # 2e2e2e؛)
p, li, dd (فونت: 13px / 18px "Lucida Grande"، Arial، Helvetica، Sans-Serif؛
حاشیه: 0 0 15 پیکسل 0; رنگ: # 5e5d5d; )
td, th (فونت: 13px / 18px "Lucida Grande"، Arial، Helvetica، Sans-Serif;
text-align: left; )
تغییرات

قالب بندی تک خطی را می توان با باز کردن سادهپرانتز زیر در همان خط، که اغلب در کدهای PHP نیز دیده می شود:

بخش
{
بالشتک: 10 پیکسل؛
}
در قالب بندی زبانه های چند خطی، می توانید یک پرانتز باز را به عنوان جداکننده ببینید:

# content-area ol (حاشیه: 15 پیکسل 0 0 25 پیکسل؛ سبک فهرست: اعشاری؛)
# محتوا-منطقه اول (سبک لیست: آلفا پایین؛)
# ناحیه محتوا ul (حاشیه: 0 0 0 5 پیکسل؛ سبک فهرست: هیچکدام؛)
# content-area ul li (بالشتک: 0 0 0 20 پیکسل؛ پس زمینه: url (/images/bullet.png) 0 3px بدون تکرار؛)
# ناحیه محتوا ul (حاشیه: 15 پیکسل 0 0 25 پیکسل؛ سبک فهرست: دیسک؛)
# محتوا-منطقه اول لی (پس‌زمینه: هیچ، بالشتک: 0؛)
ترکیبی

ترکیب قالب بندی چند خطی و تک خطی تنها می تواند منجر به گروه بندی ویژگی های مشابه در یک خط شود:

Navigation_rss_icon (
موقعیت: مطلق;
بالا: 10px; سمت چپ: 10 پیکسل؛ پایین: 10 پیکسل؛ سمت راست: 10 پیکسل؛
اندازه فونت: 12px; فونت-وزن: پررنگ;
}
خوانایی در مقابل پیمایش

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

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

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

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

در طول طرح بندی سایت، باید دائماً تغییر کنید ظاهرصفحات وب. یکی از اولین کارها هنگام کار با متن در صفحه، تراز کردن آن است.

تراز متن

بیایید نگاهی به مثالی از کار با تراز متن بیندازیم:

نمونه ای از استفاده از ویژگی text-align

مقداری دیگر از این رول های نرم فرانسوی بخورید و کمی چای بنوشید.

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

رنگ پس زمینه را روی rgba (0، 255، 0، 0.1) قرار می دهیم.

نتیجه مثال ما:

تورفتگی خط اول

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

اگر نیاز دارید که سند خود را شبیه یک نسخه چاپی کنید، از این استفاده کنید ویژگی CSS m به عنوان تورفتگی متن.

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

توجه شما را به این نکته جلب می کنم که در برخی شرایط ممکن است نیاز به استفاده از تورفتگی منفی خط اول داشته باشید، ویژگی text-indent امکان استفاده از مقادیر منفی را می دهد، در این حالت خط در جهت مخالف جابه جا می شود.

بیایید به مثالی از استفاده از این ویژگی نگاهی بیندازیم:

نمونه ای از استفاده از ویژگی text-indent

مقداری دیگر از این رول های نرم فرانسوی بخورید و کمی چای بنوشید. مقداری دیگر از این رول های نرم فرانسوی بخورید و کمی چای بنوشید. مقداری دیگر از این رول های نرم فرانسوی بخورید و کمی چای بنوشید. مقداری دیگر از این رول های نرم فرانسوی بخورید و کمی چای بنوشید.

V این مثالما 4 ( چهار) استایل دهید و آنها را یکی یکی به کار ببرید چهارپاراگراف ها برای اولینپاراگراف روی مقدار تورفتگی پیش‌فرض تنظیم شده است ( 0 )، برای دومینیک تورفتگی تنظیم کنید 40ppi، برای سومیک تورفتگی منفی مشخص کرد ( -20 پیکسل، در نتیجه پاراگراف به خارج از پنجره مرورگر و برای چهارمپاراگراف برابر است 50% .

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

نتیجه مثال ما:

برنج. 61 مثال با استفاده از ویژگی text-indent (خط قرمز).

تنظیم فاصله خطوط

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

در CSS، ویژگی line-height مسئول فاصله بین خطوط است. هر چه مقدار این ویژگی بیشتر باشد، فاصله بین خطوط بیشتر است.

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

به عنوان یک قاعده، در همه مرورگرهای مدرن ارتفاع خط پیش فرض 120٪ است.

فاصله خطوط به صورت زیر محاسبه می شود:

ارتفاع خط ( ارتفاع خط) منهای ارتفاع فونت ( اندازه فونت)

به عنوان مثال، اندازه فونت است 20ppiو ارتفاع خط 150% (30ppi). بنابراین، معلوم می شود:

ارتفاع خط ( 150٪ یا 30 پیکسل) منهای ارتفاع فونت ( 20 پیکسل) = 10 پیکسل

تنظیم اندازه ارتفاع ردیف با استفاده از یک مقدار عددی مجاز است. بیانیه به شکل زیر است:

انتخابگر(ارتفاع خط: 1.5؛)

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

مقدار عددی * اندازه قلم

به عنوان مثال، فونت برای پاراگراف تنظیم شده است 2 امو ارتفاع خط به صورت داده شده است 1.5 :

پ(اندازه قلم: 2em؛ ارتفاع خط: 1.5؛)

مقدار محاسبه شده فاصله خطوط در مورد ما خواهد بود ساعت 3:

مقدار عددی ( 1.5 ) * اندازه فونت( 2 ام) = ساعت 3

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

مثال با استفاده از ویژگی line-height

پاراگرافی که در آن ارتفاع خط: 10px

پاراگراف که در آن خط-ارتفاع: عادی

پاراگراف که ارتفاع خط در آن است: 150٪

پاراگرافي كه در آن قد خط: 2

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

نتیجه مثال ما:

برنج. 62 مثال استفاده از ویژگی line-height (تنظیم فاصله بین خطوط).

فاصله بین کلمات و کاراکترها

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

برای تعیین فاصله مشخص بین کاراکترها، باید از ویژگی CSS letter-spacing استفاده کنید. هنگام کار با یک ملک از واحدهای نسبی استفاده کنید ابعاد CSS (ما, رم, pxو غیره). هر دو ارزش مثبت و منفی مجاز هستند. مقادیر مثبت به ترتیب فاصله بین کاراکترها را افزایش می دهند و مقادیر منفی آن را تا همپوشانی حروف و نمادها روی هم کاهش می دهند.

بیایید نگاهی به مثالی با استفاده از ویژگی فاصله بین حروف بیندازیم:

مثال با استفاده از خاصیت فاصله بین حروف

class = "test"> فاصله حروف: -1px

فاصله حروف: معمولی

فاصله حروف: 2 پیکسل

فاصله حروف: 1em

در این مثال، ما به روش هایی برای تعیین فاصله بین کاراکترهای متن در پیکسل (هم مثبت و هم مثبت) نگاه کردیم. معنی منفی) و واحدهای em.

نتیجه مثال ما:

شما می توانید فاصله بین کلمات جداگانه را با یک ویژگی CSS با نام مشابه - word-spacing تنظیم کنید. مشابه خصوصیت فاصله بین حروف، از واحدهای CSS نسبی ( ما, رم, pxو غیره). هر دو ارزش مثبت و منفی مجاز هستند. مقادیر مثبت به ترتیب فاصله بین کلمات را افزایش می دهند و مقادیر منفی تا لایه بندی کلمات روی یکدیگر کاهش می یابد.

بیایید به مثالی با استفاده از ویژگی فاصله بین کلمات نگاهی بیندازیم:

مثال با استفاده از ویژگی فاصله بین کلمات

در این مثال، ما به روش هایی برای تعیین فاصله بین کلمات در متن در پیکسل (مقدار منفی) و واحد em نگاه کردیم.

نتیجه مثال ما:

تزیین متن

ویژگی text-decoration CSS به ما این امکان را می دهد که انواع تزئینات را به متن اضافه کنیم:

زیر خط بکش
خط خطی
خط بالای متن

با این حال، یکی از رایج ترین موارد استفاده از این ویژگی لغو دکوراسیون است و باید از کلمه کلیدی none با ویژگی text-decoration استفاده کنید:

آ { / * تمام لینک ها را با انتخابگر نوع انتخاب کنید * / text-decoration: هیچ; / * حذف تزئینات متن * / }

در این مثال، تزئینات (زیر خط) را از تمام لینک ها حذف کرده ایم. لیست کامل کلید واژه هاویژگی text-decoration در این جدول آمده است:

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

استفاده از چندین مقدار در یک اعلان مجاز است:

text-decoration: زیر خط از طریق خط. / * یک خط در زیر متن و یک خط از طریق متن تعریف می کند * /

بیایید نمونه ای از استفاده از ویژگی text-decoration در متن را ببینیم:

نمونه ای از استفاده از ویژگی text-decoration

متن-تزیین: زیر خط.

متن-تزیین: روی خط.

متن تزئین: خط از طریق;

تزیین متن: زیر خط خطی کنید.

در این مثال، ما ایجاد کرده ایم چهارسبک های مختلف و به نوبه خود آنها را در هر پاراگراف اعمال کرد. V اولینپاراگراف اضافه شده تزئین متن - یک خط در زیر (مقدار زیر خط)، در دومینتزئین متن - خط در بالا (مقدار روی خط)، در سومتزئین متن - خط خطی (خط از طریق)، و در چهارمتزئین مضاعف متن - یک خط در بالا و پایین (مقادیر زیر خط خطی هستند).

نتیجه مثال ما:

برنج. 65 مثالی از استفاده از ویژگی text-decoration (تزیین متن در CSS).

حروف بزرگ و کوچک

CSS امکان تبدیل هر متنی را به بزرگ یا کوچک و همچنین تبدیل حروف اول هر کلمه به حروف بزرگ را فراهم می کند. ویژگی text-transform حروف متن را کنترل می کند، جدول زیر تمام مقادیر آن را نشان می دهد:

بیایید مثالی از استفاده از ویژگی text-transform در متن را ببینیم:

نمونه ای از استفاده از ویژگی text-transform

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

برنج. 66 مثالی از استفاده از ویژگی text-transform (تغییر حروف متن).

حروف کوچک در CSS

کلاهک های کوچک یا کلاهک های کوچک (eng. کلاه های کوچک) یک سبک فونت است که در آن کاراکترهای کوچک به صورت حروف بزرگ کوچک ظاهر می شوند. برای ایجاد چنین چهره ای، از ویژگی CSS font-variant با نحو زیر استفاده می شود:

انتخابگر(نوع فونت: حروف کوچک؛ / * فونت کوچک را تنظیم کنید * / }

بیایید به یک مثال استفاده نگاه کنیم:

نمونه ای از استفاده از ویژگی font-variant

پاراگراف با فونت معمولی نمایش داده می شود.

حروف کوچک روی حروف کوچک بزرگ تنظیم می شوند.

در این مثال، پاراگراف اول بدون تغییر باقی مانده است، و در پاراگراف دوم، ویژگی font-variant با مقدار small-caps اعمال می شود، که به لطف آن، متن با حروف کوچک نمایش داده می شود ( حروف کوچکبه عنوان سرپوش کاهش یافته تنظیم شود).

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

به برنامه اعتماد کنید یا همه کارها را با قلم انجام دهید؟

مطمئناً شما یک سؤال دارید: چگونه کد را خوانا کنیم؟ آیا یک برنامه می‌تواند همه تورفتگی‌ها و شکستگی‌های خط را به نحوی ترتیب دهد که چشم انسان فقط از نگاه کد لذت زیبایی‌شناختی بگیرد؟ البته می تواند! اشتباه نکنید که از آنجایی که کار برای شما انجام می شود، در واقع ربات، پس "کثیف" انجام می شود. خدماتی که در مقاله زیر ارائه خواهد شد بیش از یک بار باعث نجات من شده است. به عنوان مثال، در شرایطی که لازم بود همان را کپی کنید کد htmlاز یک سایت دیگر، و برچسب‌ها وقتی درج می‌شوند به سادگی به ترتیبی آشفته در امتداد خطوط مرتب شده‌اند: دسته‌ای از زبانه‌ها، خط‌های منطقی شکسته نمی‌شوند، مطلقاً هیچ تودرتویی قابل مشاهده نیست! احتمالاً بسیاری با این موضوع آشنا هستند. و من واقعاً از شما می خواهم که روش متفاوتی در وب سایت خود داشته باشید: مرتب و خوانا. پس از همه، اول از همه، ما این کار را برای خودمان انجام می دهیم، برای راحتی پشتیبانی بیشتر از این یا آن کد.

بیایید کد شما را قالب بندی کنیم

کمتر حرف بزن، بیشتر کار کن. همانطور که تمرین نشان داده است، قالب بندی کد به صورت آنلاین بسیار ساده است. شما فقط باید کد "کثیف" خود را کپی کنید و آن را در قسمت ویژه قرار دهید جعبه های متندر یکی از سایت های مشخص شده سپس یک دکمه را فشار دهید، کمی صبر کنید و voila! در نهایت کدهای زیبا، با قالب بندی و خوانایی آسان خواهید داشت.

در اینجا لیستی از تمام پاک کننده های کد من برای زبان های مختلف می شناسم.

فرمت خودکار css ابزارهای قالب بندی CSS

تبدیل و حالت دادن به متن

1. تبدیل متن - تبدیل متن

2. جهت نوشتن جهت متن

3. جهت املای کلمات در متن یونیکد-بیدی

4. تزیین متن متن-تزیین

5. قالب بندی حرف اول و سطر اول یک پاراگراف

6. قالب بندی نقل قول ها

تراز متن

تورفتگی خط اول

تنظیم فاصله خطوط

فاصله بین کلمات و کاراکترها

تزیین متن

حروف بزرگ و کوچک

حروف کوچک در CSS

به برنامه اعتماد کنید یا همه کارها را با قلم انجام دهید؟

بیایید کد شما را قالب بندی کنیم

مقالات مرتبط برتر