css导入方式
- 行内样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 style="color: darkred">标题</h1>
</body>
</html>
- 内部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--css代码-->
<style>
h1{
color: darkred;
}
</style>
</head>
<body>
<h1>标题</h1>
</body>
</html>
- 外部样式的两种写法(在同一个包下单独建立css文件)
- 链接式:Link标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>标题</h1>
</body>
</html>
h1{
color: darkred;
}
- 导入式:@import
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--css代码-->
<style>
@import url("css/style.css");
</style>
</head>
<body>
<h1>标题</h1>
</body>
</html>
h1{
color: darkred;
}
优先级:就近原则(行内样式、内部样式、外部样式)
选择器
选择器{
声明1;
声明2;
声明3;
}
作用:选择页面上的某一个或某一类元素
基本选择器:
-
标签选择器
标签选择器会选择到页面上的所有标签
-
类选择器 class
可以标签归类,等同于一个class,可以复用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .a{ color: aquamarine; } .b{ color: blueviolet; } </style> </head> <body> <h1 class="a">标题1</h1> <h1 class="a">标题2</h1> <h1 class="b">标题3</h1> <p class="a">学java</p> </body> </html>
-
id选择器
id必须保证全局唯一
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #a{ color: chocolate; } .b{ color: blueviolet; } .c{ color: darkred; } h1{ color: chartreuse; } </style> </head> <body> <h1 id="a" class="c">标题1</h1> <h1>标题2</h1> <h1 class="b">标题3</h1> <p class="c">学java</p> </body> </html>
不遵循就近原则,id选择器>class选择器>标签选择器
高级选择器
层次选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*后代选择器,选择某元素所有后代元素*/
body p{
background: darkred;
}
/*子选择器,只选择某元素后一代元素*/
body>p{
background: darkred;
}
/*相邻选择器,选择某元素向后一个同级元素*/
.a+p{
background: darkred;
}
/*通用选择器,选择某元素后所有同级元素*/
.a~p{
background: darkred;
}
</style>
</head>
<body>
<p class="a">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p class="a">p7</p>
<p>p8</p>
</body>
</html>
结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*选中ul的第一个子元素*/
ul li:first-child{
background: chocolate;
}
/*选中ul的最后一个一个子元素*/
ul li:last-child{
background: blueviolet;
}
/*选中p1*/
/*通过选中p1的父级元素来选中父级元素的子元素的第一个,顺序*/
p:nth-child(1){
background: aquamarine;
}
/*通过选中p1的父级元素来选中父级元素的子元素的第二个,类型*/
p:nth-of-type(2){
background: darkred;
}
/*悬停动作背景*/
a:hover{
background: burlywood;
}
</style>
</head>
<body>
<a href="">666</a>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
属性选择器
标签[属性]{…}
属性:class=“a” 完全等于
class*=“a” 包含
href^=http 以http开头
href&=pdf 以pdf结尾
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*选中所有666类的元素*/
body [class*="666"]{
background: aqua;
}
/*选中所有http开头的标签*/
a[href^="https"]{
background: mediumvioletred;
}
</style>
</head>
<body>
<a href="www.baidu.com" class="666 999 546">1</a>
<a href="https://www.baidu.com">2</a>
<p id="ccc">p3</p>
<p class="666 546">p4</p>
<p>p7</p>
<p class="666">p8</p>
</body>
</html>