Уроки CSS

GlaZZZ · 15.03.2013, 20:21

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

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

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

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

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

GlaZZZ · 15.03.2013, 20:22

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

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

Пользоваться 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 · 18.03.2013, 00:33

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

kreol · 18.03.2013, 03:13

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

GlaZZZ · 18.03.2013, 14:48

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

Talker · 01.09.2013, 23:20

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

kreol · 01.09.2013, 23:38

Цитата:

Сообщение от Talker

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

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

Цитата:

Сообщение от Talker

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

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

Talker · 02.09.2013, 00:19

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

GlaZZZ · 02.09.2013, 02:23

Цитата:

Сообщение от 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 можно что угодно на латинице и без пробелов

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

15.03.2013, 20:21	#1 (permalink)
GlaZZZ Любитель Регистрация: 19.01.2011 Сообщений: 4,792 Записей в дневнике: 6 Сказал(а) спасибо: 105 Поблагодарили 28 раз(а) в 10 сообщениях Репутация: 13067	Уроки CSS Ну как и просили, начинаю статью про CSS «Что же это за зверь и с чем его едят?» Каскадная таблица стилей(CSS) – это формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XML. Сейчас практически не один сайт не обходится без этой таблицы. CSS позволяет расширить возможности оформления HTML и сократить сам код HTML до минимума. Какое расширение имеет СSS файл? Таблица стилей имеет формат .css. Для этого, как и для HTML понадобиться Блокнот или лучше Notepad++.

15.03.2013, 20:22	#2 (permalink)
GlaZZZ Любитель Регистрация: 19.01.2011 Сообщений: 4,792 Записей в дневнике: 6 Сказал(а) спасибо: 105 Поблагодарили 28 раз(а) в 10 сообщениях Репутация: 13067	Как подключить таблицу стилей к странице 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>

15.03.2013, 20:53	#3 (permalink)
GlaZZZ Любитель Регистрация: 19.01.2011 Сообщений: 4,792 Записей в дневнике: 6 Сказал(а) спасибо: 105 Поблагодарили 28 раз(а) в 10 сообщениях Репутация: 13067	Как ими пользоваться? Пользоваться 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">

Опции темы
Версия для печати Отправить по электронной почте
Опции просмотра
Линейный вид Комбинированный вид Древовидный вид

15.03.2013, 20:21
Helpmaster Member Регистрация: 08.03.2016 Сообщений: 0	Похожие темы на нашем форуме, почитайте Простые уроки по HTML Уроки рисования Где можно найти бесплатные уроки по созданию сайтов на языке HTML Видео уроки

18.03.2013, 00:33	#4 (permalink)
GlaZZZ Любитель Регистрация: 19.01.2011 Сообщений: 4,792 Записей в дневнике: 6 Сказал(а) спасибо: 105 Поблагодарили 28 раз(а) в 10 сообщениях Репутация: 13067	Про что еще рассказать в этой теме?? Даже не знаю, о чем и писать дальше

18.03.2013, 03:13	#5 (permalink)
kreol Member Регистрация: 27.02.2010 Сообщений: 659 Сказал(а) спасибо: 0 Поблагодарили 0 раз(а) в 0 сообщениях Репутация: 1312	Собственно этих базовых понятий полно в сети. А вот что действительно интересно, так это соответствие css3 и фильтров в ie 7-8(9)

Ads
Яндекс Member Регистрация: 31.10.2006 Сообщений: 40200 Записей в дневнике: 0 Сказал(а) спасибо: 0 Поблагодарили 0 раз(а) в 0 сообщениях Репутация: 55070

18.03.2013, 14:48	#6 (permalink)
GlaZZZ Любитель Регистрация: 19.01.2011 Сообщений: 4,792 Записей в дневнике: 6 Сказал(а) спасибо: 105 Поблагодарили 28 раз(а) в 10 сообщениях Репутация: 13067	Да, точно. Для осла -иваныча нужны хитрости

01.09.2013, 23:20	#7 (permalink)
Talker Member Регистрация: 21.09.2010 Сообщений: 258 Сказал(а) спасибо: 0 Поблагодарили 0 раз(а) в 0 сообщениях Репутация: 201	Тут не хватает рассказа про синтаксис. У меня вопрос. Допустим, что я задал заголовкам Н2 стиль с желтым фоном и выравнивание по левому краю. Но, в некоторых случаях мне нужно выравнивание по правому краю и голубой фон. Как быть тогда? Еще вопрос. Все html лежат в одной папке. Все они поделены с помощью div на пять блоков: шапка, контент, левый блок, правый блок и подвал. Хотелось бы чтобы ссылки на все html файлы появлялись автоматический, например в правом блоке. Возможно ли такое сделать с помощью css? Вообще-то я занимаюсь css всего второй день и у меня много вопросов. Только на сегодня хватит

02.09.2013, 00:19	#9 (permalink)
Talker Member Регистрация: 21.09.2010 Сообщений: 258 Сказал(а) спасибо: 0 Поблагодарили 0 раз(а) в 0 сообщениях Репутация: 201	[QUOTE=kreol;945697]Добавить к нужным элементам класс. И для этого класса определить нужные свойства. Можно поподробней.