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

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

اگر از css استفاده می کنید، حروف بزرگ در ابتدای هر پاراگراف می تواند خاص به نظر برسد. به عنوان مثال، کد زیر که بدون پرانتز در html وارد می شود، به متن فرمت شده با برچسب "p" اجازه می دهد تا حرف بزرگ - حرف اول - بزرگتر - 220٪ از اندازه استاندارد، رنگ زرد - مقدار رنگ زرد است، و آن را با فونت متفاوت از بقیه متن بنویسید - گرجستان در مقابل باتانگچه.

(<) style(>)

p: حرف اول (فونت-خانواده: گرجستان؛ اندازه قلم: 220٪؛ رنگ: زرد؛)

(<)/style(>)

اگر فونت خود را در قالب تصاویر ایجاد کنید، می توانید حروف بزرگ زیبا دریافت کنید - برای هر حرف یک تصویر جداگانه، به عنوان مثال، به سبک قدیمی روسی یا گوتیک وجود دارد. می توان آنها را ترسیم کرد سپس در مکان های مورد نیاز به جای حرف بزرگ می توانید کد را بدون پرانتز درج کنید (<) img src=”ссылка на место, где лежит картинка”(>). ویژگی های اضافی ارتفاع و عرض خواهد بود - عرض و ارتفاع تصویر، که می تواند در پیکسل تنظیم شود تا با بقیه متن هماهنگ شود. مثال: (<) img src=”ссылка на место, где лежит картинка” heigh=12 px width=6px(>). پرانتز در اطراف< и >برداشتن.

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

(<) style(>)

p (فونت-خانواده: batangche؛ اندازه قلم: 93٪؛)

p: حرف اول (فونت-خانواده: Kelly+Slab؛ اندازه قلم: 220%؛ رنگ: آبی؛)

(<)/style(>)

(<)link href="http://fonts.googleapis.com/css?family=Kelly+Slab&subset=latin,cyrillic" rel="stylesheet" type="text/css" (>).

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

می توان با حروف بزرگ یا حروف کوچک آن استایل کرد ویژگی های cssتبدیل متن اگر مقدار تبدیل متن: هیچکدام را در شیوه نامه تنظیم کنید، متن به شکلی که شما می نویسید به نظر می رسد. برای تبدیل همه حروف به حروف کوچک، باید مقدار تبدیل متن را تنظیم کنید: حروف کوچک از طریق دو نقطه، و حروف بزرگ برای حروف بزرگ. تنظیم یکسان برای ملک مقادیر متنی transform: بزرگ کردن باعث می شود هر کلمه با یک حرف بزرگ شروع شود.

یا بیشتر در مورد حروف و قالب بندی HTML CSS

فصل شامل مثال هایی است قالب بندی حروفاز ناحیه نشانه گذاری فرامتن.

در منوی سمت چپ، آموزش های مدرن و بسیار دقیق HTML را خواهید دید.

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

شاید جالب باشه

دوران جامعه اطلاعاتی

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

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

نمونه قالب بندی حروف:

فرمت نتیجه:

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

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

برچسب ها - تعریف کردن حروف بزرگ(این تگ ها در HTML 5 پشتیبانی نمی شوند).

css code style="text-transform:uppercase" - تعریف می کند حروف بزرگ.

به عبارت دیگر، حروف بزرگ با CSS تعریف می شوندویژگی های.

حروف HTML و فاصله CSS بین آنها

نمونه قالب بندی حروف:

فرمت نتیجه:

خودسرانه متن HTMLو فاصله CSSبین حروف در 2 پیکسل

شرح صفات و مقادیر:

css code style="letter-spacing:2px" - تعریف می کند فاصله حروف CSS.

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

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

نامه ها در آن زمان و اکنون

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

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

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

با استفاده از کلاس ها

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

کد CSS برای عنصر پاراگراف و کلاسی که حرف را ایجاد می کند به شکل زیر است:

p (اندازه قلم: 20 پیکسل؛ خانواده فونت: جورجیا، "Times New Roman"، Times، سریف؛) .myinitialcaps (اندازه قلم: 48 پیکسل؛ خانواده فونت: Didot؛)

و کد HTML به شکل زیر خواهد بود:

آنچه به ما می دهد:

خیلی آسان به نظر می رسد؟ در واقع، شما باید بسته به حروف برجسته خاص، تنظیمات را انجام دهید، زیرا هر حرف بزرگ نیاز به هسته گذاری خاصی دارد. پس از انتخاب فونت برای حروف برجسته و متن بدنه، باید برای هر حرف برجسته کلاس های جداگانه ایجاد کنید. در زیر CSS class.myinitialcapsiحاشیه سمت راست برای کاهش فاصله بین I و n منفی است.

Myinitialcapsi (اندازه قلم: 48 پیکسل؛ فونت-خانواده: Didot؛ حاشیه-راست:-1 پیکسل؛)

مندر این مورد، فضای اضافی بین "I" و "n" وجود دارد.

منگنجاندن یک کلاس جدید با حاشیه منفی آن را نزدیک تر می کند.

بسته به وضوح صفحه در مثال بالا، I و n ممکن است به نظر برسند که با هم ادغام شده اند. این به دلیل سریف های انتهای حروف است. بنابراین، قبل از انتخاب استایل های نهایی CSS، سایت را روی آن تست کنید دستگاه های مختلفتا ببینید متن CSS چگونه روی آنها به نظر می رسد.

نقل قول ها و موارد خاص دیگر

می توانید نه تنها حروف ابتدای متن را افزایش دهید. شما می توانید کلاس دیگری را برای ایجاد یک نسخه بزرگتر از علامت نقل قول که در کنار حرف ظاهر می شود پیاده سازی کنید. در مورد ما، نه کلاس حرف با اندازه 48 و نه کلاس متن 20 پیکسل برای نقل قول مناسب نیست. بلکه چیزی بین 30 پیکسل خواهد بود. گیومه ها را 4 پیکسل پایین می آوریم تا به صورت نوری آنها را با I تراز کنیم:

Myinitialcapsq (اندازه قلم: 30 پیکسل؛ فونت-خانواده: Didot؛ شناور: چپ؛ حاشیه بالا: 4 پیکسل؛)

“منشامل» یک کلاس جدید با حاشیه منفی آن را نزدیک تر می کند.

هنگام تعیین هر یک از حروف بزرگ CSS به همراه علامت نقل قول باید بسیار مراقب باشید تا هسته و تراز آنها با نشانه گذاری اطراف مطابقت داشته باشد. به عنوان مثال، حرف T باید به سمت چپ منتقل شود، کمی فراتر از لبه پاراگراف، به طوری که خط عرضی آن به صورت بصری در طرح قرار گیرد. شما باید همین کار را با حروف گرد مانند C، G، O و Q انجام دهید. این مثال از فونت های 20، 30 و 48 استفاده می کند. اما شما باید اندازه ها را بر اساس فونت های خاصی که انتخاب کرده اید تنظیم کنید. و همچنین اندازه و وضوح صفحه نمایش هایی که سایت در آنها مشاهده می شود.

شبه عناصر و شبه طبقات

با استفاده از شبه عنصر CSS، می توانید به راحتی با افزودن ::first-letter به عنصر پاراگراف، یک حرف برجسته ایجاد کنید. استفاده از: حرف اول ( با یک کولون) برای مرورگرهای قدیمی:

p (اندازه قلم: 1.2em؛ خانواده فونت: جورجیا، "Times New Roman"، Times، سریف؛ ارتفاع خط:2em؛ padding-bottom:1.2em;) p::اولین حرف (اندازه قلم: 3.6em؛ تبدیل متن: بزرگ؛ فونت-خانواده: "Monotype Bernard Condensed"، سریف؛ حاشیه-راست:0.03em;) .initialb (حاشیه-راست:-0.1em;) .initialn (حاشیه-راست:-0.15) اوم ;)

یک کد HTML که حاوی کلاس‌های CSS است که هسته‌بندی حروف N و B را در نظر می‌گیرد به این شکل خواهد بود…

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

nدر منبع HTML توضیح دهید که چگونه حرف اول، نه یک حرف بزرگ در HTML، به اندازه اولیه 3.6em می رسد. مرتب، ها؟

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

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

در بارهلطفا توجه داشته باشید که در کد منبعدر HTML، حرف اول بزرگ نیست، اما به یک کاراکتر 3.6em تبدیل می شود.

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

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

ترکیب شبه کلاس ها و شبه عناصر برای ایجاد یک چیدمان هوشمند

اضافه کردن :first-child شبه کلاس به حل مشکل تبدیل غیر ضروری حروف اول کمک می کند:

p (اندازه قلم: 1.2em؛ فونت-خانواده: جورجیا، "Times New Roman"، Times، سریف؛ ارتفاع خط:2em؛ padding-bottom:0.5em;) p:first-child::first-letter ( اندازه قلم: 3.6em؛ تبدیل متن: بزرگ؛ خانواده فونت: "Monotype Bernard Condensed"، سریف؛ حاشیه سمت راست: 0.03em؛)

ترکیب این کد با HTML:

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

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

مزیت استفاده از شبه کلاس ها توانایی رسیدگی به موارد خاص مختلف است. در مورد معایب چطور؟ شبه کلاس‌های مختلفی وجود دارد، و می‌توان آن‌ها را به روش‌های مختلفی با هم ترکیب کرد که می‌تواند سرتان را بچرخاند. به عنوان مثال، شبه کلاس های :first-child و :first-of-type می توانند نتایج یکسانی را ایجاد کنند. شما همچنین می توانید یک شبه کلاس را نه تنها برای یک پاراگراف، بلکه برای عناصر نیز اعمال کنید