Уроки CSS
Что такое CSS?
CSS , расшифровывается как Cascading Style Sheet - это компьютерный язык для описания представления (например, ширины, высоты, цвета, цвета фона, выравнивания и т. Д.) Веб-документов HTML и XML (и языков на основе XML, таких как XHTML, SVG). Во всех примерах наших руководств мы использовали HTML для реализации CSS.
CSS - это стандарт, определенный и поддерживаемый Консорциумом World Wide Web .
С момента своего изобретения CSS развивался в разных версиях. Текущая версия CSS - это CSS 2.1 .
Следующая версия CSS - это CSS3 , которая находится в стадии разработки, но разработчики уже начали использовать некоторые из ее функций.
На последующих страницах мы подробно обсудим CSS 2.1 . Узнав, что вы сможете реализовать CSS на своих веб-страницах .
Как CSS может быть связан с веб-страницей HTML
Существует три способа прикрепить CSS к веб-странице HTML.
1. Написание кода CSS в отдельном файле ( файлы CSS сохраняются с расширением .css ) и включение этого файла CSS в раздел head страницы HTML с использованием элемента <link> .
Пример включения CSS с использованием элемента <link>
Код CSS:
p {color: maroon}HTML код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>A simple CSS example</title>
<link rel='stylesheet' href='/css-intro1.css' type='text/css' />
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at nisi velit, aliquet iaculis est.
</p>
</body>
</html>
Результат
Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Нун в Ниси Велит, Аликет Якулис есть.
Посмотрите пример CSS с использованием элемента link в отдельном окне браузера.
2. Написание CSS-кода как значения атрибута стиля HTML-элемента, представление которого вы хотите установить. Это называется встроенным стилем.
Пример написания CSS как значения атрибута стиля
HTML и CSS код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>A simple CSS example</title>
<link rel='stylesheet' href='/css-intro1.css' type='text/css' />
</head>
<body>
<p style="color: maroon">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at nisi velit, aliquet iaculis est. </p>
</body>
</html>
Результат
Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Нун в Ниси Велит, Аликет Якулис есть.
Посмотрите пример написания CSS с использованием встроенного стиля в отдельном окне браузера.
3. Написание CSS-кода в тегах стиля, в разделе заголовка HTML-страницы.
Пример написания кода CSS в тегах стиля в разделе заголовка HTML-страницы
HTML и CSS код :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>A simple CSS example</title>
<style type="text/css" >
p {color: maroon}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at nisi velit, aliquet iaculis est. </p>
</body>
</html>
Посмотрите пример написания CSS внутри тегов стиля в отдельном окне браузера.
Преимущества CSS
1. Разделение формы представления контента : записав код CSS в другой файл CSS и прикрепив его к странице HTML, вы можете отделить контент от презентации. Поэтому, как автору, вам не нужно беспокоиться о презентации и концентрироваться только на контенте.
2. Согласованность : CSS может обеспечить согласованное представление для всех страниц веб-сайта.
3. Увеличение доступности : если конкретной странице (или нескольким страницам) требуется другой внешний вид и форматирование с изменением одной строки, это может быть достигнуто путем вызова более одного CSS для одной и той же страницы.
4. Экономия полосы пропускания : поскольку CSS разделяет стиль формы контента, это делает веб-документ легким, что приводит к экономии полосы пропускания и, в свою очередь, ускоряет загрузку страницы.
5. Простота вклада . Системы управления контентом (например, WordPress) используют CSS, так что люди, не заботясь о том, как будет выглядеть их контент, могут представить свой контент. Это привело к экспоненциальному увеличению пользовательского контента.
Новый контент: Composer: менеджер зависимостей для PHP , R программирования