Уроки CSS

GlaZZZ · 15 Мар 2013

Уроки CSS

Ну как и просили, начинаю статью про CSS

«Что же это за зверь и с чем его едят?»

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

Какое расширение имеет СSS файл?

Таблица стилей имеет формат .css. Для этого, как и для HTML понадобиться Блокнот или лучше Notepad++.

GlaZZZ · 15 Мар 2013

Как подключить таблицу стилей к странице HTML?

1) Вставка ссылки на .css файл
Чтобы подключить CSS из файла нужно в HTML странице в любом месте, но между тегами

HTML:

  <head>
  </head>

написать во такую строчку:

HTML:

 <link rel="stylesheet" type="text/css" href="файл_таблицы_стилей.css">

У вас должно быть что-то похожее на это:

HTML:

  <head>
  <link rel="stylesheet" type="text/css" href="файл_таблицы_стилей.css">
  </head>

2) Включение в <body> </body>
Идем далее. Чтобы не подключать CSS файл(допустим нужен всего лишь маленький кусочек стиля), то можно делать вот так:
В любой части странице, лучше конечно в BODY пишите вот такой вот код:

HTML:

    <style type="text/css">
      Тут непосредственно сам стиль
    </style>

3) Прямое включение в HTML теги.
Допустим вам не нужен удаленный файл, вы не хотите забивать страничку вторым способом, но стиль блока или ссылки нужен. Вы можете вписать стиль в свой тег, будь то ссылка, картинка, блок или что-то другое. Возьмем к примеру ссылку:
Пишем саму ссылку:

HTML:

  <a href="ссылка">Заголовок</a>

Нам нужно придать ссылке красный цвет. Берем и добавляем до или после тега href, тег style. Во внутрь тега уже пишем нужные стили, в нашем случае цвет(color: red). Смотрите как выглядит код готовой ссылки:

HTML:

  <a style="color: red" href="ссылка">Заголовок</a>

GlaZZZ · 15 Мар 2013

Как ими пользоваться?

Пользоваться CSS стилями легко. Нужно всего чуточку знания английского языка и тогда CSS стили для вас будут очень простыми. По сути каждый стиль называется прямо, то есть если это color, то это цвет, если это shadow, то это тень и так далее.

Стиль назначается определенному классу или id (class или id)
Вы пишите стиль допустим для класса block. Написали стиль, а затем подключаете этот класс к HTML тегу. Рассмотрим на примере.
Вам дана картинка в HTML

HTML:

  <img src="картинка.png">

Вы пишите в CSS стиль таким образом:

1) Для классов

HTML:

  .image { border: 3px; border-color: black; border-radius: 10px }

2) Для id

HTML:

  #image { border: 3px; border-color: black; border-radius: 10px }

3) Для самого тега(будь то: a, img, p, li, ul, ol и так далее)

HTML:

  img { border: 3px; border-color: black; border-radius: 10px }

HTML:

  a { border: 3px; border-color: black; border-radius: 10px }

HTML:

  ul { border: 3px; border-color: black; border-radius: 10px }

, где border: 3px – толщина рамки 3пикселя; border-color: black – цвет рамки черный; border-radius: 10px – скругление углов 10 пикселей.

А затем этот стиль подключаем к HTML коду.
Та же картинка:

1) Для класса

HTML:

  <img class="image" src="картинка.png">

2) Для ID

HTML:

  <img id="image" src="картинка.png">

3) Для самого тега html код не изменяется

HTML:

  <img src="картинка.png">

GlaZZZ · 17 Мар 2013

Про что еще рассказать в этой теме??
Даже не знаю, о чем и писать дальше

kreol · 18 Мар 2013

Собственно этих базовых понятий полно в сети. А вот что действительно интересно, так это соответствие css3 и фильтров в ie 7-8(9)

GlaZZZ · 18 Мар 2013

Да, точно. Для осла -иваныча нужны хитрости

Talker · 1 Сен 2013

Тут не хватает рассказа про синтаксис.
У меня вопрос. Допустим, что я задал заголовкам Н2 стиль с желтым фоном и выравнивание по левому краю. Но, в некоторых случаях мне нужно выравнивание по правому краю и голубой фон. Как быть тогда?
Еще вопрос. Все html лежат в одной папке. Все они поделены с помощью div на пять блоков: шапка, контент, левый блок, правый блок и подвал. Хотелось бы чтобы ссылки на все html файлы появлялись автоматический, например в правом блоке. Возможно ли такое сделать с помощью css?
Вообще-то я занимаюсь css всего второй день и у меня много вопросов. Только на сегодня хватит

kreol · 1 Сен 2013

Talker написал(а):
У меня вопрос. Допустим, что я задал заголовкам Н2 стиль с желтым фоном и выравнивание по левому краю. Но, в некоторых случаях мне нужно выравнивание по правому краю и голубой фон. Как быть тогда?

Добавить к нужным элементам класс. И для этого класса определить нужные свойства.

Talker написал(а):
Хотелось бы чтобы ссылки на все html файлы появлялись автоматический, например в правом блоке. Возможно ли такое сделать с помощью css?

Нет. Для этого надо использовать серверный язык

Talker · 1 Сен 2013

kreol написал(а):
Добавить к нужным элементам класс. И для этого класса определить нужные свойства.
Можно поподробней.

GlaZZZ · 2 Сен 2013

Talker написал(а):
Можно поподробней.

Т.е у тебя изначально идет вот так:
CSS

HTML:

h2 {background-color: yellow; text-align:left}

HTML

HTML:

<h2>текст желтый</h2>

ЧТобы сделать другой стиль для h2 можно сделать вот так:
CSS

HTML:

h2 {background-color: yellow; text-align:left}
h2 .style {background-color: blue; text-align:right}

HTML

HTML:

<h2>текст желтый</h2>
<h2 class="style">текст голубой, справа</h2>

, вместо style можно что угодно на латинице и без пробелов

А второй вопрос я вообще не понял

kreol · 2 Сен 2013

GlaZZZ написал(а):
А второй вопрос я вообще не понял

Как я понял, в папке содержатся html-странички. И нужно сделать, что-то типа генератора менюшки для каждого файла - чтобы создавались ссылки на все файлы данной папки. Ну и при добавлении файлов менюшка перегенерировалась

GlaZZZ · 2 Сен 2013

Это уже на php наверное или JS

Talker · 2 Сен 2013

GlaZZZ написал(а):
ЧТобы сделать другой стиль для h2 можно сделать вот так:
CSS

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

А вообще, у меня было загатовлено еще пара интересных (как мне кажется) вопросов, но сегодня заработался и устал.
Обоим спасибо огромное!

Talker · 11 Сен 2013

В общем Ссылки на файлообменники и облачные сервисы запрещены! Меня интересует много ли я наделал ошибок? Еще есть вопрос по div. Прочитал на одном сайте, что таблицы это отстой, надо применять только блоки. Но, почему-то они время от времени уходят "гулять по странице". То наезжают друг на друга, то появляются не там где должны были. Тестировал на Chrome и Firefox. Подвал мне так и не удалось пристроить. Он появляется не там, где должен. Что-то я сделал не правильно. Нашел готовое решение, но хочется разобраться самому. Помогите разобраться:tehnari_ru_837:

Уроки CSS

GlaZZZ

Любитель

GlaZZZ

Любитель

GlaZZZ

Любитель

GlaZZZ

Любитель

kreol

Новые

GlaZZZ

Любитель

Talker

Новые

kreol

Новые

Talker

Новые

GlaZZZ

Любитель

kreol

Новые

GlaZZZ

Любитель

Talker

Новые

Talker

Новые

Похожие темы