CSS Обратно към основните термини, обяснени
CSS или Cascading Stylesheets допълват определящия език на правилата за проектиране за нашата мрежа. Изпълнителите навсякъде използват CSS ежедневно, за да създават, организират и кодират набори от правила за основните оформления на уебсайтове. Това се превърна в най-популярния език за дизайн на предния край и предоставя невероятни способности с неотдавнашната версия на CSS3. Но какво всъщност означава целият този код?
Самият език е напълно развит от няколко години. Объркването може да възникне най-вече поради неразбиране и злоупотреба с подобни термини. CSS представя много нови концепции в таблицата. Ще разгледаме някои от най-популярните терминологии за овладяване на CSU гуру.
Защо специализираме с CSS?
Този въпрос беше поставен и преди и дори да влезем в 2011 г., можем да видим същите резултати, които се появяват. CSS е силен език, който не се харесва на скриптове или програмиране. Това е език на стила, по-конкретно код, използван за описание на начина, по който трябва да се държи уеб страницата.
С помощта на CSS можем директно да манипулираме атрибути от отделни HTML елементи. Всички блокове, параграфи, връзки и изображения могат да бъдат засегнати чрез CSS правила. Усъвършенстването на семантиката на представянето в мрежата винаги е било огромна стъпка. Това е основната причина CSS да е все още водещ играч за дизайнерите - никой не е създал нищо по-добро!
Свойства и стойности
Това е най-простият начин да се пробие в CSS. Всички кодове се разделят на две действия: избор на елемент за прилагане на дизайна и какво да се прилага. Последното се създава чрез двойки собственост / стойност.
Като пример цвят: червен; е много проста двойка собственост / стойност. Имотът, който използвахме, е цвят което ни позволява да преминем във всяко приемливо стойност за да промените цвета на текста. Това може да бъде и шестнадесетичен код или RGB (червено-зелено-синьо) цветни данни. Много пъти дизайнерите няма да споменават идеята за ценностите, защото могат да бъдат подвеждащи.
Свойствата и стойностите са една единствена идея. Всяка декларация за собственост изисква стойност, а ценностите сами по себе си са безсмислени. Има много онлайн документация, която разглежда много различни свойства и как те влияят на HTML елементи. Препоръчвам ви да закупите справочник за CSS от всеки близък книжен магазин. Те са доста евтини и притежават повечето информация, от която се нуждаете.
Стойности на селектора
Необходими са селектори за завършване на цяла линия от CSS код. Това е, което ние декларираме, за да определим какъв тип елемент се насочва. Има много селектори и много от тях са толкова сложни, че средният дизайнер няма да се нуждае от уменията. Проверете селекторните документи на W3, ако искате да научите повече.
Най-простият начин за започване на дефиниции на стил е да се използват голи елементи като селектори на собствеността. Това означава манипулиране на корен като например р за параграфи, Разделение за разделения и дори тяло и HTML може да се използва за манипулиране на целия документ на уеб страницата. По-долу е показан кратък пример за стилизиране на всички елементи на абзаца.
p семейство на шрифта: Arial, sans-serif; цвят: # 222; тегло на шрифта: удебелен;
Това, което дава на CSS реалното тегло, е доколко точен селектор може да бъде. Най-добрият начин за постигане на целеви стилове е чрез два метода, известни като класове и документи за самоличност. Това са често срещани идеи в HTML, където можете да настроите всеки елемент да има идентификатор и стойност на класа чрез атрибути. След това с помощта на CSS е лесно да приложите стилове към този конкретен блок.
p # firstpar размер на шрифта: 14px; / * стилове абзац с ID на "firstpar" * / p.comment font-size: 1.0em; line-height: 1.3em; / * стилове параграф (а) с клас "коментар" * /
Дължина единици и стойности
Често пъти тези термини се смесват, а не голяма изненада. Стойностите бяха обяснени по-рано като разположение, което използваме за описване на свойство. Дължините са също стойности, които се използват за описване на собственост.
Разликата е, че тези стойности изискват числени данни и следователно трябва да върнат някаква форма на единици. Пикселите (px) са най-разпространени и могат да се използват за повечето неща: ширина / височина, размер на шрифта, подложка / полета, за да назовем няколко.
С изключение на тези, можете да видите проценти (%), използвани често чрез флуидни оформления. Когато зададете стойности на ширината на процент, компилаторът ще приеме 100% за цялата ширина на уеб браузъра. Това дава много прецизност на дизайнерите, когато прилагат стилове за структурите на оформлението и дори типографията на страниците.
Блок за деклариране
Сега, след като поставим всички тези термини заедно, най-накрая можем да обсъдим основната идея зад стиловете. Блокове с код се използват за очертаване на тематичните области и уточняване на елементите. Например, по-долу е ред на код за обикновен контейнер за навигация:
div # nav display: block; ширина: 100%; пълнеж: 3px 6px; margin-bottom: 20px;
Най-лесният начин да покажете този код е да подредите свойствата един след друг. CSS разработчиците са използвали блокове от код, за да разделят всеки имот върху собствената си линия. Този дневен ред не само отнема много повече място, но и намалява способността за “обезмаслен” вашия лист, за да намерите точно това, което ви трябва.
По-добрият начин да се разделят блоковете от код е отделянето на сложни елементи в техните собствени, след като достигнат праг. Този номер е личен и ще бъде различен между разработчиците. Това е точката на преобръщане, когато логиката му диктува глупаво да държи всичко на един ред, най-вече заради четливостта.
По-долу съм написал пример за блок от навигационни свойства всички заедно. Тази практика поддържа по-дълбоки елементи в едно и също място, така че редактирането на всички навигационни елементи е много по-просто.
div # nav display: block; ширина: 100%; пълнеж: 3px 6px; margin-bottom: 20px; div # nav ul списък-стил: няма; дисплей: блок; div # nav ul li float: left; margin-right: 10px; размер на шрифта: 12px; div # nav ul li a цвят: # 0f0f0f; текст-декорация: няма; дисплей: вграден блок; пълнеж: 2px 5px;
Възможни подобрения от CSS2 / CSS3
В заглавията наскоро бе непрекъснато да се говори за невероятните ползи от CSS3. Но това, което наистина има променен на езика? Ясно е, че старият код все още ще работи добре. Това поне показва пълна обратна съвместимост между компилаторите (винаги е добро нещо).
Основните различия са свързани най-вече с нови имоти. Те позволяват заоблени ъгли и ефекти на падащи сенки да се визуализират в браузъра. CSS3 предлага и нови инструменти за описание на цветовете в документа. HSL (Hue-Saturation-Lightness) е най-новото в допълнение към HSLA, което включва алфа канал за намаляване на непрозрачността.
Селекторите на атрибути са огромна крачка напред по отношение на правилния стил на маркиране. С този стил на код можете да насочите конкретно име на елемент, който съдържа атрибути с определени стойности. Те са най-вече полезни при работа с маркиране като XML, където няма стандартни принципи на проектиране за манипулиране на възли. Примерът по-долу е относително проста идея:
div [attrib ^ = "1"] / * стилове тук * /
Горният код е част от библиотеката на CSS селекторите. Това ще засегне всички div елементи с атрибут “приписвам” което също притежава стойността “1”. Ако това все още е объркващо, посочете примера по-долу, за да се изясни. На теория тези два селектора трябва да изпълняват същите действия.
p [id ^ = "primary"] / * стилове * / p # primary / * styles * /
заключение
След разбиването на някои от най-прекалено обърканите термини CSS изглежда като разходка в парка. Езикът е много интуитивен и начинаещите могат да започнат да проектират в рамките на първите няколко часа на ръка. Това прави CSS толкова популярна сред уеб разработчиците.
Ползите от CSS3 току-що започнаха да действат. През новите няколко години развиващите се уеб тенденции ще ни покажат колко много контрол имаме над дизайна на уеб страниците. Понастоящем CSS се гордее като доминиращ език за стайлинг на предния уебсайт. Практикуването в дори елементарни умения на средно ниво може да доведе до изобилие от дизайн и допълнителни знания.
