Зміст курсу
Основи CSS
Основи CSS
Поєднання HTML і CSS
Відкриваємо три шляхи
Коли йдеться про дизайн веб-сайту, на візуальний вигляд веб-сторінки в першу чергу впливають дві технології – HTML і CSS. Ці дві технології працюють разом трьома різними способами: вбудовані стилі (inline styles), вбудовані таблиці стилів (embedded style sheets) та зовнішні таблиці стилів (external style sheets). Давайте розберемося, що стоїть за цими методами, дослідимо їхні сильні та слабкі сторони.
Inline Styles
Inline styles allow applying CSS directly to an HTML element using the style attribute. This method is simple and useful for quick, dynamic changes. However, the drawback is their limited scope; they can't be easily extended or reused across different elements.
index.html
Embedded Style Sheet
The embedded style sheet resides within an HTML document's <head>, encapsulated within <style> tags. This method allows us to tailor styles specifically to a single page. However, it lacks the versatility needed to be shared across multiple pages.
Example:
Embedded Style Sheet
The embedded style sheet resides within an HTML document's <head>, encapsulated within <style> tags. This method allows us to tailor styles specifically to a single page. However, it lacks the versatility needed to be shared across multiple pages.
index.html
Атрибут rel означає relationship (відносини). rel="stylesheet" вказує на те, як index.css пов'язаний з index.html.
External Style Sheet
The external style sheet is the gold standard for CSS management in larger projects. It involves linking an external .css file to your HTML document using the <link> tag in the <head>. This method promotes scalability, maintainability, and reusability, making it ideal for multi-page projects.
index.html
index.css
The external .css file contains reusable styles for the entire project. Here, all <p> elements in the HTML document are styled using the rules defined in the index.css file. The rel="stylesheet" attribute in the <link> tag specifies the relationship between the HTML and the CSS file.
Note
Remember that while inline styles cater to a single element, styles from an External Style Sheet or an Embedded Style Sheet can adorn multiple elements, streamlining your design efforts.
Дякуємо за ваш відгук!
