Новые сообщения · Участники · Правила форума · Поиск
Страница 1 из 212»
Форум о uCoz и Web » Веб-программирование и дизайн » CSS » CSS - Введение (Урок 1)
CSS - Введение
SleepWalkerДата: Вторник, 15.07.2008, 16:31 | Сообщение # 1
Admin
Сообщений: 5493
Репутация: 487
Социальная репутация:

Статус: Offline
CSS - Введение

В этой теме я постараюсь изложить вам основы основ CSS.

Первый урок

Это первый урок, из серии уроков про CSS. В этом уроке мы расмотрим:

  • Предистроия CSS
  • Размещение стилей на HTML страницах, классы и идентификаторы
  • Немного про написание хорошего, понятного кода

    Ну что ж, приступим?

    В первые годы существования сеть WWW была не более чем набором связаных документов, форматированных и структурированных с помощью HTML. По мере увеличения популярности WWW язык HTML все больше использовался в презентационных целях. Вместо заголовочных элементов разработчики стали применять атрибуты и полужирные шрифты для создания визуальных эффектов. Таблицы HTML были предназначены для вывода табличных данных, однако они сразу же начали применятся для верстки страниц.
    Довольно быстро средства HTML потеряли свое первоначальное значение, и код стал маловразумительным нагромождение дескрипторов. После этого появились WYSISYG (What You See Is What You Get - что видим, то и получаем), но вместо того чтобы упростить ситуацию, инструменты WYSISYG только усугубили ее: они дополнительно добавили в код HTML огромное количество дескрипторов, понять которые стало еще труднее. В общем ситуация стала невыносимой, и нужно было что-нибудь предпринять.
    И тогда появились таблицы CSS. Благодаря им возникла возможность управлять внешним видом страницы, не вторгаясь в нее, и отдалить презентационные аспекты документа от его содержимого. Разметка опять стала простой, а дизайнеры вновь стали интересоваться кодом документа. Появилась возможность переопределять стили браузера. Дизайнеры стали применять элементы HTML, основываясь не на их внешнем виде, а на том, каковы их функции.

    Ну вот, с историей мы разобрались. Теперь давайте уделим наше внимание CSS.
    Есть три варианта "пометить" HTML элемент для того, что б присвоить ему стиль.

  • Через классы
  • Через идентификаторы
  • Написать стиль в самом элементе

    Немного больше подробностей:
    Классы и идентификаторы являются именами, к которым можно "привязать" стиль из таблицы CSS. Чаще всего используют классы, частично из-за того, что классы можно применять к нескольким элементам одновременно. Для того, что б присвоить какому-то элементу класс ничего сложного делать не надо:
    <a href="http://example.com" class="firstLink">...</a>
    <a href="http://example.com" class="secondLink">...</a>
    <a href="http://example.com" class="secondLink">...</a>
    <a href="http://example.com" class="firstLink">...</a>
    Для имени класса (и идентификатора) можете использовать любые слова, но имя должно начинаться с буквы (следующими могут быть цифры, нижнее подчеркивание "_", дефис "-", и понятное дело другие буквы). Так же все эти имена устойчивы к регистру букв, тоесть firstLink и firstlink - разные имена.

    Идентификаторы мало, чем отличаются от классов. Идентификаторы присваиваются с помощью атрибута id и в отличие от классов идентификатор должен быть уникальным, тоесть он может присваиваться только одному элементу на странице:
    <a href="http://example.com" id="firstLink">...</a>
    <a href="http://example.com" id="secondLink">...</a>
    <a href="http://example.com" id="secondLink">...</a> - второй раз уже нельзя..

    В таблицах CSS стили, присваиваемые через идентификатор начинаются со знака "#", а через класс со знака ".", но про это позже.

    Ну и, наконец, последний способ - написать стиль непосредственно в элементе:
    <a href="http://example.com" style="Вот здесь пишут стили, про которые вы узнаете в следующих уроках">...</a>
    Ура! Теперь мы знаем как "прикрепить" стиль к HTML элементу. Наступила очередь CSS таблиц.

    Таблицы могут находится в отдельном файле или просто на странице в специальных тегах <style>...</style> или <link>
    Что б вставить таблицу CSS на страницу мы используем тег <style>:
    <style type="text/css">
    /* Тут могли быть ваши стили smile */
    <!--
    @import url('сслыка на таблицу');
    -->
    </style>

    С помощью @import url можно подключать внешние файлы к таблице, так же это можно делать с помощью тега <link>, но он не должен находится между тегами <style>...</style>
    <link href="ссылка на внешний файл" rel"stylesheet" type="text/css">

    В CSS как и во многих языках можно делать комментарии:
    //вся строка после символов "//" является комментарием
    /* эта строка - комментарий
    и даже эта, пока не доберется до символа "*/" */

    Для присвоения стиля в таблицах CSS используются селекторы. В практике Web-дизайна чаще всего используются селекторы типов и нисходящие селекторы.
    Селектор типа используется для присвоения стиля всем элементам заданного типа, например всем гиперссылкам, абзацам, заголовкам. Для создания селектора типа нужно всего лишь поместить в таблице CSS имя элемента (т.е. типа) перед определение стиля, как в приведенных ниже примерах:
    p {color: black;} //между "{" и "}" находятся стиль. в данном случае все абзацы станут черного цвета
    a {text-decoration: underline;} // все ссылки будут подчеркнуты
    h1 {font-weight: bold;} // все заголовки будут выведены жирным
    Про сами "команды" стилей мы поговорим с вами позже, а сейчас наша цель узнать про нисходящие селекторы.
    Нисходящие селекторы позволяют присваивать стили элементам, вложенным в заданные элементы или группы элементов. Нисходящий селектор создается путем добавления пробела между двумя селекторами. В следующем примере заданный стиль будет присваиваться только гиперссылкам (дескриптор а), вложенным в элементы списков (дескриптор li). Следовательно, данный стиль не повлияет на гиперссылки, расположенные в простых абзацах (тег р)
    li a {text-decoration: underline;}
    Для более специфичного задания элементов используются селекторы идентификаторов и классов. Именно с помощью них мы можем присвоить стиль элементам имеющим идентификаторы (id) и/или классы (class). Для первого используется символ "#", а для второго "точка". В приведенном ниже примере первый стиль присваивает полужирный шрифт элементу intro, а второй задает вывод всех элементов класса datePosted зеленым цветом.
    #intro {font-weight: bold;}
    .datePosted{color: green;}

    <p id="intro"> Некотрый текст</p>
    <p class="datePoster>01.02.03</p>

    Примечание: Не злоупотребляйте именами идентификаторов и классов. Например, если нужно стилизировать заголовки в разных областях страницы по-разному не используйте для них личные классы. Существует более простой и элегантный способ решить эту проблему:
    #mainContent h1 {font-size: 1.8em;}
    #secondaryContent h1 {Font-size: 1.2em;}

    <div id="mainContent">
    <h1>Добро пожаловать на мой сайт!</h1>
    ...
    </div>
    <div id="secondaryContent">
    <h1>Последние новости</h1>
    ...
    </div>

    Приведенный пример прост и очевиден. Тем не менее, примененные в нем четыре типа селекторов предоставляют мощный и гибкий инструмент присвоения стилей огромному количеству элементов. Количество классов должно быть как можно меньшим. Слишком большое количество классов - верный признак того, что документ плохо структурирован (на юкозе классов многовато, но дело в том что это делалось что б пользователи могли изменить внешний вид каждого элемента (нам же не дают менять полностью весь код)). Что бы уменьшить их количество, подумайте, чем элементы разных классов отличаются друг от друга. Довольно часто обнаруживается, что они отличаются только внешним видом на экране. Вместо присвоения им разных классов попытайтесь присвоить класс или идентификатор их родительскому элементу, а затем присваивайте им стили с помощью нисходящих селекторов.

    Про написание понятного кода будет совсем немного smile
    Используйте понятные для вас имена
    Плохое имя: hsdkjw
    Хорошее имя: mainNav
    Оставляйте комментарии, где это уместно
    Старайтесь писать код так, что б он был легко читаемым и понятным для вас

    Автор: SleepWalker(http://udf.su/)

    Как установить кнопки социальных сетей?

    Time Waits For No One
  •  
    KarenДата: Воскресенье, 27.12.2009, 14:34 | Сообщение # 2
    Рядовой
    Сообщений: 1
    Репутация: 0
    Социальная репутация:

    Статус: Offline
    А где находиться CSS ??????????????
     
    b1okiДата: Пятница, 19.02.2010, 15:44 | Сообщение # 3
    Рядовой
    Сообщений: 1
    Репутация: 0
    Социальная репутация:

    Статус: Offline
    Quote (Karen)
    А где находиться CSS ??????????????

    Обычно в папке с самим документом, расширение *.css.
     
    kaZimДата: Среда, 31.03.2010, 20:22 | Сообщение # 4
    Сержант
    Сообщений: 35
    Репутация: 3
    Социальная репутация:

    Статус: Offline
    А можно сделать пример для фона???? Пожалуйсто!
     
    ZenexДата: Четверг, 01.04.2010, 23:19 | Сообщение # 5
    Лейтенант
    Сообщений: 74
    Репутация: 12
    Социальная репутация:

    Статус: Offline
    Как понять пример?
     
    ValeДата: Пятница, 31.12.2010, 14:15 | Сообщение # 6
    Рядовой
    Сообщений: 16
    Репутация: 0
    Социальная репутация:

    Статус: Offline
    Есть хорошая програмка по работе с css adobe dreamweaver называется, если можно то дам сайтик по видеоурокам с css, очень полезная штука.

    Добавлено (31.12.2010, 14:15)
    ---------------------------------------------

    Quote (kaZim)
    А можно сделать пример для фона???? Пожалуйсто!

    Можно
     
    GhostДата: Пятница, 31.12.2010, 15:22 | Сообщение # 7
    Генералиссимус
    Сообщений: 1298
    Репутация: 122
    Социальная репутация:

    Статус: Offline
    Vale, и у тебя это работает?
     
    EstennyДата: Пятница, 31.12.2010, 17:52 | Сообщение # 8
    Злой Принц
    Сообщений: 3005
    Репутация: 120
    Социальная репутация:

    Статус: Offline
    Qwerty, ахах smile нет. Точнее будет работать так:
    Code
    body {  
    background:url(ссылка на картинку) no-repeat цвет фона;
    }
     
    GhostДата: Пятница, 31.12.2010, 19:20 | Сообщение # 9
    Генералиссимус
    Сообщений: 1298
    Репутация: 122
    Социальная репутация:

    Статус: Offline
    Dr_KoshMarov, так точно будет biggrin
    только немного уточню
    Code
    body{background:url('image_link') no-repeat #color;}

    image_link - ссылка на картинку, обязательно берёться в " '" " ' "
    no-repeat , repeat-x , repeat-y - без повторения, повторение по горизонтали, повторение по вертикали (соотвественно порядку) или не указывай, если нужно повторение всюду.
    #color - цвет зарезервированым словом или в формате #RRGGBB
     
    EstennyДата: Пятница, 31.12.2010, 22:01 | Сообщение # 10
    Злой Принц
    Сообщений: 3005
    Репутация: 120
    Социальная репутация:

    Статус: Offline
    -reQuiem-, стандартно используются одиночные кавычки. cool
     
    ValeДата: Воскресенье, 02.01.2011, 14:53 | Сообщение # 11
    Рядовой
    Сообщений: 16
    Репутация: 0
    Социальная репутация:

    Статус: Offline
    Qwerty,
    На простом сайте работает а на UCOZe не пробовал писал с помощью Adobe dreamweaver этой программы.

    Добавлено (02.01.2011, 14:53)
    ---------------------------------------------
    Вот попробовал и на UCOZe все работает, Qwerty, а что в коде не правильно?

     
    EstennyДата: Воскресенье, 02.01.2011, 15:53 | Сообщение # 12
    Злой Принц
    Сообщений: 3005
    Репутация: 120
    Социальная репутация:

    Статус: Offline
    Vale, 2 раза прописан задний фон по разному. И вообще это какой-то очень древний стандарт. Наверника 3я версия HTML, а не 5ая, как у всех smile ручками надо все делать. Все редакторы - это фигня.
     
    GhostДата: Понедельник, 03.01.2011, 01:18 | Сообщение # 13
    Генералиссимус
    Сообщений: 1298
    Репутация: 122
    Социальная репутация:

    Статус: Offline
    Dr_KoshMarov, ну не все, и темболее это не HTML a CSS, а если говорить о HTML, то большинство ещё пользуеться 4 версией а не 5)))
     
    JesseДата: Понедельник, 03.01.2011, 12:27 | Сообщение # 14
    Зайчик
    Сообщений: 2132
    Репутация: 111
    Социальная репутация:

    Статус: Offline
    Qwerty, ага, а большенство уже xhtml
    На вопросы в ЛС все равно не отвечаю, так что, пожалуйста, не тратьте ни своего ни моего времени.
     
    EstennyДата: Понедельник, 03.01.2011, 12:28 | Сообщение # 15
    Злой Принц
    Сообщений: 3005
    Репутация: 120
    Социальная репутация:

    Статус: Offline
    Jesse, что есть xhtml?
     
    Форум о uCoz и Web » Веб-программирование и дизайн » CSS » CSS - Введение (Урок 1)
    Страница 1 из 212»
    Поиск: