Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
ivashenco
6 / 6 / 1
Регистрация: 09.10.2013
Сообщений: 94
#1

Есть непонятные моменты по хтмл и ксс - HTML, CSS

10.09.2014, 14:31. Просмотров 354. Ответов 7
Метки нет (Все метки)

Приветствую друзья.
Ребят, я пытаюсь понять CSS и HTML, и по ходу изучения возникают вопросы. Если вы не против, по-задаю их тут.

Собственно возник вопрос.
Допустим есть HTML код:
HTML5
1
2
3
4
5
6
7
8
<ul id="blabla">
<li class="ololo">
<a href="site.com/some-page.html">link</a>
</li>
<li class="tututu">
<a href="site.net/second-page">second link</a>
</li>
</ul>
Есть к нему CSS:
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
ul#blabla {
    list-style: none; 
    }
 
ul#blabla li {
    float: ...;
    padding: ...;
    }
 
ul#blabla li a {
    text-indent: ...;
    height: ...;
    ....
    }
 
ul#blabla li ololo a {
    background-position: ...;
    }
 
ul#blabla li tututu a {
    background-position: ...;
    }
Вопросы:
1. почему в ul#blabla нет пробела перед селектором типа (ul), и селектором id (#blabla) а после них (например ul#blabla li) - он есть?
2.я так понял можно назначить внутри элемента <ul> стили для <li>, <a>?
3. я так понял при обозначения к какому стили применить тот или иной эффект в CSS нужно "таргетировать" по порядку (сначала обозначаем элемент потом класс а потом уже атрибут)? Т.е. сначала ul потом blabla потом li а уже потом a - по порядку "убывания"?
4. не могу понять логику CSS - там сначала назначается стили для ul в целом (ну как контейнера что ли... или оформление), потом для ссылок в списке и потом для каждого пункта в списке отдельно? Зачем тогда (к примеру) назначать стили для ссылок в целом, а потом уже отдельно для каждой? выходит - ul#blabla li a - там лишний? Или просто там указаны стили для элементов без class и id (т.е. для "всех остальных")?
5.Не легче отдельно назначить стили прописав в CSS что то типа:
CSS
1
2
3
4
5
6
7
.ololo {
    ... 
    }
 
.tututu {
    ....
    }

- без прописывания длинных значений (типа ul#blabla li ololo a)? или это делается, для того чтобы избежать применения одинаковых стилей для одинаковых классов? На сколько я знаю, если задать стиль для какого-то класса - то он применяться для всех подобных классов, независимо к каким элементам он относится. Но ведь тут есть выход - задавать уникальные классы для разных элементов?
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
10.09.2014, 14:31
Здравствуйте! Я подобрал для вас темы с ответами на вопрос Есть непонятные моменты по хтмл и ксс (HTML, CSS):

С чего начать ХТМЛ 4/5 и КСС - HTML, CSS
Привет друзья. Хочу познать прелести HTML и CSS. Но возник вопрос. С чего начать? С изучения ХТМЛ 4.01 или сразу к ХТМЛ 5? ...

КСС не цепляется! - HTML, CSS
Добрый вечер(день), у меня такая проблема, вроде бы делаю все правильно, но CSS не цепляется, помогите разобраться! Вот текст: &lt;head&gt; ...

Не работает ксс - HTML, CSS
Здравствуйте ) Не могу понять в чем проблема. написал код&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;...

не пойму. по КСС Х> У - HTML, CSS
Приветствую! не могу понять в чем ошибка, есть код : &lt;html&gt; &lt;head&gt; &lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html;...

Странная запись на ксс - HTML, CSS
Ребята вот встретил такое в коде в стилях. nart.start{color:#FF00FF;} А в коде хтмл уже такое например: &lt;nart...

Фреймы, ксс и кроссбраузер - HTML, CSS
Есть 2 фрейма, нужно было сделать общий фон, воспользовался этим: frameset { background: url(i.jpg); -moz-background-size:...

7
Ukkas
152 / 125 / 35
Регистрация: 02.05.2012
Сообщений: 573
10.09.2014, 14:52 #2
ivashenco,
Цитата Сообщение от ivashenco Посмотреть сообщение
1. почему в ul#blabla нет пробела перед селектором типа (ul), и селектором id (#blabla) а после них (например ul#blabla li) - он есть?
в ul#blabla нет пробела, потому что это обозначается один элемент, а пробел означает, что мы перешли к дочернему элементу li
Цитата Сообщение от ivashenco Посмотреть сообщение
2.я так понял можно назначить внутри элемента <ul> стили для <li>, <a>?
можно
Цитата Сообщение от ivashenco Посмотреть сообщение
Зачем тогда (к примеру) назначать стили для ссылок в целом, а потом уже отдельно для каждой?
например все ссылки на вашем сайте должны быть быть синие и подчеркиваться, а ссылки в меню должны быть, к примеру, розовые и без подчеркивания. Поэтому для ссылок в меню пишем свой стиль.
Цитата Сообщение от ivashenco Посмотреть сообщение
5.Не легче отдельно назначить стили прописав в CSS что то типа:
можно, никем не возбраняется. Но иногда бывают ситуации когда один и тот же класс находится внутри разных родителей и требуются разные стили, тогда прописываем весь, так сказать путь.
И кстати, в первом коде css есть ошибки
CSS
1
2
3
4
5
6
7
ul#blabla li.ololo a {
    background-position: ...;
    }
 
ul#blabla li.tututu a {
    background-position: ...;
    }
Как раз по причине пункта 1.

Добавлено через 2 минуты
Пропустила..
Цитата Сообщение от ivashenco Посмотреть сообщение
3. я так понял при обозначения к какому стили применить тот или иной эффект в CSS нужно "таргетировать" по порядку (сначала обозначаем элемент потом класс а потом уже атрибут)? Т.е. сначала ul потом blabla потом li а уже потом a - по порядку "убывания"?
Почти, от родителя к дочерним элементам. ul потом blabla - это один элемент, а вот li и a - уже дочернии
2
ivashenco
6 / 6 / 1
Регистрация: 09.10.2013
Сообщений: 94
10.09.2014, 15:25  [ТС] #3
Цитата Сообщение от Ukkas Посмотреть сообщение
И кстати, в первом коде css есть ошибки
да точно...

Значит когда присваиваешь стили, то элемент (в примере ul) и атрибут относящийся к нему (в примере #blabla) пишутся "слитно"... Спасибо, надо запомнить

Добавлено через 9 минут
У меня еще вопрос.
Вышеприведенный код можно в принципе написать в "разных стилях".
Например так:
CSS
1
2
3
4
5
6
7
ul#blabla li.ololo a {
    background-position: ...;
    }
 
ul#blabla li.tututu a {
    background-position: ...;
    }
или вот так:
CSS
1
2
3
4
5
ul#blabla li.ololo a {
    background-position: ...; }
 
ul#blabla li.tututu a {
    background-position: ...; }
тоже про HTML
Например так:
HTML5
1
2
3
4
5
6
7
8
<ul id="blabla">
<li class="ololo">
<a href="site.com/some-page.html">link</a>
</li>
<li class="tututu">
<a href="site.net/second-page">second link</a>
</li>
</ul>
или вот так:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<ul id="blabla">
<li class="ololo">
<a href="site.com/some-page.html">
link
</a>
</li>
<li class="tututu">
<a href="site.net/second-page">
second link
</a>
</li>
</ul>
Как видим в CSS в первом случае фигурная скобка на новой строке, во втором на одной строке с последним свойством. А в HTML анкор ссылки в одну строку с кодом ссылки, а в другом случае отдельно на новой строке.


Собственно эти случаи все корректные или нет?
И в догонку, дополнительные пробелы отступы (для "красоты") в коде сильно влияют на размер/загрузку/валидность и тд?


Не по теме:

вопрос модераторам - мне свои вопросы писать в одной теме или каждый в отдельной теме? просто если в отдельных темах - наспамлю тут вам 100500 тем вопросов может быть куча...

0
Ukkas
152 / 125 / 35
Регистрация: 02.05.2012
Сообщений: 573
10.09.2014, 15:37 #4
ivashenco, по поводу скобок в css практически личное дело, я предпочитаю, когда скобки стоят так:
CSS
1
2
3
ul#blabla li.tututu a {
    background-position: ...;
}
т.е. закрывающая скобка с новой строки и отступ на уровне начала элемента. Некоторые первую скобку прописывают с новой строки.

Про html. Если текст ссылки большой, то я бы писала ее с новой строки, просто что бы не крутить экран вправо-влево

А вот отступы нужны обязательно! Они как раз не для красоты, а помогают и вам, и кому-то после вас смотреть код, не ломая глаза. А так же намного виднее все ли открытые теги закрылись. Пример:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<ul id="blabla">
<li class="ololo">
<a href="site.com/some-page.html">
link
</a>
</li>
<li class="tututu">
<a href="site.net/second-page">
second link
</li>
</ul>
 
<ul id="blabla">
    <li class="ololo">
        <a href="site.com/some-page.html">
            link
        </a>
    </li>
    <li class="tututu">
        <a href="site.net/second-page">
            second link
    </li>
</ul>
в первом случае не так очевидно что забыли закрыть тег a
2
ivashenco
6 / 6 / 1
Регистрация: 09.10.2013
Сообщений: 94
10.09.2014, 16:16  [ТС] #5
а можно в примере вместо id у элемента ul писать class?
не так:
HTML5
1
2
3
4
5
6
7
<ul id="blabla">
    <li class="ololo">
        <a href="site.com/some-page.html">
            link
        </a>
    </li>
</ul>
а вот так:
HTML5
1
2
3
4
5
6
7
<ul class="blabla">
    <li class="ololo">
        <a href="site.com/some-page.html">
            link
        </a>
    </li>
</ul>
Просто почему спрашиваю, ul и li это элементы списка которые один без другого не используются.
Ну как бы они взаимосвязаны что ли... И в связи с этим не возникнет конфликта какого-нибудь?

Добавлено через 4 минуты
п.с. кстати небольшой косячек у меня - в ссылке нет http://
0
Ukkas
152 / 125 / 35
Регистрация: 02.05.2012
Сообщений: 573
10.09.2014, 16:16 #6
Цитата Сообщение от ivashenco Посмотреть сообщение
а можно в примере вместо id у элемента ul писать class?
можно, вообще для верстки предпочтительнее использовать классы, а id оставить для обработки элементов с помощью JS
2
ivashenco
6 / 6 / 1
Регистрация: 09.10.2013
Сообщений: 94
10.09.2014, 18:47  [ТС] #7
Лучший ответ Сообщение было отмечено автором темы, экспертом или модератором как ответ
В таком случае (если вместо id использовать class) CSS будет:

вместо
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
ul#blabla {
    list-style: none; 
    }
 
ul#blabla li {
    float: ...;
    padding: ...;
    }
 
ul#blabla li a {
    text-indent: ...;
    height: ...;
    ....
    }
 
ul#blabla li.ololo a {
    background-position: ...;
    }
 
ul#blabla li.tututu a {
    background-position: ...;
    }

таким:
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
ul.blabla {
    list-style: none; 
    }
 
ul.blabla li {
    float: ...;
    padding: ...;
    }
 
ul.blabla li a {
    text-indent: ...;
    height: ...;
    ....
    }
 
ul.blabla li.ololo a {
    background-position: ...;
    }
 
ul.blabla li.tututu a {
    background-position: ...;
    }
Я правильно понял?
А ничего, что там два селектора типа в одну строчку подряд идут (например, ul.blabla li.tututu a)?
0
Ukkas
152 / 125 / 35
Регистрация: 02.05.2012
Сообщений: 573
11.09.2014, 09:41 #8
ivashenco, все именно так) никаких проблем)
0
11.09.2014, 09:41
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
11.09.2014, 09:41
Привет! Вот еще темы с ответами:

Проблемы с ксс :: float - HTML, CSS
ест сайт http://plast.thedrot.com/catalogue/4 . там последний элемент li отображается справа, хотя у все прописан float: left; а мне...

Вывод блоков стилем КСС - HTML, CSS
Вот есть такой код? //прсомотр $query = &quot;select * from izbran&quot;; $res = mysql_query($query) or die(mysql_error()); while...

Простейший ксс: борьба с валидатором - HTML, CSS
Основные ошибки 1) there is no attribute &quot;background&quot;, в данном случае вместо backgrund может быть любое другое свойство, например...

Меню на ксс и списке(подкорректировать) - HTML, CSS
Приветствую, Столкнулся с проблемкой,нашел на форуме меню на CSS через список. Хочу сделать чтобы размер под-списка был такой же как и...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Рейтинг@Mail.ru