《HTML、CSS和JavaScript入门经典》笔记——包括样式表的三种方法、样式表在HTML中的标签和属性

p58

1、在文档中的<head>中链接扩展名为.css的单独的样式表文件

<head>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

2、将样式规则的集合放置在文档头部的<style>标签内——内部样式表

<head>
    <style type="text/css">
        footer{
            font-size: 9pt;
            line-height: 12pt;
            text-align: center;
        }
    </style>
</head>

 3、通过style属性直接把规则放在HTML标签中(不是长期使用的最佳实践)——内联样式

<p style="color:green">
    This text is green, but <span style="color:red">this text is red,</span>
</p>

本地内联样式总是具有比外部样式表更高的优先级;

位于页面顶部的<style>...</style>标签之间的任何样式规范也具有比外部样式表更高的优先级。

内联样式>内部样式表>外部样式表——样式表的层叠作用

标签 作用
<style>...</style> 允许在文档内包括内部样式表在<head>与</head>之间使用
属性 作用
type="contenttype" Internet内容类型(对于CSS样式表,总是使用"text/css")
标签 作用
<link /> 链接到外部样式表(或其他文档类型),在文档的<head>区域中使用
属性 作用
href="url" 样式表的地址
type="contenttype" Internet内容类型(对于CSS样式表,总是使用"text/css")
rel="stylesheet" 链接类型(对于样式表,总是使用"stylesheet")
标签 作用
<span>...</span> 不做任何事情,但是会提供一个位置,用于放置style或其他属性
属性 作用
style="style" 包括内联样式规范(可以用在<span>、<div>、<body>及其他大多数HTML标签中)
原文地址:https://www.cnblogs.com/jolene-wu/p/8507575.html