Първо, нека да определим как изглежда уебсайтът отвътре, така да се каже. Без да навлизаме в подробности, можем да кажем това уебсайтът е набор от файлове, които се намират на сървър (хостинг) в Интернет и взаимодействат помежду си по определени сценарии. Резултатът от това взаимодействие са самите страници, които преглеждате ежедневно.
Следователно всички тези файлове, които съставят сайта, трябва да бъдат попълнени с нещо. Точно така, така е! И те са пълни с код. И така, ето го всяко от загадъчните съкращения е език, на който са написани страниците и скриптовете, изграждащи сайта.
Какво е HTML?
HTML (хипертекст Маркиращ език) е език за маркиране на хипертекст. Не е съвсем ясно, нали? Опростявайки определението, можем да кажем, че HTML е "скелетът" на всяка страница.
Пример е следният раздел на страница, която измислихме:
Заглавие на страница
видима част от връзката (котва)
Заглавие на страница
Това е текст, абзац, ограден в тагове. По правило HTML се състои от тагове, които се отварят и затварят, рамкирайки определени елементи. И сега абзацът от текста ще приключи и ние ще предадем.
видима част от връзката (котва)Защо "скелет"?Ако се вгледате внимателно, интерпретираният код изобщо не е форматиран. Без цветове, без размери, без позициониране.
Можем да заключим, че HTML е набор от тагове, които формират основата на всяка страница в Интернет. С тяхна помощ декларираме заглавия, параграфи, връзки, снимки и други елементи.
Какво е CSS?
CSS (English Cascading Style Sheets - каскадни стилови таблици) - това е тази "магическа магия", което прави HTML маркирането да изглежда добре. При CSS помощимаме способността да стилизираме всеки елемент, посочен в маркирането, по всякакъв начин.
Мисля, че е най-добре да покажа пример:
Зебри
Оцветяване
Научете повече за зебрите!
- Без Използване на CSS
- Използване на CSS
Зебри
Зебри (лат. Hippotigris) - подрод на рода на конете, включващ видове зебра на Бърчел (Equus quagga), зебра на Греви (Equus grevyi) и планинска зебра (Equus zebra). Хибридни форми между зебри и домашни коне се наричат зеброиди, между зебри и магарета - зебрули. Зебрите живеят на малки групи, състоящи се от женски с малки и един жребец.
Оцветяване
Що се отнася до оцветяването на фона на зебрата, често се срещат две взаимно изключващи се позиции: бяло или черно. Уредникът на едрите бозайници в зоопарка в Атланта Лиза Смит казва, че експертите най-често описват зебрите като черни коне с бели ивици.
Зебри
Зебри (лат. Hippotigris) - подрод на рода на конете, включващ видове зебра на Бърчел (Equus quagga), зебра на Греви (Equus grevyi) и планинска зебра (Equus zebra). Хибридни форми между зебри и домашни коне се наричат зеброиди, между зебри и магарета - зебрули. Зебрите живеят на малки групи, състоящи се от женски с малки и един жребец.
Оцветяване
Що се отнася до оцветяването на фона на зебрата, често се срещат две взаимно изключващи се позиции: бяло или черно. Уредникът на едрите бозайници в зоопарка в Атланта Лиза Смит казва, че експертите най-често описват зебрите като черни коне с бели ивици.
Не е трудно да се види, че използването CSS е неразделна и важна част от процеса на разработка на страницата., тъй като стиловите таблици ви позволяват програмно да реализирате цялата красота, която дизайнерът нарисува преди.
CSS кодът обикновено се съхранява в отделен файл от маркирането на страницата и се включва във всички документи, които се нуждаят от него. Няма да говорим за синтаксиса и правилата за използване, тъй като това е извън обхвата на нашата статия, но ще направя резервация, че въпреки всички възможности, които се отварят с CSS, е доста лесно да научите неговите свойства.
Какво е PHP?
PHP (рекурсивен акроним за PHP: Hypertext Preprocessor) е често срещан език за програмиранес отворен код с общо предназначение. PHP е проектиран специално за уеб разработка и неговият код може да бъде вграден директно в HTML.
Какво означава това за нас? Нека видим пример с помощта на PHP:
echo "Здравей свят! Аз съм PHP скрипт.";
?>
Здравей свят! Аз съм PHP скрипт.
Характерна отличителна черта даден езике, че резултатът от неговата обработка може да бъде обикновени html тагове(HTML код). Ето защо той се използва активно в средата за уеб програмиране. Също така си струва да се отбележи, че за разлика от HTML, PHP може да комуникира със сървъра, както и да преглежда бази данни, да "дърпа" необходимата информацияи показване на страницата.
PHP кодът е разделен от специални начални и крайни тагове, които ви позволяват да „превключвате“ във и извън „PHP режим“, докато сте в HTML маркирането. PHP скриптовете също могат да бъдат разположени в отделни файлове от маркирането, ако тяхната задача е масивна и изисква много код.
Благодарение на езиците за програмиране, като PHP(и самия PHP) стана възможно създаване на CMS(Система за управление на съдържанието, CMS) или системи за управление на съдържанието.
Какво трябва да знаем сега? PHP скриптовете са вид "слепващ конструктор", което ви позволява да програмирате извеждането на различна информация на екрана на потребителя. За да създадете обикновена статична страница в Интернет, това е достатъчно използвайки HTMLв комбинация с CSS. Но ако тази страница (например новини) е част от някакъв динамичен сайт, тогава най-вероятно появата й е резултат от изпълнението на PHP скрипт.
Какво е JS?
JavaScript - базиран на прототип скриптов език. Както винаги, определението не дава никакво разбиране за непрограмист, така че ще се опитаме да разберем с помощта на прости тези.
Като начало предлагам да разгледаме малък пример за това какво може да се направи с помощта на JS:
Здравейте, скъпи читатели на сайта на блога. Днес искам да започна да говоря подробно за CSS (материалите ще бъдат натрупани в съответния).
Време е да преминете към него, след като научите Html. Езикът за маркиране на стилове е отговорен за външния дизайн на страниците на сайта и без да го разбирате, ще бъде много трудно да коригирате, преместите или подравните нещо.
Разбира се, Css изглежда много по-сложен от Html, но това е, когато става въпрос за оформление в различни браузъри, но когато става въпрос за коригиране на някои дребни неща в дизайна на собствения ви сайт, тогава нямате нужда от много внимание. Като цяло ще се опитаме да анализираме подробно основите му, а нюансите на тяхното филигранно използване ще останат за незадължително изучаване (по избор). Но всички уебмастъри трябва да знаят основните понятия.
Какво представлява езикът CSS и за какво служи?
Съкращението CSS означава Cascading Style Sheets или в превод на руски като Cascading Style Sheets. Какво е това и защо този език е измислен наведнъж?
И така, въз основа на това, което проучихме малко по-рано, можем да кажем, че маркирането на уеб документ се извършва с помощта на таговете на този език. Тези. С помощта на HTML създаваме структурата на нашите документи (уеб страници). Например, в чист Html можем да зададем други елементи от структурата на документа и дори да им дадем вида, от който се нуждаем в браузъра.
Но времето диктува необходимостта от използване на все повече и повече визуални дизайнерски атрибути в HTML, което значително се разхвърля източник. В тази връзка беше предложен друг, по-обещаващ вариант за развитие - създаване на отделен стилов език за маркиране CSS. И тази опция имаше редица предимства пред простото увеличаване на броя на дизайнерските атрибути.
Защо? Спомняте ли си как можете да зададете цвета на текстов фрагмент в чист Html? Точно така, с . А ако искате да оцветите в желания цвят няколко абзаца в текста си наведнъж?
След това ще трябва да вмъкнете тагове Font с желаната цветова стойност в атрибута Color във всеки от тях (тагът P абзац е блоков таг, което означава, че не може да бъде поставен във вграден елемент Font).
Всичко това ужасно ще затрупа изходния код, което е много, много нежелателно, защото скоростта на зареждане на сайта ще пострада и ще се създаде ненужно натоварване на оборудването за интернет комуникация. Разработчиците не можаха да „отидат“ за това.
Затова те излязоха със следния изход от тази ситуация. Разработчиците от W3C решиха да стилизират всички визуални представяния на уеб документ под формата на специален език за маркиране на стилове, който те нарекоха Cascading Style Sheets или просто CSS (разчетено като CES). Каква е същността на технологията?
И най-важното е, че чрез свързване на езика за маркиране на стилове към всякакви документи (страници) можем да зададем визуалното представяне на всички тези елементи (създадени от Html тагове), които ще бъдат намерени в този документ.
В интернет има ресурс, който помага да се види много ясно как една уеб страница може да промени външния си вид само защото в нея е включен друг файл с каскадна таблица със стилове. Според мен това би бил най-добрият отговор на въпроса: какво е CSS и защо е необходим.
Можете да видите основния изглед на документа (уеб страница), като щракнете върху тази връзка:
Нищо особено, но ако щракнете върху връзката „Преглед на всички дизайни“ от лявото меню, можете да видите десетки или дори стотици опции за дизайн за една и съща уеб страница, като включите различен стилов дизайн (друг файл със стилова таблица).
Моля, обърнете внимание, че оригиналният Html код остава абсолютно същият и само промени CSS стил . Поразително, нали?!
CSS не е език за маркиране в същия смисъл като например Html. Това е стилов език за маркиране - има свой собствен синтаксис, собствено вътрешно съдържание и в много отношения ще бъде много различен от предишния изучен.
Освен това, в сравнение с Html, езикът за маркиране на стилове е много по-сложен. Той има много нюанси, които ще трябва да знаете освен основните понятия. В HTML нямаше специални нюанси - проучихте всички елементи и можете безопасно да работите с кода. Струва ми се, че CSS може да се сравни с шаха - не е достатъчно да знаете как се движат всички фигури, трябва също да можете да играете.
И така, какво е това и от какво се състои? Този предполагаем език може разделят на две части:
- Правила, които казват на браузъра как трябва да изглежда даден елемент на екрана.
- Селекторите са етикети, които позволяват на браузъра да разбере точно към кои елементи от HTML кода ще трябва да приложи тези правила.
Сега нека да разгледаме как стилът, дефиниран в стиловете, е свързан с изходния код на уеб страницата. Има три основни начина използвайки css с html:
- Вмъкване - CSS кодът се записва директно в етикета на желания елемент с помощта на атрибута Style
- Вграждане - целият стилов код за уеб документ е написан в неговия хедър (вътре в таговете Head) с помощта на елемента Style
- Подвързване - всички CSSкодът се поставя (изобразява) в отделен външен файл, който се свързва с документа чрез елемента Link в неговия хедър
Е, виждате как вече сме научили много за стиловия език за маркиране. Сега е моментът да поговорим за това синтаксис. Като цяло е доста просто:
Едно правило в CSS кода се състои от два елемента – свойство (в нашия пример е ) и неговата стойност (в нашия пример е червено и #CCCCCC). Предпоставката е разделяне на свойство от неговата стойност с двоеточие.
По-нататък. Едно правило се отделя от друго безпроблемно точка и запетая. След последното правило вече ще можете да не поставяте точка и запетая, но за да избегнете излишъци, най-добре е да си направите правило винаги да я поставяте. в CSS кода те нямат значение и можете да ги задавате по свое усмотрение.
Използване на стил за свързване на CSS към Html код
Е, сега нека да разгледаме примери за всички онези начини за прилагане на стилови правила към нашия документ, които съществуват и които бяха описани в общи линии малко по-горе.
Първият метод се нарича метод css вграждане в htmlизползвайки атрибута Style:
Да видим как можем да използваме този методза да зададете цвета и фона на параграф:
Какво е метод на гнездене
Както можете да видите, с едно лесно движение оцветихме текста на абзаца в червено (color:red) и в същото време го поставихме под сив фон(фон: #cccccc). Style е един от тези шест, които могат да се използват с абсолютно всеки етикет (те са изброени в долната част на екранната снимка):
В Css ние също активно ще използваме универсални, но това ще бъде обсъдено в следващите статии, но засега разгледахме възможността да използваме Style за свързване на стилови правила към определени елементи. html код. Той ви позволява да използвате като негова стойност набор от същите тези правила (в неограничен брой).
Методът на влагане с помощта на атрибута Style е много лесен за прилагане на практика, но въпреки това е в реално оформление използван много рядко. Но от друга страна, с помощта на него можете много просто да опитате нещо и да експериментирате и едва след това да прехвърлите всички тези правила в отделен файл с таблици CSS стилове.
Следващият начин за свързване на езика за маркиране на стила се нарича метод вграждане на css в html. Този метод е фундаментално различен от разглеждания по-рано метод на гнездене.
Вместо да включваме атрибута Style, съдържащ езиковите правила за стил във всеки таг на страницата, сега ще напишем всички CSS правила, от които се нуждаем за този уеб документ, в един единствен Етикет стил, който от своя страна ще бъде поставен в заглавката на този документ (между елементите Head).
Помните ли какво е Head и къде е записано в структурата на уеб документ? Ако не си спомняте, погледнете тази блок-схема:
Тези. в код може да изглежда така:
... ...
Не е съвсем ясно? Е, сега ще се опитам да го илюстрирам:
За да не може браузърът да приема стилови правила като език за маркиране на хипертекст, необходимият атрибут ще трябва да бъде написан в елемента Style Въведете със стойност „текст/css“(заглавка на медийно съдържание за каскадни листове със стилове). Че. кодът, включен в този елемент, ще бъде интерпретиран от браузъра като CSS.
Нека да разгледаме примера по-горе. Както можете да видите, стилът управлява затворен в брекети , а пред тях е изписан така нареченият селектор под формата на латинската буква „P“. Защо е необходим този селектор?
Как иначе можем да кажем на браузъра, че тези CSS правила ще трябва да се прилагат само към тагове на параграфи (селектор P) тази мрежадокумент и нищо друго.
Тук отново засегнахме въпроса за синтаксиса. Когато използвате методите за вграждане и влагане, всички правила на езика за маркиране на стилове трябва да бъдат затворени във фигурни скоби и предшествани от не забравяйте да стоитеили множество селектори:
CSS селектор (Свойство: Стойност; Свойство: Стойност)
Когато използвахме метода на влагане, не използвахме селектора и фигурни скоби, защото за браузъра вече беше ясно, че тези CSS правила трябва да се прилагат точно към тага, в който е регистриран атрибутът Style.
Когато се използва методът на вграждане или влагане, ситуацията с определянето към кого са адресирани тези стилови правила стана по-сложна и изискваше използването на фигурни скоби и селектори. Че. указваме на браузъра, че този набор от CSS правила (оградени във фигурни скоби) любезно прилагате към всички параграфи, а този набор е за нещо друго.
В най-простия случай можете да използвате името на таг като селектор, към който трябва да се прилагат правилата на езика CSS, ограден във фигурни скоби, които се отварят непосредствено след името на селектора. В нашия пример името на тага на абзаца "P" се използва като селектор. Ще говорим по-подробно за селекторите в езика за маркиране на стилове в следващата статия (вижте връзката по-горе).
За да обобщим метода за вграждане на CSS код в Html документ - всички стилови правила, необходими за този документ, ще бъдат описани в един стилов таг, а не в много различни елементи, какъвто би бил случаят с използването на описания метод на влагане точно над.
Преместване на CSS таблици със стилове в отделен файл чрез връзка
Извиква се последният начин за интегриране на код на стил в уеб документ метод на обвързване. Най-лесният начин да илюстрирате този метод е:
Основната му разлика от методите, обсъдени малко по-горе (вложени и вграждания), е, че когато се използва методът за свързване, всички правила на езика CSS поставени в отделен външен файл. Той отново ще бъде текст (като всеки Html документ) и обикновено му се дават разширения .css, за да го отворите на локален компютърпод Windows контролможе да бъде възложено специална програма ().
Когато използвате външен CSS файл, специални Таг за връзка, което се изписва отново между отварящия и затварящия елемент Head в заглавката на уеб страницата. Връзката принадлежи към категорията, която не се вижда в браузъра.
Браузърът в този случай ще намери посочения файл със стилова таблица (преди да бъде посочен в атрибута Href на етикета Link), ще го зареди и ще приложи езиковите правила на CSS, посочени в него външен дизайнтекущ html документ.
Като цяло свързването е много подобно на използването на етикета Style, описан малко по-рано, но ви позволява значително да ускорите зареждането на страниците на сайта и да намалите натоварването на оборудването за интернет комуникация.
Когато използвате елемента Style (метод на вграждане), браузърът всеки път ще трябва да зарежда, заедно с HTML кода на документа, свързаните с него CSS правила и селектори, а в случай на използване на външен файл със стилова таблица, браузърът трябва да зареди Style.css само веднъж и едва след това да го вземе от вашия собствен кеш (област на твърдия диск на компютъра на потребителя), когато проектирате други страници на вашия сайт.
Атрибутът type=”text/css” на етикета Link означава, че това медийно съдържание няма да бъде нищо повече от стилов език за маркиране. Но също и когато свързвате CSS файл и Html документ, той се използва атрибута Rel със стойността на Stylesheet. Въпросът е, че Link (хипервръзка на услуга) може да се използва за абсолютно различни цели.
Ако погледнете изходния код за тази страница в браузър, ще видите, че областта Head има куп различни етикети за връзка:
И предназначението на всяка от тези сервизни хипервръзки се определя от стойността Rel атрибут. Например rel="икона за пряк път" се използва за указване на пътя до файл, а rel="alternate" може да се използва за указване на алтернативна версия на страница (пример за алтернативно представяне на Html документ би бил ) .
Е, в случай на използване на атрибута rel="stylesheet" във връзката, ние питаме браузъра път към файла със стилова таблица(в атрибута Href този път може да бъде посочен в абсолютна или относителна форма). Тези. използвайки атрибута Rel, казваме на браузъра как ще изглежда файлът, пътят до който е посочен в Href (stylesheet - с CSS).
На сайтове почти винаги се използва методът на свързване CSS и Html (външен файл със стилова таблица). Стиловите атрибути и етикети обикновено се използват само за тестване, въпреки че може да има такива специфични задачи, когато използването им е оправдано (например при декориране). Но в реалната работа на сайтове се използват външни файлове, т.е. метод на свързване.
За това ще си позволя да се сбогувам и се заклевам да ви обещая, че продължението ще последва в съвсем близко бъдеще. Още веднъж, изучаването на CSS обикновено е много по-трудно от изучаването на HTML, така че ще се опитам да бъда възможно най-подробен и описателен.
Късмет! Ще се видим скоро на сайта на страниците на блога
Може да се интересувате
Стил на списък (тип, изображение, позиция) - Css правила за персонализиране на външния вид на списъци в Html код 
Display (block, none, inline) в CSS - задайте типа на показване на Html елементи на уеб страница 
За какво е CSS, как да свържете каскадни стилови таблици към Html документ и основите на синтаксиса на този език 
Фон в CSS (цвят, позиция, изображение, повторение, прикачен файл) - всичко за задаване на фонов цвят или фонова картина Html елементи 
Приоритети в Css и тяхното увеличаване поради Важно, комбинация и групиране на селектори, потребителски и авторски стилове 
Височина, ширина и преливане - CSS правила за описание на областта на съдържанието в блоково оформление 
Размерни единици (пиксели, Em и Ex) и наследяване на правила в CSS Различен дизайн за интериор и външни връзкичрез CSS 
Селектори на псевдо-класове и псевдо-елементи в CSS (hover, first-child, first-line и други), връзки между Html код тагове 
Плаване и изчистване в CSS - инструменти за блоково оформление
Може би сте чували за CSS преди, но не знаете какво е това? В този урок ще научите какво е CSS и какво може да направи за вас.
CSS е акроним за ° Свъзходящ Сстил Сшапки/Каскадни стилове.
Какво можете да правите с CSS?
CSS е стилов език, който определя изобразяването на HTML документи. Например CSS се занимава с шрифтове, цвят, полета, линии, височина, ширина, фонови изображения, позициониране на елементи и много други неща. Бъдете търпеливи и вижте!
HTML може да се използва (неправилно) за проектиране на уебсайтове. Но CSS предоставя повече мощност и е по-прецизен и сложен. Понастоящем CSS се поддържа от всички браузъри (изгледи).
Само в няколко от уроците в този урок ще можете да създавате свои собствени таблици със стилове и да използвате CSS, за да направите уебсайта си да изглежда страхотно.
Каква е разликата между CSS и HTML?
HTML се използва за структуриране на съдържанието на страница. CSS се използва за форматиране на това структурирано съдържание.
Съгласен съм, звучи някак налудничаво. Но моля, прочетете нататък. Скоро всичко ще стане ясно.
Преди много време, когато Мадона беше девствена и човек на име Тим Бърнърс Лий изобрети световната мрежа, HTML се използваше само за показване на структуриран текст. Авторът може само да маркира текст: „това е заглавие“ или „това е параграф“, използвайки HTML тагове като
и
Като уеб дизайнеризапочнаха да търсят начини за форматиране на онлайн документи. За да отговорят на нарастващите изисквания на потребителите, производителите на браузъри (тогава Netscape и Microsoft) изобретиха нови HTML тагове като , които се различаваха от оригиналните HTML тагове по това, че дефинираха външен вид, а не структура.
Това също доведе до оригинални маркери за структуриране като