✅ Списъци и менюта в CSS3

Съдържание

Да се създаване на динамични менюта за нашите уеб страници Днес е много често да се програмира в HTML5 и след това да му се даде личен поглед и усещане CSS3 че това е език, който се основава на стилови таблици, тоест кодът, който придава формата, цвета и структурата на нашата страница, отива в отделен файл, кодиран извън самата страница, която пишем.

На първо място, ще видим как да правим списъци, тъй като в края на краищата менюто е списък, който е оформен, за да го направи видимо по -елегантен. По този начин ние сме структурирани в Html като списък с връзки и след това вече слагаме персонализиран външен вид CSS3.

Има два вида списъци, подредени и неподредени. Ако ще използваме списък за по -късно конфигуриране на меню, най -вероятно ще използваме нередовен списък, но ще видим опциите.

Те са създадени абсолютно еднакви, единствената разлика се крие в запазената дума, която за подреденото ще бъде

HTML кодът е следният:


Първият елемент
Втори елемент
Трети елемент


Първият елемент
Втори елемент
Трети елемент

1. Първи елемент
2. Втори елемент
3. Трети елемент

Или абсолютно същото без първоначалния номер:

Първият елемент
Втори елемент
Трети елемент

В HTML има определени предварителни формати, когато създаваме списък, тоест има определено поле, цвят на шрифта, куршум, подложка и т.н. което се появява по подразбиране при създаването на нашия списък. Лошото е, че визуално не изглежда много добре, хубавото е, че е изключително лесно да го променим по наш вкус благодарение на CSS.

Ще започнем, като разгледаме различните видове винетки, които можем да поставим в менюто си. По подразбиране всеки елемент в списъка се предхожда от черен кръг. Въпреки това можем да поставим квадратчета, празни кръгове или изображение от нашия файл.

Кодът за промяна на куршума в CSS3 е следният:

 #menu {list-style-type: square;}

За да промените маржа с помощта на примерното меню, е толкова просто, колкото да използвате това код в CSS3:

 #menu {margin: 0px;}

 #menu {margin: 0px; подложка: 2px; }

CSS3 код

 #menu {граница: 2px;}

В допълнение към дебелината, границата е поле, което има много възможности, можем да изберем стил, цвят, градиент … и ще видим някои опции.

Border-Style
Започвайки със стила на ръба, граничен стил, най -използваните възможности са:

Нито единТова, което прави, е да премахне самия ръб. Това е опцията по подразбиране, така че обикновено, когато създаваме списъци за нашите менюта, няма да се появят граници, освен ако не го посочим.

ТвърдТова е ръбът, който може да се използва най -много. Това е непрекъсната рамка, черна на цвят.
СкритO hidden е друга опция, при която не визуализираме никакви ръбове, тъй като те са скрити. Въпреки това, за целите на програмирането тя съществува. Използва се за ограничаване на границите с други съседни клетки или таблици, дори ако не искаме да се вижда дебела граница.
РиджЩе поставим този ръб, ако искаме да се откроява от останалите. Прави границата да изглежда поставена на едно ниво над останалата част на екрана.
ИзходПодобно на предишния, той е изпъкнал ръб, но това изглежда не е на ниво над повърхността на екрана от това, което носи вътре.
ЖлебЗа разлика от билото с този граничен стил изглежда, че елементът е потънал под останалите.
ВмъкванеПо същия начин като Groove, този ръб не изглежда потънал, но всъщност е едно ниво под останалите.
ПунктиранаС този стил генерираме рамка, образувана от пунктирана линия, черна по подразбиране и интервали.
ДвойнаКакто казва самата дума, това е двойна граница, образувана от две непрекъснати черни линии, разделени с интервал.

НачертанТова е специален тип граница, подобна на пунктирана, с изключение на това, че точките стават по -големи линии, тоест това е вид прекъсната линия.

Както при границата, при стила на границата можем да изберем да дефинираме границата на едната страна, и двете, горната граница, долната граница или всички. Ако напишем само една стойност, тя се поставя върху всички ръбове, а ако напишем две опции вместо една, първата е за горния и долния ръб, а втората е за страните.

Сега с това определихме границата, размера и стила, но менюто остава много просто и не много красиво визуално. Можем да искаме вертикални менюта, тъй като те са създадени по подразбиране, но ако искаме те да са хоризонтални, трябва да добавим ключовата дума float, така че всеки елемент в списъка да бъде поставен до следващия.

Обяснявам това малко по -подробно, всеки елемент от списъка, който сме кодирали с "li", по подразбиране има поведението на блоков елемент, тоест след поставянето му генерира прекъсване на ред и предотвратява поставянето на друг елемент до него. Ако искаме да поставим всеки елемент от нашия списък до предишния, трябва да премахнем това поведение на блока.

За това кодът ще бъде следният:

 #menu {списък-стил: няма; марж: 0px; подложка: 0; } #menu li {марж: 2px; подложка: 2px; рамка: 2px плътна; поплавък: ляво; }

хоризонтално меню

Сега, ако искаме нашият списък да действа като меню и да ни пренасочва там, където искаме, трябва да добавим връзка към нашите елементи. Това е много просто. В нашия код в HTML добавяме следното:


Първият елемент
Втори елемент
Трети елемент

Накрая ще видим някои от опциите за външен вид.

Свойства на текста
ШиринаАко искаме да поставим фиксирана ширина. Например ширина: 100 px;
Текстова декорацияАко искаме текстът на нашия елемент да бъде украсен по някакъв начин. Има много възможности, но някои от най -често срещаните са:

подчертавам: ако искаме всичко да бъде подчертано
overline: същото като подчертаването поставя ред във целия текст, но този път вместо под горе.
мига: Създайте текст, който свети, който мига като светлина периодично.
линейна връзка: Ще напишем тази опция, ако искаме текстът ни да бъде зачеркнат.
нито един: това е излишно, тъй като по подразбиране текстът идва с тази стойност, без никаква украса. Понякога обаче ще бъде полезно, ако искаме да се върнем към първоначалната опция, след като сме използвали ефект, използвайки ресурс, наречен hover, който ще видим по -нататък.

Подравняване на текстаТова е посоката, в която ще бъде публикувано съдържанието на нашите блокови елементи, бъдете внимателни, а не самият текст, който ще видим по -късно със свойството direction. Опциите са много прости: наляво, ако искаме да върви отляво, надясно, ако искаме да върви отдясно наляво, центриране, ако искаме текстът да бъде центриран и обосновка, ако искаме текстът да бъде оправдан.

ПосокаС тази опция ще определим посоката на текста, който пишем, в този случай има само две опции:

ltr: който е този, който се появява по подразбиране в браузърите, тъй като с изключение на някои езици, на които е написано отдясно наляво, обикновено е да се пише отляво надясно, което определя тази опция.
rtl: това е другата възможна посока на текста, отдясно наляво, която ще използваме, ако искаме да пишем арабски текстове например.

Текстово отстъплениеТова, че идва от отстъп или таблица, е свойство, което е отговорно за установяването на споменатия критерий в първия ред на нашите блокови елементи, а също и в таблици. Има три варианта:

мярка
процент
наследявам

В тях, ако използваме процент, ще имаме предвид ширината на елемента, в който се намира.
Също така във всички тях можем да използваме положителни или отрицателни цифри на някоя от мерните единици, които съществуват за css3, пиксели, ems …

Текстово преобразуванеПоследното свойство, свързано с текста, което ще видим, е свързано с главни и малки букви:

с главни букви: с тази опция само първата буква от всяка дума ще се показва с главни букви.
Главна буква: показва целия текст с главни букви.
малки букви- Показва целия текст с малки букви.
нито един: оставя текста така, както е написан. Той е този, който идва по подразбиране.

Разстояние между думитеВъпреки че не се занимава директно с текста, той го прави в пространството, което оставяме между думите. Стойностите му могат да бъдат "нормални" или валидна мярка. Ако поставим мярка, нейната стойност се добавя към нормалната мярка, която е тази, която идва по подразбиране.

Сега отиваме със свойствата на шрифта.

Свойства на шрифта
ШрифтТова свойство е най -пълното от всички, свързани с шрифта, и има няколко опции, когато става въпрос за използването му. Първо, можете да започнете с една, две, три или нито една от стойностите „font-style“, „font-variant“ и „Font-weight“.

След това трябва да поставим размера на буквата с "font-size" по избор, последвано от интервал, който е даден с "височина на реда" и винаги завършва с типа на семейството шрифтове "font-family". Накрая ще трябва да поставите една от следните стойности:

надпис- За бутони или падащи списъци, тоест за контроли и полета на формуляри.
меню: ако ще конфигурираме падащи менюта или други типове менюта.
икона: за текстовете, показани под иконите.
кутия за съобщения-За диалогови прозорци, независимо дали става въпрос за изскачащи прозорци за грешки, изскачащи прозорци за информация и т.н.
status-baО: за ленти за състоянието на прозореца.
малка капитоn - За полета с малки форми и контроли.

В свойството на шрифта сме използвали някои други опции, които все още не сме виждали и които ще обясним по -долу:

Стил на шрифтаС него ще определим стил на шрифта. Стойностите, които може да има, са „нормални“, което е по подразбиране, „курсив“, ако искаме нашата буква да е курсивна, тоест курсивна; или "косо", ако искаме да имаме наклонена буква, която е вид курсив, където само знаците са наклонени, а не всички, както в курсив.

Вариант на шрифтаЩе го използваме за установяване на варианти на шрифта и ние имаме само две опции, „нормалната“, която е тази, която идва по подразбиране, и варианта „малки букви“, наричан още малки букви, което прави главни букви да изглеждат със същия размер като малките букви.

Тегло на шрифтаТова е едно от най -използваните свойства оттогава с него можем да контролираме дебелината на буквите (бъдете внимателни, това не е същото като размера на всяка буква, която ще видим по -късно). Числено казано, той има 9 опции, които са стотиците от 100 до 900, тоест 100, 200, 300, 400, 500, 600, 700, 800 и 900. Има и писмени стойности, "нормалното", което се равнява на 400 , "удебелен", който съответства на 700 и който ние бихме нарекли удебелен и който любопитно не се появи в стил шрифт, но тук. Има и стойностите „по -смел“ или „по -лек“, а понякога и други като „среден“ или „тежък“, които се присвояват на числови стойности в зависимост от броя на дебелините, които шрифтът има.

Размер на шрифтаС това свойство ако ние ще контролираме размера на шрифта. Налични са четири стойности, „абсолютен размер“, „относителен размер“, „процентна единица“ и „мерна единица“. Има доста абсолютни и относителни мерни единици, дефинирани в css като em, което е най -използваното в това свойство, ex, px,%, in, cm, mm, pt или pc. В допълнение към тези мерки има някои думи, които работят и могат да бъдат използвани като xx-small за най-малките, x-малки, малки, средни, големи, x-големи или xx-големи за най-големите. Тези шест думи отговарят на размерите на различните HTML заглавни тагове на

да се

и това са абсолютни размери на мерките, така че те винаги ще изглеждат еднакви, независимо от разделителната способност на браузъра или екрана. Думите "по -малък" и "по -голям" могат да се използват и като относителни измервания, които ще зависят от размера на шрифта на елемента, който го съдържа.

Височина на линиятаТой вече е дефиниран в свойствата на текста.
Шрифтово семействоШироко използван имот, който ние ви позволява да изберете шрифт или шрифт. Първо поставяме името на шрифта или шрифта и по избор може да бъде последвано от други имена на шрифтове, в случай че браузърът или системата ни нямат първия или не го поддържат. Няма шрифт по подразбиране, тъй като зависи от нашия браузър, въпреки че много често срещан е „Times New Roman“. Някои общи стойности на типа шрифт могат да бъдат "засечки", където са включени някои шрифтове като Times New Roman, Garamond, Georgia или Cambria; "Sans-serif" и неговите видове Verdana, Arial, Tahoma, Helvetica или Futura. "Monospace" и неговите примери Courier New или Монако и други. И „фантазия“ с типовете Comic sans или Impact. Разбира се, има много повече шрифтове, от които можем да избираме.

Разстояние между буквитеС това можем контролира разстоянието между буквите, и той работи абсолютно същото като неговия аналог за текстови интервали с текстови свойства, със стойностите "нормално" и валидна мярка.

ЦвятНакрая ще видим свойство на цвета, който искаме да поставим в нашия текст. По подразбиране е черен. Има няколко начина за избор на цвят, един от тях е чрез 17 -те различни цветови думи, които съществуват: аква, черно, червено, жълто, синьо, фуксия, зелено, лайм, оранжево, сиво, кестеняво, маслинено, тъмно, лилаво , сребристо, биле и бяло.

Друг вариант е да поставите цвят на RGB процент, това е просто определяне на три процента, съответстващи на цветовете червено ®, зелено (G) и синьо (B):

 цвят: rgb (22%, 76%, 14%); (3 -те процента не трябва да дават 100%)

Друг начин е чрез RGB десетичен знак който работи точно като процента RGB, но вместо да поставя три стойности в проценти, те се поставят като десетични стойности: