stylesheet在html，htmlcollection
今天给各位分享stylesheet在html的知识，其中也会对htmlcollection进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
在html里可以使用什么方法引入css
CSS的引入方式共有三种：行内样式、内部样式表、外部样式表。
一、行内样式
使用style属性引入CSS样式。
示例：
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>
实际在写页面时不提倡使用，在测试的时候可以使用。
例如：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8"/>
<title>行内样式</title>
</head>
<body>
<!--使用行内样式引入CSS-->
<h1 style="color:red;">Leaping Above The Water</h1>
<p style="color:red;font-size:30px;">我是p标签</p>
</body>
</html>
二、内部样式表
在style标签中书写CSS代码。style标签写在head标签中。
示例：
<head>
<style type="text/css">
h3{
color:red;
}
</style>
</head>
例如：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8"/>
<title>内部样式表</title>
<!--使用内部样式表引入CSS-->
<style type="text/css">
div{
background: green;
}
</style>
</head>
<body>
<div>我是DIV</div>
</body>
</html>
三、外部样式表
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。
语法：
1、链接式
<link type="text/css" rel="styleSheet" rel="external nofollow" href="CSS文件路径"/>
2、导入式
<style type="text/css">
@import url("css文件路径");
</style>
例如：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8"/>
<title>外部样式表</title>
<!--链接式:推荐使用-->
<link rel="stylesheet" type="text/css" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="css/style.css"/>
<!--导入式-->
<style type="text/css">
@import url("css/style.css");
</style>
</head>
<body>
<ol>
<li>1111</li>
<li>2222</li>
</ol>
</html>
链接式和导入式的区别
<link>
1、属于XHTML
2、优先加载CSS文件到页面
@import
1、属于CSS2.1
2、先加载HTML结构在加载CSS文件。
四、CSS中的优先级
1、样式优先级
行内样式>内部样式>外部样式(后两者是就近原则)
例如：
行内样式和内部样式比较优先级：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8"/>
<title>行内样式和内部样式表的优先级</title>
<!--内部部样式表-->
<style type="text/css">
p{
color: blue;
}
</style>
</head>
<body>
<!--行内样式-->
<p style="color: red;">我是p段落</p>
</html>
浏览器运行效果：
结论：行内样式优先级高于内部样式表。
内部样式表和外部样式表比较优先级：
a、内部样式表在外部样式表上面
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8"/>
<title>内部样式表和外部样式表的优先级</title>
<!--内部部样式表-->
<style type="text/css">
p{
color: blue;
}
</style>
<!--外部样式表-->
<link rel="stylesheet" type="text/css" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="css/style.css"/>
</head>
<body>
<p>我是p段落</p>
<div>我是div</div>
<ol>
<li>1111</li>
<li>2222</li>
</ol>
</html>
浏览器运行效果：
b、外部样式表在内部样式表上面
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8"/>
<title>内部样式表和外部样式表的优先级</title>
<!--外部样式表-->
<link rel="stylesheet" type="text/css" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="css/style.css"/>
<!--内部部样式表-->
<style type="text/css">
p{
color: blue;
}
</style>
</head>
<body>
<p>我是p段落</p>
<div>我是div</div>
<ol>
<li>1111</li>
<li>2222</li>
</ol>
</html>
浏览器运行效果：
结论：内部样式表和外部样式表使用就近原则，即谁写在下面以谁为准。
注意：导入式和链接式的优先级也是使用就近原则。
2、选择器优先级
优先级：ID选择器>类选择器>标签选择器
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8"/>
<title>选择器的优先级</title>
<style type="text/css">
#a{
color: green;
}
.b{
color: yellow;
}
h2{
color: red;
}
</style>
</head>
<body>
<h2>111</h2><!--红色-->
<h2 id="a" class="b">222</h2><!--绿色-->
<h2 class="b">333</h2><!--黄色-->
</html>
浏览器运行效果：
html如何引用外部css样式
一个外部的样式表可以通过HTML的LINK元素连接到HTML文档中:
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen<
<LINK REL=StyleSheet HREF="color-8b.css" TYPE="text/css" TITLE="8-bit Color Style" MEDIA="screen, print"<
<LINK REL="Alternate StyleSheet" HREF="color-24b.css" TYPE="text/css" TITLE="24-bit Color Style" MEDIA="screen, print"<
<LINK REL=StyleSheet HREF="aural.css" TYPE="text/css" MEDIA=aural<
<LINK<标记是放置在文档的HEAD部分。可选的TYPE属性用于指定媒体类型--text/css是一个层叠样式表--允许浏览器忽略它们不支持的样式表类型。为CSS文件配置服务器而将text/css当作Content-type内容发送出去也是一个好注意。
外部样式表不能含有任何像<HEAD<或<STYLE<这样的HTML的标记。样式表仅仅由样式规则或声明组成。一个单独由
P{ margin: 2em}
组成的文件就可以用作外部样式表了。
<LINK<标记也有一个可选的MEDIA属性，用于指定样式表被接受的介质或媒体。允许的值有
screen?(缺省值)，提交到计算机屏幕；print，输出到打印机；projection，提交到投影机；aural，扬声器；braille，提交到凸字触觉感知设备；tty，电传打字机(使用固定的字体)；tv，电视机；all，所有输出设备。多样的媒体通过用逗号隔开的列表或值all指定。
Netscape Navigator 4.x?错误地忽略除了screen值外的任何使用MEDIA值声明的连接或嵌入样式表。例如，MEDIA="screen,projection"会令到样式表被Navigator 4.x忽略，尽管展示的设备是计算机的屏幕。Navigator 4.x?也忽略使用MEDIA=all声明的样式表。
REL属性用于定义连接的文件和HTML文档之间的关系。REL=StyleSheet指定一个固定或首选的样式而REL="Alternate StyleSheet"定义一个交互样式。固定样式在样式表激活时总被应用。缺少的TITLE属性，就像例子中的第一个<LINK<标记，定义一个固定样式。
一个首选样式会自动被应用，就像例子中的第二个<LINK<标记。REL=StyleSheet和一个TITLE属性的组合指定一个首选的样式。网页制作者不能指定多于一个的首选样式。
交互样式通过REL="Alternate StyleSheet"指出。例子中的第三个<LINK<标记定义一个交互样式，用户可以选择用来代替首选样式表。
注意现在的浏览器一般都缺乏选择交互样式的能力。
单一的样式也可以通过多个样式表给出
<LINK REL=StyleSheet HREF="basics.css" TITLE="Contemporary"<
<LINK REL=StyleSheet HREF="tables.css" TITLE="Contemporary"<
<LINK REL=StyleSheet HREF="forms.css" TITLE="Contemporary"<
在这个例子中，三个样式表组合成一个"Contemporary"样式，作为一个首选样式表被应用。要组合多个样式表成一个单一样式，必须在每个样式表中使用相同TITLE。
当样式被应用到很多的网页时，一个外部样式表是理想的。网页制作者使用外部样式表可以改变整个网站的外观而仅仅通过改变一个文件。同样的，大多数浏览器会保存外部样式表在缓冲区，从而如果样式表在缓冲区就避免了在展示网页时的延迟。
Microsoft Internet Explorer?3 for Windows 95/NT4并不支持来自连接的样式表中的BODY?背景图象或颜色。如果考虑到这个错误，网页制作者不妨提供另外的包括一个背景图象或颜色的结构，例如嵌入或内联样式，或使用BODY元素的BACKGROUND属性。
怎么把css放到html中
有3种方式可以将css定义的样式加到HTML里。
1.外联
在HTML里加一个超连结连到外在的CSS文档，这个方法最方便管理整个网站的网页风貌。它让网页的文字内容与版面设计分开，只需要在一个CSS文档内定义好网页的外观风格，所有参考连结到此 CSS档的网页，便会依照指示，反应出定义好的风格。
它的写法是：<HTML>
<HEAD>
<TITLE></TITLE>
<LINK REL="stylesheet" HREF="" TYPE="text/css">
</HEAD>
2.嵌入
在 HTML的<HEAD></HEAD>标签间，加一段CSS定义
这个方法适用于指定某个网页，除了展现外在的 CSS档定义好的网页风格外，同时还要展现本身HTML内定义的CSS样式。
如果内在定义的CSS定义与外在连结的CSS定义相冲突的话，网页的样式将以内在定义的CSS定义为主。
它的写法是：<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE TYPE="text/css">
div{
font: 12pt
font: 16pt
font-weight: bold;
color: green
}
</STYLE>
</HEAD>
<BODY>
<div>内容</div>
</BODY>
</HTML>
3.内联
在HTML的字里行间中加入CSS定义。
这个方法适用于指定网页内的某一小段的样式。
如果内联CSS定义与<HEAD>内在定义的CSS或外在连结的CSS定义相冲突的话最终的样式将以内联的CSS定义为主。
它的写法是：<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<P STYLE="color: red">内容</P>
</BODY>
</HTML>
上面的3种CSS引入方式可以同时并用，也可以单一或成双地使用。如果各CSS间的定义相冲突，则嵌入定义的CSS会盖过外联连结的CSS，内联的CSS会盖过嵌入定义的CSS。
好了，关于stylesheet在html和htmlcollection的问题到这里结束啦，希望可以解决您的问题哈！