CSS — Википедия
У этого термина существуют и другие значения, см. CSS (значения).CSS (/siːɛsɛs/ англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.
Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.
Использование CSS[править | править код]
CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS являлось отделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом.
Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печатное представление, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими шрифт Брайля[источник не указан 55 дней].
Способы подключения CSS к документу[править | править код]
Правила CSS пишутся на формальном языке CSS. Правила могут располагаться как в самом веб-документе, внешний вид которого они описывают, так и во внешних файлах, имеющих формат CSS. Формат CSS — это текстовый файл, в котором содержится перечень правил CSS и комментариев к ним.
Стили CSS могут быть подключены или внедрены в описываемый ими веб-документ четырьмя способами:
- когда описание стилей находится в отдельном файле, оно может быть подключено к документу посредством элемента
<link>, включённого в элемент<head>:
<!DOCTYPE html>
<html>
<head>
.....
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
.....
</body>
</html>
- когда файл стилей размещается отдельно от родительского документа, он может быть подключён к документу инструкцией @import в элементе
<style>:
<!DOCTYPE html>
<html>
<head>
.....
<style media="all">
@import url(style.css);
</style>
</head>
</html>
- когда стили описаны внутри документа, они могут быть включены в элемент
<style>, который, включается в элемент<head>:
<!DOCTYPE html>
<html>
<head>
.....
<style>
body {
color: red;
}
</style>
</head>
<body>
.....
</body>
</html>
- когда стили описаны в теле документа, они могут располагаться в атрибутах отдельного элемента
<!DOCTYPE>
<html>
<head>
.....
</head>
<body>
<p>
.....
</p>
</body>
</html>
В первых двух случаях к документу применены внешние стили, а во вторых — внутренние стили.
Для добавления CSS к XML-документу последний должен содержать специальную ссылку на файл стилей:
<?xml-stylesheet type="text/css" href="style.css"?>
Правила построения CSS[править | править код]
В первых трёх случаях подключения стилей CSS к документу (см. выше) каждое правило CSS из файла имеет две основные части — селектор и блок объявлений. Селектор, расположенный в левой части правила до знака «{» определяет, на какие части документа (возможно, специально обозначенные) распространяется правило. Блок объявлений располагается в правой части правила. Он помещается в фигурные скобки, и, в свою очередь, состоит из одного или более объявлений, разделённых знаком «;». Каждое объявление представляет собой сочетание свойства CSS и значения, разделённых знаком «:». Селекторы могут группироваться в одной строке через запятую. В таком случае свойство применяется к каждому из них.
селектор, селектор {
свойство: значение;
свойство: значение;
свойство: значение;
}
В четвёртом случае подключения CSS к документу (см. список) правило CSS, являющееся значением атрибута style элемента, к которому он применяется, представляет собой перечень объявлений («свойство CSS : значение»), разделённых знаком «;».
Виды селекторов[править | править код]
Универсальный селектор[править | править код]
* {
margin: 0;
padding: 0;
}
Селектор тегов[править | править код]
p {
font-family: arial, helvetica, sans-serif;
}
Селектор классов[править | править код]
.note {
color: red;
background-color: yellow;
font-weight: bold;
}
Селектор идентификаторов[править | править код]
#paragraph2 {
margin: 0;
}
Современный CSS для динозавров / Habr
— Двигать пиксели в CSS и так было трудно! А теперь мне говорят, насколько круто использовать несемантические названия классов, встроенные стили в HTML и даже писать стили CSS на JavaScript!
[Вставь тут гифку из «Гриффинов»] — Ха!
Иллюстрации из Dinosaur Comics Райана Норта
Как ни странно, CSS считается одновременно одним из самых простых и одним из самых сложных языков для веб-разработчика. Определённо он достаточно прост в начале — вы определяете свойства стиля, значения для конкретных элементов и… это практически всё, что нужно знать! Однако в больших проектах ситуация становится довольно запутанной и сложной, чтобы организовать CSS каким-то осмысленным образом. Изменение любой строчки CSS для стилизации элемента на одной странице часто ведёт к непредвиденным последствиям для элементов на других страницах.
Чтобы разобраться в присущей сложности CSS, созданы самые разные виды передовых практик. Проблема в том, что до сих пор нет единого мнения, какие из них являются лучшими, а многие из них полностью противоречат друг другу. Если вы впервые пытаетесь выучить CSS, то такая ситуация дезориентирует, мягко говоря.
Цель этой статьи — показать исторический контекст, как развивались техники и инструменты CSS до их нынешнего состояния в 2018 году. Поняв эту историю будет легче понять каждый подход и как с выгодой его использовать. Итак, начнём!
Начнём с простейшего веб-сайта, используя только простой файл
index.html, который ссылается на отдельный файл index.css:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Modern CSS</title> <link rel="stylesheet" href="index.css"> </head> <body> <header>This is the header.</header> <main> <h2>This is the main content.</h2> <p>...</p> </main> <nav> <h5>This is the navigation section.</h5> <p>...</p> </nav> <aside> <h5>This is an aside section.</h5> <p>...</p> </aside> <footer>This is the footer.</footer> </body> </html>
Пока мы не используем никаких классов или id в HTML, только семантические теги. Вообще без использования CSS веб-сайт выглядел бы так (с текстом-заполнителем):
Нажмите здесь для реального примера
Функционально, но не очень симпатично. Можем добавить CSS для улучшения базового оформления в index.css:
/* BASIC TYPOGRAPHY */
/* from https://github.com/oxalorg/sakura */
html {
font-size: 62.5%;
font-family: serif;
}
body {
font-size: 1.8rem;
line-height: 1.618;
max-width: 38em;
margin: auto;
color: #4a4a4a;
background-color: #f9f9f9;
padding: 13px;
}
@media (max-width: 684px) {
body {
font-size: 1.53rem;
}
}
@media (max-width: 382px) {
body {
font-size: 1.35rem;
}
}
h2, h3, h4, h5, h5, h6 {
line-height: 1.1;
font-family: Verdana, Geneva, sans-serif;
font-weight: 700;
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-word;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
h2 {
font-size: 2.35em;
}
h3 {
font-size: 2em;
}
h4 {
font-size: 1.75em;
}
h5 {
font-size: 1.5em;
}
h5 {
font-size: 1.25em;
}
h6 {
font-size: 1em;
} Здесь бóльшая часть CSS — это стили оформления (шрифты с размерами, высота строк и проч.), с некоторыми стилями цветов и центрированной вёрсткой. Вам пришлось бы изучать дизайн, чтобы узнать хорошие значения этих параметров (тут стили из sakura.css), но сам код CSS здесь не слишком сложен для чтения. Результат выглядит примерно так:
Нажмите здесь для реального примера
Какова разница! Это посыл CSS — простой способ добавить стили в документ, без программирования или сложной логики. К сожалению, всё становится немного сложнее, когда мы начинаем использовать CSS для чего-то большего, чем просто оформление и цвета (с этим разберёмся дальше).
В 1990-е годы, до того как технология CSS получила широкое распространение, существовало немного вариантов для разметки содержимого на странице. HTML изначально проектировался как язык для создания простых документов, а не динамических веб-сайтов с боковыми меню, колонками и т.д. В те времена разметку часто производили HTML-таблицами — вся страница целиком помещалась в таблицу, которая использовалась для организации контента по колонкам и строкам. Такой подход работал, но обратной стороной была тесная увязка содержания и представления — если вы хотели изменить разметку на сайте, иногда приходилось переписывать значительный объём HTML.
CSS дал сильный толчок к разделению контента (написанного на HTML) и представления (написанного на CSS). Появился способ вынести всю разметку из HTML (больше никаких таблиц) в CSS. Важно отметить, что CSS как и HTML тоже изначально не был спроектирован для разметки страниц, поэтому первые попытки разметки трудно назвать изящными.
Посмотрим, как это работает на практике с нашим вышеприведённым примером. Прежде чем определить какую-либо разметку CSS, сначала сбросим все поля и отступы (которые влияют на вычисление разметки), а также разметим секции разными цветами (не для красоты, а для их визуального различении при тестировании разных макетов).
/* RESET LAYOUT AND ADD COLORS */ body { margin: 0; padding: 0; max-width: inherit; background: #fff; color: #4a4a4a; } header, footer { font-size: large; text-align: center; padding: 0.3em 0; background-color: #4a4a4a; color: #f9f9f9; } nav { background: #eee; } main { background: #f9f9f9; } aside { background: #eee; }
Теперь веб-сайт временно будет выглядеть так:
Нажмите здесь для реального примера
Сейчас мы готовы использовать CSS для разметки контента на странице. Оценим три разных подхода в хронологическом порядке, начиная с классических float-макетов.
Макет на основе float
Свойство CSS float первоначально ввели для размещения изображения внутри колонки текста слева или справа (что вы часто видели в газетах). Веб-разработчики начала 2000-х воспользовались преимуществом того факта, что вы можете назначить свойство float не только изображениям, но любому элементу, то есть можно создать иллюзию строк и колонок, назначая float для целых div’ов контента. Но опять же, float не предназначен для этой цели, так что такую иллюзию трудно осуществить последовательным образом.
В 2006 году A List Apart опубликовал популярную статью «В поисках Святого Грааля», которая изложила подробный и тщательный подход к созданию макета, известного как Святой Грааль — заголовок, три колонки и нижний колонтитул. Сейчас кажется безумием, что такой довольно простой макет называли Святым Граалем, но вот так трудно было создать устойчивый макет на чистом CSS.
Ниже показан макет на основе float для нашего примера на основе техники, описанной в статье:
/* FLOAT-BASED LAYOUT */
body {
padding-left: 200px;
padding-right: 190px;
min-width: 240px;
}
header, footer {
margin-left: -200px;
margin-right: -190px;
}
main, nav, aside {
position: relative;
float: left;
}
main {
padding: 0 20px;
width: 100%;
}
nav {
width: 180px;
padding: 0 10px;
right: 240px;
margin-left: -100%;
}
aside {
width: 130px;
padding: 0 10px;
margin-right: -100%;
}
footer {
clear: both;
}
* html nav {
left: 150px;
}Глядя на CSS, можно заметить несколько хаков, необходимых для работы макета (отрицательные границы, свойство
clear: both, жёстко запрограммированные вычисления ширины и др.) — в статье подробно объясняется необходимость каждого из этих хаков. Вот как выглядит результат:
Нажмите здесь для реального примера
Неплохо, но по трём цветам видно, что у колонок неодинаковая высота, а страница не заполняет всю высоту экрана. Это неизбежные проблемы при использовании подхода на основе float. Всё, что может сделать float, это прижать контент к левой или правой границе секции — в CSS нет средств повлиять на высоту контента в других секциях. В течение многих лет у проблемы отсутствовало простое решение, пока не появились макеты на основе flexbox.
Макет на основе flexbox
Свойство flexbox в CSS впервые предложили в 2009 году, но оно не получило широкой поддержки в браузерах примерно до 2015 года. Свойство спроектировано для определения, как распределяется пространство в одной колонке или строке, что делает его более подходящим способом вёрстки, чем float. Таким образом, после десяти лет использования макетов на основе float веб-разработчики наконец-то смогли применять CSS для вёрстки без хаков, присущих макетам на float.
Ниже показан макет на основе flexbox для нашего примера. Он сделан на базе техники, описанной на сайте Solved by Flexbox (популярный ресурс, где публикуются различные примеры на flexbox). Обратите внимание, что для работы flexbox требуется дополнительный враппер div вокруг трёх колонок в HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Modern CSS</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<header>This is the header.</header>
<div>
<main>
<h2>This is the main content.</h2>
<p>...</p>
</main>
<nav>
<h5>This is the navigation section.</h5>
<p>...</p>
</nav>
<aside>
<h5>This is an aside section.</h5>
<p>...</p>
</aside>
</div>
<footer>This is the footer.</footer>
</body>
</html>Вот код flexbox в CSS:
/* FLEXBOX-BASED LAYOUT */
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.container {
display: flex;
flex: 1;
}
main {
flex: 1;
padding: 0 20px;
}
nav {
flex: 0 0 180px;
padding: 0 10px;
order: -1;
}
aside {
flex: 0 0 130px;
padding: 0 10px;
}Это гораздо более компактный код по сравнению с макетом на основе float! Свойства и значения flexbox на первый взгляд немного сбивают с толку, но они устраняют необходимость в большом количестве хаков вроде негативных границ — огромная победа. Вот как выглядит результат:
Нажмите здесь для реального примера
Намного лучше! Все колонки одинаковой высоты и занимают всю высоту страницы. В некотором смысле это выглядит идеально, но у такого подхода есть пара небольших недостатков. Во-первых, поддержка браузеров — сейчас все современные браузеры поддерживают flexbox, но некоторые старые браузеры никогда не будут его поддерживать. К счастью, разработчики браузеров делают существенные шаги, чтобы закончить жизненный цикл старых версий, что сделает более стабильной среду разработки для веб-дизайнеров. Другой недостаток — тот факт, что нам нужно добавлять в разметку <div> — было бы хорошо обойтись без этого. В идеальном мире любой макет CSS вообще не потребует редактировать разметку HTML.
Но самый большой недостаток — в самом коде CSS. Flexbox устраняет много хаков float, но код не такой выразительный, каким он мог быть для описания макета. Flexbox CSS трудно прочитать и получить визуальное понимание, как все элементы лягут на страницу. Из-за этого вы пытаетесь угадать правильные параметры — и проверяете, что получилось.
Важно ещё раз подчеркнуть, что flexbox создан для размещения элементов в одной колонке или строке — он не создан для вёрстки целой страницы! Даже хотя он исправно с этим справляется (намного лучше, чем подход на основе float), для вёрстки в нескольких колонках или строках были специально разработаны другие спецификации. Они называются CSS grid.
Макет на основе grid
CSS grid впервые предложили в 2011 году (ненамного позже flexbox), но прошло долгое время, пока браузеров стали его поддерживать. На начало 2018 года CSS grid поддерживается большинством современных браузеров (огромный шаг вперёд по сравнению с ситуацией год-два назад).
Ниже показан макет на основе grid для нашего примера. Он сделан на базе первого метода, описанного в этой статье по хитростям CSS. Обратите внимание, что в этом примере мы можем избавиться от <div>, который приходилось добавлять в макет на основе flexbox. Здесь мы просто используем оригинальный HTML без каких-либо изменений. Вот как выглядит CSS:
/* GRID-BASED LAYOUT */
body {
display: grid;
min-height: 100vh;
grid-template-columns: 200px 1fr 150px;
grid-template-rows: min-content 1fr min-content;
}
header {
grid-row: 1;
grid-column: 1 / 4;
}
nav {
grid-row: 2;
grid-column: 1 / 2;
padding: 0 10px;
}
main {
grid-row: 2;
grid-column: 2 / 3;
padding: 0 20px;
}
aside {
grid-row: 2;
grid-column: 3 / 4;
padding: 0 10px;
}
footer {
grid-row: 3;
grid-column: 1 / 4;
}Результат визуально идентичен макету на основе flexbox. Однако здесь код CSS намного лучше в том смысле, что он явно показывает искомый макет. Размер и форма колонок и строк определены в селекторе body, а каждый элемент сетки непосредственно определяется по своему положению.
Единственное, что может смущать — это свойство grid-column, которое определяет начальную и конечную позиции колонки. Оно может смущать, потому что в этом примере три колонки, но используются числа от 1 до 4. Ситуация проясняется, если взглянуть на иллюстрацию:
Нажмите здесь для реального примера
Первая колонка начинается в позиции 1 и заканчивается в позиции 2, вторая колонка начинается в 2 и заканчивается в 3, а третья колонка начинается в позиции 3, а заканчивается в позиции 4. В заголовке указано свойство grid-column со значением 1 / 4 для расширения на всю страницу, в nav указано grid-column со значением 1 / 2 для расширения на первую колонку и т.д.
Когда вы привыкнете к синтаксису grid, то станет понятно, что это идеальный способ осуществлять вёрстку в CSS. Единственный реальный недостаток — поддержка не во всех браузерах. Но опять же ситуация значительно улучшилась за последний год. Трудно переоценить значение CSS grid как первого реального инструмента в CSS, который действительно изначально создан для вёрстки, то есть для вёрстки всей страницы целиком. В каком-то смысле веб-дизайнерам всегда приходилось быть очень консервативными при создании креативных макетов, поскольку до последнего времени инструменты оставались очень хрупкими, требовали разнообразных хаков и нестандартных лазеек. Теперь с появлением CSS grid возникает потенциал для новой волны креативных дизайнерских макетов, которые невозможно было создать никогда раньше — замечательные времена!
— Получил? Забавно, что когда меняешь что-то в CSS, то оно ломает что-нибудь ещё!
— Возможно, но с новыми спецификациями вроде flexbox и grid всё стало гораздо лучше!
— Ха! В CSS гораздо больше трудностей, а не только вёрстка!
До сих пор мы рассматривали использование CSS для простых стилей и макетов. Сейчас изучим инструменты, которые помогают работать с самим языком CSS. Начнём с CSS-препроцессоров.
CSS-препроцессор позволяет писать стили на других языках, которые потом преобразуются в CSS, чтобы их понял браузер. Это было исключительно важно во времена, когда браузеры слишком медленно внедряли поддержку новых функций. Первый популярный CSS-препроцессор Sass вышел в 2006 году. В нём реализовали новый краткий синтаксис (отступы вместо скобок, отсутствие точек с запятой и т.д.) и добавили продвин
Что такое CSS — это читайте тут. Как добавить таблицу стилей к html странице.
CSS — это технология, позволяющая управлять внешим видом содержимого html-документа. Аббревиатура CSS расшифровывается как Cascading Style Sheets, а переводится это так: каскадные таблицы стилей.
Изучение CSS подразумевает знание HTML. Если вы не изучили HTML, то начинать изучение CSS вам ещё рано. Сначала освойте язык разметки гипертекста, а потом приступайте к изучению каскадных таблиц стилей.
Ближе к делу.
Каждый элемент html-документа имеет свой внешний вид по умолчанию. Например, текст взятый в тег <h2>, будет иметь поределённый размер, цвет и шрифт. Так и все теги по умолчанию как-то отображаются образуя стиль.
Стиль html документа — это, говоря по простому, всё, что относится к отображению документа в браузере: шрифты, размеры, цвета, разрядки заголовков и текста, отступы и т.д. При помощи CSS мы можем управлять параметрами форматирования элементов документа.
Как именно это делается?
Опишу для начала один способ присоединения CSS к документу. Хотя способов существует несколько, но нужно начать с чего-то одного.
Итак, в корне сайта создаёте текстовый файл, но с расширением не .txt, а .css. Корень сайта выбран просто так, можно создать папку /css/ и разместить файл там.
Назовём этот файл css-file.css. В этот файл вписывается программный код таблицы стилей. Таблица стилей — это шаблон, который управляет форматированием тэгов HTML в Web-документе.
Таблица стилей представляет собой набор правил форматирования тегов HTML. Синтаксис их следующий:
тег { свойство: значение }
Например сделаем этот заголовок синим и величиной 16pt. Для этого в файл вписывается строка:
h2 { color: blue; font-size: 16pt }
Теперь нужно сделать так, чтобы этот файл влиял на html документ, просто расположить его на хостинге не достаточно. Для этого в раздел <head> вставляем следующий тег:
<head>
<link rel="stylesheet" type="text/css" href="/css-file.css">
</head>В html документе теперь теги <h2> будут синие и величиной 16pt.
Другой способ
Есть и другой способ прописать в html-документе правило CSS. Нужно в разделе <head> прописать таблицу стилей в теге <style>, вот как это выглядит:
<head>
<style>
h2 { color: blue; font-size: 16pt }
</style>
</head>Сейчас я приведу пример того, как это работает. Вот образец кода:
<head>
<title>Пример CSS</title>
<style>
h2 { color: blue; font-size: 16pt; }
</style>
</head>
<body>
<h2>Привет!</h2>
<h3>Заголовок h3!</h3>
</body>Ещё один способ добавления CSS
Существует еще один способ добавить стиль к тегу — прописать нужные параметры стиля в самом теге в атрибуте style. Данные стили называются внутренние, или встроенные. По сути эти стили — это расширение одного тега. Вот пример использования такого стиля:
<head>
<title>Пример CSS</title>
</head>
<body>
<h2>Заголовок h2 без стилей</h2>
<h2>Заголовок h2 с внутренним стилем</h2>
</body>Промежуточные итоги
Итак, мы познакомились с тремя способами добавления таблиц стилей к документу.
- Связывание — хранение таблицы CSS в отдельном файле и происходит подключение его в html-документам. Этот способ позволяет использовать одну таблицу стилей для форматирования многих документов. Стили из таких файлов называют связанные стили.
- Внедрение — позволяет задавать все правила таблицы стилей непосредственно в заголовке документа. Такие стили также называют глобальные стили.
- Встраивание в тэги документа — позволяет изменять параметры стиля конкретных тегов страницы. Это также называют внутренний или встроенный стиль.
Есть ещё четвертый способ — импортирование, но его мы пока упустим.
Сейчас нас интересует следующий вопрос. Как будет вести себя браузер, если тегу <h2> указаны стили всеми тремя способами.
Существует иерархия применения стилей, необходимо помнить об этом. Основной приоритет имеет внутренний стиль, затем применяется глобальный стиль и в связанный стиль будет применён в последнюю очередь.
Наверно именно из-за этой иерархии таблицы стилей назвали каскадными.
Удобный способ
Самый удобный способ задания стилей — это подключение css файла в документу, или связывание. Именно он используется наиболее часто, так как позволяет изменяя стили в одном месте, влиять на большое число страниц.
Подробнее про синтаксис CSS и используемые термины
Как я написал выше, таблица стилей представляет собой набор правил форматирования тегов HTML. Синтаксис этих следующий:
тег { свойство: значение }
Правило CSS — это указание браузеру как отображать тег.
Любое правило каскадных таблиц стилей состоит из двух частей: селектора и определения. То есть наш пример синтаксиса можно написать так:
селектор { определение }
Селектором может быть любой тег HTML для которого определение указывает, каким образом необходимо его форматировать. Само определение, в свою очередь, также состоит из двух частей: свойства и значения, они разделены знаком двоеточия (:).
селектор { свойство: значение }
В одном правиле CSS можно задавать несколько определений, в таком случае их разделяют символом точка с запятой (;), именно так и было сделано в примерах выше.
селектор
{
свойство: значение;
свойство: значение
}
После последнего определения ставить точку с запятой (;) не обязательно.
В качестве селектора могут выступать не только теги, но и классы и идентификаторы. Но это тема отдельной статьи.
CSS не чувствителен к регистру и пробельным символам, поэтому переносы строки, знаки табуляции и пробелы можно использовать на собственное усмотрение для удобства чтения кода.
<head>
<title>Пример CSS</title>
<style>
h2 { color: blue; font-size: 16pt; }
h3
{
color: red;
font-size: 12pt;
}
</style>
</head>
<body>
<h2>Заголовок h2</h2>
<h3>Заголовок h3</h3>
</body>В этом примере первое правило (для селектора h2) записано в одну строку, второе правило (для селектора h3) прописано по другому — каждой определение селектора прописано в новой строке. Второй вариант кода более удобен для чтения.
В CSS допустимо для одного селектора каждое свойство указывать по отдельности, вот пример такого кода:
<style>
h2 { color: blue; }
h2 { font-size: 16pt; }
</style>Такая форма записи не очень удобна, в таком коде можно легко запутаться, особенно когда нужно задать много стилевых свойств для одного селектора. Предпочтительней следующая форма записи:
<style>
h2
{
color: blue;
font-size: 16pt;
}
</style>Может получиться так, что для одного селектора было два раза задано одно стилевое свойство.
<style>
h2
{
color: blue;
font-size: 16pt;
color: red;
}
</style>В этом примере для селектора h2 сначала указали синий цвет, потом красный. В таком случае будет присвоено стилевое свойство, правило с которым прописано ниже по коду. В нашем случае тег h2 будет отображаться красным цветом.
Такие ситуации обычно возникают случайно, но также могут иметь место при подключении к документу разных стилевых файлов, в которых прописаны одинаковые селекторы. Этот принцип полезно помнить при неверной работе таблиц CSS.
Очевидная вещь: у каждого свойства может быть только соответствующее ему значение. У свойства color это будет цвет, а не размер.
Комментарии в файле CSS
Комментарии крайне необходимы в больший файлах CSS. Код с комментариями легче воспроизвести, легче вспомнить логику и структуру селекторов. Также комментарии очень нужны, если есть вероятность что код будет править другой человек.
Для создания комментария в CSS применяют следующую конструкцию: /* … */. Пример комментариев в CSS файле.
/*
Стиль сделан Иваном Монеткиным для ознакомительных целей
*/
div
{
width: 100px; /* Ширина блока */
margin: 10px; /* Поля вокруг элемента */
float: right; /* Обтекание по правому краю */
}Следует помнить что вложенные комментарии недопустимы.
Заключение
Итак, теперь вы имеете начальное представление о том, что такое CSS. Сейчас вы можете далее продвигаться в изучении CSS.
| border | Это свойство позволяет определить все атрибуты рамки HTML элемента за одну декларацию |
| border-bottom | Это свойство позволяет определить все атрибуты нижней рамки HTML элемента за одну декларацию |
| border-bottom-color | Это свойство определяет цвет нижней стороны рамки HTML элемента |
| border-bottom-left-radius | Устанавливает радиус скругления левого нижнего уголка рамки |
| border-bottom-right-radius | Устанавливает радиус скругления правого нижнего уголка рамки |
| border-bottom-style | Это свойство определяет стиль нижней стороны рамки HTML элемента |
| border-bottom-width | Это свойство определяет толщину нижней стороны рамки HTML элемента |
| border-color | Это свойство определяет цвет всех четырех сторон рамки HTML элемента |
| border-image | Позволяет устанавливать изображение вместо обычной рамки вокруг элемента |
| border-image-outset | Устанавливает отступ рамки-изображения за пределы границ элемента |
| border-image-repeat | Устанавливает способ заполнения фоновым изображением пространства между углами рамки |
| border-image-slice | Определяет размер частей изображения, используемых для оформления границ элемента |
| border-image-source | Задаёт путь к изображению, которое будет использоваться в качестве рамки элемента |
| border-image-width | Задаёт ширину изображения для рамки элемента |
| border-left | Это свойство позволяет определить все атрибуты левой рамки HTML элемента за одну декларацию |
| border-left-color | Это свойство определяет цвет левой стороны рамки HTML элемента |
| border-left-style | Это свойство определяет стиль левой стороны рамки HTML элемента |
| border-left-width | Это свойство определяет толщину левой стороны рамки HTML элемента |
| border-radius | Устанавливает радиус скругления уголков рамки |
| border-right | Это свойство позволяет определить все атрибуты правой рамки HTML элемента за одну декларацию |
| border-right-color | Это свойство определяет цвет правой стороны рамки HTML элемента |
| border-right-style | Это свойство определяет стиль правой стороны рамки HTML элемента |
| border-right-width | Это свойство определяет толщину правой стороны рамки HTML элемента |
| border-style | Это свойство определяет стиль всей рамки вокруг элемента |
| border-top | Это свойство позволяет определить все атрибуты верхней рамки HTML элемента за одну декларацию |
| border-top-color | Это свойство определяет цвет верхней стороны рамки HTML элемента |
| border-top-left-radius | Устанавливает радиус скругления левого верхнего уголка рамки |
| border-top-right-radius | Устанавливает радиус скругления правого верхнего уголка рамки |
| border-top-style | Это свойство определяет стиль верхней стороны рамки HTML элемента |
| border-top-width | Это свойство определяет толщину верхней стороны рамки HTML элемента |
| border-width | Это свойство определяет толщину всех четырех сторон рамки HTML элемента |
| outline | Универсальное свойство, которое устанавливает атрибуты контура элемента |
| outline-color | Определяет цвет контура |
| outline-offset | Задает величину отступа контура от элемента |
| outline-style | Определяет стиль контура |
| outline-width | Определяет толщину контура |
Самоучитель CSS | Отличия html и CSS
Каскадные таблицы стилей (Cascading Style Sheets) предоставляют дополнительные возможности для разметки html-документа и свободу по созданию уникального дизайна для веб-страниц.
Прежде чем приступить к изучению CSS, у вас уже должен быть небольшой опыт работы с HTML, имеется ввиду, что вы уже создавали простые страницы и знакомы с основными HTML тегами для разметки документа.
Стили по умолчанию
Когда браузер обрабатывает HTML-код, он использует встроенный по умолчанию стиль представления HTML-элементов на веб-странице. Чтобы понять, что такое «стиль по умолчанию» рассмотрим в качестве примера элементы <h2> — <h6>: заголовки являются блочными элементами, занимают всю доступную ширину в родительском элементе, имеют разрыв строки до и после элемента, текст заголовка отображается жирным начертанием и имеет определённый размер, в зависимости от уровня заголовка, всё это вместе является встроенным стилем для заголовков.
С помощью CSS можно переопределить установленный для элементов стиль по умолчанию на свой собственный, создав тем самым уникальный стиль оформления для элементов веб-страницы, например изменить цвет текста заголовка и размер шрифта, выделить изображение красной рамкой и т.д.
Что такое CSS?
- CSS — Каскадные Таблицы Стилей(Cascading Style Sheets)
- Стиль — правило, описывающее форматирование отдельного элемента на странице
- Стили были добавлены для решения проблемы оформления веб-страниц
- Стили можно хранить в отдельных документах, что уменьшает размер HTML-кода
Чем полезны таблицы стилей помещенные в отдельный документ? Ответ очень прост, можно собрать все стили, которые используются на сайте, в один внешний файл с расширением .css и связать его со всеми страницами сайта. После этого, когда вы будете редактировать стиль, изменения моментально затрагивают все элементы на страницах сайта, где есть ссылка на данный внешний файл со стилями. Таким образом, вы можете полностью изменить внешний вид путем редактирования единственного файла таблицы стилей, что существенно упрощает работу, нежели редактировать стили на каждой странице в отдельности.
HTML и CSS
CSS и HTML — это два разных языка для разных целей.
При написании html-кода для CSS, выбирая теги, ориентируйтесь на роль, которую играет фрагмент текста на веб странице, а не на внешний вид, который текст приобретает благодаря этому тегу.
Применяя CSS для дизайна веб-страницы, вы используете HTML только по его прямому назначению, то есть именно для разметки веб-страницы на логические фрагменты, не заботясь о форматировании и внешнем виде страницы.
Небольшой пример использования CSS:
С помощью стилей, картинка была позиционирована с левой стороны, а для текста был изменен размер, цвет и добавлена тень.
В браузере Internet Explorer 9 и в более ранних версиях не поддерживается свойство, добавляющее тень к тексту.
Что такое CSS, основные понятия
Что такое CSS
CSS — это аббревиатура Cascading Style Sheets/Каскадных таблиц стилей. Файлы имеют соответствующее расширение .css.
CSS-код – это своеобразный список инструкций и указаний для браузера, по тому что, где и как отобразить (элементы web-страницы). Элементами — теги XHTML/HTML и их содержимое.
Что можно делать с помощью CSS?
CSS — это язык стилей, определяющий то, как будут отображены HTML-документы и их элементы. С помощью CSS можно определять позицию элементов, цвет, шрифт, поля, границы, строки, высоту, ширину, фоновые изображения и многое-многое другое.
HTML может использоваться для оформления web-сайтов. Но CSS предоставляет куда большие возможности. Поддерживается всеми браузерами (IE, Mozilla, Chrome, Safari и тд).
| Однако о кроссбраузерности (способность кода одинаково отображать результат во всех браузерах) говорить пока не приходится, так как многие разработчики браузеров стараются сделать свой уникальный код для того или иного свойства, что осложняет работу дизайнеров. Например, если Вы хотите указать степень прозрачности элемента, то Вам надо будет написать минимум 4 строки, одинаковые по своей сути, но воспринимаемые только одним или двумя браузерами по отдельности. |
Преимущества использования CSS
1) Можно указать такие свойства, которых нет в HTML
2) Код теперь будет структурирован и может находиться в отдельном файле
3) Можно значительно сократить размер кода и сделать его читабельным
4) Возможность подлючения CSS к нескольким отдельным файлам. Допустим, у Вас есть 10 старниц, в которых Вы раньше отдельно указывали цвет header’а (шапки сайта). А теперь Вы не будете 10 раз в разных файлах менять его отдельно, а измените параметр только в css-файле.
5) Переход от табличной вёрстки сайта к блочной. Сокращаем и структурируем код!
Пример кода CSS-файла
Код CSS (Файл, например, style.css)
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
font: 14px/130% Tahoma, Verdana, sans-serif;
}
a {
outline: none;
text-decoration: underline;
}a:hover {
outline: none;
color: black;
}
Переходите к урокам! Спасибо за внимание!
Введение в CSS | htmlbook.ru
После знакомства с HTML разработчики сайтов разделяются на две основные категории. Одна часть считает, что с помощью HTML на сайте можно создавать всё или практически всё, другая же понимает, что в целом средств разметки недостаточно для оформления веб-документов. Действительно, HTML лишь первый этап в процессе обучения созданию сайтов. Следующим шагом является изучение стилей или CSS (Cascading Style Sheets, каскадные таблицы стилей).
Стили представляют собой набор параметров, управляющих видом и положением элементов веб-страницы. Чтобы стало понятно, о чем идет речь, посмотрим на рис. 1.1.
Рис. 1.1. Веб-страница, созданная только на HTML
Это обычная веб-страница, оформленная без всяких изысков. Тот же самый документ, но уже с добавлением стилей приобретает совершенно иной вид (рис. 1.2).
Рис. 1.2. Веб-страница, созданная на HTML и CSS
Перемена разительна, поэтому заглянем в код, чтобы понять, в чем же разница (пример 1.1).
Пример 1.1. Исходный код документа
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<title>Флексагон</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Флексагон</h2>
<p>Флексагон представляет собой бумажную фигуру, которая имеет
три и более стороны. Поначалу кажется, что это невозможно, но вспомните
ленту Мёбиуса, она ведь имеет всего одну сторону, в отличие от листа бумаги,
и, тем не менее, реальна. Так же реален и флексагон, который легко сделать и
склеить в домашних условиях. Он выглядит как двухсторонний шестиугольник, но
стоит согнуть его особым образом, и мы увидим третью сторону. Легко убедиться,
что мы имеем дело именно с тремя сторонами, если раскрасить их в разные цвета.
Перегибая флексагон, по очереди будем наблюдать все его поверхности.</p>
</body>
</html>Сам код HTML никаких изменений не претерпел и единственное добавление — это строка <link rel=»stylesheet» href=»style.css»>. Она ссылается на внешний файл с описанием стилей под именем style.css. Содержимое этого файла показано в примере 1.2.
Пример 1.2. Содержимое стилевого файла style.css
body {
font-family: Arial, Verdana, sans-serif; /* Семейство шрифтов */
font-size: 11pt; /* Размер основного шрифта в пунктах */
background-color: #f0f0f0; /* Цвет фона веб-страницы */
color: #333; /* Цвет основного текста */
}
h2 {
color: #a52a2a; /* Цвет заголовка */
font-size: 24pt; /* Размер шрифта в пунктах */
font-family: Georgia, Times, serif; /* Семейство шрифтов */
font-weight: normal; /* Нормальное начертание текста */
}
p {
text-align: justify; /* Выравнивание по ширине */
margin-left: 60px; /* Отступ слева в пикселах */
margin-right: 10px; /* Отступ справа в пикселах */
border-left: 1px solid #999; /* Параметры линии слева */
border-bottom: 1px solid #999; /* Параметры линии снизу */
padding-left: 10px; /* Отступ от линии слева до текста */
padding-bottom: 10px; /* Отступ от линии снизу до текста */
}В файле style.css как раз и описаны все параметры оформления таких тегов как <body>, <h2> и <p>. Заметьте, что сами теги в коде HTML пишутся как обычно.
Поскольку на файл со стилем можно ссылаться из любого веб-документа, это приводит в итоге к сокращению объёма повторяющихся данных. А благодаря разделению кода и оформления повышается гибкость управления видом документа и скорость работы над сайтом.
CSS представляет собой свой собственный язык, который совпадает с HTML только некоторыми значениями, например способом определения цвета.
Типы стилей
Различают несколько типов стилей, которые могут совместно применяться к одному документу. Это стиль браузера, стиль автора и стиль пользователя.
Стиль браузера
Оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это оформление можно увидеть в случае «голого» HTML, когда к документу не добавляется никаких стилей. Например, заголовок страницы, формируемый тегом <h2>, в большинстве браузеров выводится шрифтом с засечками размером 24 пункта.
Стиль автора
Стиль, который добавляет к документу его разработчик. В примере 1.2 показан один из возможных способов подключения авторского стиля.
Стиль пользователя
Это стиль, который может включить пользователь сайта через настройки браузера. Такой стиль имеет более высокий приоритет и переопределяет исходное оформление документа. В браузере Internet Explorer подключение стиля пользователя делается через меню , как показано на рис. 1.3.
Рис. 1.3. Подключение стиля пользователя в браузере Internet Explorer
В браузере Opera аналогичное действие происходит через команду (рис. 1.4).
Рис. 1.4. Подключение стиля пользователя в браузере Opera
Указанные типы стилей могут спокойно существовать друг с другом, если они не пытаются изменить вид одного элемента. В случае возникновения противоречия вначале имеет приоритет стиль пользователя, затем стиль автора и последним идёт стиль браузера.
Вопросы для проверки
1. Требуется задать цвет заголовка зелёным. Какое стилевое свойство подойдёт для этой цели?
- font-color
- color
- font-family
- text
- font-size
2. Что такое стиль?
- Способ сокращения HTML-кода за счёт переноса части данных в другой файл.
- Язык разметки гипертекстовых документов.
- Набор правил форматирования элементов веб-страницы.
- Метод преобразований текстовых документов в HTML.
- Технология, представляющая собой разные приёмы для вёрстки HTML-кода.
3. Как расшифровывается аббревиатура CSS?
- Colorful Style Sheets
- Cascading Style Sheets
- Computer Style Sheets
- Creative Style Sheets
- Common Style Sheets
Ответы
1. color
2. Набор правил форматирования элементов веб-страницы.
3. Cascading Style Sheets