CSS Основы

CSS Основы

CSS Основы

Технология CSS используется в первую очередь дизайнерами, ведь именно они создают дизайн сайта. Однако, ошибочно полагать, что Web-мастерам CSS знать не обязательно. Достаточно вспомнить хотя бы пример из описания раздела по CSS. Помимо мобильности своего сайта, таблицы стилей позволяют создавать различные классические дизайнерские решения (например, выпадающее меню). А вместе с JavaScript позволяют создавать динамические HTML-страницы (DHTML), красота и удобство которых, порой, просто поражают.

Разумеется, для того, чтобы создавать подобные вещи необходимо познакомиться с основами CSS. И данная категория сайта поможет Вам это сделать максимально быстро и эффективно.

Полный курс по HTML, CSS и по вёрстке сайтов: http://srs.myrusakov.ru/makeup

Прочитав статьи по основам CSS, Вы узнаете:

1) Синтаксис CSS.

2) Способы и их приоритеты задания CSS-стиля.

3) Типы селекторов в CSS.

4) CSS хаки для браузеров.

5) Правила написания CSS.

6) Как создать всплывающую подсказку на CSS.

7) Как изменить внешний вид первой буквы через CSS.

8) Как задать вид курсора через CSS.

9) Как изменить вид курсора при наведении мыши с помощью CSS.

10) Как сделать подменю на CSS.

11) О замене свойства min-width в IE6.

12) О валидности CSS.

13) Как задать цвет посещённых ссылок.

14) Как задать отступ абзаца через CSS.

15) Как сделать закруглённые углы через CSS.

16) Как вместо маркера списка поставить своё изображение через CSS.

17) Как сделать фон картинкой.

18) Как сделать затемнение фона на CSS.

19) Что такое дочерние селекторы в CSS.

20) Какие единицы измерения имеются в CSS.

21) Как сделать всплывающее окно с затемнением.

22) Как сделать анимированный фон.

23) Как сделать красивое текстовое поле.

24) Как менять изображение при наведении на него курсора мыши.

25) Что такое псевдоэлементы в CSS.

26) Что такое CSS спрайты.

27) Как прижать футер (подвал) к низу через CSS.

28) Как запретить изменение размеров textarea через CSS.

29) Как нарисовать треугольник через CSS.

30) Как обработать событие click через CSS.

31) Как задать свой курсор через CSS.

32) Как сделать горизонтальное выпадающее меню на CSS.

33) Как использовать нестандартный шрифт на сайте.

34) Как изменить фон у радиокнопки через CSS.

35) Можно ли использовать CSS3.

36) Как сделать тень на CSS.

37) Как задать атрибуты cellpadding и cellspacing на CSS.

38) Как сделать div со 100% height.

39) О совместимости z-index и плеера Youtube.

40) Почему плохо использовать -moz, -ms, -webkit и прочие свойства.

41) Стоит ли использовать CSS Reset.

42) Как вертикально выравнять маркер списка.

43) Как сделать версию для печати.

44) Как сделать кроссбраузерную прозрачность на CSS.

45) Что такое clearfix.

46) Как частично отменить float.

47) Как сделать двухколоночную вёрстку с одинаковой высотой колонок.

48) Что такое адаптивная вёрстка.

49) Что такое медиа-запросы в CSS.

50) Что такое less.

51) Как сделать эффект загнутого уголка на CSS.

52) Как сделать отзывчивый «липкий» подвал сайта.

53) Как использовать Google Fonts API.

54) Как использовать сервис Livetools.

55) Как разрешить или запретить выделение текста на CSS.

56) Как изменить внешний вид элемента на стандартный с помощью свойства appearance в CSS.

57) Зачем нужно свойство page-break-inside в CSS.

58) Как выравнять по центру блок переменной ширины на CSS.

59) Как сделать треугольники на чистом CSS.

60) Сервис по генерации CSS треугольников.

61) Как прижать футер к нижней грани страницы(позиционирование).

62) Как прижать футер к низу страницы(табличный способ).

63) Изучаем Sass. Установка и настройка.

64) Как скрыть элемент на странице на CSS.

65) Изучаем Sass. Основы.

66) Когда использовать reset.css и normalize.css.

67) Сервис по работе с изображениями с мощным API.

68) Как сделать эффект увеличения картинки на CSS.

69) Koala — быстрая компиляция sass файлов.

70) Как добавить фильтры к фотографиям на CSS.

71) Изучаем Sass. Миксины.

72) Изучаем Sass. Математические операции.

73) Анимированная иконка меню на Sass.

74) Изучаем Sass. Функции.

75) Что такое PostCSS.

76) Как установить и настроить PostCSS.

77) Как сделать возможность оценивания на CSS.

78) Изучаем Sass. Стиль написания кода.

79) Изучаем Sass. Расширение родительского селектора.

80) 10 полезных SASS миксинов.

81) Как сделать интро в стиле «Звёздных Войн» на CSS.

82) Bootstrap 4. Введение.

83) Bootstrap 4. Установка.

84) Bootstrap 4. Reboot.

85) Bootstrap 4. Контейнеры и ключевые точки.

86) Bootstrap 4. Система сеток.

87) Bootstrap 4. Flex-свойства сетки.

88) Какие 5 нововведений появятся в CSS4.

89) Bootstrap 4. Что такое Jumbotrons.

90) Bootstrap 4. Утилиты и типография.

91) Bootstrap 4. Компонент Cards.

92) Разницу между class и id на примере тега div.

93) Неудачные элементы веб-дизайна, которые не стоит использовать.

94) Bootstrap 4. Модальные окна.

95) О приоритете и наследовании в CSS на практике

96) Как верстать PSD макет по Bootstrap сетке. Часть 1.

97) Как верстать PSD макет по Bootstrap сетке. Часть 2.

98) Как использовать псевдоэлементы after и before в CSS.

99) Об особенностях ширины и высоты блока в CSS.

100) Псевдоэлемене after и псевдоклассе last-child.

101) Как показать сайт на различных девайсах.

102) Верстка по сетке Bootstrap (часть 1)

103) Верстка по сетке Bootstrap (часть 2)

104) Верстка по сетке Bootstrap (часть 3)

105) Верстка по сетке Bootstrap (часть 4)

106) Препроцессор LESS, начиная с простого.

107) Как устроена сетка Bootstrap.

108) Модальное окно на Bootstrap. Стилизация.

109) Как сделать фон в CSS

110) Как сделать анимированную кнопку на CSS.

111) Пример адаптивной верстки на Bootstrap.

112) Адаптивная верстка макета (Bootstrap 4.

113) Верстка макета на SASS.

114) Flex-свойства на практике.

115) Адаптивная верстка на
flex
(часть 1).

116) Адаптивная верстка на
flex
(часть 2).

117) Минусы и плюсы использования иконочных шрифтов.

118) Верстка таблицы (SCSS + flexbox).

119) Плавная анимация движения на CSS.

120) Как сделать вкладки на чистом CSS.

121) Нарисовать стрелку на CSS.

122) Плавный переход. CSS свойство transition.

123) Эффект размытия и фокуса на CSS.

124) Свойство transform-origin на примере.

125) Анимация рамки на CSS.

126) Рисуем иконку пользователя на CSS.

127) Рисуем сердечко на CSS.

128) Три эффекта наведения на кнопку.

129) Вcплывающее окно на чистом CSS.

130) Блок со скошенным углом на CSS.

131) Скошенный блок при помощью clip-path.

132) Первая буква логотипа Google.

133) Выноски в стиле комиксов.

134) Коллекция CSS компонентов.

135) Угловая лента на CSS.

136) 3 способа выравнивания блоков по ширине.

137) Виды CSS селекторов.

138) CSS фреймворк Materialize (Установка).

139) CSS фреймворк Materialize (Navbar).

140) Использование переменных в CSS.

141) Как прижать футер к низу страницы.

142) Что нового в Bootstrap 5?

143) CSS Grid Layout #1 (Базовая сетка).

144) CSS Grid Layout #2 (Позиционирование ячеек).

145) Ошибки новичков при верстке сайтов #1.

146) Ошибки новичков при верстке сайтов #2.

147) Ошибки новичков при верстке сайтов #3.

148) Ошибки новичков при верстке сайтов #4.

149) Пример адаптивной верстки на flexbox #1.

150) Пример адаптивной верстки на flexbox #2.

151) CSS Grid. Практические примеры #1.

152) CSS Grid. Практические примеры #2.

153) CSS Grid. Практические примеры #3.

154) CSS Grid. Практические примеры #4.

155) CSS Grid. Практические примеры #5.

156) Пример верстки фотогалереи на CSS Grid #1.

157) Пример верстки фотогалереи на CSS Grid #2.

158) Пример верстки простой секции на CSS Grid #3.

160) Пример верстки формы на CSS Grid #4.

161) Пример верстки блог-секции на CSS Grid #5.

162) Анимация появления текста на CSS.

163) Параллакс эффект на чистом CSS.

164) Анимация подчеркивания ссылок на CSS.

165) Эффект появления рамки при наведении.

166) Анимированный блик у кнопки на чистом CSS.

167) SVG hover эффект для кнопки.

168) Как размыть фон под блоком, используя SVG.

169) Аватар внутри круга на CSS.

170) CSS-эффект при наведении на меню.

171) CSS-эффекты. Градиентная рамка у блока.

172) Навигационное меню с иконками + hover эффект.

173) CSS grid свойство align-items.

174) Переключение меню гамбургер, используя JS.

175) Верстка прозрачной логин формы.

176) Эффект анимированного неонового свечения у кнопки.

177) CSS-эффект при наведении курсора на элемент списка.

178) Чем отличается box-shadow от drop-shadow?.

179) Как сделать слияние полей у формы поиска.

180) Как создать To Do List на чистом CSS (часть 1).

181) Как создать To Do List на чистом CSS (часть 2).

182) CSS эффект потери фокуса и наоборот.

183) Анимированный loader на градиентах и тенях.

184) Градиентная тень у блока на CSS.

185) Красивый hover эффект для блока.

186) Изогнутая тень с помощью псевдоэлементов.

187) Вертикальный текст на CSS.

Все материалы по основам CSS

Источник