Каскадна таблица със стилове (CSS) е система за кодиране на уебсайтове, която позволява на дизайнерите да манипулират няколко функции наведнъж, като присвояват определени елементи на групи. Например, като използват код за фона на уебсайта, дизайнерите могат да променят цвета на фона или изображението на всички страници на уебсайта с една промяна в CSS файла. Ето как да създадете CSS за основен уебсайт.
Стъпки
Част 1 от 4: Писане на вграден CSS
Стъпка 1. Уверете се, че имате основни познания за HTML таговете
Трябва да знаете как работят етикетите и
src
и
href
атрибути.
Стъпка 2. Научете някои от основните свойства на CSS
Ще откриете, че има много имоти. Не е необходимо обаче да ги изучавате всички.
-
Някои добри основни свойства на CSS, които трябва да знаете, са
цвят
и
шрифтово семейство
- .
Стъпка 3. Научете за стойностите за всяко съответно свойство
Всички имоти се нуждаят от стойност. За
цвят
свойство, например, можете да поставите
червен
стойност.
Стъпка 4. Научете за
стил
HTML атрибут.
Използва се в елемент като
href
или
src
. За да го използвате, в кавичките след знака за равенство, поставете CSS атрибута, двоеточие и след това стойността на свойството. Това е известно като правило за CSS.
Стъпка 5. Разберете, че вграденият CSS обикновено не се използва за уебсайтове от професионални уеб разработчици
Вграденият CSS може да добави ненужен хаос към HTML документ. Това обаче е чудесен начин да се запознаете с това как работи CSS.
Част 2 от 4: Писане на основен CSS
Стъпка 1. Стартирайте програмата, която искате да използвате
Тя трябва да ви позволява да създавате HTML и CSS файлове.
Ако нямате инсталирана специална програма, можете да използвате Notepad или друг текстов редактор. Просто запишете файла си като текстов файл и CSS файл
Стъпка 2. Отворете HTML файла за вашия уебсайт
Трябва да го отворите и с HTML редактор, ако имате инсталиран такъв.
HTML редакторите ви позволяват да редактирате HTML и CSS едновременно
Стъпка 3. Създайте маркер в HTML заглавието си
Това ще ви позволи да пишете CSS без да е необходим отделен файл.
Стъпка 4. Изберете елемент, към който искате да добавите стил, и въведете името на елемента, последвано от набор от къдрави скоби ({})
За да направите кода си по -четлив, винаги поставяйте втората къдрава скоба на нейния ред.
Стъпка 5. Между скобите въведете вашите CSS правила, както бихте използвали
стил
атрибут.
Всеки ред трябва да завършва с точка и запетая (;). За да стане кодът ви четлив, всяко правило трябва да започва от собствен ред и всеки ред да бъде с отстъп.
Много е важно да се отбележи, че този стил ще засегне всички елементи от избрания тип на страницата. По -конкретен стил ще бъде разгледан в следващия раздел
Част 3 от 4: По -усъвършенстван CSS
Стъпка 1. Създайте CSS файл, а не HTML файл и го запазете с помощта на
.css
разширение.
Отворете и вашия HTML файл.
Стъпка 2. Създайте маркер в HTML главата си
Това ще ви позволи да свържете отделен CSS файл с вашия HTML документ. Вашият маркер за връзка се нуждае от три атрибута:
отн
Тип
и
href
-
отн
означава „връзка“и казва на браузъра каква е връзката с HTML документа. Тук тя трябва да има стойност на
"таблица със стилове"
- .
-
Тип
разказва с какъв тип медия се свързва. Тук тя трябва да има стойност на
"текст/css"
-
href
- тук се използва подобно на начина, по който се използва в елемент, но тук трябва да има връзка към CSS файл. Ако CSS файлът се намира в същата папка като HTML файла, само името на файла трябва да бъде записано в кавичките.
Стъпка 3. Изберете елементи от различни типове, към които искате да добавите един и същ стил
Добави
клас
атрибут на тези елементи и ги задайте равни на име на клас по ваш избор. Това ще придаде на вашите елементи същия стил.
Стъпка 4. Задайте какъв стил ще получи клас
Въведете името на класа във вашия CSS файл с точка (.), Предхождаща го (т.е.
.клас
).
Стъпка 5. Изберете единични елементи, към които искате да добавите специален стил и добавете
документ за самоличност
атрибут.
Идентификаторите се създават в CSS, използвайки символ за паунд (#), а не точка.
Идентификаторите са по -специфични от класовете, така че идентификаторът ще замени всеки стил на клас, ако има атрибут с различна стойност от класа
Част 4 от 4: Научете повече
Стъпка 1. Посетете w3 училищата
Това е официален уебсайт, насочен към обучение на умения за уеб разработка. W3 има много референции, изброени за HTML и CSS, както и за други уеб езици.
Стъпка 2. Намерете други сайтове, специално насочени към изучаване и преподаване на HTML и CSS
Сайтове като CSS tricks.com са специално насочени към преподаване на CSS и умения за уеб дизайн. Намирането на реномирани източници ще ви помогне в учебното ви пътуване.
Стъпка 3. Свържете се с уеб дизайнери и разработчици
Техният опит и ноу-хау могат да ви научат на ценни знания и умения.
Стъпка 4. Прегледайте изходния код на уебсайтовете, на които попадате
Преглеждането на CSS на добре развити уебсайтове може да ви покаже начини за проектиране на части от уебсайтове. Копирането му като практика и бъркането с кода може да ви помогне да научите как да използвате различни CSS атрибути.