10 једноставних примера ЦСС кода које можете научити за 10 минута

10 једноставних примера ЦСС кода које можете научити за 10 минута

Када почнете да се бавите ХТМЛ -ом, вероватно ћете бити заинтересовани за додавање више визуелног утиска на своје веб странице. ЦСС је најбољи начин за то. ЦСС вам омогућава да примените промене на целој страници без ослањања на уграђени стил.





Ево неколико једноставних примера ЦСС -а који ће вам показати како да направите неке основне промене стила на својој веб страници.



1. Основни ЦСС код за једноставно обликовање параграфа

Стилизовање помоћу ЦСС -а значи да не морате да одређујете стил сваки пут када креирате елемент. Можете само рећи „сви пасуси би требали имати овакав стил“ и спремни сте.





Рецимо да желите сваки пасус (

, једна од ХТМЛ ознака коју би сви требали знати) да буде нешто већа него обично. И са тамно сивим текстом, уместо црним.

Повезан: ХТМЛ Цхеат Схеет



ЦСС код за ово је:

p { font-size: 120%; color: dimgray; }

Једноставно! Сада, кад год прегледач прикаже пасус, текст ће наследити величину (120 одсто нормалног) и боју ('димграи').



Ако вас занима које боје обичног текста можете користити, погледајте ово ЦСС листа боја из Мозилле.

2. ЦСС пример за промену величине слова

Желите ли да направите ознаку за пасусе који треба да буду написани малим словима? Узорак ЦСС -а за то би био:



p.smallcaps { font-variant: small-caps; }

Да бисте направили пасус који је у потпуности малим словима, користите мало другачију ХТМЛ ознаку. Ево како то изгледа:

Your paragraph here.

Додавањем тачке и имена класе елементу одређује се подтип тог елемента дефинисан класом. То можете учинити с текстом, сликама, везама и било чим другим.

Ако желите да промените скуп текста у одређени случај, користите ове примере ЦСС кода:

text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;

Последњи пише велико слово сваке реченице.

Промене стила нису ограничене на пасусе. Постоје четири различите боје којима се може доделити веза: стандардна боја, посећена боја, боја лебдења и активна боја (коју приказује док кликнете на њу). Користите овај пример ЦСС кода:

a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }

Са везама, иза сваког „а“ следи двотачка, а не тачка.

Свака од тих декларација мења боју везе у одређеном контексту. Нема потребе да мењате класу везе да бисте променили боју.

Иако подвучени текст јасно указује на везу, понекад изгледа лепше да се подвуче. Ово се постиже помоћу атрибута 'тект-децоратион'. Овај пример ЦСС -а показује како уклонити подцртавање на везама:

a { text-decoration: none; }

Све са ознаком везе ('а') неће остати подвучено. Желите да га подвучете када корисник пређе курсором преко њега? Једноставно додајте:

a:hover { text-decoration: underline; }

Ову декорацију текста можете додати и активним везама како бисте били сигурни да подвлака неће нестати када се кликне на везу.

Желите да привучете више пажње на своју везу? Дугме за везу је одличан начин за то. За ово је потребно још неколико редова:

a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }

Објаснимо овај пример ЦСС кода.

Укључивање сва четири стања везе осигурава да дугме не нестане када корисник лебди или кликне на њега. Такође можете поставити различите параметре за лебдење и активне везе, на пример, промену дугмета или боје текста.

Боја позадине је подешена бојом позадине, а боја текста бојом. Паддинг дефинише величину кутије --- текст је подстављен 10пк вертикално и 25пк хоризонтално.

Поравнавање текста осигурава да се текст приказује у центру дугмета, уместо да се искључује на једну страну. Декорација текста, као у последњем примеру, уклања подвлачење.

како додати линкове друштвених медија на иоутубе канал

ЦСС код 'дисплаи: инлине-блоцк' је мало компликованији. Укратко, омогућава вам да поставите висину и ширину објекта. Такође обезбеђује да започне нову линију када се уметне.

6. Пример ЦСС кода за креирање текстуалног оквира

Обичан пасус није баш узбудљив. Ако желите да истакнете елемент на својој страници, можда ћете желети да додате обруб. Ево како то учинити помоћу низа једноставног ЦСС кода:

p.important { border-style: solid; border-width: 5px; border-color: purple; }

Овај је јасан. Он ствара чврсту љубичасту ивицу, широку пет пиксела, око било ког пасуса важне класе. Да би пасус наследио ова својства, само га декларишите овако:

Your important paragraph here.

Ово ће радити без обзира на то колико велики параграф био.

Можете применити много различитих стилова обруба; уместо „солид“, пробајте „тачкасто“ или „двоструко“. У међувремену, ширина може бити „танка“, „средња“ или „дебела“. ЦСС код може чак и да дефинише дебљину сваке ивице појединачно, на следећи начин:

border-width: 5px 8px 3px 9px;

Резултат је горња ивица од пет пиксела, десна ивица осам, доња три и величина леве ивице девет пиксела.

7. Елементи поравнати по средини са основним ЦСС кодом

За заједнички задатак, центрирање елемената помоћу ЦСС кода је изненађујуће неинтуитивно. Када то учините неколико пута, постаје много лакше. Имате неколико различитих начина да центрирате ствари.

За блок елемент (обично слику) користите атрибут маргин:

.center { display: block; margin: auto; }

Ово осигурава да се елемент приказује као блок и да се маргина са сваке стране аутоматски поставља. Ако желите да центрирате све слике на датој страници, можете чак додати „маргин: ауто“ у имг ознаку:

img { margin: auto; }

Да бисте сазнали зашто то функционише на овај начин, погледајте Објашњење ЦСС модела кутије на В3Ц .

Али шта ако желите да центрирате текст помоћу ЦСС -а? Користите овај пример ЦСС -а:

.centertext { text-align: center; }

Желите да користите класу 'центертект' за центрирање текста у пасусу? Једноставно додајте ту класу у

ознака:

This text will be centered.

8. ЦСС примери за подешавање паддинга

Пуњење елемента одређује колико простора треба имати са сваке стране. На пример, ако додате 25 пиксела размака на дно слике, следећи текст ће бити гурнут 25 пиксела надоле. Многи елементи могу имати паддинг, а не само слике.

Рецимо да желите да свака слика има 20 пиксела размака са леве и десне стране и 40 пиксела са горње и доње стране. Најосновније извршавање ЦСС кода за ово је:

img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; }

Међутим, постоји краћа ЦСС инструкција која приказује све ове информације у једном реду:

img { padding: 40px 25px 40px 25px; }

Ово поставља горњи, десни, доњи и леви падинг на десни број. Захваљујући само две вредности које се користе (40 и 25) можете је учинити још краћом:

img { padding: 40px 25px }

Када користите само две вредности, прва вредност се поставља за горњу и доњу страну, док ће друга бити лева и десна.

9. Означите редове табела са ЦСС кодирањем

ЦСС код чини да табеле изгледају много лепше од подразумеваних мрежа. Додавање боја, прилагођавање ивица и прилагођавање вашег стола мобилним екранима је једноставно. Овај једноставан пример ЦСС -а показује вам како да истакнете редове табеле када пређете мишем преко њих.

tr:hover { background-color: #ddd; }

Сваки пут када пређете мишем преко ћелије табеле, тај ред ће променити боју. Да бисте видели неке друге кул ствари које можете учинити, погледајте В3Ц страница на фантастичним ЦСС табелама .

10. Пример ЦСС -а за пребацивање слика између провидног и непрозирног

ЦСС код вам такође може помоћи да радите кул ствари са сликама. Ево примера ЦСС -а за приказивање слика са мање од потпуне непрозирности, тако да изгледају помало „избледеле“. Када пређете мишем преко слика, оне постају потпуно непрозирне:

img { opacity: 0.5; filter: alpha(opacity=50); }

Атрибут „филтер“ ради исто што и „непрозирност“, али Интернет Екплорер 8 и старије верзије не препознају мерење непрозирности. За старије прегледаче, добра је идеја да га укључите.

Сада када су слике мало прозирне, можете их учинити потпуно непрозирним при преласку мишем:

img:hover { opacity: 1.0; filter: alpha(opacity=100); }

10 ЦСС примера са изворним кодом

Са овим примерима ЦСС кода, требало би да имате много бољу идеју о томе како ЦСС функционише. ЦСС предлошци може помоћи, али разумевање сирових елемената је од виталног значаја.

Поновљено је ових 10 једноставних примера ЦСС кода:

  1. Лако обликовање пасуса
  2. Промените велика слова
  3. Промените боје веза
  4. Уклоните подцртане везе
  5. Направите дугме за везу
  6. Направите оквир за текст
  7. Елементи поравнати по средини
  8. Подесите паддинг
  9. Означите редове табеле
  10. Учините слике непрозирнима

Ако их поново прегледате, приметићете неколико образаца које можете применити на будући код. И тада знате да сте заиста почели да постајете ЦСС мајстор. Али сећање на то може бити тешко. Можда ћете желети да обележите ову страницу за будућу употребу.

Објави Објави Твеет Емаил Цхесс Схеет Особина ЦСС3 својстава

Савладајте есенцијалну ЦСС синтаксу помоћу нашег листа за ЦСС3 својства.

Прочитајте следеће Повезане теме
  • Програмирање
  • Веб дизајн
  • ЦСС
  • Скриптирање
О аутору Цхристиан Цавлеи(1510 објављених чланака)

Заменик уредника за безбедност, Линук, уради сам, програмирање и објашњење технологије и заиста користан произвођач подцаста, са великим искуством у подршци за десктоп и софтвер. Сарадник часописа Линук Формат, Цхристиан је љубитељ Распберри Пи -а, љубитељ Лега и љубитељ ретро игара.

Више од Цхристиана Цавлеија

Претплатите се на наш билтен

Придружите се нашем билтену за техничке савете, критике, бесплатне е -књиге и ексклузивне понуде!

Кликните овде да бисте се претплатили