[CSS] Домашно CSS Overview - 3 задача - сезон 2012/2013


14

Нека тук коментираме задача 3та ( стилизирането по готова снимка ) от CSS Overview.

Ето моето решение:

https://www.dropbox.com/s/6e946hspnmq2gs9/03.%20SimpleWebPage.rar

Относно решението:

Не съм добавял никакви допълнителни класове или id - та, а съм използвал единствено каквото ни е било предоставено като HMTL файл.

Тук обаче имам един въпрос: Задължително ли е да използваме всички 4 псевдо селектори на "a" (:link, :visited, :hover, :active) или може само които ни трябват ?




Отговори



3
Мисля, че не е задължително да ползваш всичките селектори, но не съм съвсем сигурна как ще изглеждат тези, които не си задал - Мисля, че наследяват вида на основния - а:link - него поне задай.

от pepakam (426 точки)


0
Да него и :visited съм задал. Просто се чудех дали е нужно. Мерси за инфото :)

от Teodor92 (13062 точки)


3
Според мен колкото повече толкова повече :) В крайна сметка колкото повече неща научиш и вкараш в домашното толкова по-добре за теб.
Аз бих посъветвал да разгледаш CSS3 Selectors - http://www.w3.org/TR/selectors/ дори да има класове на някои елементи, експериментирай с тези селектори :)
http://jsfiddle.net/XCQcF/ - това е моето решение, и както винаги вкарвам нещо и от себе си.

от Herowar (0 точки)


0
Линкът, който е сложен под всеки footer на article-ите не трябва да е bold, както е при теб. Не че е кой знае колко фатално, просто го забелязах :)


0
Да, не знам дали нарочно така си го направил, но там параграфите и линовете на снимката са с един и същ шрифт

от Plamen.Minkov (216 точки)



9

Доколкото знам, е добра практика да се дефинират предварително LVHA за хипервръзките, 

a:link {}
a:visited {}
a:hover {}
a:active {}

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

И аз не съм пипала кода, който са ни дали, не съм добавяла никакви допълнителни класове/id-та, макар че се изкушавах да редактирам всички h1 след първото, тъй като нали не е редно h1 да е повече от един брой на страница: http://jsbin.com/onujel/1/

Иначе, като коментар по твоето решение: в записи като този ul li a:visited не е нужно да се нества толкова дълбоко - ясно е, че всяко li се намира в ul, така че можеш да не го пишеш - пишеш директно li a:visited. Ако стилизирането ще се отнася за всички линкове, а не само за тези в навигацията, които са вътре в списъка, даже и от li няма нужда, директно a:visited.

По същия начин можеш да олекотиш нестването при section article a:link - няма нужда от section отпред, след като тук има само един section, а всички линкове в articles в него ги стилизираш еднотипно.

Колкото по-малко нестваш, толкова по-добре, тъй като кодът ще се рендира по-бързо.

Друго какво да кажа - много е хубаво, че даже и коментари си сложил, добра практика е, за да се ориентира човек кое къде да търси. :)

Иначе при писането на стиловете също е много прегледно да се индентва, така че можеш да опиташ, ако искаш.


от dpeeva (1139 точки)


0
Мерси за супер подробни коментар и много благодаря за препоръките ! 1. За h1 в HTML5 е разрешено да имаме повече от 1 на страница, но не трябва да прекаляваме т.к. Google се сърди :) 2. С нестването наистина съм прекалил и ще го намаля :) 3. Иначе за индентването ще направя един рефакторинг на кода и ще го добавя :)

от Teodor92 (13062 точки)

0
Само да добавя, че има значение последователността на добавяне. Трябва да са точно в реда, по който ги е дала колежката. Имала съм случай, в които някои от псевдокласовете не работят, точно заради объркване в последователността им на дефиниране.




2

Здравей,

В отговор на твоя въпрос можеш да погледнеш темата Псевдокласове на елемента <a> - добре ли е всички да се използват? Там Иван Жеков беше дал доста подробно обяснение.

Същото го бях постнал само преди ден тук, но явно не си го забелязал :).

Поздрави!


от georgi.s.yankov (6219 точки)


0
Много благодаря ! Напоследък форума е голяма лудница и съм ги пропуснал :)

от Teodor92 (13062 точки)

0
Моля ;). Сега ти попрегледах и кода като имам няколко препоръки.
1. Пропуснал си да зададеш енкодинга, който е добре винаги да стои над
2. Текстът във
също можеш да си го обградиш в параграф както си го направил и на останалите места:

Telerik Software Academy 2012 - CSS Course


3. В .css файла за цветовете си използваш както големи, така и малки букви. Пример: background-color: #a9a9a9; color: #FFFFFF;
Спри се на единия от двата варианта, т.е. или само с големи или само с малки букви. Бъди консистентен. Освен това можеш да си съкратиш #FFFFFF на #FFF, както си го направил и за #000.

от georgi.s.yankov (6219 точки)



2

Според мен като цяло задача 3 не е никак трудна, но имам  притеснение:

 Картинката по която трябва да работим се различава като съдържание от html файла( липсва параграф и част от информацията в тях)

Въпросът ми е :

Трябва ли просто да стилизираме по образеца или трябва да изглежда точно като на картинката. Ако е така то ще трябва да има и overflow например в CSS файла.

 


от profesor4eto (0 точки)


0
И аз се присъединявам към въпроса на колегата. Ще е добре дако има кой да ни отговори :)


0
Според мен е по образец

от Mahata231 (1351 точки)



3
JSFiddle: http://jsfiddle.net/kirov/y6gFb/5/
Архив в Dropbox: https://www.dropbox.com/s/u1qg2mx6qgo9c3a/03.WebPage.zip
Видях, че някои от вас са коригирали HTML-a. Мисля, че идеята е да се упражнят селекторите и да не се променя HTML-a.
И също така не можах да разбера дали линковете в листа, трябва да са с :hover :active и т.н. Реших, че е трябва :D
Едит: В JSFiddle се получава странен бъг при главния header(h1). В браузърите всичко е ок. :)

от kirov (4821 точки)


0
Цвета на h1 не е бял. Аз съм го направил #fafad2.

от vphilipov (3591 точки)

0
Тогава го нямах това тулче за цвета. Сега и аз виждам, че е това цвета, но не само на h1, ами на всички хедъри. Благодаря, ще го оправя. Само, че понякога при разваляне на качеството на снимката може да се промени цветът на някои пиксели. :)

от kirov (4821 точки)


0
Здравейте,
Съгласен с колегата, че HTML-а не трябва да се променя.
Може всичко да се стилизира без каквато и да е промяна. Аз не съм специалист в тази област, но единственото, което ме затрудни беше подчертавката на един от елементите на ul-a.
Предполагам, че вече сте го направили, но ако има някой дето се чуди как става, ето един типс: nth-last-child(n)

от psabinski (129 точки)


0
Колега, а как направи background-color на втория елемент от списъка?

от profesor4eto (0 точки)

0
Аз останах с впечатлението, че последния линк е подчертан с идеята :hover:underline, а не че трябва винаги да е почертан.

от slavii (0 точки)



0
Ето и моето решение:https://www.box.com/s/cjrplvpr8y7el2zfc1zk

от rcson (360 точки)


0
https://www.dropbox.com/s/5p3cid49buoxaks/3.0%20Rework%20with%20css.rar Добавял съм id-та и класове, защото не пише да не се пипа html-a, но все пак приемам коментари и критики .

от Georgi Georgiev 1 (0 точки)


0
Едно скромно решение от мен
http://jsfiddle.net/Hrisi/KjyPR/

от hrisi (224 точки)


0
Може да добавиш цвета на заглавията - жълтичък, че сега май ти е бял като на менюто.

от son4etyyy (416 точки)

0
Еми аз ги виждах като бели, но сега като ми каза се загледах и май наистина са жълтички, почвам да се съмнявам да не съм далтонист :). Мерси за което

от hrisi (224 точки)