4 начина за създаване на CSS

Съдържание:

4 начина за създаване на CSS
4 начина за създаване на CSS

Видео: 4 начина за създаване на CSS

Видео: 4 начина за създаване на CSS
Видео: Джон Ундеркоффлер о будущем ПИ 2024, Март
Anonim

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

Стъпки

Част 1 от 4: Писане на вграден CSS

Създайте CSS Стъпка 1
Създайте CSS Стъпка 1

Стъпка 1. Уверете се, че имате основни познания за HTML таговете

Трябва да знаете как работят етикетите и

src

и

href

атрибути.

Създайте CSS Стъпка 2
Създайте CSS Стъпка 2

Стъпка 2. Научете някои от основните свойства на CSS

Ще откриете, че има много имоти. Не е необходимо обаче да ги изучавате всички.

  • Някои добри основни свойства на CSS, които трябва да знаете, са

    цвят

    и

    шрифтово семейство

  • .
Създайте CSS Стъпка 3
Създайте CSS Стъпка 3

Стъпка 3. Научете за стойностите за всяко съответно свойство

Всички имоти се нуждаят от стойност. За

цвят

свойство, например, можете да поставите

червен

стойност.

Създайте CSS Стъпка 4
Създайте CSS Стъпка 4

Стъпка 4. Научете за

стил

HTML атрибут.

Използва се в елемент като

href

или

src

. За да го използвате, в кавичките след знака за равенство, поставете CSS атрибута, двоеточие и след това стойността на свойството. Това е известно като правило за CSS.

Създайте CSS Стъпка 5
Създайте CSS Стъпка 5

Стъпка 5. Разберете, че вграденият CSS обикновено не се използва за уебсайтове от професионални уеб разработчици

Вграденият CSS може да добави ненужен хаос към HTML документ. Това обаче е чудесен начин да се запознаете с това как работи CSS.

Част 2 от 4: Писане на основен CSS

Създайте CSS Стъпка 6
Създайте CSS Стъпка 6

Стъпка 1. Стартирайте програмата, която искате да използвате

Тя трябва да ви позволява да създавате HTML и CSS файлове.

Ако нямате инсталирана специална програма, можете да използвате Notepad или друг текстов редактор. Просто запишете файла си като текстов файл и CSS файл

Създайте CSS Стъпка 7
Създайте CSS Стъпка 7

Стъпка 2. Отворете HTML файла за вашия уебсайт

Трябва да го отворите и с HTML редактор, ако имате инсталиран такъв.

HTML редакторите ви позволяват да редактирате HTML и CSS едновременно

Създайте CSS Стъпка 8
Създайте CSS Стъпка 8

Стъпка 3. Създайте маркер в HTML заглавието си

Това ще ви позволи да пишете CSS без да е необходим отделен файл.

Създайте CSS Стъпка 9
Създайте CSS Стъпка 9

Стъпка 4. Изберете елемент, към който искате да добавите стил, и въведете името на елемента, последвано от набор от къдрави скоби ({})

За да направите кода си по -четлив, винаги поставяйте втората къдрава скоба на нейния ред.

Създайте CSS Стъпка 10
Създайте CSS Стъпка 10

Стъпка 5. Между скобите въведете вашите CSS правила, както бихте използвали

стил

атрибут.

Всеки ред трябва да завършва с точка и запетая (;). За да стане кодът ви четлив, всяко правило трябва да започва от собствен ред и всеки ред да бъде с отстъп.

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

Част 3 от 4: По -усъвършенстван CSS

Създайте CSS Стъпка 11
Създайте CSS Стъпка 11

Стъпка 1. Създайте CSS файл, а не HTML файл и го запазете с помощта на

.css

разширение.

Отворете и вашия HTML файл.

Създайте CSS Стъпка 12
Създайте CSS Стъпка 12

Стъпка 2. Създайте маркер в HTML главата си

Това ще ви позволи да свържете отделен CSS файл с вашия HTML документ. Вашият маркер за връзка се нуждае от три атрибута:

отн

Тип

и

href

  • отн

    означава „връзка“и казва на браузъра каква е връзката с HTML документа. Тук тя трябва да има стойност на

    "таблица със стилове"

  • .
  • Тип

    разказва с какъв тип медия се свързва. Тук тя трябва да има стойност на

    "текст/css"

  • href

  • тук се използва подобно на начина, по който се използва в елемент, но тук трябва да има връзка към CSS файл. Ако CSS файлът се намира в същата папка като HTML файла, само името на файла трябва да бъде записано в кавичките.
Създайте CSS Стъпка 13
Създайте CSS Стъпка 13

Стъпка 3. Изберете елементи от различни типове, към които искате да добавите един и същ стил

Добави

клас

атрибут на тези елементи и ги задайте равни на име на клас по ваш избор. Това ще придаде на вашите елементи същия стил.

Създайте CSS Стъпка 14
Създайте CSS Стъпка 14

Стъпка 4. Задайте какъв стил ще получи клас

Въведете името на класа във вашия CSS файл с точка (.), Предхождаща го (т.е.

.клас

).

Създайте CSS Стъпка 15
Създайте CSS Стъпка 15

Стъпка 5. Изберете единични елементи, към които искате да добавите специален стил и добавете

документ за самоличност

атрибут.

Идентификаторите се създават в CSS, използвайки символ за паунд (#), а не точка.

Идентификаторите са по -специфични от класовете, така че идентификаторът ще замени всеки стил на клас, ако има атрибут с различна стойност от класа

Част 4 от 4: Научете повече

Създайте CSS Стъпка 16
Създайте CSS Стъпка 16

Стъпка 1. Посетете w3 училищата

Това е официален уебсайт, насочен към обучение на умения за уеб разработка. W3 има много референции, изброени за HTML и CSS, както и за други уеб езици.

Създайте CSS Стъпка 17
Създайте CSS Стъпка 17

Стъпка 2. Намерете други сайтове, специално насочени към изучаване и преподаване на HTML и CSS

Сайтове като CSS tricks.com са специално насочени към преподаване на CSS и умения за уеб дизайн. Намирането на реномирани източници ще ви помогне в учебното ви пътуване.

Създайте CSS Стъпка 18
Създайте CSS Стъпка 18

Стъпка 3. Свържете се с уеб дизайнери и разработчици

Техният опит и ноу-хау могат да ви научат на ценни знания и умения.

Създайте CSS Стъпка 19
Създайте CSS Стъпка 19

Стъпка 4. Прегледайте изходния код на уебсайтовете, на които попадате

Преглеждането на CSS на добре развити уебсайтове може да ви покаже начини за проектиране на части от уебсайтове. Копирането му като практика и бъркането с кода може да ви помогне да научите как да използвате различни CSS атрибути.

Препоръчано: