Три способа использования CSS на страницах: встроенные стили, встроенные таблицы стилей и связанные таблицы стилей

Три способа использования CSS на страницах: встроенные стили, встроенные таблицы стилей и связанные таблицы стилей.

2024-07-12

Стили CSS используются на страницах тремя способами: встроенные стили, встроенные таблицы стилей и связанные таблицы стилей.

1. Встроенный стиль

Встроенный стиль — это относительно прямой стиль, определенный непосредственно в теге HTML и реализуемый через атрибут style. Этот метод легче освоить, но он не очень гибок.

【Пример】Применяйте встроенные стили для управления страницей.


<!-- 在页面元素中定义CSS样式 -->
<p style="font-size: 36px; color:red">您好，欢迎访问 pan_junbiao的博客</p>
<p style="font-size: 24px; font-weight: bold;">您好，欢迎访问 pan_junbiao的博客</p>
<p style="font-size: 18px; font-style: italic">您好，欢迎访问 pan_junbiao的博客</p>
<p style="font-size: 14px; text-decoration: line-through;">您好，欢迎访问 pan_junbiao的博客</p>

Результаты:

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

Использование встроенных таблиц стилей <style>...</style> Теги включают стили CSS на странице. Форма встроенных таблиц стилей не такая прямая, как встроенные стили, но страница будет более регулярной.

【Пример】Используйте встроенные таблицы стилей для стилизации своих страниц.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="pan_junbiao的博客">
    <title>CSS在页面中使用的三种方式</title>
    
    <!-- 内嵌式样式表 -->
    <style type="text/css">
        h1, h2, h3{
            font-family: Tahoma, Geneva, sans-serif; /*定义字体*/
            color: blue; /*文字颜色*/
        }
    </style>
</head>
<body>
    <h1>大风起兮云飞扬</h1>
    <h2>威加海内兮归故乡</h2>
    <h3>安得猛士兮守四方</h3>
</body>
</html>

Результаты:

3. Связанная таблица стилей

Ссылка на внешнюю таблицу стилей CSS — наиболее распространенный способ ссылки на таблицу стилей.Сначала определите стиль CSS в отдельном файле, а затем передайте его на HTML-странице.<link> Теги для ссылки на них. Это наиболее эффективный способ использования стилей CSS.

<link>Синтаксическая структура тега следующая:

<link rel='stylesheet' href='path' type='text/css'>

rel: Связь между внешним документом и вызывающим документом.

href: абсолютный или относительный путь к документу CSS.

type: MIME-тип внешнего файла

【Пример】Ссылка на стили CSS на странице.

(1) Создайте каталог css, а затем создайте в нем файл стиля css.css.


/*定义CSS样式 */
h1,h2,h3{								
    color:#6CFF;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
 
p{
    color:#F0CC;	/*定义颜色*/
    font-weight:200;
    font-size:24px;	 /*设置字体大小*/
}

(2) Перейдите на страницу<link> Теги добавляют на страницу файлы стилей CSS.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="pan_junbiao的博客">
    <title>CSS在页面中使用的三种方式</title>
 
    <!--页面引入CSS样式表-->
    <link rel="stylesheet" type="text/css" href="/css/css.css">		
</head>
<body>
    <h2>春夜喜雨</h2>
    <p>好雨知时节，当春乃发生。</p>
</body>
</html>

Результаты:

4. Приоритет вызовов таблиц стилей

Порядок приоритетов вызовов таблиц стилей соответствует следующим принципам:

(1) Стиль, определенный во встроенном стиле, имеет наивысший приоритет.

(2) Другие стили следуют принципу близости в том порядке, в котором они появляются или на которые ссылаются в файле HTML. Чем ближе к тексту, тем выше приоритет.

(3) Порядок приоритета селекторов: селектор потомка, селектор класса, селектор идентификатора, и приоритет уменьшается по порядку.

(4) Стили, не определенные ни в одном файле, будут следовать стилю браузера по умолчанию.

Обмен технологиями