Поздрав драги читаоци ремонтцомпа! Моје име је Роман Нахват и представљам вам пажњу чланака о језику стила ЦСС3. ЦСС скраћеница долази од енглеског Цасцадинг Стиле Схеетс, што значи каскадно табела. Стил или ЦСС је скуп опција форматирања примењених на елементе ХТМЛ документа да би променили свој изглед. Сам ХТМЛ је само стандардни језик за ХТМЛ документе и користи се за структуирање садржаја ХТМЛ странице, па је ХТМЛ само први корак у процесу учења сајта. Следећи корак је научити стилове или ЦСС, што ћемо учинити. Постоји неколико начина додавања стилова веб страници. Свака метода се разликује у својим могућностима и намени. У овом ћемо чланку погледати три начина додавања стилова у ХТМЛ документ..

Само о компликованом или научите ЦСС3. Део 1. Концепт ЦСС. Начини повезивања ЦСС стилова са ХТМЛ документом

Направите стандардну структуру ХТМЛ документа као што је приказано у наставку.

Између ознака и напишите наслов ХТМЛ документа, на пример, "Методе повезивања ЦСС стилова"

Коришћење тагова

и

додајте наслов веб страници са текстом „Шта је ЦСС“

Испод наслова користите ознаке

и

створите мали одломак са текстом као што је приказано у наставку

Спремите овај документ на флеш диск у ЦСС фасцикли под индексом имена са наставком .хтмл

Наведите индекс имена, одаберите врсту датотеке хтмл

Добијамо следеће.

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

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

Користећи атрибут поравнања (додијеливши му средишњу вриједност), поравнат ћемо наслов с текстом "Шта је ЦСС" у средишту веб странице

Добијамо следеће.

Промените боју текста параграфа из стандардне црне у другу. Користимо ознаку

Постоји много хтмл боја, на пример, за текст параграфа на страници коју смо створили, одаберите боју ДеепСкиБлуе

Подесите атрибут боје ознаке на ДеепСкиБлуе

Поново учитавамо нашу веб страницу и видимо да је текст ставка променио боју из црне у ону коју смо навели

На исти начин промените боју насловног текста, на пример, у црвену.

Добијамо следеће

Вратит ћемо текст наслова и одломака на нашој веб страници у првобитно стање, наиме, уклонићемо атрибут поравнања и ознаке ...

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

Ако смо горе променили боју и распоред текста наслова и одломака на веб страници користећи хтмл ознаке, сада ћемо учинити исту ствар, али користећи ЦСС. Као што је већ споменуто, у овом чланку ћемо размотрити три начина за додавање стилова веб страници, и то: Додавање унутрашњих стилова веб страници; Додавање глобалних стилова на веб страницу; Додавање повезаних стилова на веб страницу; Размислите о додавању интерног стила веб страници.Унутарњи стил је екстензија појединачне ознаке која се користи на веб страници. Атрибут стила користи се за дефинисање стила, а његова вредност је одређени скуп правила стила. Промените боју текста наслова на веб страници у црвену и такође је центрирајте користећи интерни стил. За означавање

додати атрибут стила, тада ћемо записати својства стила, наиме: текст-поравнање: центар, боја: црвена

Добијамо следеће.

Као резултат тога, отварајући датотеку индек.хтмл у веб прегледачу, видимо да је текст наслова на веб страници црвен и центриран.

На исти начин, користећи атрибут стила, промените боју текста параграфа из стандардне црне у деепскиблуе

Поново учитавамо страницу индек.хтмл и видимо промену боје параграфа.

Промените боју текста наслова на веб страници у црвену и центрирајте је, овај пут користећи глобални стил. Ако се примењује глобални стил, ЦСС својства су смештена између и ознака, а они (и ознаке) су смештени између и ознака .

Између ознака и у коврчаве заграде пишемо својства стила заглавља веб странице (ознаке)

), а за одломак (ознака)

): х1 поравнање текста: центар; боја: црвена - поставите текст наслова у средину веб странице и промените његову боју у црвену п цолор: деепскиблуе - промените боју параграфа у деепскиблуе

Као резултат, добијамо исти резултат као и код употребе унутрашњих стилова.

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

Сачувај.

Направљена датотека стила са .цсс наставком

Оставите датотеку стиле.цсс за сада празно.

За повезивање хтмл документа (у нашем случају то је индек.хтмл) са датотеком стилова стиле.цсс, користимо ознаку. Ознака треба да се налази унутар ознака ... Напишемо следећи ред између ознака: где: рел = "стилесхеет" - атрибут ознаке који указује на веб прегледач да ће стилови бити повезани; атрибут хреф = "стиле.цсс" указује на пут до датотеке стилова стиле.цсс

Приликом стварања стилских датотека морате се придржавати одређених правила у наставку (иста правила морају се поштовати приликом додавања глобалних стилова) Један од главних елемената датотеке стила је селектор. Селектор одређује на који ће елемент у хтмл документу примијенити одређене параметре стила. Селектор су ознаке, класе и идентификатори. Након што је селектор наведен, постављају се коврчави заграде у које је регистровано својство стила, а затим је наведена његова вриједност. На примјер, испод у дијаграму, ознака хтмл х1 је означена као селектор, боја: као својство стила, пише се вриједност својства стила

Пошто желимо да поставимо текст наслова (тагу)

) у средини веб странице и подесите текст на црвено, као и текст ставка (ознака)

) приказ у боји деепскиблуе, у датотеци стилова стиле.цсс пишемо редове: х1 тект-алигн: центер; боја: црвена и п боја: деепскиблуе где: х1 поравнање текста: центар; цолор: ред - поравнајте текст заглавља („Шта је ЦСС“) у средини, а текст поставите на црвено п цолор: деепскиблуе - поставите текст ставка („ЦСС је језик стила који дефинише ...“) боја деепскиблуе

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

Наставак у чланку: Само о компликованом или научите ЦСС3. Део 2. Врсте ЦСС селектора