CSS样式学习笔记（三）html文件引入CSS的方法（2）
2017-07-05 本文已影响67人
胡溪玥
一、CSS样式规则
CSS样式规则
二、html文件中引入CSS样式的方法有以下三种（行内样式，内部样式表，外部样式表）：
2.1 行内样式（ 使用style属性引入CSS样式）
实现方式：CSS样式写在html页面的每个元素的style属性中，例以下源码：
CSS引入方法，通过style属性引入
使用style属性引入CSS样式效果展
TIPS：语法： <h1 style=" font size:18px; colcor:black;"> 望庐山瀑布 <\h1>
2.2 内部样式表
实现方式：CSS代码写在<head>的<style>标签中
CSS内部样式
上述源码中将html文本中的所有主窗体设置为tan色，所有的h2标题字体设置为红色，字体大小设置为18px;
上述源码展现效果图
适用范围：
当单个文档需要使用特殊的样式时，可以使用这个内部样式表来实现
2.3 外部样式表
实现方式：CSS代码保存在扩展名为.css的样式表中，HTML文件引用扩展名为.css的样式表 ；引用.CSS样式表的方式有链接式及导入式两种。
1.3.1 外部样式表使用<link/>标签链接外部CSS文件
如先建立page1.css,在page1.css文件中
可能是好几个html文件中所要共用的CSS文件
html文件中导入式引入css样式文件
导入式使用@import url(.css)
使用这种方法存在一个缺陷：导入式会在整个网页装载完后再装载CSS文件，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式；这是导入式固有的一个缺陷。
使用<link>标签引入CSS文件
<link href="D:/work/HtmlTest/chap04/page1.css" rel="stylesheet" type="text/css"/>
link 格式引用page1.css样式到html中
三、CSS样式选择优先级建议遵循以下原则：
行内样式>内部样式表>外部样式表
TIPS1：内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明： 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
ID选择器>类选择器>标签选择器
