Учебники

CSS

Ноябрь 5, 2018

CSS является аббревиатурой от Cascading Style Sheets. Это помогает определить представление элементов HTML в виде отдельного файла, известного как файл CSS с расширением .css .

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

Правила CSS

Правила CSS — это стили, которые мы должны создать для создания таблиц стилей. Эти правила определяют внешний вид связанного элемента HTML. Общая форма синтаксиса CSS выглядит следующим образом: 

Selector {property: value;}

Ключевые моменты

  • Селектор — это HTML-элемент, к которому применяется правило CSS.

  • Свойство указывает атрибут, который вы хотите изменить, соответствующий селектору.

  • Свойство может принимать указанное значение.

  • Свойство и значение разделяются двоеточием (:).

  • Каждое объявление отделяется точкой с запятой (;).

Селектор — это HTML-элемент, к которому применяется правило CSS.

Свойство указывает атрибут, который вы хотите изменить, соответствующий селектору.

Свойство может принимать указанное значение.

Свойство и значение разделяются двоеточием (:).

Каждое объявление отделяется точкой с запятой (;).

Ниже приведены примеры правил CSS: 

P { color : red;}

h1 (color : green; font-style : italic }

body { color : cyan; font-family : Arial; font- style : 16pt}

Встраивание CSS в HTML

Ниже приведены четыре способа добавления CSS в документы HTML.

  1. Встроенные таблицы стилей

  2. Встроенные таблицы стилей

  3. Внешние таблицы стилей

  4. Импортированные таблицы стилей

Встроенные таблицы стилей

Встроенные таблицы стилей

Внешние таблицы стилей

Импортированные таблицы стилей

Встроенные таблицы стилей

Встроенные таблицы стилей включены в элемент HTML, т. Е. Помещены в линию вместе с элементом. Чтобы добавить встроенный CSS, мы должны объявить атрибут style, который может содержать любое свойство CSS.

Синтаксис: 

<Tagname STYLE = “ Declaration1 ; Declaration2 “>  …. </Tagname>

Давайте рассмотрим следующий пример с использованием встроенных таблиц стилей: 

<p style="color: blue; text-align: left; font-size: 15pt">
Inline Style Sheets are included with HTML element i.e. they are placed inline with the element.
To add inline CSS, we have to declare style attribute which can contain any CSS property.
</p>

Выход —

Встроенная таблица стилей

Встроенные таблицы стилей

Встроенные таблицы стилей используются для одинакового оформления всех элементов определенного элемента. Они определены в элементе <head> с помощью элемента <style> .

Элемент <style> должен включать атрибут type . Значение атрибута type указывает, какой тип синтаксиса он включает при визуализации браузером.

Синтаксис 

<head> <title> …. </title>
   <style type =”text/css”>
      …….CSS Rules/Styles….
   </style>		
</head>

Давайте рассмотрим следующий пример с использованием встроенных таблиц стилей: 

<style type="text/css">
   p {color:green; text-align: left; font-size: 10pt}
   h1 { color: red; font-weight: bold}
</style>

Встроенная таблица стилей

Внешние таблицы стилей

Внешние таблицы стилей — это отдельные файлы .css, которые содержат правила CSS. Эти файлы могут быть связаны с любыми документами HTML с помощью тега <link> с атрибутом rel.

Синтаксис: 

<head> <link rel= “stylesheet”  type=”text/css” href= “url of css file”>
</head>

Чтобы создать внешний CSS и связать его с HTML-документом, выполните следующие действия:

  • Прежде всего создайте файл CSS и определите все правила CSS для нескольких элементов HTML. Давайте назовем этот файл как external.css.

Прежде всего создайте файл CSS и определите все правила CSS для нескольких элементов HTML. Давайте назовем этот файл как external.css. 

p{ 
   Color: orange;     text-align:  left;        font-size: 10pt;
}
h1{ 
   Color: orange;      font-weight: bold;
}

  • Теперь создайте HTML-документ и назовите его externaldemo.html.

Теперь создайте HTML-документ и назовите его externaldemo.html. 

<html>
   <head>
      <title> External Style Sheets Demo </title>
      <link rel="stylesheet"  type="text/css" href="external.css">
   </head>
   <body>
      <h1> External Style Sheets</h1>
      <p>External Style Sheets are the separate .css files that contain the CSS rules.</p>
   </body>
</html>

Внешняя таблица стилей

Импортированные таблицы стилей

Импортированные таблицы стилей позволяют нам импортировать правила стилей из других таблиц стилей. Чтобы импортировать правила CSS, мы должны использовать @import перед всеми правилами в таблице стилей.

Синтаксис: 

<head><title> Title Information </title>
   <style type=”text/css”>
      @import URL (cssfilepath)
      … CSS rules…
   </style>
</head>

Давайте рассмотрим следующий пример с использованием встроенных таблиц стилей:

67
Share: