1.内部样式
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内部样式</title>
<!-- style写在head中，写在body中也行，但是系统会自动归进head里 -->
<style>
h1
{
color: aqua;
font-size: 330px;
}
image
{
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<h1>我是NOZOMI</h1>
</body>
</html>2.外部样式
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外部样式</title>
<!-- 外部样式 rel是relation的意思 -->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>我是NOZOMI</h1>
</body>
</html>
优先级 ：
行内样式>内部样式=外部样式
3.语法规范
4.选择器
1.统配选择器
作用：可以选中所有html元素
语法：
*{
属性：属性值
}
2.元素选择器
作用：选中特定元素
语法：
标签名{
}
3.类选择器
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<!-- '.'+自已定义的class类名 -->
<style>
.test
{
color: aqua;
font-size: 330px;
}
</style>
</head>
<body>
<h1 class="test">我是NOZOMI</h1>
</body>
</html>4.id选择器
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<!-- '#'+自已定义的id -->
<style>
#test
{
color: aqua;
font-size: 330px;
}
</style>
</head>
<body>
<h1 id="test">我是NOZOMI</h1>
</body>
</html>不同点：
1、ID选择器只能在文档中使用一次 。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
2、可以使用类选择器 词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式 ，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。
实例：
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>区别</title>
<style>
.stress
{
color: aqua;
}
.bigsize
{
font-size: 330px;
}
</style>
</head>
<body>
<p class="stress bigsize">我是NOZOMI</p>
</body>
</html>5.子选择器
html
<html>
<head>
<meta charset="UTF-8">
<title>子选择器</title>
<style>
.nozomi>span
{
color: cornflowerblue;
}
</style>
</head>
<body>
<p class="nozomi">nozomi的son是<span>biyue</span></p>
</body>
</html>6.后代选择器
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style>
/* 后代选择器是选择所有的子代 */
.nozomi span
{
color: cornflowerblue;
}
</style>
</head>
<body>
<p class="nozomi">nozomi的son是<span>biyue</span>和<span>biyueyue</span></p>
</body>
</html>7.交集选择器
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>交集选择器</title>
<style>
/* 标签+类名 */
p.handsome
{
color: cornflowerblue;
}
/* 也可以 */
.cute.girl
{
color: blueviolet;
}
/* 后面的覆盖前面的，指的是这里的顺序 */
.blue
{
color: blue;
}
.red
{
color: red;
}
</style>
</head>
<body>
<p class="handsome">Nozomi</p>
<p class="cute girl">biyue</p>
<p class="red blue">lovely couple</p>
</body>
</html>8.并集选择器
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>并集选择器</title>
<style>
.handsome,
.cute{
color: burlywood;
font-size: large;
}
</style>
</head>
<body>
<p class="handsome">Nozomi</p>
<p class="cute">biyue</p>
</body>
</html>9.兄弟选择器
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>兄弟选择器</title>
<style>
/* 与div紧紧相邻的p元素，相隔一个不行，在上面也不行 */
div+p{
color: aqua;
}
/* 用法：我想要除主页外的li元素红色 */
li+li{
color: red;
}
</style>
</head>
<body>
<div>Nozomi</div>
<p>biyue</p>
<ul>
<!-- 因为主页的li元素，没有li跟它是兄弟，菜单1有主页跟它是兄弟，2有1跟它是兄弟 -->
<li>主页</li>
<li>菜单1</li>
<li>菜单2</li>
</ul>
</body>
</html>10.属性选择器
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
/* 第一种 所有带有title属性的元素*/
[title]{
color: red;
}
/* 第二种 所有title='0721'的元素 */
[title='0721']{
color: antiquewhite;
}
/* 第三种 所有title值以a开头的元素 */
[title^='a']{
color: black;
}
/* 第四种 所有title值以c结尾的元素 */
[title$='c']{
color: blueviolet;
}
/* 第五种 所有title值内有b的元素 */
[title*='b']{
color: blue;
}
</style>
</head>
<body>
<div title="0721">NOZOMI</div>
<div title="ace">NOZOMI</div>
<div title="wc">NOZOMI</div>
<div title="rbr">NOZOMI</div>
</body>
</html>11.伪类选择器
1.动态伪类
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态伪类</title>
<style>
/* 注意：此顺序是固定的，顺序反了的话会因为逻辑被覆盖 */
/* hover和active不仅只有超链接可用，其它标签也可，比如span */
/* link-未被点击 */
a:link{
color: bisque;
}
/* visited-已被点击 */
a:visited{
color: black;
}
/* hover-鼠标悬浮在上面，出现的颜色 */
a:hover{
color: aqua;
}
/* active-鼠标点击时，出现的颜色 */
a:active{
color:red;
}
</style>
</head>
<body>
<a href="https://www.baidu.com" >去百度</a>
</body>
</html>2.结构伪类
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>结构伪类-1</title>
<style>
/* div的p类型子元素，同时是第一个儿子，如果div的第一个儿子是span，那么都无法选中 */
/*如果想要p类型里的第一个---first-of-child */
div>p:first-child{
color: red;
}
</style>
</head>
<body>
<div>
<span>A</span> <!-- 不会变红 -->
<p>B</p> <!-- 不会变红 -->
<p>C</p>
<p>D</p>
</div>
</body>
</html>
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>结构伪类-1</title>
<style>
/* div的p类型后代元素，同时是第一个儿子，这里的p的父亲是谁无所谓，但必须是第一个儿子 */
div p:first-child{
color: red;
}
/* 同时，这样也行 */
p:first-child{
color: antiquewhite;
}
</style>
</head>
<body>
<!-- A和B都会变红 -->
<div>
<p>A</p>
<div>
<p>B</p>
</div>
<p>C</p>
<p>D</p>
</div>
</body>
</html>
3.否定伪类
4.UI伪类
4.目标伪类
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>目标伪类</title>
<style>
div{
width: 300px;
height: 300px;
background-color: aqua;
}
/* 作用是将跳转到的div变红 */
div:target{
color: red;
}
</style>
</head>
<body>
<a href="#one">去看第1个</a>
<a href="#two">去看第2个</a>
<a href="#three">去看第3个</a>
<a href="four">去看第4个</a>
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
<div id="four">4</div>
</body>
</html>5.语言伪类
12.伪元素选择器
5.选择器的优先级
