Технический форум
Вернуться   Технический форум > Программирование > Форум программистов > Изготовление сайтов


Ответ
 
Опции темы Опции просмотра
Старый 15.03.2013, 20:21   #1 (permalink)
GlaZZZ
Любитель
 
Аватар для GlaZZZ
 
Регистрация: 19.01.2011
Сообщений: 4,792
Записей в дневнике: 6
Сказал(а) спасибо: 105
Поблагодарили 28 раз(а) в 10 сообщениях
Репутация: 13067
Exclamation Уроки CSS

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

uroki-css.jpg


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

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

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

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

Старый 15.03.2013, 20:21
Helpmaster
Member
 
Аватар для Helpmaster
 
Регистрация: 08.03.2016
Сообщений: 0

Похожие темы на нашем форуме, почитайте

Простые уроки по HTML
Уроки рисования
Где можно найти бесплатные уроки по созданию сайтов на языке HTML
Видео уроки

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

Про что еще рассказать в этой теме??
Даже не знаю, о чем и писать дальше
GlaZZZ вне форума   Ответить с цитированием
Старый 18.03.2013, 03:13   #5 (permalink)
kreol
Member
 
Аватар для kreol
 
Регистрация: 27.02.2010
Сообщений: 659
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
Репутация: 1312
По умолчанию

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

Яндекс

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

Да, точно. Для осла -иваныча нужны хитрости
GlaZZZ вне форума   Ответить с цитированием
Старый 01.09.2013, 23:20   #7 (permalink)
Talker
Member
 
Аватар для Talker
 
Регистрация: 21.09.2010
Сообщений: 258
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
Репутация: 201
По умолчанию

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

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

Цитата:
Сообщение от Talker Посмотреть сообщение
Хотелось бы чтобы ссылки на все html файлы появлялись автоматический, например в правом блоке. Возможно ли такое сделать с помощью css?
Нет. Для этого надо использовать серверный язык
kreol вне форума   Ответить с цитированием
Старый 02.09.2013, 00:19   #9 (permalink)
Talker
Member
 
Аватар для Talker
 
Регистрация: 21.09.2010
Сообщений: 258
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
Репутация: 201
По умолчанию

[QUOTE=kreol;945697]Добавить к нужным элементам класс. И для этого класса определить нужные свойства.
Можно поподробней.
Talker вне форума   Ответить с цитированием
Старый 02.09.2013, 02:23   #10 (permalink)
GlaZZZ
Любитель
 
Аватар для GlaZZZ
 
Регистрация: 19.01.2011
Сообщений: 4,792
Записей в дневнике: 6
Сказал(а) спасибо: 105
Поблагодарили 28 раз(а) в 10 сообщениях
Репутация: 13067
По умолчанию

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

А второй вопрос я вообще не понял
GlaZZZ вне форума   Ответить с цитированием
Ads

Яндекс

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

Опции темы
Опции просмотра

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Выкл.
HTML код Выкл.
Trackbacks are Вкл.
Pingbacks are Вкл.
Refbacks are Выкл.




Часовой пояс GMT +4, время: 12:37.

Powered by vBulletin® Version 6.2.5.
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.