CSS三种引入方式有
- 内联样式
- 内部样式表
- 外部样式表
内联样式
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>
实际在写页面时不提倡使用，在测试的时候可以使用
页面渲染过程中，遍历 DOM 节点时要是遇到内联样式可能会引起重绘回流，而且内联样式的优先级较高
内部样式表
在style标签中的CSS代码。style标签写在head标签中
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>内部样式表</title>
<style type="text/css"><!--使用内部样式表引入CSS-->
div{
background: green;
}
</style>
</head>
<body>
<div>我是DIV</div>
</body>
</html>
外部样式表
CSS代码保存在扩展名为.css的文件中
HTML文件引用扩展名为.css的文件，有两种方式：链接式、导入式。
1、链接式
<link type="text/css" rel="styleSheet" href="CSS文件路径" />
2、导入式
<style type="text/css">
@import url("css文件路径");
</style>
链接式和导入式的区别：
- 链接式：优先加载CSS文件到页面
- 导入式：先加载HTML结构在加载CSS文件
链接式和导入式的优先级：
- 谁在
下面谁优先
CSS选择器
1. 基础选择器
- id 选择器
#id名{} - 类选择器
.class名{} - 标签选择器
标签名{}
2. 层次选择器
- 子级(>)
p>span{} - 后代(空格)
section span{} - 兄弟(+)
h1+h2{}[需要紧跟着的两个]
3.伪类选择器（一个冒号）
- 链接和鼠标相关的
x:link 未访问链接
x:visited 已访问链接
x:hover 鼠标放在元素上面
x:active 应用于被激活的元素
x:focus 聚焦中的元素
x:checked 选中的元素
- 选子元素相关
x:first-child 第一个元素
x:last-child 最后一个元素
x:nth-child(n) 第n个元素
not（n）除了某个元素，其它元素添加样式
4.伪元素选择器（两个冒号）
顾名思义：假元素——所谓假：在dom树中并不存在
::before(元素之前的元素)
::after(元素之后的元素)
应用：在文字前后(左右)插入小图标或小符号
input::-webkit-input-placeholder (输入前文字)
应用：输入框未输入时的文字提示
CSS选择器的优先级
内联样式 > ID 选择器 > 类选择器、伪类选择器 > 元素选择器、伪元素选择器 > 外部样式
不过以上优先级顺序并非绝对，还和位置顺序有关
例如：内部样式表和外部样式表使用就近原则，即谁写在下面以谁为准
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" /> <!--外部样式表-->
<style type="text/css"> <!--内部部样式表-->
p{
color: blue;
}
</style>
</head>
<!--内部部样式表优先于外部样式表-->
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！