Технический форум

Технический форум (http://www.tehnari.ru/)

- Изготовление сайтов (http://www.tehnari.ru/f129/)

- - Уроки CSS (http://www.tehnari.ru/f129/t86414/)

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

Вложение 126604

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

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

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

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

Как подключить таблицу стилей к странице 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>

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

Пользоваться 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">

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

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

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

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

Цитата:

Сообщение от Talker (Сообщение 945692)

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

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

Цитата:

Сообщение от Talker (Сообщение 945692)

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

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

[QUOTE=kreol;945697]Добавить к нужным элементам класс. И для этого класса определить нужные свойства.
Можно поподробней.

Цитата:

Сообщение от Talker (Сообщение 945707)

Можно поподробней.

Т.е у тебя изначально идет вот так:
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 можно что угодно на латинице и без пробелов

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