Здравейте скъпи читатели на remontcompa! Казвам се Роман Нахват и представям на вашето внимание поредица от статии на езика на CSS3 стил. Съкращението CSS идва от английските таблици за каскадни стилове, което означава каскадни таблици със стилове. Стил или CSS е набор от опции за форматиране, приложени към елементи на HTML документ, за да се промени вида им. Самият HTML е само стандартен език за HTML документи и се използва за структуриране на съдържанието на HTML страница, така че HTML е само първата стъпка в процеса на научаване как да създавате сайтове. Следващата стъпка е да научим стилове или CSS, което ще направим. Има няколко начина за добавяне на стилове към уеб страница. Всеки метод се различава по своите възможности и предназначение. В тази статия ще разгледаме три начина за добавяне на стилове към HTML документ..

Само за сложно или научете CSS3. Част 1. Концепцията за CSS. Начини за свързване на CSS стилове с HTML документ

Създайте стандартна структура на HTML документ, както е показано по-долу.

Между таговете и напишете заглавието на HTML документа, например "Методи за свързване на CSS стилове"

Използване на маркери

и

добавете заглавие към уеб страницата с текста „Какво е CSS“

Под заглавието с помощта на маркери

и

създайте малък абзац с текст, както е показано по-долу

Запишете този документ на флаш устройство в папката CSS под индекса на името с разширението .html

Посочете индекса на името, изберете типа файл html

Получаваме следното.

Ще влезем в папката CSS, където се намира нашият запазен html документ с име индекс. Отворете го в уеб браузър

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

Използвайки атрибута за подравняване (присвоявайки му централната стойност), ще подравним заглавието с текста „Какво е CSS“ в центъра на уеб страницата

Получаваме следното.

Променете цвета на текста на абзаца от стандартен черен на друг. Използваме маркера

Има много html цветове, например за текста на абзаца на страницата, която създадохме, изберете цвета DeepSkyBlue

Задайте цветния атрибут на маркера на DeepSkyBlue

Ние презареждаме нашата уеб страница и виждаме, че текстът на абзаца е променил цвета си от черен на този, който посочихме

По същия начин променете цвета на заглавния текст, например, на червен.

Получаваме следното

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

След премахването на таговете ... и атрибута подравняване, получаваме оригиналния вид на уеб страницата

Ако по-горе променихме цвета и подредбата на текста на заглавието и абзаца на уеб страницата, използвайки html тагове, сега ще направим същото, но използвайки CSS. Както бе споменато по-горе, в тази статия ще разгледаме три начина за добавяне на стилове към уеб страница, а именно: Добавяне на вътрешни стилове към уеб страница; Добавяне на глобални стилове към уеб страница; Добавяне на свързани стилове към уеб страница; Помислете за добавяне на вътрешен стил към уеб страница Вътрешният стил е разширение към единичния маркер, който се използва на уеб страницата. Атрибутът стил се използва за определяне на стила, а неговата стойност е определен набор от правила за стил. Променете цвета на текста на заглавието на уеб страницата на червен и също го центрирайте, като използвате вътрешния стил. За да маркирате

добавете атрибута style, тогава ще запишем свойствата на стила, а именно: text-allign: center, color: red

Получаваме следното.

В резултат на това, отваряйки файла index.html в уеб браузър, виждаме, че текстът на заглавието на уеб страницата е червен и центриран.

По същия начин, използвайки атрибута style, променете цвета на текста на абзаца от стандартно черно към deepskyblue

Презареждаме страницата index.html и виждаме промяната в цвета на абзаца.

Променете цвета на текста на заглавието на уеб страницата на червен и го центрирайте, този път използвайки глобалния стил. Ако се прилага глобален стил, CSS свойствата са разположени между и таговете, а те (и таговете), от своя страна, са разположени между и таговете .

Между таговете и в къдравите скоби пишем свойствата на стила за заглавката на уеб страницата (таг)

), и за абзаца (таг

): h1 text-align: center; цвят: червен - поставете текста на заглавието в центъра на уеб страницата и променете цвета му на червен p color: deepskyblue - променете цвета на абзаца на deepskyblue

В резултат на това получаваме същия резултат като при използване на вътрешни стилове.

Помислете за последния начин за добавяне на стилове към уеб страница, а именно използването на свързани стилове. Същността на свързаните стилове е, че те са дефинирани във файл, отделен от html документа и имат разширение .css. Създайте още празен документ и го запишете на флаш устройство в папката CSS под стила на името и разширението .css

запази.

Създаден файл със стил с разширение .css

Оставете файла style.css празен за сега.

За да свържем html документа (в нашия случай това е index.html) с файла стил.css стила, използваме маркера. Маркерът трябва да бъде разположен вътре в таговете ... Нека напишем следния ред между таговете: където: rel = "stylesheet" - атрибут на тагове, който казва на уеб браузъра, че стиловете ще бъдат свързани; атрибутът href = "style.css" указва пътя към файла със стилове style.css

Когато създавате файлове за стил, трябва да се придържате към определени правила по-долу (същите правила трябва да се спазват при добавяне на глобални стилове) Един от основните елементи на файла със стил е селекторът. Селекторът определя към кой елемент в html документа да приложи определени параметри на стил. Селекторът е тагове, класове и идентификатори. След като селекторът е зададен, се поставят къдрави скоби, в които е регистрирано свойството стил, след това се посочва стойността му. Например, html етикетът h1 е посочен като селектор в диаграмата по-долу, цвят: като свойство стил, се записва стойността на свойството стил

Тъй като искаме да поставим заглавния текст (таг

) в центъра на уеб страницата и задайте текста на червено, както и текста на абзаца (маркер)

) показване в цвят deepskyblue, в стила на файла style.css пишем редовете: h1 text-align: center; цвят: червен и p цвят: deepskyblue където: h1 text-align: center; цвят: червен - подравнете текста на заглавието ("Какво е CSS е") в центъра и задайте текста на червено p color: deepskyblue - задайте текста на абзаца ("CSS е езикът на стила, който определя ...") цветът deepskyblue

В резултат на свързването на style.css файла с html документ index.html, виждаме, че текстът на заглавието на уеб страницата е центриран и има червен цвят. Текстът на абзаца също промени цвета си на deepskyblue

Продължение в статията: Само за сложно или научете CSS3. Част 2. Видове CSS селектори