کلاس این هفته با بحث و گفتگوهای جذاب امضاء ما آغاز شد ، جایی که ما از جلسه هفته گذشته در مورد غذاهای اصلی بازتاب داشتیم. ما به پیچیدگی های GIT و GitHub می پردازیم و مفاهیم اساسی مانند عملیات اصلی GIT ، گردش کار کنترل نسخه موثر ، مکان های ذخیره سازی GIT و ویژگی های برجسته GitHub را پوشش می دهیم. ما همچنین دنیای نرم افزارهای منبع باز و موارد دیگر را مورد بررسی قرار دادیم! برای شیرجه زدن عمیق تر به این مباحث ، آخرین مقاله من را در اینجا بررسی کنید و این هفته ، ما در حال بررسی CSS هستیم. به من بپیوندید ، بیایید شیرجه بزنیم.
یک ظاهر طراحی اسناد وب خود
برگه CSS یا CASCADING STEEL ، یک زبان شیوه ای سبک است که برای تعریف بصری اسناد نوشته شده در HTML یا XML طراحی شده است. در حالی که HTML چارچوب ساختاری یک صفحه وب را فراهم می کند ، به عنوان اسکلت آن خدمت می کند ، CSS نقش شکل دادن به نحوه ظاهر این عناصر ساختاری را برای کاربران می گیرد.
با استفاده از CSS ، توسعه دهندگان می توانند چیدمان ، رنگ ها ، قلم ها و زیبایی شناسی کلی اجزای HTML را کنترل کنند. به عنوان مثال ، با CSS ، می توانید به راحتی رنگ پس زمینه یک صفحه وب را تغییر دهید ، اندازه قلم عناوین را تنظیم کنید یا حتی از طریق تکنیک های Grid و Flexbox طرح های پیچیده ای ایجاد کنید.
راهنمایی برای یک ظاهر طراحی عناصر HTML
انتخاب کنندگان CSS بخش اساسی صفحات وب یک ظاهر طراحی شده هستند. آنها به توسعه دهندگان اجازه می دهند عناصر HTML خاص را هدف قرار دهند تا بتوانند سبک ها را به طور مؤثر اعمال کنند. قوانین CSS شامل انتخاب کنندگان و اعلامیه ها است که در آن انتخاب کنندگان عناصر HTML را که به صورت یک ظاهر طراحی می شوند ، شناسایی می کنند.
انتخاب کنندگان چیست؟
انتخاب کنندگان اولین بخش از یک قانون CSS هستند که برای مشخص کردن اینکه عناصر HTML سبک های تعریف شده را دریافت می کنند ، ضروری است. به عنوان مثال ، به سبک همه elements with a certain colour or size, you would use a selector.
Types of Selectors
1. Universal Selector: This wildcard selector (*) targets every element within the document.
Example:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
این قانون حاشیه ها و بالشتک ها را برای همه عناصر با استفاده از انتخاب جهانی تنظیم می کند.
2. انتخاب کننده نوع: عناصر را با نام برچسب HTML خود مطابقت می دهد.
مثال:
CSS
p {
color: red;
font-size: 36px;
}
این امر رنگ قرمز و افزایش اندازه قلم را برای همه اعمال می کند elements.
3. Class Selector: Targets elements with a specific class attribute, prefixed by a dot (.)بشر
مثال:
You can style me using my class name.
.paragraph {
color: red;
font-size: 36px;
}
در اینجا ، فقط پاراگراف هایی با کلاس “بند” یک ظاهر طراحی شده را دریافت می کنند.
4.ID انتخاب کننده: یک عنصر را با یک شناسه منحصر به فرد انتخاب می کند ، پیشوند توسط یک هش (#)بشر
مثال:
You can style me using my ID.
#container-wrapper {
color: red;
font-size: 36px;
}
این با شناسه خاص برای عنصر اعمال می شود.
5. انتخاب کننده ویژگی: انتخاب را بر اساس حضور یا مقدار یک ویژگی امکان پذیر می کند.
مثال:
[href] {
color: red;
}
[href="https://altschoolafrica.com"] {
color: red;
font-size: 36px;
}
6 کلاس شبه: عناصر سبک بر اساس وضعیت یا موقعیت آنها ، با یک روده بزرگ نشان داده شده است (:)بشر
مثال:
button:hover {
background-color: orange;
}
7 عناصر شبه: با استفاده از یک روده بزرگ ، قسمت های خاصی از یک عنصر را سبک می کند (::)بشر
مثال:
p::first-line {
font-weight: bold;
}
انتخاب کننده های پیچیده
CSS امکان انتخاب پیشرفته انتخاب را فراهم می کند:
- انتخاب کننده فرزندان: تمام عناصری را که فرزندان یک عنصر مشخص هستند ، هدف قرار می دهد. مثال:
p span {
color: red;
}
- انتخاب کودک: فقط فرزندان مستقیم یک عنصر را انتخاب می کند. مثال:
ul > li {
list-style: none;
}
- انتخاب خواهر و برادر مجاور: یک عنصر را بلافاصله پس از یک عنصر مشخص دیگر انتخاب می کند. مثال:
h1 + p {
margin-top: 0;
}
- انتخاب گروهی: همان سبک ها را به طور همزمان در انتخاب کنندگان چندگانه اعمال می کند. مثال:
h1, h2, h3 {
margin-bottom: 10px;
}
- انتخاب کنندگان لانه سازی: مورد استفاده برای ایجاد سبک های قابل خواندن و scoped. مثال:
.container {
padding: 20px;
.title {
color: red;
}
}
-
:HAS()انتخاب کننده شبه: انتخاب مشروط بر اساس حضور عناصر عمیق تر در DOM را فراهم می کند. مثال:
figure:has(figcaption) {
border: 1px solid black;
}
-
:IS()انتخاب کننده شبه: عنصری را انتخاب می کند که می تواند با هر یک از انتخاب کنندگان ارائه شده در لیست مطابقت داشته باشد. مثال:
:is(h1, h2, h3) {
color: red;
}
حل تعارضات سبک
ویژگی یک مفهوم مهم در CSS است که تعیین می کند که چگونه مرورگر تصمیم می گیرد که در صورت وجود قوانین رقابتی برای همان عنصر ، کدام یک از سبک ها را اعمال کند. این به عنوان یک سیستم امتیاز دهی برای انتخاب کنندگان عمل می کند ، و رفتار CSS را در درگیری های یک ظاهر طراحی شده هدایت می کند.
نمونه ای از ویژگی در عمل
HTML و CSS زیر را در نظر بگیرید:
h1 {
color: blue;
}
.title {
color: yellow;
}
در این مثال ، هر دو قانون سعی در سبک کردن دارند element. Since both have conflicting colour properties, understanding specificity helps us determine which rule takes precedence.
Specificity Scoring
Specificity is calculated based on a set hierarchy of selectors. The selector with the highest specificity score is applied to the element. The hierarchy can be summarized as follows:
1. Inline Styles: These have the highest specificity score of 1000.
2. IDs: These rank next, with a score of 100.
3. Classes, Attributes, and Pseudo-classes: Each of these has a specificity score of 10.
4. Type Selectors and Pseudo-elements: These have a lower score, typically 1.
5. Universal Selector: This has the lowest specificity and scores 0.
In our example, the class selector .title has a specificity score of 10, while the type selector h1 has a score of 1. Therefore, the text will appear yellow because .title has a higher specificity.
The Role of !important
In CSS, there is a rule that significantly modifies specificity: !importantبشر این قانون دارای بالاترین نمره ویژگی 10،000 است و می تواند هرگونه اعلامیه دیگر از جمله سبک های درون خطی (1000) را نادیده بگیرد.
به عنوان مثال:
.h1 {
color: red !important;
}
این اعلامیه همیشه بر سایر سبک های اعمال شده برای همان عنصر ، برتری خواهد داشت ، مگر اینکه دیگری! از اعلامیه مهم در یک قانون خاص تر استفاده می شود.
احتیاط با! مهم
در حالی که !important می تواند برای اطمینان از استفاده از سبک های خاص مفید باشد ، بهترین روش برای استفاده از آن به طور کم در نظر گرفته می شود. بیش از حد !important می تواند منجر به کدگذاری مشکل و رفتار یک ظاهر طراحی شده غیر منتظره شود ، زیرا پیروی از قوانین طبیعی آبشار CSS را سخت تر می کند.
یک مفهوم اساسی برای طراحی وب
مدل CSS Box یک عنصر اساسی در طراحی وب است و چارچوبی را برای نحوه نمایش هر عنصر HTML به عنوان یک جعبه مستطیل شکل می دهد. درک این مدل برای ایجاد دقیق چیدمان و پرداختن به چالش های طراحی مشترک ضروری است.
اجزای مدل جعبه
1. محتوا:
2. بالشتک:
-
بالشتک در اطراف محتوا پیچیده شده و فضای بین آن و مرز جعبه ایجاد می کند.
-
می توان آن را با استفاده از خاصیت بالشتک یا همتایان جهت دار آن (مانند بالشتک-بالا یا حق بالشتک) تنظیم کرد.
-
نکته قابل توجه ، بالشتک شفاف است و باعث می شود پیشینه عنصر قابل مشاهده باشد.
3. مرز:
-
مرزی بالشتک را محصور می کند (یا در صورت عدم استفاده از بالشتک).
-
این می تواند سبک ها ، رنگ ها و ضخامت های مختلفی داشته باشد که توسط خاصیت مرزی یا ویژگی های مرزی خاص تعریف شده است.
4. حاشیه:
-
بیرونی ترین لایه مدل جعبه ، حاشیه ها فضای بین عنصر و عناصر همسایه ایجاد می کنند.
-
حاشیه ها همیشه شفاف هستند و می توانند با استفاده از خاصیت حاشیه یا معادل های جهت دار آن تنظیم شوند.
-
مفاهیم کلیدی مربوط به حاشیه ها شامل “حاشیه در حال فروپاشی” و “حاشیه های منفی” است که می تواند بر رفتار چیدمان تأثیر بگذارد.
محاسبه اندازه عنصر کل
درک چگونگی محاسبه اندازه کل یک عنصر برای طراحی طرح موثر بسیار مهم است. ابعاد کل به شرح زیر تعیین می شود:
توجه به این نکته حائز اهمیت است که حاشیه ها در این محاسبات نقش ندارند زیرا در فاصله بین عناصر به جای خود اندازه عنصر تأثیر می گذارد.
خاصیت جعبه
مدل پیش فرض جعبه گاهی منجر به نتایج ناخواسته می شود ، به همین دلیل CSS3 ویژگی جعبه اندازه را معرفی می کند:
-
جعبه محتوا (پیش فرض): عرض و ارتفاع فقط به منطقه محتوا مربوط می شود.
-
جعبه مرزی: عرض و ارتفاع شامل محتوا ، بالشتک و مرز است.
به عنوان مثال:
* {
box-sizing: border-box;
}
div {
box-sizing: border-box;
width: 300px;
padding: 20px;
border: 10px solid black;
margin: 25px;
}
اهمیت عملی مدل جعبه
درک مدل جعبه برای کارهای مختلف طراحی ، از جمله:
-
عناصر متمرکز
-
ایجاد فاصله مداوم برای یک طرح منسجم.
-
اجرای طرح های پاسخگو که به اندازه های مختلف صفحه نمایش ارائه می دهند.
-
اشکال زدایی موضوعات طرح بندی که در طول توسعه بوجود می آیند.
تسلط بر مدل جعبه CSS در نهایت منجر به طراحی وب جلا تر و مؤثرتر می شود.
بلوک و محورهای درون خطی در CSS
در CSS ، مفاهیم محورهای بلوک و درون خطی نقش مهمی در تعیین نحوه چیدمان عناصر در یک صفحه وب دارند. تسلط بر این محورها برای توسعه وب سایت های مدرن و پاسخگو که I18N (بین المللی سازی) و سازگار با بومی سازی هستند ، ضروری است.
محور بلوک
محور بلوک با طرح عمودی عناصر همراه است. بسته به حالت نوشتن (مانند چپ به راست یا راست به چپ) ، عناصر سطح بلوک به صورت عمودی سازماندهی می شوند و یکی را در بالای دیگری جمع می کنند. این محور به طور معمول با ارتفاع عناصر مطابقت دارد.
به عنوان مثال ، وقتی چندین عنصر سطح بلوک را تعریف می کنید مانند
Block 1
Block 2
محور درون خطی
در مقابل ، محور درون خطی مربوط به ترتیب افقی عناصر است. عناصر سطح درون خطی ، مانند یا ، در یک ردیف در سراسر خط ، مطابق با عرض عناصر ، جریان یابد.
به عنوان مثال ، اگر چندین عنصر درون خطی دارید:
Inline 1
Inline 2
این عناصر در کنار یکدیگر در محور درون خطی ظاهر می شوند.
خواص CSS برای محورهای بلوک و درون خطی
CSS چندین ویژگی را ارائه می دهد که از محورهای بلوک و درون خطی استفاده می کنند. اینها شامل:
-
بالشتک و حاشیه: انواع مختلفی مانند
padding-blockباpadding-inlineباmargin-blockوتmargin-inlineتنظیمات فاصله را در امتداد محورهای مربوطه امکان پذیر کنید. همچنین می توانید انواع شروع و پایان مانندpadding-inline-startوتmargin-block-endبشر -
اندازه بلوک و درون خطی: در
block-sizeوتinline-sizeخواص ارتفاع و عرض عناصر را تعیین می کند. در ضمن ،min-block-sizeوتmax-block-sizeحداقل و حداکثر ارتفاع را اجرا کنیدmin-inline-sizeوتmax-inline-sizeهمین کار را برای عرض انجام دهید. -
عناصر موقعیت یابی: شما می توانید از خواص مانند استفاده کنید
inset-blockیاinset-inlineبرای موقعیت یابی دقیق ، بیشتر با انواع شروع یا پایان بر اساس الزامات چیدمان سازگار است.
محاسبات عرض و ارتفاع
-
محاسبه عرض: عرض در امتداد محور درون خطی محاسبه می شود. مقدار پیش فرض خودکار است که اندازه محتوا را تشخیص می دهد. شما می توانید به صراحت با استفاده از عرض تنظیم کنید
widthخاصیت -
عرض حداکثر و حداقل: خواص
max-widthوتmin-widthبرای طرح های پاسخگو مهم هستند ، اطمینان حاصل می کنند که عناصر از آن تجاوز نمی کنند یا از زیر عرض خاصی برخورد نمی کنند:
.container {
max-width: 800px; /* Prevents exceeding 800px */
min-width: 300px; /* Ensures a minimum of 300px */
}
-
محاسبه ارتفاع: ارتفاع در امتداد محور بلوک محاسبه می شود ، از بالا شروع می شود و به سمت پایین حرکت می کند. مانند عرض ، پیش فرض خودکار است ، اما می تواند با استفاده از آن تنظیم شود
heightخاصیت -
حداکثر و حداقل ارتفاع: شبیه به عرض ،
max-heightوتmin-heightبه محدود کردن ارتفاع عناصر کمک کنید:
.box {
max-height: 500px; /* Limits height to 500px */
min-height: 200px; /* Ensures a minimum height of 200px */
}
در هر دو مورد ، در نظر گرفتن ابعاد عنصر والدین و نیازهای محتوا هنگام تعیین عرض و ارتفاع بسیار مهم است. برای بهترین نتیجه از ابعاد و درصد ثابت بدون عرض والدین تعریف شده خودداری کنید.
خیلی ممنون که در این سفر با من ماندید - حمایت شما به معنای جهان برای من است! من واقعاً از تلاش شما قدردانی می کنم و شما را ترغیب می کنم تا تمام مفاهیمی را که در اولین فرصت شما در مورد آنها بحث کرده ایم ، کشف کنید. تمرین برای پیشرفت مهم است.
من دوست دارم افکار و بازخورد شما را بشنوم ، بنابراین لطفا دریغ نکنید که بینش خود را در بخش نظرات زیر به اشتراک بگذارید.
من Ikoh Sylva هستم ، یک علاقه مندان به محاسبات ابری پرشور با چند ماه تجربه دستی در AWS. در حال حاضر من سفر ابر خود را از منظر یک مبتدی مستند می کنم. اگر این موضوع با شما طنین انداز است ، لطفاً پست های من را دوست داشته و دنبال کنید و این مقاله را با هر کسی که ممکن است سفرهای ابر خود را نیز شروع کند ، به اشتراک بگذارید. با هم ، ما می توانیم یاد بگیریم و رشد کنیم!
در ارتباط با من در رسانه های اجتماعی نیز احساس راحتی کنید!
LinkedIn Facebook x
