طراحی سربرگ. چگونه رنگ پس زمینه را به متن عنوان اضافه کنیم؟ متن هدر h1

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

سربرگ وب سایت - چگونه است

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

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

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

چگونه می توان هدر وب سایت را در CSS طراحی کرد؟

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

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

بنابراین برای ایجاد یک هدر ساده کافیست کد زیر را در html بنویسید:

< header > < / header >

البته، هنوز چیزی در صفحه ظاهر نمی شود - ما هنوز باید محتوا را به آن اضافه کنیم و آن را طراحی کنیم. اما بیایید مثلاً بلوکی بسازیم که تمام عرض صفحه را بپوشاند و همچنین کمی آن را تزئین کنیم.

هدر(عرض: 100%؛ پس‌زمینه: #D8E3AB؛ ارتفاع: 70 پیکسل؛ )

سرتیتر( عرض: 100%؛ پس زمینه: #D8E3AB; ارتفاع: 70px;

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

ویژگی عرض: 100% باعث می شود که بلوک ما بدون توجه به اندازه صفحه نمایش به عرض کامل کشیده شود. با این حال، اگر ابعاد باید به نحوی محدود شوند، از خاصیت max-width اضافی استفاده کنید، که در آن اندازه مطلق به پیکسل نوشته می‌شود و پس از رسیدن به آن ظرف دیگر گسترش نمی‌یابد.

اکنون فقط یک نوار در مقابل خود داریم که به رنگ انتخاب شده رنگ شده است. معمولاً ارتفاع مشخص نمی شود - به طور خودکار بر اساس عناصری که در هدر قرار می گیرند تعیین می شود.

< div id = "wrap" > < header > < / header > < / div >

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

برنج. 1. در حال حاضر، این فقط یک ظرف است که حاوی تمام محتویات است.

معمولاً چه چیزی در کلاه وجود دارد؟

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

لوگو معمولاً به عنوان تصویر پس زمینه درج می شود. برای مثال این را بگذاریم:

برای انجام این کار، فقط چند قانون را به پس زمینه اضافه کنید:

پس زمینه: #D8E3AB url(logo.png) بدون تکرار 5% 50%;

زمینه: #D8E3AB url(logo.png) بدون تکرار 5% 50%؛

یعنی علاوه بر رنگ ثابت، یک تصویر پس زمینه هم می دهیم (در مورد ما logo.png) و ابتدا آن را در همان پوشه فایل styles قرار می دهم. ما تکرار آرم را ممنوع می کنیم و موقعیت آن را در بلوک تعیین می کنیم - کمی آن را به سمت چپ و به صورت عمودی در مرکز تغییر می دهیم.

بیایید مقداری محتوا به هدر اضافه کنیم. به عنوان مثال، هدر و منو.

نام سایت

• مخاطب
• درباره ما
• خدمات

< div class = "title" >نام سایت< / div > < ul class = "menu" > < li > < a href = "#" >مخاطب< / a > < / li > < li > < a href = "#" >درباره ما< / a > < / li > < li > < a href = "#" >خدمات< / a > < / li > < / ul >

حالا بیایید همه اینها را رسمی کنیم.

عنوان (اندازه قلم: 36 پیکسل؛ بالشتک: 10 پیکسل؛ تراز نوشتاری: مرکز؛ ) .menu (سبک لیست: هیچکدام؛ موقعیت: مطلق؛ بالا: 10 پیکسل؛ سمت راست: 100 پیکسل؛ )

عنوان ( اندازه فونت: 36px; padding - top : 10px ; text - align : center ;

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

چرا از عناصر شبه استفاده می شود؟ پاسخ ساده است: هیچ نشانه گذاری اضافی مورد نیاز نیست.

HTML

درس را با تواضع بپذیرید

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

CSS

بدنه (عرض: 60٪؛ حاشیه: 50 پیکسل خودکار؛ بالشتک: 15 پیکسل؛ موقعیت: نسبی؛ /*نیاز برای هدر 4*/ z-index: 0؛ /*نیاز برای هدر 4*/ حاشیه: 7 پیکسل توپر #cecece؛ حاشیه : 7px solid rgba(0,0,0,.05); -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5): 0 0 2px rgba(0, 0, 0, .5); اندازه: 22 پیکسل

به اعلان پس زمینه-کلیپ: padding-box توجه کنید. این به یک اثر جالب کمک می کند: یک قاب شفاف برای ظرف ما. ویژگی CSS background-clip تعیین می کند که آیا پس زمینه یک عنصر (رنگ یا تصویر) با لایه های زیرین تعامل خواهد داشت یا خیر.

این افکت ساده و زیبا با استفاده از ویژگی border به دست می آید:

Headline1 ( حاشیه پایین: 1px خط چین #aaa؛ حاشیه سمت چپ: 7px جامد #aaa؛ حاشیه سمت چپ: 7px جامد rgba(0,0,0,.2)؛ حاشیه: 0 -15px 15px -22px؛ بالشتک: 5px 15 پیکسل)

سرفصل 2

این سبک را می توان با استفاده از روش مثلث به دست آورد:

Headline2 ( حاشیه-پایین: 1px توپر #aaa؛ حاشیه: 15px 0؛ بالشتک: 5px 0؛ موقعیت: نسبی؛ ) .headline2:قبل، .headline2:after( محتوا: ""؛ حاشیه-راست: 20px جامد #fff; حاشیه بالا: 15 پیکسل ثابت #aaa;

سرفصل 3

اما از این افکت روبان می توان برای طراحی عنوان نیز استفاده کرد:

Headline3( موقعیت: نسبی؛ حاشیه-چپ: -22px؛ /* 15px بالشتک + 7px سایه نوار حاشیه*/ margin-right: -22px; padding: 15px; background: #e5e5e5; پس زمینه: -moz-linear-gradient(# f5f5f5, #e5e5e5: -webkit-gradient(خطی، بالا سمت چپ، از(#f5f5f5)، به(#e5e5e5) پس زمینه: -webkit-linear-gradient(#f5f5f5, #e5e5e5); پس زمینه: -o-linear-gradient(#f5f5f5, #e5e5e5): -ms-linear-gradient(#f5f5f5, #e5e5e5): 0 rgba(255255.8) -moz-box-shadow: 0 -1px 0 rgba(255255255.8) inset: 0 -1px 0 rgba (255.255.8) : 0 1px 0 #fff; .headline3:prefore, .headline3:after( position: absolute; left: 0; bottom: -6px; content:""; border-top: 6px solid #555; border-left: 6px جامد transparent; headline3:before( border-top: 6px solid #555; border-right: 6px solid transparent; حاشیه-چپ: هیچکدام؛ سمت چپ: خودکار؛ سمت راست: 0؛ پایین: -6px. )

همچنین می توانید با استفاده از ویژگی box-shadow یک عنوان عالی ایجاد کنید:

عنوان4( موقعیت: نسبی؛ رنگ حاشیه: #eee؛ سبک حاشیه: جامد؛ عرض حاشیه: 5px 5px 5px 0؛ پس‌زمینه: #fff؛ حاشیه: 0 0 15px -15px؛ بالشتک: 5px 15px؛ -moz-box -shadow: 1px 1px rgba(0,0,0,.3) -webkit-box-shadow: 1px 1px rgba(0,0,0,.3): 1px 1px rgba ,0,0,.3)؛ .headline4:after ( محتوا: ""؛ موقعیت: مطلق؛ z-index: -1؛ پایین: 15px؛ سمت راست: 15px؛ عرض: 70%؛ ارتفاع: 10px؛ پس زمینه: rgba(0, 0, 0, 0.7); 0, 0.7); -ms-transform: rotate(2deg)؛ rotate(2deg)

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

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

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

بیا شروع کنیم!

ایجاد هدر سه بعدی

بنابراین، ما در هنگام چیدمان صفحه وب مستقیماً افکت ایجاد می کنیم.

1. ابتدا باید یک فایل html جدید و همچنین یک فایل شیوه نامه (css) ایجاد کنید.

برای اینکه به شما نشان دهم چگونه همه این کارها انجام می شود، یک فایل html ایجاد کردم و نام آن را "title.html" گذاشتم (در صورت لزوم می توانید تمام فایل های منبع این درس را دانلود کنید و آنها را در "source" مشاهده کنید). در اینجا کد منبع فایل html ما آمده است:

متن سه بعدی در اینجا

عنوان سایه در اینجا

درخشش متن در اینجا

متن آناگلیفیک

این یک سند HTML5 است، یک شیوه نامه (فایل css.css) به آن متصل است و در داخل تگ بدنه تنها چهار عنوان با کالیبرهای مختلف وجود دارد.

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

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

من یک فایل به نام css.css ایجاد کردم و آن را در همان پوشه فایل html قرار دادم.

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

بیایید ارتفاع، عرض، رنگ صفحه را مشخص کرده، آن را در مرکز قرار داده و یک کادر نقطه‌دار برای تگ بدنه تعیین کنیم.

بیایید بلافاصله تمام عناوین خود را در مرکز تراز کنیم.

این کدی است که باید در فایل شیوه نامه نوشته شود:

بدنه (ارتفاع: 700 پیکسل؛ عرض: 90 درصد؛ رنگ پس‌زمینه: # 069؛ حاشیه: 0 خودکار؛ حاشیه: 1 پیکسل با خط چین #000066؛ ) h1، h2، h3، h4 (تراز نوشتار: مرکز؛)

فایل html را در مرورگر خود راه اندازی کنید. صفحه به شکل زیر خواهد بود:

3. حالا بیایید تحول را شروع کنیم. عنوان h1 را به متن سه بعدی تبدیل می کنیم.

همه اینها همه در یک فایل شیوه نامه اتفاق می افتد.

کد زیر را زیر هر چیزی که تا کنون در فایل css.css نوشته اید قرار دهید:

H1(اندازه قلم:72px؛ رنگ:#fff؛ متن-سایه:#B6B6B6 1px -1px 0، #B6B6B6 2px -2px 0، #B6B6B6 3px -3px 0، #B6B6B6 4px #5px -1px 0، 0 ;

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

واقعیت این است که پس از کولون، این ویژگی پارامترهای زیر را فهرست می کند: رنگ، تغییر افقی، تغییر عمودی و تاری.

ما چه کار می کنیم؟

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

ثانیاً: ما به تدریج (هر بار 1 پیکسل) این سایه را به سمت راست و بالا حرکت می دهیم. این با 2 پارامتر زیر نشان داده می شود (1px -1px، 2px -2px و غیره).

ثالثا: ما تاری را در همه جا به صفر می گذاریم، زیرا برای ایجاد متن سه بعدی به آن نیازی نداریم.

در نتیجه، این تصویر را دریافت می کنیم:

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

همچنین مطمئن شوید که رنگ ها را آزمایش کنید و سعی کنید ظاهر طبیعی تری ایجاد کنید.

یک هدر با سایه ایجاد کنید

ایجاد هدر با سایه بسیار ساده است. و ما تنها با چند خط کد به این امر خواهیم رسید.

حالا روی عنوان h2 کار می کنیم.

ابتدا باید اندازه و رنگ اصلی آن را تنظیم کنید (من اندازه آن را دقیقاً مانند هدر h1 تنظیم کردم، اما شما البته هر هدر را همانطور که نیاز دارید طراحی کنید).

بعد از اینکه رنگ و اندازه را تنظیم کردیم، دوباره از ویژگی text-shadow استفاده می کنیم. اولین پارامتر این است که رنگ را مشخص کنید که باید تیره تر باشد (در نهایت، این یک سایه است). پارامترهای دوم و سوم، تغییرات افقی و عمودی هستند. متن من بزرگ است، بنابراین آنها را 5 پیکسل می کنم. و آخرین پارامتر شعاع تاری است. سایه به آن نیاز دارد، بنابراین ما به آن مقدار 4 پیکسل اختصاص می دهیم. در نتیجه کد به شکل زیر خواهد بود:

H2 (اندازه قلم: 72 پیکسل؛ رنگ: #F90؛ متن سایه: # 191919 5 پیکسل 5 پیکسل 4 پیکسل؛ )

و به این صورت خواهد بود:

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

یک هدر با درخشش ایجاد کنید

این هم ساده است. در اینجا ما با عنوان h3 کار خواهیم کرد.

اصل یکسان است: ابتدا اندازه فونت و رنگ اصلی آن را تنظیم می کنیم و سپس از text-shadow استفاده می کنیم.

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

در نتیجه کد به صورت زیر خواهد بود:

H3 (اندازه قلم: 72 پیکسل؛ رنگ: # 333؛ متن-سایه: # fff 0 0 20 پیکسل؛ )

و عنوان ما با درخشش به این صورت خواهد بود:

هدر با افکت استریو

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

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

اثر بسیار جالب است و در اصل ایجاد آن دشوار نیست.

بیا شروع کنیم. در اینجا ما با یک هدر h4 کار خواهیم کرد.

1. ابتدا بیایید اندازه هدر را تعیین کنیم. من آن را مانند بقیه سرصفحه های مثال ما می سازم.

اکنون باید عنصر هدر را در موقعیت قرار دهیم. بیایید ویژگی position را روی relative قرار دهیم. این بدان معنی است که موقعیت عنصر نسبت به مکان اصلی آن تنظیم می شود.

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

در اینجا کد همه موارد بالا آمده است:

H4 (اندازه قلم: 72 پیکسل؛ موقعیت: نسبی؛ رنگ: rgba (0,0,102,0.5)؛ )

2. الان قسمت خوبش شروع میشود. ما یک شبه عنصر برای عنصر h4 خود ایجاد می کنیم. برای انجام این کار، باید آن را در شیوه نامه به عنوان ثبت کنید h4: بعد از.

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

عنصر شبه باید بطور مطلق (موقعیت:مطلق) قرار گیرد.

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

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

در اینجا کد همه موارد بالا آمده است:

H4:after( محتوا:"متن آناگلیفیک"؛ موقعیت: مطلق؛ سمت چپ: 361 پیکسل؛ بالا: 2 پیکسل؛ رنگ: rgba (255،0،0،0.5)؛ )

و در اینجا تأثیر آنچه به دست می آوریم است:

این تمام چیزی است که می خواستم در این درس به شما یاد بدهم.

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

اگر این درس را دوست داشتید، نظر خود را بنویسید(اگر شما هم دوست نداشتید :)). قدردانی محسوب خواهد شد.

همچنین می توانید با استفاده از دکمه های شبکه اجتماعی درس را با دوستان خود به اشتراک بگذارید.

و البته، در به‌روزرسانی‌های وبلاگ مشترک شوید (اگر قبلاً مشترک نشده‌اید). من قول می دهم چیزهای مفید و جالب زیادی داشته باشید!

روحیه خوبی داشته باشید و دوباره شما را ببینم!

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

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

در زیر نمونه‌ها و روش‌های استایل‌سازی CSS سرفصل‌های h1، h2 آورده شده است.

روش های استایل سازیh1،هدرهای h2

مثال هاCSSH1،H2

روش های استایل سازیh1،هدرهای h2

ما راه هایی را برای استایل دادن به تگ های h1، h2 در هنگام ایجاد یک فید در نظر خواهیم گرفت. بیایید به دو گزینه برای اجرای هدر به شکل روبان نگاه کنیم: Western و نسخه من. من از قبل می گویم که روش من اولویت دارد، اما اگر گزینه های (روش) خود را برای استایل کردن سرفصل ها دارید، ممنون می شوم اگر آنها را در نظرات به اشتراک بگذارید.

روش غربی

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

H1.ribbon ( اندازه قلم: 16px !important؛ موقعیت: نسبی؛ پس‌زمینه: #ba89b6؛ رنگ: #fff؛ تراز متن: مرکز؛ بالشتک: 1em 2em؛ حاشیه: 0 0 3em؛ ) h1.ribbon:قبل، h1.ribbon:after ( محتوا: ""؛ موقعیت: مطلق؛ نمایش: بلوک؛ پایین: -1em؛ حاشیه: 1.5em جامد #986794؛ z-index: -1; ) h1.ribbon:pre ( سمت چپ: -2em حاشیه-راست-عرض: 1.5em-رنگ حاشیه-چپ: h1.ribbon:after (راست: -2em; حاشیه-راست-رنگ: شفاف؛ ) h1. ribbon .ribbon-content:before, h1.ribbon .ribbon-content:after ( محتوا: ""؛ موقعیت: مطلق؛ نمایش: بلوک؛ شکل حاشیه: جامد؛ حاشیه رنگ: #804f7c شفاف شفاف؛ پایین: - 1em . )

در کد HTML، نوار h1 به شکل زیر است:

استایل CSS از هدرهای h1، h2 برای سایت

روش من

همانطور که می بینید، کد CSS برای استایل دادن به تگ h1 دست و پا گیر است. بنابراین، من راه خود را برای ایجاد چنین نواری پیشنهاد می کنم. سازگاری بین مرورگرها بر روی IE، FireFox، Opera، Chrome آزمایش شد. در زیر کد css و تمام فایل های منبع آورده شده است.

H1 (ارتفاع: 67 پیکسل؛ پس‌زمینه: url (ribbon_left.png) بدون تکرار بالا سمت چپ؛ رنگ:#FFF؛) h1 قوی (ارتفاع: 67 پیکسل؛ نمایشگر: بلوک؛ حداکثر عرض: 450 پیکسل؛ حاشیه چپ: 56 پیکسل؛ لایه‌بندی -right:56px: url(ribbon_right.png) سمت راست بدون تکرار؛)

نحوه استفاده از آن در HTML:

هدر CSS H1 برای سایت

تصاویر:

وزن کل تصاویر 750 بایت است. کد CSS بیش از دو خط طول نمی کشد و 236 بایت وزن دارد. من از نتیجه راضی هستم و همه چیز ساده و واضح است، برخلاف روش غربی، که وزن کد CSS 980 بایت است. اگرچه نسخه من و نسخه غربی از نظر وزن یکسان هستند، اما درک کد بسیار بدتر از پردازش تصویر در فتوشاپ است. می توان فرض کرد که سرعت بارگذاری یک فایل css از سه فایل بیشتر است (کاملاً مشابه وزن یک فایل css) اما می توانید پس زمینه را به صورت sprites پیاده سازی کنید که باعث افزایش سرعت بارگذاری سایت می شود. . با افزایش سرعت با استفاده از CSS sprites آشنا شوید.

نمونه هایی از CSS H1، H2

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

استایل CSS هدر H1

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

عنوان (عرض: 500 پیکسل؛ پس‌زمینه: #888;) h1 (ارتفاع: 70 پیکسل؛ پس‌زمینه: url (left.png) بدون تکرار بالا سمت چپ؛ رنگ:#FFF؛ ارتفاع خط: 50 پیکسل؛) h1 قوی (ارتفاع: 70 پیکسل) صفحه نمایش:block-left:60px 0px پس زمینه: url(right.png)بدون تکرار

تصاویر منبع:

همانطور که مشاهده می کنید تصاویر اصلی دارای شفافیت هستند و در کلاس heading با تغییر مقدار پس زمینه می توانید به نتایج زیر دست یابید:

CSS h1 + h2 (سبک کاری مشترک)

استایل h1 و h2 با هم در صورتی مناسب است که یک پایان نامه یا یک مقدمه کوچک برای یک مقاله در سایت خود دارید که می تواند در تگ h2 قرار گیرد. مثلا:

H1- یک ظاهر طراحی شده به عنوان h1، h2؛

H2– آموزش طراحی سرفصل های h1, h2 با استفاده از css.

این مثال من است، به احتمال زیاد شما ایده خود را در مورد نحوه طراحی صفحات وب سایت دارید. مثال css h1 + h2 مشابه نمونه قبلی است، بیایید به کد css نگاه کنیم.

چپ (ارتفاع: 100 پیکسل؛ پس‌زمینه: url (left.png) بدون تکرار بالا سمت چپ؛) .راست (عرض: 500 پیکسل؛ ارتفاع: 100 پیکسل؛ نمایش: بلوک؛ حاشیه چپ: 45 پیکسل؛ لایه‌بندی: 0 پیکسل 45 پیکسل 0 پیکسل 0 پیکسل؛ پس‌زمینه : url(right.png) بالا سمت راست بدون تکرار؛) h1 (رنگ:#FFF؛ اندازه قلم: 18 پیکسل؛ بالشتک: 15 پیکسل؛) h2 (رنگ:#CCC؛ اندازه قلم: 16 پیکسل؛ پد: 5 پیکسل؛)

تصاویر منبع:

نمایش دادن:

ماهیت استایل بندی مشترک (h1 + h2) سرفصل ها مشابه مثال قبلی است، فقط در این مورد از بلوک های div استفاده می شود.

یک ظاهر طراحی CSS هدر H2

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

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

نمونه طراحی هدر H2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut pretium mauris nec arcu. عدد صحیح در leo vel ipsum elementum sodales. Nam est quam، posuere non، feugiat nec، consectetuer ac، lectus. Suspendisse egestas fringilla odio. Donec lacinia tristique ante. Cum sociis natoque penatibus et magnis dis parurient montes, nascetur ridiculus mus.

زیربخش دیگری از مقاله شما

Nulla venenatis، turpis eu vestibulum tincidunt، felis diam luctus velit، facilis cursus mi ligula vitae nunc. کورابیتور لیبرو. Fusce felis. Nam gravida nulla non eros. Donec non nisl. Nulla ut Odio. Curabitur sollicitudin nonummy est. Nullam molestie lectus quis nibh.

نمایش دادن:

ساده، راحت و متقابل مرورگر.

امیدوارم مقاله من به شما کمک کرده باشد. اگر سوال یا پیشنهادی در رابطه با استایل CSS هدرهای h1 و h2 دارید، در نظرات بنویسید.

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

چند نکته قبل از شروع:

• تمام فونت‌های نمونه رایگان و در Google WebFonts در دسترس هستند.
• در مثال‌ها فقط سرصفحه‌های H1-H4 وجود دارد، زیرا آنها بیشترین استفاده را دارند.
• نویسنده سبک‌های CSS از مدلی استفاده کرد که در آن [عرض] = [عرض واقعی عنصر] + [بالشتک] + [حاشیه]. برای انجام این کار، یک قطعه در کد وجود دارد:

*، *: بعد، *: قبل (اندازه جعبه: جعبه حاشیه ؛)

*، *: بعد، *: قبل (اندازه جعبه: جعبه حاشیه؛ )

در نهایت، مقدمه مفهوم "ریتم عمودی" را ذکر می کند. در واقع همه بالشتک‌ها را بین بلوک‌های صفحه تنظیم می‌کند - خواه سرفصل‌ها، پاراگراف‌های متنی، تصاویر یا حتی فقط عناصر قالب وب‌سایت. این به ویژه در هنگام استفاده از موارد غیر معمول صادق است. بنابراین، تمام نمونه‌های سبک‌های CSS از همان «ریتم» استفاده می‌کنند:

h1 (اندازه قلم: 36 پیکسل؛ ارتفاع خط: 40 پیکسل؛) h2 (اندازه قلم: 30 پیکسل؛ ارتفاع خط: 40 پیکسل؛) h3 (اندازه قلم: 24 پیکسل؛ ارتفاع خط: 40 پیکسل؛) h4 (اندازه قلم : 18 پیکسل ؛ ارتفاع خط : 20 پیکسل )

h1 ( اندازه قلم: 36 پیکسل؛ ارتفاع خط: 40 پیکسل؛ ) h2 ( اندازه قلم: 30 پیکسل؛ ارتفاع خط: 40 پیکسل؛ ) h3 ( اندازه قلم: 24 پیکسل؛ ارتفاع خط: 40 پیکسل؛ ) h4 ( فونت : 18px; ارتفاع خط: 20px;

اکنون می توانید مستقیماً به تمرین بروید.

مثال 1

بیایید با یک گزینه کم و بیش ساده شروع کنیم. تایپوگرافی برای یک وب سایت رسانه ای، شاید حتی یک روزنامه عالی است. این راه حل هیچ ویژگی خاصی ارائه نمی دهد، به جز اینکه از 2 فونت استفاده می کند - Ultra (sans-serif)، Orienta (sans-serif). کد نهایی CSS:

.demo-1 .main h1 ( حاشیه : 1em 0 0.5em 0 ؛ رنگ : #343434 ؛ وزن قلم : معمولی ؛ فونت خانواده : "Ultra" , sans-serif ؛ اندازه قلم : 36px : 4-px text-transform : text-shadow : 0 2px ; اندازه: 30px; font-family: "Orienta"; -ارتفاع: 40px; font-family: "Orienta"; ارتفاع خط : 20px font-family ;

دمو-1 .main h1 ( حاشیه: 1em 0 0.5em 0؛ رنگ: #343434؛ وزن قلم: معمولی؛ خانواده قلم: "Ultra"، sans-serif؛ اندازه قلم: 36px؛ ارتفاع خط: 42px. text-transform: text-shadow: 0 2px #777 .demo-1 .main h2 (حاشیه: 1em 0.5em 0؛ رنگ: #343434; فونت-وزن: معمولی؛ فونت-اندازه; : 30px; font-family: "Orienta"; ارتفاع: 40px font-family: "Orienta"; 1px -خانواده: "Orienta"، sans-serif)

مثال 2

در اینجا یک پیاده سازی کمی جالب تر وجود دارد - یک پس زمینه برای عنوان به شکل یک پر کننده جامد و یک تصویر اضافه شده است. کد CSS کاملاً درست نوشته شده است، تورفتگی ها به درصد نشان داده می شوند تا وقتی تصویر کاهش می یابد، متن عنوان با تصویر پس زمینه ادغام نمی شود. فونت های مورد استفاده: Titillium Web (sans-serif)، Muli (sans-serif).

.demo-2 .main h1 (حاشیه: 1em 0 0.5em 0؛ وزن قلم: 600؛ خانواده قلم: "Titillium Web" , sans-serif ; موقعیت : نسبی , اندازه قلم : 36px : 40px ارتفاع بالشتک : 15px 15px 15% ; 285 پیکسل 0 35px white ; 0 10px 0 10px : #fff url (../images/bartoszkosowski.jpg ) no-repeat center left .demo-2 .main h2 ( margin : 1em 0 ; font-weight : text-shadow : 0 -1px rgba ( 0 , 0 , 0.6 ) ; border-radius: 0 10px 0 10px , 0.5 ) font-family ; ) .demo-2 .main h3 ( حاشیه : 1em 0 0.5em 0 ؛ وزن قلم : 600 ؛ font-family : "Titillium Web" , sans-serif ; موقعیت : نسبی , text-shadow : 0 -1px 1px 0, 0, 0, 0.4); 0 font-weight : 600 font-family , sans-serif ; بدون دندانه )

Demo-2 .main h1 ( حاشیه: 1em 0 0.5em 0؛ وزن قلم: 600؛ خانواده قلم: "Titillium Web"، sans-serif؛ موقعیت: نسبی؛ اندازه قلم: 36 پیکسل؛ ارتفاع خط: 40 پیکسل. بالشتک: 15px 15px 15% رنگ: #355681 box-shadow: inset 0 0 1px rgba(53,86,129, 0.4), inset 0 0 5px rgba(53,86,15,0) سفید; ؛ 0 10px 0 10px پس زمینه: #fff url(../images/bartoszkosowski.jpg) بدون تکرار در مرکز سمت چپ) موقعیت: 0 -1px rgba(0,0,0,6) پس زمینه: #35681; -radius: 0 10px 0 0 5px rgba(53,86,129, 0.5); 600 font-family: "Titillium Web"; ارتفاع خط: 40 پیکسل؛ رنگ: #355681; text-transform: بزرگ; حاشیه-پایین: 1px جامد rgba(53,86,129, 0.3); ) .demo-2 .main h4 ( حاشیه: 1em 0 0.5em 0؛ وزن قلم: 600؛ خانواده قلم: "Titillium Web"، sans-serif؛ موقعیت: نسبی؛ اندازه قلم: 18 پیکسل؛ ارتفاع خط: 20px رنگ: #788699 font-family: "Muli", sans-serif)

مثال 3

حال نمونه ای از پیاده سازی هدر برای سایتی با طراحی تیره. برای این منظور، رنگ آبی نسبتا روشن و متضاد در مقابل پس زمینه خاکستری تیره انتخاب شد. فونت های مورد استفاده عبارتند از: Hammersmith One (sans-serif)، Questrial (sans-serif).

.demo-3 .main h2: after, .demo-3.main h3: after, .demo-3 .main h4: after ( موقعیت : مطلق ; محتوا : "" ؛ سمت چپ : 0 ؛ بالا : 0 ؛ پایین : 0 عرض: 5px : 2px 1px rgba ( 0 , 0 , 0 , 0.5 ) , 0 1px rgba ( 255 , 255 , 0.3 ) demo-3 .main h3: after ( پس زمینه : #3BF ; ) .demo-3 .main h4: after ( پس زمینه : #6Cf ; ) .demo-3 .main h1 (اندازه قلم: 36px؛ ارتفاع خط: 40px حاشیه : 0 .6em ; font-family : 0 , 0 موقعیت : رنگ : #6Cf .نمونه 3 " , sans-serif ; text-shadow : 0 -1px 0 rgba ( 0 , 0 , 0 , 0.4 ) ; موقعیت: نسبی; اندازه فونت: 30px; ارتفاع خط: 40 پیکسل؛ ) .demo-3 .main h3 ( حاشیه : 1em 0 .6em 0 ؛ بالشتک : 0 0 0 20px ؛ فونت-وزن : معمولی ؛ رنگ : سفید ؛ font-family : "Hammersmith One" , sans-serif ; : 0 -1px 0 rgba ( 0 , 0 , 0.4 ) ; 0 0 0 20px ; اندازه قلم : 18px ;

دمو-3 .main h2:after, .demo-3 .main h3:after, .demo-3 .main h4:after ( موقعیت: مطلق؛ محتوا: ""؛ چپ: 0؛ بالا: 0؛ پایین: 0؛ عرض: 5px، کادر-سایه: 0 1px rgba(0,0,0,5), 0 1px rgba(255,255,0.3) . اصلی h3:after ( پس‌زمینه: #3BF; ) .demo-3 .main h4:after ( پس‌زمینه: #6Cf; ) .demo-3 .main h1 (اندازه قلم: 36px؛ ارتفاع خط: 40px؛ حاشیه: 1em 0.6em 0 رنگ: font-family: "Hammersmith One", sans-serif 0 rgba(0 ,0,0,4) . 3 .h2 اصلی (حاشیه: 1em 0.6em 0؛ بالشتک: 0 0 0 20px؛ وزن قلم: معمولی؛ رنگ: سفید؛ فونت خانواده: "Hammersmith One"، sans-serif: 0 -1px 0 rgba(0 ,0,0,0.4)؛ اندازه قلم: 30px .demo-3 .main h3 (حاشیه: 1em 0.6em 0; padding: 0 0 0 20px; font-weight: normal; color: font-family; : "Hammersmith One", sans-serif; text-shadow: 0 -1px 0 rgba(0,0,0,0.4); موقعیت: نسبی; اندازه فونت: 24px; ارتفاع خط: 40 پیکسل؛ font-family: "Questrial", sans-serif; ) .demo-3 .main h4 ( حاشیه: 1em 0 .6em 0؛ بالشتک: 0 0 0 20px؛ وزن قلم: معمولی؛ رنگ: سفید؛ فونت خانواده: "Hammersmith One"، sans-serif; text-shadow : 0 -1px rgba(0,0,0,04).

مثال 4

بیایید با پس زمینه آزمایش کنیم - چگونه در مورد اضافه کردن یک بافت چوبی. فونت‌های Scada (sans-serif)، Carrois Gothic (sans-serif)، و جزوه برای H2 نیز از طریق یک فونت و نه یک تصویر پیاده‌سازی می‌شوند.

.demo-4 .main h1 i, .demo-4 .main h2 i, .demo-4 .main h3 i, .demo-4 .main h4 i ( padding-right : 10px ; color : #A8D13B ;اندازه قلم : 0.8em ) .demo-4 .main h2: after , .demo-4 .main h3: after , .demo-4 .main h4: after ( position : absolute ; content : "" ; height : 1px ; border- شعاع: 2px ; 0 ; % ;) دمو-4 .اصلی h3 : بعد از { عرض: 75% ; } دمو-4 .اصلی h4 : بعد از { عرض: 50% ; } دمو-4 .اصلی h1 { لبه: 1 ساعت 0 0.75 دقیقه; لایه گذاری: 0 0 5 پیکسل 0 ; رنگ: #6B5344; وزن فونت: طبیعی; موقعیت: نسبت فامیلی; سایه متن: 0 2 پیکسل 0 rgba(255 , 255 , 255 , 0.5 ) ; اندازه فونت: 36 پیکسل; ارتفاع خط: 40 پیکسل; فونت-خانواده: "کاروآ گوتیک", بدون دندانه; } دمو-4 .اصلی h2 { لبه: 1 ساعت 0 0.75 دقیقه; لایه گذاری: 0 0 5 پیکسل 0 ; رنگ: #6B5344; وزن فونت: طبیعی; فونت-خانواده: "اسکادا", بدون دندانه; موقعیت: نسبت فامیلی; سایه متن: 0 2 پیکسل 0 rgba(255 , 255 , 255 , 0.5 ) ; اندازه فونت: 30 پیکسل; ارتفاع خط: 40 پیکسل; } دمو-4 .اصلی h3 { لبه: 1 ساعت 0 0.75 دقیقه; لایه گذاری: 0 0 5 پیکسل 0 ; رنگ: #6B5344; وزن فونت: طبیعی; فونت-خانواده: "اسکادا", بدون دندانه; موقعیت: نسبت فامیلی; سایه متن: 0 2 پیکسل 0 rgba(255 , 255 , 255 , 0.5 ) ; اندازه فونت: 24 پیکسل; ارتفاع خط: 40 پیکسل; } دمو-4 .اصلی h4 { لبه: 1 ساعت 0 0.75 دقیقه; لایه گذاری: 0 0 5 پیکسل 0 ; رنگ: #6B5344; وزن فونت: طبیعی; فونت-خانواده: "اسکادا", بدون دندانه; موقعیت: نسبت فامیلی; سایه متن: 0 2 پیکسل 0 rgba(255 , 255 , 255 , 0.5 ) ; اندازه فونت: 18 پیکسل; ارتفاع خط: 20 پیکسل; }

دمو-4 .main h1 i, .demo-4 .main h2 i, .demo-4 .main h3 i, .demo-4 .main h4 i ( padding-right: 10px؛ رنگ: #A8D13B؛ اندازه قلم: 0.8em .demo-4 .main h2:after, .demo-4 .main h3:after, .demo-4 .main h4:after ( موقعیت: مطلق؛ محتوا: ""؛ ارتفاع: 1px؛ حاشیه-شعاع : 2px : 0 : 0 -1px 0 rgba(0.0.1) 4 .main h3:after ( عرض: 75%; ) .demo-4 .main h4:after ( عرض: 50%; ) .demo-4 .main h1 ( حاشیه: 1em 0 0.75em؛ padding: 0 5px 0; رنگ: #6B5344; 0 5px 0 رنگ: font-family: "Scada"; ; ارتفاع خط: 40px: 1em 0.75em; padding: 0 0 5px 0; رنگ: #6B5344; فونت-وزن: عادی; font-family: "Scada", sans-serif; موقعیت: نسبی; text-shadow: 0 2px 0 rgba(255,255,255,0.5); اندازه فونت: 24px; ارتفاع خط: 40 پیکسل؛ ) .demo-4 .main h4 ( حاشیه: 1em 0 0.75em؛ بالشتک: 0 0 5px 0؛ رنگ: #6B5344؛ وزن قلم: معمولی؛ فونت-خانواده: "Scada"، sans-serif، موقعیت: نسبی. text-shadow: 0 2px 0 rgba(255,255,255,0.5 فونت-اندازه: 18px;

مثال 5

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

دمو-6 .اصلی h1 { لبه: 1 ساعت 0 0.5 دقیقه 0 ; وزن فونت: 100 ; تبدیل متن: حروف بزرگ; رنگ: #00caa6; نوع قلم: مورب; فونت-خانواده: ژوزفین سانس, بدون دندانه; اندازه فونت: 58 پیکسل; ارتفاع خط: 54 پیکسل; سایه متن: 2 پیکسل 5 پیکسل 0 rgba(0 , 0 , 0 , 0.2 ) ; } دمو-6 .اصلی h2 { لبه: 1 ساعت 0 0.5 دقیقه 0 ; رنگ: #148773 ; اندازه فونت: 26 پیکسل; ارتفاع خط: 40 پیکسل; وزن فونت: پررنگ; فونت-خانواده: ژوزفین سانس, بدون دندانه; } دمو-6 .اصلی h3 { لبه: 1 ساعت 0 0.5 دقیقه 0 ; رنگ: #343434 ; اندازه فونت: 22 پیکسل; ارتفاع خط: 40 پیکسل; وزن فونت: 100 ; تبدیل متن: حروف بزرگ; فونت-خانواده: ژوزفین سانس, بدون دندانه; فاصله بین حروف: 1 پیکسل; نوع قلم: مورب; } دمو-6 .اصلی h4 { لبه: 1 ساعت 0 0.5 دقیقه 0 ; رنگ: #343434 ; اندازه فونت: 18 پیکسل; ارتفاع خط: 20 پیکسل; وزن فونت: پررنگ; فونت-خانواده: ژوزفین سانس, بدون دندانه; }

دمو-6 .main h1 ( حاشیه: 1em 0 0.5em 0؛ وزن قلم: 100؛ تبدیل متن: بزرگ؛ رنگ: #00caa6؛ سبک قلم: مورب؛ فونت خانواده: "Josefin Sans"، sans-serif اندازه قلم: 58px: text-shadow: 2px 0.0.2 .demo-6.main h2; اندازه قلم: 26px; font-family: "Josefin Sans", sans-serif) .demo-6 .main h3 (حاشیه: 1em 0.5em 0 ; رنگ: #343434; 40px تبدیل متن: "Josefin Sans", sans-Size: 1px .demo-6 .main h4 (حاشیه: 0.5em 0; رنگ: #343434; اندازه قلم: 18px; line-height: 20px font-weight: bold-family: "Josefin Sans", sans-serif;

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

P.S. تی برای کسانی که در اینترنت کار می کنند یا تازه شروع به کار می کنند، مقاله ای در مورد چیستی TIC به شما کمک می کند یکی از مرتبط ترین و بحث شده ترین مفاهیم در اینترنت را مرور کنید.

 

شاید خواندن آن مفید باشد:

• پاول باگریانتسف - وبلاگ نویس;
• نحوه تغییر والپیپر دسکتاپ در ویندوز;
• راهنمای خدمات Bowers & Wilkins Zeppelin Air Lightning نحوه باز کردن b w zeppelin;
• جایگزین هایی برای جایگزینی برنامه های LogMeIn Hamachi مانند Hamachi;
• فلزیاب نقطه ای - پین پوینت minimax-pp Pinpointer با مدار تشخیص;
• کار پروژه "اسرار صفحه کلید;
• چگونه فایل‌های موجود در macOS را از سطل زباله حذف کنیم;
• نحوه استفاده از تنظیمات وایبر و سرویس - هک زندگی IP تلفنی;