目录
1、样式表
1、内部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
h1{
color: red;
}
</style>
<h1>内部样式</h1>
</body>
</html>
2、外部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入外部样式1-->
<link rel="stylesheet" href="./index.css">
<!-- 或者这么写-->
<style>
@import "index.css";
</style>
</head>
<body>
<h1>外部样式</h1>
</body>
</html>
扩展(面试):link和import之间的区别?
差别1:本质的差别:link属于XHTML标签,而@import完全是CSS提供的一种方式。
差别2:加载顺序的差别:当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显。
差别3:兼容性的差别:@import是CSS2.1提出的,所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
差别4:使用dom(document o bject model文档对象模型 )控制样式时的差别:当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的.
3、行内样式(内联样式、嵌入式样式)
<h1 style="color: red">行内样式</h1>
4、样式的优先级
行内样式 > 内部样式 > 外部样式(就近原则)
如果三种写法都有相同的属性,属性后面加上!important则该样式优先。也就是!important针对的是相同的标签的相同属性。
2、选择器
要使用CSS对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器
1、类/class选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
.top{
color: red;
}
.foot{
background-color: blanchedalmond;
}
</style>
<h1 class="top">class选择器</h1>
<h2 class="top foot">一个标签可以起两个或者多个类名</h2>
</body>
</html>
如果标签中存在多个类的时候,是按照style中的选择器的顺序进行覆盖的,不是按照class内的顺序覆盖渲染的。
2、id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
#top{
color: red;
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
<div id="top">id选择器</div>
</body>
</html>
id选择器具有唯一性。一个标签只能有一个id.
3、通配符选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
*{
margin: 0;
padding: 0;
}
</style>
<div>通配符选择器</div>
</body>
</html>
4、群组和后代/包含选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
div, p ,h2{
color: red;
}
</style>
<div>群组选择器</div>
<p>群组选择器</p>
<h2>群组选择器</h2>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
div p{
color: red;
}
</style>
<div>
<p>div中的p标签</p>
</div>
<p>div外面的p标签</p>
</body>
</html>
后代选择器的选择实际上是从右到左的选择,也就是先选择p标签再选择div标签。
5、伪类选择器
伪类选择器一般使用在a标签上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
/*初始状态(未访问之前)*/
a:link{
color: black;
}
/*访问之后的*/
a:visited{
color: yellow;
}
/*鼠标悬停*/
a:hover{
background-color: red;
}
/*点击激活后*/
a:active{
color: aqua;
}
</style>
<body>
<a href="####">a标签</a>
</body>
</html>
必须按照link---visited---hover---active的顺序书写。否则存在覆盖的问题。
伪类选择器小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
div{
width: 300px;
background-color: darkblue;
}
a{
background-color: darkblue;
color: white;
}
a:hover{
background-color: red;
}
</style>
<body>
<div>
<a href="###">军事</a>
<a href="###">财经</a>
<a href="###">科技</a>
<a href="###">医疗</a>
</div>
</body>
</html>
6、选择器的权重
当多个代码段选择的是相同的元素的,并且都为他们定义了样式。如果属性发生了冲突的话,会选择权重高的来执行。对于相同权重的选择器则会按照就近原则。对于包含选择器,其权重为选择器之和。
id选择器 > class选择器 > 元素选择器