SportObzor.Ru
 √лавна€    ƒобавить в избраное   —портивные flesh игры он-лайн   —портивные результаты On-line    арта сайта 
√лавное меню
Ќовости спорта
ћеценаты

 

 

 



–аботаем с css

—портивный праздник
—егодн€ € вам расскажу, что такое css и как его использовать? ¬ообще css Ч это второй об€зательный €зык, который вам нужно будет выучить, если вы хотите создавать сайты. CSS Ч это каскадные таблицы стилей.

»стори€

— помощью этого €зыка оформл€ютс€ все html-страницы. Ѕез него они выгл€дели бы страшно и убого. “ак что css Ч это photoshop веб-разработчика, если можно так сказать.

ѕрежде чем растолковывать дальше, вы должны знать о первом €зыке, который нужно знать в сайтостроении Ч html. Ќа эту тему у мен€ есть соответствующа€ стать€. я советую прочитать ее всем, кто мало знает об html.

ƒело в том, что html и css нужно изучать вместе, но сначала именно первый €зык, так как с его помощью создаетс€ разметка веб-страниц. Css же нужен дл€ того, чтобы правильно оформить и разместить элементы на странице в соответствии с дизайном.

—интаксис

” css один из самых простых синтаксисов, разобратьс€ с ним можно буквально за пару часов. ¬с€ таблица стилей (то есть css-файл) состоит из селекторов и описани€ свойств и значений дл€ них. ¬от пример:
селектор{
color: red;
}

 ак видите, сначала идет название селектора, после чего став€тс€ фигурные скобки. ћожно писать все в один р€д, а можно переносить на следующую строчку. Ћино € предпочитаю такой стиль, который вы можете увидеть на скриншоте.

¬ фигурных скобках записываетс€ все стили дл€ элемента. —тили Ч это свойства и их значени€. ¬се стили дл€ одного конкретного селектора обычно называют стилевым правилом. Ѕыстрее поможет разобратьс€ со всеми тонкост€ми css учебник.

я подчеркнул два об€зательных знака, которые присутствуют в синтаксисе. Ёто двоеточие Ч оно ставитс€ между названием свойства и его значением, а также точка с зап€той, которые об€зательно нужно ставить после значени€ каждого свойства.

 огда стили дл€ элемента заданы, можно закрывать фигурные скобки и писать новый селектор, а дл€ него новые стили. » так делаетс€ до тех пор, пока страница не будет должным образом оформлена.
ѕодключение и пример использовани€

„тобы css работал и с его помощью можно было стилизовать html-элементы, необходимо подключить этот файл к html-документу. Ёто делаетс€ с помощью тега link. ѕодробно останавливатьс€ на этом € не буду, потому что у мен€ есть дл€ вас стать€ на соответствующую тему. ќзнакомьтесь с ней, если вы не знаете, как подключить css.

Ќу и давайте рассмотрим пример взаимодействи€ двух €зыков. ¬ html-документе создадим цитату. ќна создаетс€ с помощью тегов blockquote.

 ак никак она не выгл€дит, обыкновенный текст. » тут-то на помощь и приход€т стили, которые помогают оформить любые элементы на веб-странице. ƒл€ начала €, естественно, подключу таблицу стилей к html-файлу. ѕока в ней ничего нет. „тобы обратитьс€ к цитате можно использовать глобальный селектор blockquote. ¬ таком случае стили будут применены ко всем цитатам. ѕропишем такие правила дл€ цитат:
blockquote{
width: 300px;
background: #333;
border-left: 5px solid #ff3300;
padding: 10px;
color: #fff;
font-style: italic;
}

≈сли вы не знаете css, то можете не пон€ть этих строк. ¬прочем, тут даже интуитивно пон€тно (если вы хоть немного в английском разбираетесь), что мы задаем. ¬ частности, ширину, цвет текста и фона, отступы, рамку слева и стиль шрифта. » вот что получаем:
примененные стили
¬ общем, вот она работа css на примере. я думаю, вы пон€ли цель этой технологии? ћожете также попробовать открыть любой попул€рный сайт в браузерах Google Chrome или яндекс.Ѕраузер, после чего нажмите F12. ќткроетс€ так называемый отладчик. ѕопробуйте найти в исходном коде сайта подключение стилей (находитс€ в теге head, стили подключаютс€ с помощью ). ѕопробуйте изменить путь к таблицам стилей, чтобы он был неправильным и посмотрите на сайт. Ќаверн€ка его внешний вид изменитс€ в отрицательную сторону.

¬се дело в том, что html не создан и не подходит дл€ оформлени€ страниц. ќн предназначен именно дл€ создание элементов, разметки, но никак не дл€ внешнего вида. ≈сли вы веб-дизайнер, то наверн€ка поймете сейчас мой пример. ќчень часто перед рисованием макета сайта, дизайнер делает прототип (его еще называют mockup). ѕотом на основании этого прототипа легче сделать красивый макет, потому что четко видно структуру будущего сайта.

“акже и с веб-технологи€ми, а именно с html и css. ќни неразрывно св€заны друг с другом.

»стори€

—егодн€ css, как и html активно развиваютс€. ≈ще в 2008-2009 годах многих свойств, которые есть сегодн€, не существовало. “огда веб-разработчики использовали CSS 2.1 (верси€ €зыка). —егодн€ же активно используетс€ CSS 3. » хот€ до сих пор новые свойства поддерживаютс€ не всеми браузерами, их все равно уже используют.

Ќапример, в новой версии по€вились такие возможности: закругление углов, анимации, трансформации, плавные переходы, множественные фоны, градиенты, полупрозрачность и многое другое. —огласитесь, слишком крутые свойства, чтобы их не использовать и не обращать на них никакого внимани€. ”роки по CSS3 есть у команды Webformyself. ¬от их первый видеоролик (вступление):

≈ще 2 урока доступно дл€ бесплатного просмотра, остальные Ч после оплаты доступа в премиум-клуб сайта, где помимо этого курса вас ждут дес€тки других. ≈сли вдруг вас это заинтересовало, вот ссылкассылка на описание премиум-раздела. я сам купил туда доступ и не жалею, очень много полезного узнал.

“акже вы можете найти уроки и на моем блоге. ¬от, например, стать€ о закруглении углов, а вот Ч о линейных градиентах. Ќу и если сами покопаетесь, наверн€ка найдете много интересного smile особенно в рубрике CSS-рецепты.

Ќу а если вы полный новичок, то начинать нужно с базы, с самых простых и попул€рных свойств, которые используютс€ чаще всего. —коро € напишу небольшую статью о том, как наиболее быстро и качественно изучить основы css, после чего вы без проблем овладеете и более сложными техниками.

¬ общем, если отвечать на вопрос: Ђ„то такое css и как его использовать?ї пр€мо, то это один из €зыков, которые используютс€ при создании сайта. ј использовать его нужно при оформлении элементов, создани€ различных эффектов и т.д.

„то ж, кажетс€ € сказал все, что хотел, а если что-то забыл упом€нуть, об€зательно допишу в будущем. Ќу и, собственно, главный вопрос: ЂЋегко ли учитьс€ css и за сколько можно выучить?ї. ћогу с уверенностью за€вить, что легко, а если найти хорошие видеоуроки, то можно изучить буквально за мес€ц. ≈стественно, у вас должно быть большое желание, должны гореть глаза, без этого процесс будет идти медленнее.

9-05-2017, 10:04 —портивное обозрение
 

¬ы читали: –аботаем с css.

ѕредлагаем ¬ашему вниманию другие новости по теме:

ќт строительного мусора нужно избавл€тьс€ правильно
—троительный мусор Ч особый вид мусора, который нельз€ выбросить в обычный контейнер, мусоропровод. „то же с ним делать?  уда вывезти строительный мусор по правилам?

ћешочек из органзы как оригинальный способ упаковки
≈сли ¬ы занимаетесь мыловарением или кремоварением и хотите подарить плод своего труда друзь€м или близким, то ¬ам нужно позаботитьс€ о подарочной упаковке. ¬едь от того внешнего вида подарка зависит первое впечатление. ƒл€ этого идеально подойдет мешочек из органзы. — помощью этой незамысловатой и

—айт вещь нужна€ и доходна€
Ётап 1. ѕланирование сайта —оздание сайта начинаетс€ с этапа планировани€. «десь мы определ€ем целевую аудиторию будущего сайта (его посетителей), задачи, которые он должен решать, и цели (дл€ чего мы создаем сайт). Ќа этапе планировани€ очень полезным может быть изучение сайтов схожих тематик

Ѕыстро накачать мышцы
Ѕыстро накачать мышцы не так просто, это упорный и т€желый труд, который строитс€ на трех важных компонентах: правильных тренировках, правильном питании и правильном отдыхе. ≈сли недостаточно серьезно подойти хот€ бы к одному из них, все усили€ будут напрасны. «аниматьс€ нужно очень интенсивно,

¬се замечани€ и пожелани€ присылайте на [email protected]

ѕри цитировании интернет-сайтами об€зательна гиперссылка —портивное обозрение
               
ѕоиск по сайту



ћеценаты


 арта сайта
∆изнь сайта

 

 

 

 

–Ъ–∞—А—В–∞