1.css样式引入的4种方式
1.行内样式
2.内嵌样式
3.外链样式
4.导入样式
css样式优先级:行内样式>内嵌样式>外链样式>导入样式。并且样式遵循就近原则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 外链样式 -->
<link rel="stylesheet" href="" type="text/css">
<!-- 导入式样式-->
<style type="text/css">@import url();</style>
<!--内嵌样式-->
<style>
p{color: #fbc2eb}
</style>
</head>
<body>
<!--行内样式-->
<p style="color: #a6c1ee">css样式引入方式</p>
</body>
</html>
2.选择器
1.id选择器
ID选择器只会选择指定ID的元素,以#
开头后跟ID的值
2.类选择器
类选择器会选择一个类的元素(元素的类由class属性的值决定),.
后跟类名,最为常用。
3.标签选择器
标签选择器会选择所有这个标签的元素
如下是一个p标签选择器,它会渲染页面上所有的p元素
4.通用选择器
选择器优先级:id选择器>类选择器>标签选择器>通用选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
优先级:
id选择器>类选择器>标签选择器>通用选择器
*/
/*通用选择器*/
*{
font-size: 15px;color: black;
}
/*id选择器*/
#first{
font-size: 40px;
}
/*类选择器(优先级低于id选择器)*/
.title{
font-size: 15px;
color:#fbc2eb;
}
/*标签选择器(优先级低于类选择器)*/
p{color: #a6c1ee}
</style>
</head>
<body>
<div id="first" class="title">div标签</div>
<p>p标签</p>
<div class="user">
<ul>
<li>hello</li>
<li></li>
<li></li>
</ul>
</div>
<p id="second">Hello</p>
<div title="a">div</div>
<p>相邻</p>
</body>
</html>
伪类选择器
link:链接点击之前
visited:访问过后
hover:鼠标放置在上面时
派生选择器
派生选择器用于以多个条件选择元素,是数个选择器的结合,常用于通过依据元素在其位置的上下文关系来定义样式
分为后代选择器、子元素选择器、兄弟选择器。
后代选择器
在某类元素的所有后代中再进行选择
子选择器
不同于后代选择器,只选择子代
兄弟选择器
在与某类元素是并列关系的相邻元素中进行选择,注意是相邻
属性选择器
属性选择器会选择拥有指定属性的元素,还可以加等号来指定这个属于应该有的值。
分组选择器
分组选择器不是一种选择器类型,而是一种选择器使用方法。当多个对象定义了相同的样式时,就可以把它们分成一组,这样能够简化代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*子代选择器*/
.user>ul{
border: 1px solid #a6c1ee;
}
/*后代选择器*/
.user li{
background: #fbc2eb;
}
/*分组选择器*/
.user li,#second{
color:#a6c1ee;
font-size: 20px;
}
/*选择div包含title属性的*/
div[title]{
color: blue;
}
/*相邻(下一个)选择*/
div[title]+p{
color: blue;
}
/*伪类选择器*/
/*
link:链接点击之前
visited:访问过后
hover:鼠标放置在上面时
*/
</style>
</head>
<body>
<div id="first" class="title">div标签</div>
<p>p标签</p>
<div class="user">
<ul>
<li>hello</li>
<li></li>
<li></li>
</ul>
</div>
<p id="second">Hello</p>
<div title="a">div</div>
<p>相邻</p>
</body>
</html>